Merge pull request #34098 from JKobrynski/fixCardDamagedFlow

[Card Settings] fix card lost/damaged flow
Expensify · Jan 16, 2024 · 7c27f51 · 7c27f51
2 parents eb47b90 + 2a9a11b
commit 7c27f51
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2033,9 +2033,11 @@ export default {
         cardDamaged: 'My card was damaged',
         cardLostOrStolen: 'My card was lost or stolen',
         confirmAddressTitle: "Please confirm the address below is where you'd like us to send your new card.",
-        currentCardInfo: 'Your current card will be permanently deactivated as soon as your order is placed. Most cards arrive in a few business days.',
+        cardDamagedInfo: 'Your new card will arrive in 2-3 business days, and your existing card will continue to work until you activate your new one.',
+        cardLostOrStolenInfo: 'Your current card will be permanently deactivated as soon as your order is placed. Most cards arrive in a few business days.',
         address: 'Address',
         deactivateCardButton: 'Deactivate card',
+        shipNewCardButton: 'Ship new card',
         addressError: 'Address is required',
         reasonError: 'Reason is required',
     },

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2521,9 +2521,11 @@ export default {
         cardDamaged: 'Mi tarjeta está dañada',
         cardLostOrStolen: 'He perdido o me han robado la tarjeta',
         confirmAddressTitle: 'Confirma que la dirección que aparece a continuación es a la que deseas que te enviemos tu nueva tarjeta.',
-        currentCardInfo: 'La tarjeta actual se desactivará permanentemente en cuanto se realice el pedido. La mayoría de las tarjetas llegan en unos pocos días laborables.',
+        cardDamagedInfo: 'La nueva tarjeta te llegará en 2-3 días laborables y la tarjeta actual seguirá funcionando hasta que actives la nueva.',
+        cardLostOrStolenInfo: 'La tarjeta actual se desactivará permanentemente en cuanto realices el pedido. La mayoría de las tarjetas llegan en pocos días laborables.',
         address: 'Dirección',
         deactivateCardButton: 'Desactivar tarjeta',
+        shipNewCardButton: 'Enviar tarjeta nueva',
         addressError: 'La dirección es obligatoria',
         reasonError: 'Se requiere justificación',
     },

diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
@@ -52,10 +52,10 @@ function reportVirtualExpensifyCardFraud(cardID: number) {
 
 /**
  * Call the API to deactivate the card and request a new one
- * @param cardId - id of the card that is going to be replaced
+ * @param cardID - id of the card that is going to be replaced
  * @param reason - reason for replacement
  */
-function requestReplacementExpensifyCard(cardId: number, reason: ReplacementReason) {
+function requestReplacementExpensifyCard(cardID: number, reason: ReplacementReason) {
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -88,12 +88,12 @@ function requestReplacementExpensifyCard(cardId: number, reason: ReplacementReas
     ];
 
     type RequestReplacementExpensifyCardParams = {
-        cardId: number;
+        cardID: number;
         reason: string;
     };
 
     const parameters: RequestReplacementExpensifyCardParams = {
-        cardId,
+        cardID,
         reason,
     };
 

diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js
@@ -23,14 +23,19 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import assignedCardPropTypes from './assignedCardPropTypes';
 
+const OPTIONS_KEYS = {
+    DAMAGED: 'damaged',
+    STOLEN: 'stolen',
+};
+
 /** Options for reason selector */
 const OPTIONS = [
     {
-        key: 'damaged',
+        key: OPTIONS_KEYS.DAMAGED,
         label: 'reportCardLostOrDamaged.cardDamaged',
     },
     {
-        key: 'stolen',
+        key: OPTIONS_KEYS.STOLEN,
         label: 'reportCardLostOrDamaged.cardLostOrStolen',
     },
 ];
@@ -107,7 +112,7 @@ function ReportCardLostPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
     }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]);
 
     useEffect(() => {
@@ -156,6 +161,8 @@ function ReportCardLostPage({
         Navigation.goBack(ROUTES.SETTINGS_WALLET);
     };
 
+    const isDamaged = reason && reason.key === OPTIONS_KEYS.DAMAGED;
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom
@@ -178,14 +185,18 @@ function ReportCardLostPage({
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
                                 numberOfLinesTitle={2}
                             />
-                            <Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.currentCardInfo')}</Text>
+                            {isDamaged ? (
+                                <Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.cardDamagedInfo')}</Text>
+                            ) : (
+                                <Text style={[styles.mt3, styles.mh5]}>{translate('reportCardLostOrDamaged.cardLostOrStolenInfo')}</Text>
+                            )}
                         </View>
                         <FormAlertWithSubmitButton
                             isAlertVisible={shouldShowAddressError}
                             onSubmit={handleSubmitSecondStep}
                             message={translate('reportCardLostOrDamaged.addressError')}
                             isLoading={formData.isLoading}
-                            buttonText={translate('reportCardLostOrDamaged.deactivateCardButton')}
+                            buttonText={isDamaged ? translate('reportCardLostOrDamaged.shipNewCardButton') : translate('reportCardLostOrDamaged.deactivateCardButton')}
                         />
                     </>
                 ) : (