Merge pull request #50644 from koko57/fix/50248-handle-card-failure-data

Expensify · Oct 21, 2024 · 13f41cb · 13f41cb
2 parents 597833d + a80d894
commit 13f41cb
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 15 deletions.
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
@@ -223,7 +223,11 @@ function revealVirtualCardDetails(cardID: number, validateCode: string): Promise
         ];
 
         // eslint-disable-next-line rulesdir/no-api-side-effects-method
-        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.REVEAL_EXPENSIFY_CARD_DETAILS, parameters, {optimisticData, successData, failureData})
+        API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.REVEAL_EXPENSIFY_CARD_DETAILS, parameters, {
+            optimisticData,
+            successData,
+            failureData,
+        })
             .then((response) => {
                 if (response?.jsonCode !== CONST.JSON_CODE.SUCCESS) {
                     if (response?.jsonCode === CONST.JSON_CODE.INCORRECT_MAGIC_CODE) {
@@ -336,7 +340,7 @@ function getCardDefaultName(userName?: string) {
 }
 
 function setIssueNewCardStepAndData({data, isEditing, step}: IssueNewCardFlowData) {
-    Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {data, isEditing, currentStep: step});
+    Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {data, isEditing, currentStep: step, errors: null});
 }
 
 function clearIssueNewCardFlow() {
@@ -625,6 +629,40 @@ function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueN
 
     const {assigneeEmail, limit, limitType, cardTitle, cardType} = data;
 
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD,
+            value: {
+                isLoading: true,
+                errors: null,
+                isSuccessful: null,
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD,
+            value: {
+                isLoading: false,
+                isSuccessful: true,
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD,
+            value: {
+                isLoading: false,
+                errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+            },
+        },
+    ];
+
     const parameters = {
         policyID,
         assigneeEmail,
@@ -634,14 +672,30 @@ function issueExpensifyCard(policyID: string, feedCountry: string, data?: IssueN
     };
 
     if (cardType === CONST.EXPENSIFY_CARD.CARD_TYPE.PHYSICAL) {
-        API.write(WRITE_COMMANDS.CREATE_EXPENSIFY_CARD, {...parameters, feedCountry});
+        API.write(
+            WRITE_COMMANDS.CREATE_EXPENSIFY_CARD,
+            {...parameters, feedCountry},
+            {
+                optimisticData,
+                successData,
+                failureData,
+            },
+        );
         return;
     }
 
     const domainAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
 
     // eslint-disable-next-line rulesdir/no-multiple-api-calls
-    API.write(WRITE_COMMANDS.CREATE_ADMIN_ISSUED_VIRTUAL_CARD, {...parameters, domainAccountID});
+    API.write(
+        WRITE_COMMANDS.CREATE_ADMIN_ISSUED_VIRTUAL_CARD,
+        {...parameters, domainAccountID},
+        {
+            optimisticData,
+            successData,
+            failureData,
+        },
+    );
 }
 
 function openCardDetailsPage(cardID: number) {

diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -13,6 +13,7 @@ import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getTranslationKeyForLimitType} from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as ErrorUtils from '@libs/ErrorUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
 import * as Card from '@userActions/Card';
@@ -38,19 +39,28 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD);
 
     const data = issueNewCard?.data;
+    const isSuccessful = issueNewCard?.isSuccessful;
 
     const submitButton = useRef<View>(null);
 
     useEffect(() => {
         submitButton.current?.focus();
     }, []);
 
-    const submit = () => {
-        Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
+    useEffect(() => {
+        if (!isSuccessful) {
+            return;
+        }
         Navigation.navigate(backTo ?? ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID ?? '-1'));
         Card.clearIssueNewCardFlow();
+    }, [backTo, policyID, isSuccessful]);
+
+    const submit = () => {
+        Card.issueExpensifyCard(policyID, CONST.COUNTRY.US, data);
     };
 
+    const errorMessage = ErrorUtils.getLatestErrorMessage(issueNewCard);
+
     const editStep = (step: IssueNewCardStep) => {
         Card.setIssueNewCardStepAndData({step, isEditing: true});
     };
@@ -115,14 +125,14 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
                     onPress={() => editStep(CONST.EXPENSIFY_CARD.STEP.CARD_NAME)}
                 />
                 <View style={[styles.mh5, styles.pb5, styles.mt3, styles.flexGrow1, styles.justifyContentEnd]}>
-                    <Button
-                        ref={submitButton}
+                    <FormAlertWithSubmitButton
+                        buttonRef={submitButton}
+                        message={errorMessage}
+                        isAlertVisible={!!errorMessage}
                         isDisabled={isOffline}
-                        success
-                        large
-                        style={[styles.w100]}
-                        onPress={submit}
-                        text={translate('workspace.card.issueCard')}
+                        isLoading={issueNewCard?.isLoading}
+                        onSubmit={submit}
+                        buttonText={translate('workspace.card.issueCard')}
                     />
                 </View>
             </ScrollView>

diff --git a/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx b/src/pages/workspace/expensifyCard/issueNew/IssueNewCardPage.tsx
@@ -30,6 +30,12 @@ function IssueNewCardPage({policy, route}: IssueNewCardPageProps) {
         Card.startIssueNewCardFlow(policyID);
     }, [policyID]);
 
+    useEffect(() => {
+        return () => {
+            Card.clearIssueNewCardFlow();
+        };
+    }, []);
+
     const getCurrentStep = () => {
         switch (currentStep) {
             case CONST.EXPENSIFY_CARD.STEP.ASSIGNEE:

diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -63,6 +63,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [allCardsList] = useOnyx(`${ONYXKEYS.CARD_LIST}`);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [cardSettings] = useOnyx(`${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`);
+
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = useState(false);
     const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
 
@@ -80,6 +82,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
     const ownerDetails = personalDetails?.[policy?.ownerAccountID ?? -1] ?? ({} as PersonalDetails);
     const policyOwnerDisplayName = ownerDetails.displayName ?? policy?.owner ?? '';
     const hasMultipleFeeds = Object.values(cardFeeds?.settings?.companyCards ?? {}).filter((feed) => !feed.pending).length > 0;
+    const paymentAccountID = cardSettings?.paymentBankAccountID ?? 0;
 
     useEffect(() => {
         Policy.openPolicyCompanyCardsPage(policyID, workspaceAccountID);
@@ -204,6 +207,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         return <NotFoundPage />;
     }
 
+    const shouldShowCardsSection = (!!policy?.areExpensifyCardsEnabled && !!paymentAccountID) ?? (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds);
+
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
@@ -291,7 +296,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                         onRoleChange={changeRole}
                                         onClose={() => setIsRoleSelectionModalVisible(false)}
                                     />
-                                    {(!!policy?.areExpensifyCardsEnabled || (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds)) && (
+                                    {shouldShowCardsSection && (
                                         <>
                                             <View style={[styles.ph5, styles.pv3]}>
                                                 <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting])}>

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
@@ -166,6 +166,15 @@ type IssueNewCard = {
 
     /** Whether the user is editing step */
     isEditing: boolean;
+
+    /** Whether the request is being processed */
+    isLoading?: boolean;
+
+    /** Error message */
+    errors?: OnyxCommon.Errors;
+
+    /** Whether the request was successful */
+    isSuccessful?: boolean;
 };
 
 /** List of Expensify cards */