Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix IOU Options bug #8839

Merged
merged 8 commits into from
May 5, 2022
Merged

Fix IOU Options bug #8839

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3677e33
Fix IOU Options bug
sobitneupane Apr 30, 2022
2a601ad
Move Report Action Compose Logic
sobitneupane May 2, 2022
03a88f4
Move variable calculations to specific function
sobitneupane May 2, 2022
4819a4b
Use if/else statements instead of ternary operators
sobitneupane May 3, 2022
657693b
Solve the issue of the logged in user occuring twice in splitbills
sobitneupane May 3, 2022
9e3952a
Refactor getIOUOptions code
sobitneupane May 4, 2022
189ec6b
Merge branch 'main' into sn_bug-iou-options
sobitneupane May 4, 2022
980ba2e
Add propType for myPersonalDetails
sobitneupane May 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 76 additions & 52 deletions src/pages/home/report/ReportActionCompose.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ class ReportActionCompose extends React.Component {
this.onSelectionChange = this.onSelectionChange.bind(this);
this.setTextInputRef = this.setTextInputRef.bind(this);
this.getInputPlaceholder = this.getInputPlaceholder.bind(this);
this.getReportComposeActions = this.getReportComposeActions.bind(this);

this.state = {
isFocused: this.shouldFocusInputOnScreenFocus,
Expand Down Expand Up @@ -230,6 +231,75 @@ class ReportActionCompose extends React.Component {
return this.props.translate('reportActionCompose.writeSomething');
}

/**
* Returns the list of report compose actions
*
* @param {Boolean} showSplitBill
* @param {Boolean} showSendRequestMoney
* @param {Boolean} hasExcludedIOUEmails
* @param {Function} openPicker
* @param {Function} displayFileInModal
* @returns {Array<object>}
*/
getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal) {
return [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to compute and pass everything to this function it does not make any sense?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved.

...(!hasExcludedIOUEmails
&& Permissions.canUseIOU(this.props.betas)
&& showSplitBill ? [
{
icon: Expensicons.Receipt,
text: this.props.translate('iou.splitBill'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIouSplitRoute(
this.props.reportID,
),
);
},
},
] : []),
...(!hasExcludedIOUEmails
&& Permissions.canUseIOU(this.props.betas)
&& showSendRequestMoney ? [
{
icon: Expensicons.MoneyCircle,
text: this.props.translate('iou.requestMoney'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIouRequestRoute(
this.props.reportID,
),
);
},
},
] : []),
...(!hasExcludedIOUEmails && Permissions.canUseIOUSend(this.props.betas) && showSendRequestMoney ? [
{
icon: Expensicons.Send,
text: this.props.translate('iou.sendMoney'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIOUSendRoute(
this.props.reportID,
),
);
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given it's only one param per method and line is not too long, I think this is more readable

Suggested change
onSelected: () => {
Navigation.navigate(
ROUTES.getIOUSendRoute(
this.props.reportID,
),
);
},
onSelected: () => Navigation.navigate(ROUTES.getIOUSendRoute(this.props.reportID)),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

made the requested change

},
] : []),
{
icon: Expensicons.Paperclip,
text: this.props.translate('reportActionCompose.addAttachment'),
onSelected: () => {
openPicker({
onPicked: (file) => {
displayFileInModal({file});
},
});
},
},
];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code is not DRY, we have redundant checks here. Can you refactor this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactoring this might result into nested ternary operators. I was discouraged to use nested ternary operators in previous PRs. Any suggestion?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use simple if/else no need for ternary here.

Copy link
Contributor Author

@sobitneupane sobitneupane May 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will look something like this. Any suggestion?

        const actions = [];
        if (!hasExcludedIOUEmails) {
            if (Permissions.canUseIOU(this.props.betas)) {
                if (showSplitBill) {
                    actions.push(
                        {
                            icon: Expensicons.Receipt,
                            text: this.props.translate('iou.splitBill'),
                            onSelected: () => {
                                Navigation.navigate(
                                    ROUTES.getIouSplitRoute(
                                        this.props.reportID,
                                    ),
                                );
                            },
                        },
                    );
                }
                if (showSendRequestMoney) {
                    actions.push({
                        icon: Expensicons.MoneyCircle,
                        text: this.props.translate('iou.requestMoney'),
                        onSelected: () => {
                            Navigation.navigate(
                                ROUTES.getIouRequestRoute(
                                    this.props.reportID,
                                ),
                            );
                        },
                    });
                }
            }
            if (Permissions.canUseIOUSend(this.props.betas) && showSendRequestMoney) {
                actions.push({
                    icon: Expensicons.Send,
                    text: this.props.translate('iou.sendMoney'),
                    onSelected: () => {
                        Navigation.navigate(
                            ROUTES.getIOUSendRoute(
                                this.props.reportID,
                            ),
                        );
                    },
                });
            }
        }

        actions.push({
            icon: Expensicons.Paperclip,
            text: this.props.translate('reportActionCompose.addAttachment'),
            onSelected: () => {
                openPicker({
                    onPicked: (file) => {
                        displayFileInModal({file});
                    },
                });
            },
        });
        return actions;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's just move IOU options computation alone to a new method, leave Add Attachment untouched thanks!

 getIOUOptions(reportParticipants) {
        const iouOptions = [];
        const participants = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email).length > 1;
        const hasExcludedIOUEmails = lodashIntersection(reportParticipants, CONST.EXPENSIFY_EMAILS).length > 0;
        const hasMultipleParticipants = participants.length > 1;

        if (hasExcludedIOUEmails || participants.length === 0 || Permissions.canUseIOU(this.props.betas)) {
            return iouOptions;
        }

        if (hasMultipleParticipants) {
            // append split
        }
        else {
            if (Permissions.canUseIOUSend(this.props.betas)) {
                // append send
            }
            // append request
        }

        return iouOptions;
    }

cc: @iwiznia

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

}

/**
* Callback for the emoji picker to add whatever emoji is chosen into the main input
*
Expand Down Expand Up @@ -389,7 +459,8 @@ class ReportActionCompose extends React.Component {
}

const reportParticipants = lodashGet(this.props.report, 'participants', []);
const hasMultipleParticipants = reportParticipants.length > 1;
const showSplitBill = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email).length > 1;
const showSendRequestMoney = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email).length === 1;
const hasExcludedIOUEmails = lodashIntersection(reportParticipants, CONST.EXPENSIFY_EMAILS).length > 0;
const reportRecipient = this.props.personalDetails[reportParticipants[0]];
const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report);
Expand Down Expand Up @@ -448,57 +519,7 @@ class ReportActionCompose extends React.Component {
anchorPosition={styles.createMenuPositionReportActionCompose}
animationIn="fadeInUp"
animationOut="fadeOutDown"
menuItems={[
...(!hasExcludedIOUEmails
&& Permissions.canUseIOU(this.props.betas) ? [
hasMultipleParticipants
? {
icon: Expensicons.Receipt,
text: this.props.translate('iou.splitBill'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIouSplitRoute(
this.props.reportID,
),
);
},
} : {
icon: Expensicons.MoneyCircle,
text: this.props.translate('iou.requestMoney'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIouRequestRoute(
this.props.reportID,
),
);
},
},
] : []),
...(!hasExcludedIOUEmails && Permissions.canUseIOUSend(this.props.betas) && !hasMultipleParticipants ? [
{
icon: Expensicons.Send,
text: this.props.translate('iou.sendMoney'),
onSelected: () => {
Navigation.navigate(
ROUTES.getIOUSendRoute(
this.props.reportID,
),
);
},
},
] : []),
{
icon: Expensicons.Paperclip,
text: this.props.translate('reportActionCompose.addAttachment'),
onSelected: () => {
openPicker({
onPicked: (file) => {
displayFileInModal({file});
},
});
},
},
]}
menuItems={this.getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal)}
/>
</>
)}
Expand Down Expand Up @@ -636,5 +657,8 @@ export default compose(
blockedFromConcierge: {
key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
},
myPersonalDetails: {
key: ONYXKEYS.MY_PERSONAL_DETAILS,
},
Comment on lines +645 to +647
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prop type is defined for myPersonalDetails can you add that, thanks!

}),
)(ReportActionCompose);
4 changes: 3 additions & 1 deletion src/pages/iou/IOUModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,9 @@ class IOUModal extends Component {
onConfirm={this.createTransaction}
onSendMoney={this.sendMoney}
hasMultipleParticipants={this.props.hasMultipleParticipants}
participants={this.state.participants}
participants={this.props.hasMultipleParticipants
? this.state.participants
: _.filter(this.state.participants, email => this.props.myPersonalDetails.login !== email.login)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be done here, I think it could be moved along the lines here

App/src/pages/iou/IOUModal.js

Lines 110 to 111 in 4c64bec

const participants = lodashGet(props, 'report.participants', []);
const participantsWithDetails = _.map(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), personalDetails => ({

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Participants are updated during IOUParicipantsPage step. So, it cannot be moved here. We need to make use of updated participants list.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IOUParicipantsPage will not be used for Room or group flow. So no issues there.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check and let me know!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's a good idea. It adds more complication.

iouAmount={this.state.amount}
comment={this.state.comment}
onUpdateComment={this.updateComment}
Expand Down