confirmation refactored using common step component

Expensify · Nov 5, 2024 · 040bcf1 · 040bcf1
1 parent 03b5219
commit 040bcf1
Showing 1 changed file with 57 additions and 72 deletions.
diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/substeps/Confirmation.tsx
@@ -1,14 +1,8 @@
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
-import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import SafeAreaConsumer from '@components/SafeAreaConsumer';
-import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
+import ConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -30,9 +24,8 @@ const {
     OWNS_MORE_THAN_25_PERCENT,
 } = INPUT_IDS.ADDITIONAL_DATA.CORPAY;
 
-function Confirmation({onNext, onMove, isSecondSigner}: ConfirmationProps) {
+function Confirmation({onNext, onMove, isEditing, isSecondSigner}: ConfirmationProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
     const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
@@ -42,70 +35,62 @@ function Confirmation({onNext, onMove, isSecondSigner}: ConfirmationProps) {
     const IDs = values[isSecondSigner ? SECOND_SIGNER_COPY_OF_ID : SIGNER_COPY_OF_ID];
     const proofs = values[isSecondSigner ? SECOND_SIGNER_ADDRESS_PROOF : SIGNER_ADDRESS_PROOF];
 
+    const summaryItems = [
+        {
+            title: values[isSecondSigner ? SECOND_SIGNER_JOB_TITLE : SIGNER_JOB_TITLE],
+            description: translate('signerInfoStep.jobTitle'),
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(1);
+            },
+        },
+        {
+            title: IDs ? IDs.map((id) => id.name).join(', ') : '',
+            description: translate('signerInfoStep.id'),
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(3);
+            },
+        },
+        {
+            title: proofs ? proofs.map((proof) => proof.name).join(', ') : '',
+            description: translate('signerInfoStep.proofOf'),
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(3);
+            },
+        },
+    ];
+
+    if (!isUserOwner) {
+        summaryItems.unshift({
+            title: `${values[isSecondSigner ? SECOND_SIGNER_FULL_NAME : SIGNER_FULL_NAME]}`,
+            description: translate('signerInfoStep.legalName'),
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(0);
+            },
+        });
+
+        summaryItems.splice(2, 0, {
+            title: values[isSecondSigner ? SECOND_SIGNER_DATE_OF_BIRTH : SIGNER_DATE_OF_BIRTH],
+            description: translate('common.dob'),
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(2);
+            },
+        });
+    }
+
     return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
-                <ScrollView
-                    style={styles.pt0}
-                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
-                >
-                    <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('signerInfoStep.letsDoubleCheck')}</Text>
-                    {!isUserOwner && (
-                        <MenuItemWithTopDescription
-                            description={translate('signerInfoStep.legalName')}
-                            title={`${values[isSecondSigner ? SECOND_SIGNER_FULL_NAME : SIGNER_FULL_NAME]}`}
-                            shouldShowRightIcon
-                            onPress={() => {
-                                onMove(0);
-                            }}
-                        />
-                    )}
-                    <MenuItemWithTopDescription
-                        description={translate('signerInfoStep.jobTitle')}
-                        title={values[isSecondSigner ? SECOND_SIGNER_JOB_TITLE : SIGNER_JOB_TITLE]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(1);
-                        }}
-                    />
-                    {!isUserOwner && (
-                        <MenuItemWithTopDescription
-                            description={translate('common.dob')}
-                            title={values[isSecondSigner ? SECOND_SIGNER_DATE_OF_BIRTH : SIGNER_DATE_OF_BIRTH]}
-                            shouldShowRightIcon
-                            onPress={() => {
-                                onMove(2);
-                            }}
-                        />
-                    )}
-                    <MenuItemWithTopDescription
-                        description={translate('signerInfoStep.id')}
-                        title={IDs ? IDs.map((id) => id.name).join(', ') : ''}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(3);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('signerInfoStep.proofOf')}
-                        title={proofs ? proofs.map((proof) => proof.name).join(', ') : ''}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(3);
-                        }}
-                    />
-                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                        <Button
-                            success
-                            style={[styles.w100]}
-                            onPress={onNext}
-                            large
-                            text={translate('common.confirm')}
-                        />
-                    </View>
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+        <ConfirmationStep
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            pageTitle={translate('signerInfoStep.letsDoubleCheck')}
+            summaryItems={summaryItems}
+            showOnfidoLinks={false}
+        />
     );
 }