From 3677e33a200c36c7c1b6208a18a094c358db6d57 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Sat, 30 Apr 2022 10:36:04 +0545 Subject: [PATCH 1/7] Fix IOU Options bug Show Request and Send Money options when there are two participants, Splitbill option when there are more than two participants and no option if there is only one participant --- src/pages/home/report/ReportActionCompose.js | 57 +++++++++++--------- src/pages/iou/IOUModal.js | 4 +- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 6b518b356c7b..a3eb77462e5e 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -389,7 +389,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); @@ -450,31 +451,36 @@ class ReportActionCompose extends React.Component { 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, - ), - ); - }, + && 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) && !hasMultipleParticipants ? [ + ...(!hasExcludedIOUEmails && Permissions.canUseIOUSend(this.props.betas) && showSendRequestMoney ? [ { icon: Expensicons.Send, text: this.props.translate('iou.sendMoney'), @@ -636,5 +642,8 @@ export default compose( blockedFromConcierge: { key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE, }, + myPersonalDetails: { + key: ONYXKEYS.MY_PERSONAL_DETAILS, + }, }), )(ReportActionCompose); diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index a75b7f990cfe..0b549274b2c8 100755 --- a/src/pages/iou/IOUModal.js +++ b/src/pages/iou/IOUModal.js @@ -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)} iouAmount={this.state.amount} comment={this.state.comment} onUpdateComment={this.updateComment} From 2a601ad66b4941e0785d8be17557c1c8bd2862e9 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Mon, 2 May 2022 22:52:06 +0545 Subject: [PATCH 2/7] Move Report Action Compose Logic --- src/pages/home/report/ReportActionCompose.js | 127 +++++++++++-------- 1 file changed, 71 insertions(+), 56 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a3eb77462e5e..b47a84d110dd 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -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, @@ -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} + */ + getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal) { + return [ + ...(!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, + ), + ); + }, + }, + ] : []), + { + icon: Expensicons.Paperclip, + text: this.props.translate('reportActionCompose.addAttachment'), + onSelected: () => { + openPicker({ + onPicked: (file) => { + displayFileInModal({file}); + }, + }); + }, + }, + ]; + } + /** * Callback for the emoji picker to add whatever emoji is chosen into the main input * @@ -449,62 +519,7 @@ class ReportActionCompose extends React.Component { anchorPosition={styles.createMenuPositionReportActionCompose} animationIn="fadeInUp" animationOut="fadeOutDown" - menuItems={[ - ...(!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, - ), - ); - }, - }, - ] : []), - { - icon: Expensicons.Paperclip, - text: this.props.translate('reportActionCompose.addAttachment'), - onSelected: () => { - openPicker({ - onPicked: (file) => { - displayFileInModal({file}); - }, - }); - }, - }, - ]} + menuItems={this.getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal)} /> )} From 03a88f454586adb5074cd29e62d58326763a89f4 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Tue, 3 May 2022 00:30:33 +0545 Subject: [PATCH 3/7] Move variable calculations to specific function --- src/pages/home/report/ReportActionCompose.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index b47a84d110dd..8b03b2b5eedc 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -234,14 +234,15 @@ class ReportActionCompose extends React.Component { /** * Returns the list of report compose actions * - * @param {Boolean} showSplitBill - * @param {Boolean} showSendRequestMoney - * @param {Boolean} hasExcludedIOUEmails + * @param {Array} reportParticipants * @param {Function} openPicker * @param {Function} displayFileInModal * @returns {Array} */ - getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal) { + getReportComposeActions(reportParticipants, openPicker, displayFileInModal) { + 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; return [ ...(!hasExcludedIOUEmails && Permissions.canUseIOU(this.props.betas) @@ -459,9 +460,6 @@ class ReportActionCompose extends React.Component { } const reportParticipants = lodashGet(this.props.report, 'participants', []); - 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); @@ -519,7 +517,7 @@ class ReportActionCompose extends React.Component { anchorPosition={styles.createMenuPositionReportActionCompose} animationIn="fadeInUp" animationOut="fadeOutDown" - menuItems={this.getReportComposeActions(showSplitBill, showSendRequestMoney, hasExcludedIOUEmails, openPicker, displayFileInModal)} + menuItems={this.getReportComposeActions(reportParticipants, openPicker, displayFileInModal)} /> )} From 4819a4b7f6fee772b3d2f0611e2d5b3967ae20bc Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Tue, 3 May 2022 08:09:45 +0545 Subject: [PATCH 4/7] Use if/else statements instead of ternary operators --- src/pages/home/report/ReportActionCompose.js | 109 ++++++++++--------- 1 file changed, 55 insertions(+), 54 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 8b03b2b5eedc..20c5537785dc 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -125,7 +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.getIOUOptions = this.getIOUOptions.bind(this); this.state = { isFocused: this.shouldFocusInputOnScreenFocus, @@ -232,73 +232,62 @@ class ReportActionCompose extends React.Component { } /** - * Returns the list of report compose actions + * Returns the list of IOU Options * * @param {Array} reportParticipants - * @param {Function} openPicker - * @param {Function} displayFileInModal * @returns {Array} */ - getReportComposeActions(reportParticipants, openPicker, displayFileInModal) { - const showSplitBill = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email).length > 1; - const showSendRequestMoney = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email).length === 1; + getIOUOptions(reportParticipants) { + const iouOptions = []; + const participants = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email); const hasExcludedIOUEmails = lodashIntersection(reportParticipants, CONST.EXPENSIFY_EMAILS).length > 0; - return [ - ...(!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 ? [ + const hasMultipleParticipants = participants.length > 1; + + if (hasExcludedIOUEmails || participants.length === 0 || !Permissions.canUseIOU(this.props.betas)) { + return iouOptions; + } + + if (hasMultipleParticipants) { + iouOptions.push( { - icon: Expensicons.Send, - text: this.props.translate('iou.sendMoney'), + icon: Expensicons.Receipt, + text: this.props.translate('iou.splitBill'), onSelected: () => { Navigation.navigate( - ROUTES.getIOUSendRoute( + ROUTES.getIouSplitRoute( this.props.reportID, ), ); }, }, - ] : []), - { - icon: Expensicons.Paperclip, - text: this.props.translate('reportActionCompose.addAttachment'), + ); + } else { + iouOptions.push({ + icon: Expensicons.MoneyCircle, + text: this.props.translate('iou.requestMoney'), onSelected: () => { - openPicker({ - onPicked: (file) => { - displayFileInModal({file}); - }, - }); + Navigation.navigate( + ROUTES.getIouRequestRoute( + this.props.reportID, + ), + ); }, - }, - ]; + }); + if (Permissions.canUseIOUSend(this.props.betas)) { + iouOptions.push({ + icon: Expensicons.Send, + text: this.props.translate('iou.sendMoney'), + onSelected: () => { + Navigation.navigate( + ROUTES.getIOUSendRoute( + this.props.reportID, + ), + ); + }, + }); + } + } + return iouOptions; } /** @@ -517,7 +506,19 @@ class ReportActionCompose extends React.Component { anchorPosition={styles.createMenuPositionReportActionCompose} animationIn="fadeInUp" animationOut="fadeOutDown" - menuItems={this.getReportComposeActions(reportParticipants, openPicker, displayFileInModal)} + menuItems={[...this.getIOUOptions(reportParticipants), + { + icon: Expensicons.Paperclip, + text: this.props.translate('reportActionCompose.addAttachment'), + onSelected: () => { + openPicker({ + onPicked: (file) => { + displayFileInModal({file}); + }, + }); + }, + }, + ]} /> )} From 657693b7e9199fa0dd7a4ebea8a427cfa463601b Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Tue, 3 May 2022 08:49:08 +0545 Subject: [PATCH 5/7] Solve the issue of the logged in user occuring twice in splitbills --- src/pages/iou/IOUModal.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index 0b549274b2c8..c0d8cf70449f 100755 --- a/src/pages/iou/IOUModal.js +++ b/src/pages/iou/IOUModal.js @@ -429,9 +429,7 @@ class IOUModal extends Component { onConfirm={this.createTransaction} onSendMoney={this.sendMoney} hasMultipleParticipants={this.props.hasMultipleParticipants} - participants={this.props.hasMultipleParticipants - ? this.state.participants - : _.filter(this.state.participants, email => this.props.myPersonalDetails.login !== email.login)} + participants={_.filter(this.state.participants, email => this.props.myPersonalDetails.login !== email.login)} iouAmount={this.state.amount} comment={this.state.comment} onUpdateComment={this.updateComment} From 9e3952ac2d42292f713b22249a9acf1001b24d60 Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 4 May 2022 09:18:17 +0545 Subject: [PATCH 6/7] Refactor getIOUOptions code --- src/pages/home/report/ReportActionCompose.js | 56 +++++++------------- 1 file changed, 18 insertions(+), 38 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 20c5537785dc..df3a79f7d60b 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -238,54 +238,34 @@ class ReportActionCompose extends React.Component { * @returns {Array} */ getIOUOptions(reportParticipants) { - const iouOptions = []; const participants = _.filter(reportParticipants, email => this.props.myPersonalDetails.login !== email); const hasExcludedIOUEmails = lodashIntersection(reportParticipants, CONST.EXPENSIFY_EMAILS).length > 0; const hasMultipleParticipants = participants.length > 1; + const iouOptions = []; if (hasExcludedIOUEmails || participants.length === 0 || !Permissions.canUseIOU(this.props.betas)) { - return iouOptions; + return []; } if (hasMultipleParticipants) { - iouOptions.push( - { - icon: Expensicons.Receipt, - text: this.props.translate('iou.splitBill'), - onSelected: () => { - Navigation.navigate( - ROUTES.getIouSplitRoute( - this.props.reportID, - ), - ); - }, - }, - ); - } else { + return [{ + icon: Expensicons.Receipt, + text: this.props.translate('iou.splitBill'), + onSelected: () => Navigation.navigate(ROUTES.getIouSplitRoute(this.props.reportID)), + }]; + } + + iouOptions.push({ + icon: Expensicons.MoneyCircle, + text: this.props.translate('iou.requestMoney'), + onSelected: () => Navigation.navigate(ROUTES.getIouRequestRoute(this.props.reportID)), + }); + if (Permissions.canUseIOUSend(this.props.betas)) { iouOptions.push({ - icon: Expensicons.MoneyCircle, - text: this.props.translate('iou.requestMoney'), - onSelected: () => { - Navigation.navigate( - ROUTES.getIouRequestRoute( - this.props.reportID, - ), - ); - }, + icon: Expensicons.Send, + text: this.props.translate('iou.sendMoney'), + onSelected: () => Navigation.navigate(ROUTES.getIOUSendRoute(this.props.reportID)), }); - if (Permissions.canUseIOUSend(this.props.betas)) { - iouOptions.push({ - icon: Expensicons.Send, - text: this.props.translate('iou.sendMoney'), - onSelected: () => { - Navigation.navigate( - ROUTES.getIOUSendRoute( - this.props.reportID, - ), - ); - }, - }); - } } return iouOptions; } From 980ba2e4194cd5e1e1d6785a91651f2cd7229e1f Mon Sep 17 00:00:00 2001 From: sobitneupane <073bct543.sobit@pcampus.edu.np> Date: Wed, 4 May 2022 22:35:49 +0545 Subject: [PATCH 7/7] Add propType for myPersonalDetails --- src/pages/home/report/ReportActionCompose.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index b28eb9f1537b..a4c0e0656f0c 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -95,6 +95,13 @@ const propTypes = { // The date that the user will be unblocked expiresAt: PropTypes.string, }), + + /** The personal details of the person who is logged in */ + myPersonalDetails: PropTypes.shape({ + /** Primary login of the user */ + login: PropTypes.string, + }), + ...windowDimensionsPropTypes, ...withLocalizePropTypes, }; @@ -106,6 +113,7 @@ const defaultProps = { reportActions: {}, blockedFromConcierge: {}, personalDetails: {}, + myPersonalDetails: {}, }; class ReportActionCompose extends React.Component {