Adjusting IOUModal and adding createAndPayIOU #4329
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -111,6 +111,7 @@ class IOUModal extends Component { | |
| this.addParticipants = this.addParticipants.bind(this); | ||
| this.createTransaction = this.createTransaction.bind(this); | ||
| this.updateComment = this.updateComment.bind(this); | ||
| this.sendMoney = this.sendMoney.bind(this); | ||
| const participants = lodashGet(props, 'report.participants', []); | ||
| const participantsWithDetails = _.map(OptionsListUtils.getPersonalDetailsForLogins(participants, props.personalDetails), personalDetails => ({ | ||
| login: personalDetails.login, | ||
|
|
@@ -121,8 +122,6 @@ class IOUModal extends Component { | |
| payPalMeAddress: lodashGet(personalDetails, 'payPalMeAddress', ''), | ||
| phoneNumber: lodashGet(personalDetails, 'phoneNumber', ''), | ||
| })); | ||
|
|
||
| this.state = { | ||
| previousStepIndex: 0, | ||
|
|
@@ -193,14 +192,15 @@ class IOUModal extends Component { | |
| */ | ||
| getTitleForStep() { | ||
| const currentStepIndex = this.state.currentStepIndex; | ||
| const isSendingMoney = this.props.iouType === CONST.IOU.IOU_TYPE.SEND; | ||
| if (currentStepIndex === 1 || currentStepIndex === 2) { | ||
| const formattedAmount = this.props.numberFormat( | ||
| this.state.amount, { | ||
| style: 'currency', | ||
| currency: this.props.iou.selectedCurrencyCode, | ||
| }, | ||
| ); | ||
| if (isSendingMoney) { | ||
| return this.props.translate('iou.send', { | ||
| amount: formattedAmount, | ||
| }); | ||
|
|
@@ -212,7 +212,7 @@ class IOUModal extends Component { | |
| ); | ||
| } | ||
| if (currentStepIndex === 0) { | ||
| if (isSendingMoney) { | ||
| return this.props.translate('iou.sendMoney'); | ||
| } | ||
| return this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitBill' : 'iou.requestMoney'); | ||
|
|
@@ -221,6 +221,22 @@ class IOUModal extends Component { | |
| return this.props.translate(this.steps[currentStepIndex]) || ''; | ||
| } | ||
|
|
||
| /** | ||
| * Update comment whenever user enters any new text | ||
| * | ||
| * @param {String} comment | ||
| */ | ||
| updateComment(comment) { | ||
| this.setState({ | ||
| comment, | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Update participants whenever user selects the payment recipient | ||
| * | ||
| * @param {Array} participants | ||
| */ | ||
| addParticipants(participants) { | ||
| this.setState({ | ||
| participants, | ||
|
|
@@ -247,35 +263,61 @@ class IOUModal extends Component { | |
| if (this.state.currentStepIndex >= this.steps.length - 1) { | ||
| return; | ||
| } | ||
|
|
||
| this.setState(prevState => ({ | ||
| previousStepIndex: prevState.currentStepIndex, | ||
| currentStepIndex: prevState.currentStepIndex + 1, | ||
| })); | ||
| } | ||
|
|
||
| /** | ||
| * Checks if user has a GOLD wallet then creates a paid IOU report on the fly | ||
| * | ||
| * @param {String} paymentMethodType | ||
| */ | ||
| sendMoney(paymentMethodType) { | ||
| const hasGoldWallet = this.props.userWallet.tierName && this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD; | ||
|
Contributor
There was a problem hiding this comment. The section |
||
|
|
||
| // If the user is trying to send money, then they need to upgrade to a GOLD wallet | ||
| if (!hasGoldWallet) { | ||
| Navigation.navigate(ROUTES.IOU_ENABLE_PAYMENTS); | ||
| return; | ||
| } | ||
|
|
||
| const amount = Math.round(this.state.amount * 100); | ||
| const currency = this.props.iou.selectedCurrencyCode; | ||
| const comment = this.state.comment; | ||
|
|
||
| const newIOUReportDetails = JSON.stringify({ | ||
| amount, | ||
| currency, | ||
| requestorEmail: this.state.participants[0].login, | ||
| comment, | ||
| idempotencyKey: Str.guid(), | ||
| }); | ||
|
|
||
| IOU.payIOUReport({ | ||
| chatReportID: lodashGet(this.props, 'route.params.reportID', ''), | ||
| reportID: 0, | ||
| paymentMethodType, | ||
| amount, | ||
| currency, | ||
| requestorPayPalMeAddress: this.state.participants[0].payPalMeAddress, | ||
| requestorPhoneNumber: this.state.participants[0].phoneNumber, | ||
| comment, | ||
| newIOUReportDetails, | ||
| shouldRedirectToChatReport: true, | ||
| }); | ||
|
Comment on lines
+278
to
310
Contributor
There was a problem hiding this comment. Basically moved the minimal
Contributor
There was a problem hiding this comment. Great summary of the thought process here. Thanks! Happy to leave things as they are for now, but just wanted to give this one last exploration as problems like these will pop up in the future and how we handle them sets the precedent for others to follow.
It might be reasonable to extract this into an "action" regardless of code re-use benefits. It will help separate the "action" logic from the view, keep things organized, and we get the benefit of replacing
Could we still follow this philosophy if we create a new action? Why does this rule exist?
What if we returned the promise here instead of wrapping it with a promise? Line 281 in ca34f19 Calling function sendMoneyAndNavigateToReport(params) {
payIOUReport(params)
.finally(() => {
Navigation.navigate(ROUTES.REPORT);
});
}
An advantage of navigating from outside this method (instead of within it) is that we pass the responsibility to the caller of the action and reduce the overall responsibility of the action itself. When will
Contributor
There was a problem hiding this comment.
I agree with this.
Yes we could, and I believe this rule exists so we don't introduce any side effects within views (views should be responsible for displaying data is my understanding).
I guess I mostly struggled with how to make this work nicely with
Contributor
There was a problem hiding this comment. Sorry bout that, didn't notice
export default function asyncOpenURL(promise, url) {
if (!url) {
return promise;
}
return promise.then((params) => {
Linking.openURL(typeof url === 'string' ? url : url(params));
});
}
payIOUPromise.then((response) => {...});
asyncOpenURL(payIOUPromise, url);
return payIOUPromise; |
||
| } | ||
|
|
||
| /** | ||
| * Create the IOU transaction | ||
| * | ||
| * @param {Array} [splits] | ||
| */ | ||
| createTransaction(splits) { | ||
| const reportID = lodashGet(this.props, 'route.params.reportID', ''); | ||
|
|
||
| // Only splits from a group DM has a reportID | ||
| // Check if reportID is a number | ||
| if (splits && CONST.REGEX.NUMBER.test(reportID)) { | ||
|
|
@@ -290,11 +332,12 @@ class IOUModal extends Component { | |
| }); | ||
| return; | ||
| } | ||
|
|
||
| if (splits) { | ||
| IOU.createIOUSplit({ | ||
| comment: this.state.comment, | ||
|
|
||
| // Send in cents to API. | ||
| amount: Math.round(this.state.amount * 100), | ||
| currency: this.props.iou.selectedCurrencyCode, | ||
| splits, | ||
|
|
@@ -305,7 +348,7 @@ class IOUModal extends Component { | |
| IOU.createIOUTransaction({ | ||
| comment: this.state.comment, | ||
|
|
||
| // Send in cents to API. | ||
| amount: Math.round(this.state.amount * 100), | ||
| currency: this.props.iou.selectedCurrencyCode, | ||
| debtorEmail: OptionsListUtils.addSMSDomainIfPhoneNumber(this.state.participants[0].login), | ||
|
|
@@ -398,13 +441,13 @@ class IOUModal extends Component { | |
| > | ||
| <IOUConfirmPage | ||
| onConfirm={this.createTransaction} | ||
| onSendMoney={this.sendMoney} | ||
| hasMultipleParticipants={this.props.hasMultipleParticipants} | ||
| participants={this.state.participants} | ||
| iouAmount={this.state.amount} | ||
| comment={this.state.comment} | ||
| onUpdateComment={this.updateComment} | ||
| iouType={this.props.iouType} | ||
| isGroupSplit={this.steps.length === 2} | ||
| /> | ||
| </AnimatedStep> | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.