finish step implementation

Expensify · Nov 18, 2024 · b5d4f64 · b5d4f64
1 parent c975b61
commit b5d4f64
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2341,6 +2341,13 @@ const translations = {
     },
     finishStep: {
         connect: 'Connect bank account',
+        letsFinish: "Let's finish in chat!",
+        thanksFor:
+            "Thanks for those details. A dedicated support agent will now review your information. We'll circle back if we need anything else from you, but in the meantime, you can chat with us any time if you have questions.",
+        iHaveA: 'I have a question',
+        enable2FA: 'Enable two-factor authentication (2FA) to prevent fraud',
+        weTake: 'We take your security seriously. Please set up 2FA now to add an extra layer of protection to your account.',
+        secure: 'Secure your account',
     },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'One moment',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2365,7 +2365,14 @@ const translations = {
         },
     },
     finishStep: {
-        connect: 'Conectar cuenta bancaria',
+        connect: 'Connect bank account',
+        letsFinish: "Let's finish in chat!",
+        thanksFor:
+            "Thanks for those details. A dedicated support agent will now review your information. We'll circle back if we need anything else from you, but in the meantime, you can chat with us any time if you have questions.",
+        iHaveA: 'I have a question',
+        enable2FA: 'Enable two-factor authentication (2FA) to prevent fraud',
+        weTake: 'We take your security seriously. Please set up 2FA now to add an extra layer of protection to your account.',
+        secure: 'Secure your account',
     },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'Un momento',

diff --git a/src/pages/ReimbursementAccount/NonUSD/Finish/index.tsx b/src/pages/ReimbursementAccount/NonUSD/Finish/index.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import Section from '@components/Section';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
+import * as Report from '@userActions/Report';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
 function Finish() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
+
     const handleBackButtonPress = () => {
         Navigation.goBack();
     };
+    const handleNavigateToConciergeChat = () => Report.navigateToConciergeChat(true);
 
     return (
         <ScreenWrapper
@@ -25,7 +39,46 @@ function Finish() {
                 title={translate('finishStep.connect')}
                 onBackButtonPress={handleBackButtonPress}
             />
-            <ScrollView style={[styles.flex1]} />
+            <ScrollView style={[styles.flex1]}>
+                <Section
+                    title={translate('finishStep.letsFinish')}
+                    icon={Illustrations.ConciergeBubble}
+                    containerStyles={[styles.mb8, styles.mh5]}
+                    titleStyles={[styles.mb3, styles.textHeadline]}
+                >
+                    <Text style={[styles.mb6, styles.mt3, styles.textLabelSupportingEmptyValue]}>{translate('finishStep.thanksFor')}</Text>
+                    <Button
+                        iconStyles={[styles.customMarginButtonWithMenuItem]}
+                        text={translate('finishStep.iHaveA')}
+                        onPress={handleNavigateToConciergeChat}
+                        icon={Expensicons.ChatBubble}
+                        success
+                        innerStyles={[styles.h13]}
+                    />
+                </Section>
+                <Section
+                    title={translate('finishStep.enable2FA')}
+                    icon={Illustrations.ShieldYellow}
+                    titleStyles={[styles.mb4, styles.textHeadline]}
+                    containerStyles={[styles.mh5]}
+                    menuItems={[
+                        {
+                            title: translate('finishStep.secure'),
+                            onPress: () => {
+                                Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID)));
+                            },
+                            icon: Expensicons.Shield,
+                            shouldShowRightIcon: true,
+                            iconRight: Expensicons.NewWindow,
+                            wrapperStyle: [styles.cardMenuItem],
+                        },
+                    ]}
+                >
+                    <View style={styles.mb6}>
+                        <Text style={[styles.mt3, styles.textLabelSupportingEmptyValue]}>{translate('finishStep.weTake')}</Text>
+                    </View>
+                </Section>
+            </ScrollView>
         </ScreenWrapper>
     );
 }