From b5d4f647988b63b61657b38ed1b2bd3c37e00859 Mon Sep 17 00:00:00 2001
From: burczu <b.dybowski@gmail.com>
Date: Fri, 15 Nov 2024 12:07:39 +0100
Subject: [PATCH] finish step implementation

---
 src/languages/en.ts                           |  7 +++
 src/languages/es.ts                           |  9 ++-
 .../NonUSD/Finish/index.tsx                   | 55 ++++++++++++++++++-
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 0b304537627a..b046116b74a5 100755
--- 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
index c570a0e2742e..c5966da57c74 100644
--- 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
index 69c0e9e77a45..dd6438335d79 100644
--- 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>
     );
 }