Fix order of menu items

Expensify · Jan 4, 2025 · d9e53a9 · d9e53a9
1 parent 47eb2b4
commit d9e53a9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 43 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -6494,6 +6494,7 @@ const CONST = {
         EXCLUDED_CURRENCIES: ['IRR', 'CUP', 'SYP', 'UAH', 'KPW', 'RUB'] as string[],
         BANK_ACCOUNT_DETAILS_FIELDS: ['accountNumber', 'localAccountNumber', 'routingCode', 'localRoutingCode', 'swiftBicCode'] as string[],
         ACCOUNT_TYPE_KEY: 'BeneficiaryAccountType',
+        ACCOUNT_HOLDER_COUNTRY_KEY: 'accountHolderCountry',
         BANK_INFORMATION_FIELDS: ['bankName', 'bankAddressLine1', 'bankAddressLine2', 'bankCity', 'bankRegion', 'bankPostal', 'BeneficiaryBankBranchName'] as string[],
         ACCOUNT_HOLDER_FIELDS: [
             'accountHolderName',

diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountHolderInformation.tsx
@@ -18,8 +18,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {CorpayFormField} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const ACCOUNT_HOLDER_COUNTRY = 'accountHolderCountry';
-
 function getInputComponent(field: CorpayFormField) {
     if ((field.valueSet ?? []).length > 0) {
         return ValuePicker;
@@ -30,7 +28,7 @@ function getInputComponent(field: CorpayFormField) {
     if (CONST.CORPAY_FIELDS.SPECIAL_LIST_ADDRESS_KEYS.includes(field.id)) {
         return AddressSearch;
     }
-    if (field.id === ACCOUNT_HOLDER_COUNTRY) {
+    if (field.id === CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY) {
         return TextPicker;
     }
     return TextInput;
@@ -71,7 +69,7 @@ function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: Cu
             if (CONST.CORPAY_FIELDS.SPECIAL_LIST_ADDRESS_KEYS.includes(field.id)) {
                 return [index === 0 ? styles.pb2 : styles.pv2];
             }
-            if (field.id === ACCOUNT_HOLDER_COUNTRY) {
+            if (field.id === CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY) {
                 return [styles.mhn5, index === 0 ? styles.pb1 : styles.pv1];
             }
             return [index === 0 ? styles.pb2 : styles.pv2];
@@ -103,10 +101,10 @@ function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: Cu
                                 inputID={field.id}
                                 defaultValue={formValues[field.id]}
                                 label={field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`)}
-                                description={field.id === ACCOUNT_HOLDER_COUNTRY ? field.label : undefined}
+                                description={field.id === CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY ? field.label : undefined}
                                 items={getItems(field)}
-                                disabled={field.id === ACCOUNT_HOLDER_COUNTRY}
-                                interactive={field.id === ACCOUNT_HOLDER_COUNTRY ? false : undefined}
+                                disabled={field.id === CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY}
+                                interactive={field.id === CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY ? false : undefined}
                                 shouldSaveDraft={!isEditing}
                                 renamedInputKeys={{
                                     street: isEmptyObject(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]?.accountHolderAddress1) ? '' : 'accountHolderAddress1',

diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx
@@ -86,61 +86,54 @@ function Confirmation({onNext, onMove, formValues, fieldsMap}: CustomSubStepProp
         },
     ];
 
-    // eslint-disable-next-line guard-for-in
-    for (const fieldName in fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS]) {
+    Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS]).forEach(([fieldName, field]) => {
         summaryItems.push({
-            description:
-                fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS][fieldName].label +
-                (fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_ACCOUNT_DETAILS][fieldName].isRequired ? '' : ` (${translate('common.optional')})`),
+            description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`),
             title: formValues[fieldName],
             shouldShowRightIcon: true,
             onPress: () => {
                 onMove(STEP_INDEXES.BANK_ACCOUNT_DETAILS);
             },
         });
-    }
+    });
 
-    // eslint-disable-next-line guard-for-in
-    for (const fieldName in fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]) {
+    Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE]).forEach(([fieldName, field]) => {
         summaryItems.push({
-            description:
-                fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE][fieldName].label +
-                (fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_TYPE][fieldName].isRequired ? '' : ` (${translate('common.optional')})`),
+            description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`),
             title: formValues[fieldName],
             shouldShowRightIcon: true,
             onPress: () => {
                 onMove(STEP_INDEXES.ACCOUNT_TYPE);
             },
         });
-    }
+    });
 
-    // eslint-disable-next-line guard-for-in
-    for (const fieldName in fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION]) {
-        summaryItems.push({
-            description:
-                fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION][fieldName].label +
-                (fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION][fieldName].isRequired ? '' : ` (${translate('common.optional')})`),
-            title: formValues[fieldName],
-            shouldShowRightIcon: true,
-            onPress: () => {
-                onMove(STEP_INDEXES.BANK_INFORMATION);
-            },
+    Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.BANK_INFORMATION])
+        .sort(([field1], [field2]) => CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(field1) - CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(field2))
+        .forEach(([fieldName, field]) => {
+            summaryItems.push({
+                description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`),
+                title: formValues[fieldName],
+                shouldShowRightIcon: true,
+                onPress: () => {
+                    onMove(STEP_INDEXES.BANK_INFORMATION);
+                },
+            });
         });
-    }
 
-    // eslint-disable-next-line guard-for-in
-    for (const fieldName in fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION]) {
-        summaryItems.push({
-            description:
-                fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION][fieldName].label +
-                (fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION][fieldName].isRequired ? '' : ` (${translate('common.optional')})`),
-            title: formValues[fieldName],
-            shouldShowRightIcon: true,
-            onPress: () => {
-                onMove(STEP_INDEXES.ACCOUNT_HOLDER_INFORMATION);
-            },
+    Object.entries(fieldsMap[CONST.CORPAY_FIELDS.STEPS_NAME.ACCOUNT_HOLDER_INFORMATION])
+        .sort(([field1], [field2]) => CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(field1) - CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(field2))
+        .forEach(([fieldName, field]) => {
+            summaryItems.push({
+                description: field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`),
+                title: formValues[fieldName],
+                shouldShowRightIcon: true,
+                onPress: () => {
+                    onMove(STEP_INDEXES.ACCOUNT_HOLDER_INFORMATION);
+                },
+                interactive: fieldName !== CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_COUNTRY_KEY,
+            });
         });
-    }
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM> => {