Merge pull request #10578 from Expensify/francois-redBrickRoadWalletT…

…erms Add offline behavior and error handling for `AcceptWalletTerms`
Expensify · Sep 9, 2022 · 3cb5dbf · 3cb5dbf
2 parents 679be43 + 5c81a0f
commit 3cb5dbf
Show file tree

Hide file tree

Showing 19 changed files with 188 additions and 63 deletions.
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
@@ -12,6 +12,7 @@ import bankAccountPropTypes from './bankAccountPropTypes';
 import cardPropTypes from './cardPropTypes';
 import userWalletPropTypes from '../pages/EnablePayments/userWalletPropTypes';
 import {fullPolicyPropTypes} from '../pages/workspace/withFullPolicy';
+import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
 
@@ -39,6 +40,9 @@ const propTypes = {
 
     /** The user's wallet (coming from Onyx) */
     userWallet: userWalletPropTypes,
+
+    /** Information about the user accepting the terms for payments */
+    walletTerms: walletTermsPropTypes,
 };
 
 const defaultProps = {
@@ -49,6 +53,7 @@ const defaultProps = {
     bankAccountList: {},
     cardList: {},
     userWallet: {},
+    walletTerms: {},
 };
 
 const AvatarWithIndicator = (props) => {
@@ -73,6 +78,9 @@ const AvatarWithIndicator = (props) => {
         () => _.some(cleanPolicies, PolicyUtils.hasPolicyError),
         () => _.some(cleanPolicies, PolicyUtils.hasCustomUnitsError),
         () => _.some(cleanPolicyMembers, PolicyUtils.hasPolicyMemberError),
+
+        // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
+        () => !_.isEmpty(props.walletTerms.errors) && !props.walletTerms.chatReportID,
     ];
     const shouldShowIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
 
@@ -112,4 +120,7 @@ export default withOnyx({
     userWallet: {
         key: ONYXKEYS.USER_WALLET,
     },
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
 })(AvatarWithIndicator);
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
@@ -11,6 +11,7 @@ import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import ONYXKEYS from '../../ONYXKEYS';
 import Log from '../../libs/Log';
 import {propTypes, defaultProps} from './kycWallPropTypes';
+import * as Wallet from '../../libs/actions/Wallet';
 
 // This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
 // before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
@@ -35,6 +36,7 @@ class KYCWall extends React.Component {
         if (this.props.shouldListenForResize) {
             this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition);
         }
+        Wallet.setKYCWallSourceChatReportID(this.props.chatReportID);
     }
 
     componentWillUnmount() {

diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js
@@ -21,14 +21,18 @@ const propTypes = {
     isDisabled: PropTypes.bool,
 
     /** The user's wallet */
-    userWallet: PropTypes.objectOf(userWalletPropTypes),
+    userWallet: userWalletPropTypes,
+
+    /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
+    chatReportID: PropTypes.number,
 };
 
 const defaultProps = {
     userWallet: {},
     popoverPlacement: 'top',
     shouldListenForResize: false,
     isDisabled: false,
+    chatReportID: 0,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
@@ -21,6 +21,9 @@ import Icon from '../Icon';
 import CONST from '../../CONST';
 import * as Expensicons from '../Icon/Expensicons';
 import Text from '../Text';
+import * as PaymentMethods from '../../libs/actions/PaymentMethods';
+import OfflineWithFeedback from '../OfflineWithFeedback';
+import walletTermsPropTypes from '../../pages/EnablePayments/walletTermsPropTypes';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */
@@ -75,6 +78,9 @@ const propTypes = {
         email: PropTypes.string,
     }).isRequired,
 
+    /** Information about the user accepting the terms for payments */
+    walletTerms: walletTermsPropTypes,
+
     ...withLocalizePropTypes,
 };
 
@@ -84,6 +90,7 @@ const defaultProps = {
     onPayButtonPressed: null,
     onPreviewPressed: () => {},
     containerStyles: [],
+    walletTerms: {},
 };
 
 const IOUPreview = (props) => {
@@ -124,10 +131,18 @@ const IOUPreview = (props) => {
                 {reportIsLoading
                     ? <ActivityIndicator style={styles.iouPreviewBoxLoading} color={themeColors.text} />
                     : (
-                        <View>
-                            <View style={styles.flexRow}>
-                                <View style={styles.flex1}>
-                                    <View style={styles.flexRow}>
+                        <OfflineWithFeedback
+                            pendingAction={CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}
+                            errors={props.walletTerms.errors}
+                            onClose={() => {
+                                PaymentMethods.clearWalletTermsError();
+                                Report.clearIOUError(props.chatReportID);
+                            }}
+                            errorRowStyles={[styles.mbn1]}
+                        >
+                            <View>
+                                <View style={styles.flexRow}>
+                                    <View style={[styles.flex1, styles.flexRow]}>
                                         <Text style={styles.h1}>
                                             {cachedTotal}
                                         </Text>
@@ -137,48 +152,48 @@ const IOUPreview = (props) => {
                                             </View>
                                         )}
                                     </View>
+                                    <View style={styles.iouPreviewBoxAvatar}>
+                                        <MultipleAvatars
+                                            icons={[managerAvatar, ownerAvatar]}
+                                            secondAvatarStyle={[styles.secondAvatarInline]}
+                                            avatarTooltips={avatarTooltip}
+                                        />
+                                    </View>
                                 </View>
-                                <View style={styles.iouPreviewBoxAvatar}>
-                                    <MultipleAvatars
-                                        icons={[managerAvatar, ownerAvatar]}
-                                        secondAvatarStyle={[styles.secondAvatarInline]}
-                                        avatarTooltips={avatarTooltip}
-                                    />
-                                </View>
-                            </View>
-                            {isCurrentUserManager
-                                ? (
-                                    <Text>
-                                        {props.iouReport.hasOutstandingIOU
-                                            ? props.translate('iou.youowe', {owner: ownerName})
-                                            : props.translate('iou.youpaid', {owner: ownerName})}
-                                    </Text>
-                                )
-                                : (
-                                    <Text>
-                                        {props.iouReport.hasOutstandingIOU
-                                            ? props.translate('iou.owesyou', {manager: managerName})
-                                            : props.translate('iou.paidyou', {manager: managerName})}
-                                    </Text>
-                                )}
-                            {(isCurrentUserManager
-                                && !props.shouldHidePayButton
-                                && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
-                                <TouchableOpacity
-                                    style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
-                                    onPress={props.onPayButtonPressed}
-                                >
-                                    <Text
-                                        style={[
-                                            styles.buttonSmallText,
-                                            styles.buttonSuccessText,
-                                        ]}
+                                {isCurrentUserManager
+                                    ? (
+                                        <Text>
+                                            {props.iouReport.hasOutstandingIOU
+                                                ? props.translate('iou.youowe', {owner: ownerName})
+                                                : props.translate('iou.youpaid', {owner: ownerName})}
+                                        </Text>
+                                    )
+                                    : (
+                                        <Text>
+                                            {props.iouReport.hasOutstandingIOU
+                                                ? props.translate('iou.owesyou', {manager: managerName})
+                                                : props.translate('iou.paidyou', {manager: managerName})}
+                                        </Text>
+                                    )}
+                                {(isCurrentUserManager
+                                    && !props.shouldHidePayButton
+                                    && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
+                                    <TouchableOpacity
+                                        style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
+                                        onPress={props.onPayButtonPressed}
                                     >
-                                        {props.translate('iou.pay')}
-                                    </Text>
-                                </TouchableOpacity>
-                            ))}
-                        </View>
+                                        <Text
+                                            style={[
+                                                styles.buttonSmallText,
+                                                styles.buttonSuccessText,
+                                            ]}
+                                        >
+                                            {props.translate('iou.pay')}
+                                        </Text>
+                                    </TouchableOpacity>
+                                ))}
+                            </View>
+                        </OfflineWithFeedback>
                     )}
             </View>
         </TouchableWithoutFeedback>
@@ -201,5 +216,8 @@ export default compose(
         session: {
             key: ONYXKEYS.SESSION,
         },
+        walletTerms: {
+            key: ONYXKEYS.WALLET_TERMS,
+        },
     }),
 )(IOUPreview);
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
@@ -27,12 +27,16 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
+    chatReportID: PropTypes.number,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     currency: CONST.CURRENCY.USD,
     shouldShowPaypal: false,
+    chatReportID: 0,
 };
 
 class SettlementButton extends React.Component {
@@ -80,6 +84,7 @@ class SettlementButton extends React.Component {
                 addBankAccountRoute={this.props.addBankAccountRoute}
                 addDebitCardRoute={this.props.addDebitCardRoute}
                 isDisabled={this.props.network.isOffline}
+                chatReportID={this.props.chatReportID}
             >
                 {triggerKYCFlow => (
                     <ButtonWithMenu

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -707,6 +707,8 @@ export default {
         activatedTitle: 'Wallet activated!',
         activatedMessage: 'Congrats, your wallet is set up and ready to make payments.',
         checkBackLater: 'We\'re still reviewing your information. Please check back later.',
+        continueToPayment: 'Continue to payment',
+        continueToTransfer: 'Continue to transfer',
     },
     companyStep: {
         headerTitle: 'Company information',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -709,6 +709,8 @@ export default {
         activatedTitle: '¡Billetera  activada!',
         activatedMessage: 'Felicidades, tu Billetera está configurada y lista para hacer pagos.',
         checkBackLater: 'Todavía estamos revisando tu información. Por favor, vuelva más tarde.',
+        continueToPayment: 'Continuar al pago',
+        continueToTransfer: 'Continuar a la transferencia',
     },
     companyStep: {
         headerTitle: 'Información de la empresa',

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
@@ -321,6 +321,13 @@ function clearWalletError() {
     Onyx.merge(ONYXKEYS.USER_WALLET, {errors: null});
 }
 
+/**
+ * Clear any error(s) related to the user's wallet terms
+ */
+function clearWalletTermsError() {
+    Onyx.merge(ONYXKEYS.WALLET_TERMS, {errors: null});
+}
+
 function deletePaymentCard(fundID) {
     API.write('DeletePaymentCard', {
         fundID,
@@ -355,4 +362,5 @@ export {
     clearDeletePaymentMethodError,
     clearAddPaymentMethodError,
     clearWalletError,
+    clearWalletTermsError,
 };
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
@@ -1559,6 +1559,15 @@ function viewNewReportAction(reportID, action) {
     });
 }
 
+/**
+ * Clear the errors associated with the IOUs of a given report.
+ *
+ * @param {Number} reportID
+ */
+function clearIOUError(reportID) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {errorFields: {iou: null}});
+}
+
 // We are using this map to ensure actions are only handled once
 const handledReportActions = {};
 Onyx.connect({
@@ -1636,4 +1645,5 @@ export {
     buildOptimisticCreatedReportAction,
     updatePolicyRoomName,
     clearPolicyRoomNameErrors,
+    clearIOUError,
 };
diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js
@@ -96,6 +96,15 @@ function setWalletShouldShowFailedKYC(shouldShowFailedKYC) {
     Onyx.merge(ONYXKEYS.USER_WALLET, {shouldShowFailedKYC});
 }
 
+/**
+ * Save the ID of the chat whose IOU triggered showing the KYC wall.
+ *
+ * @param {Number} chatReportID
+ */
+function setKYCWallSourceChatReportID(chatReportID) {
+    Onyx.merge(ONYXKEYS.WALLET_TERMS, {chatReportID});
+}
+
 /**
  * Transforms a list of Idology errors to a translated displayable error string.
  * @param {Array} idologyErrors
@@ -452,6 +461,7 @@ function verifyIdentity(parameters) {
  *
  * @param {Object} parameters
  * @param {Boolean} parameters.hasAcceptedTerms
+ * @param {Number} parameters.chatReportID When accepting the terms of wallet to pay an IOU, indicates the parent chat ID of the IOU
  */
 function acceptWalletTerms(parameters) {
     const optimisticData = [
@@ -485,7 +495,7 @@ function acceptWalletTerms(parameters) {
         },
     ];
 
-    API.write('AcceptWalletTerms', {hasAcceptedTerms: parameters.hasAcceptedTerms}, {optimisticData, successData, failureData});
+    API.write('AcceptWalletTerms', {hasAcceptedTerms: parameters.hasAcceptedTerms, reportID: parameters.chatReportID}, {optimisticData, successData, failureData});
 }
 
 /**
@@ -542,4 +552,5 @@ export {
     updatePersonalDetails,
     verifyIdentity,
     acceptWalletTerms,
+    setKYCWallSourceChatReportID,
 };