From 5c5dcf22e4ad3d639bfe95404b672e76b5a6c5b9 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Tue, 12 Nov 2024 22:44:10 +0700
Subject: [PATCH 1/4] display not found page for invalid magic code

---
 src/components/ValidateCode/ValidateCodeModal.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 1e42773c2dc2..6ff8d6c0d05d 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -10,6 +10,9 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -33,6 +36,18 @@ function ValidateCodeModal({code, accountID, session = {}}: ValidateCodeModalPro
     const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]);
     const {translate} = useLocalize();
 
+    const isInvalidValidateCode = !ValidationUtils.isValidValidateCode(code);
+
+    if (isInvalidValidateCode) {
+        return (
+            <NotFoundPage
+                shouldShow
+                onLinkPress={() => {
+                    Navigation.goBack();
+                }}
+            />
+        );
+    }
     return (
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>

From b29da7baeaa97bd8e0c445d5d584262054e070e4 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Wed, 13 Nov 2024 23:15:25 +0700
Subject: [PATCH 2/4] remove withOnyx

---
 .../ValidateCode/ValidateCodeModal.tsx         | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 6ff8d6c0d05d..3216a443d183 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -16,23 +15,18 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Session as SessionType} from '@src/types/onyx';
 
-type ValidateCodeModalOnyxProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<SessionType>;
-};
-
-type ValidateCodeModalProps = ValidateCodeModalOnyxProps & {
+type ValidateCodeModalProps = {
     /** Code to display. */
     code: string;
     /** The ID of the account to which the code belongs. */
     accountID: number;
 };
 
-function ValidateCodeModal({code, accountID, session = {}}: ValidateCodeModalProps) {
+function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const [session] = useOnyx(ONYXKEYS.SESSION);
     const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]);
     const {translate} = useLocalize();
 
@@ -88,6 +82,4 @@ function ValidateCodeModal({code, accountID, session = {}}: ValidateCodeModalPro
 
 ValidateCodeModal.displayName = 'ValidateCodeModal';
 
-export default withOnyx<ValidateCodeModalProps, ValidateCodeModalOnyxProps>({
-    session: {key: ONYXKEYS.SESSION},
-})(ValidateCodeModal);
+export default ValidateCodeModal;

From 022cbdf7294bc5a337c27faf3eb19a72682335ba Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Thu, 14 Nov 2024 23:55:57 +0700
Subject: [PATCH 3/4] use FullPageNotFoundView

---
 .../ValidateCode/ValidateCodeModal.tsx        | 81 +++++++++----------
 1 file changed, 38 insertions(+), 43 deletions(-)

diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 3216a443d183..06b09b7e82ac 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -11,7 +12,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -30,53 +30,48 @@ function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
     const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]);
     const {translate} = useLocalize();
 
-    const isInvalidValidateCode = !ValidationUtils.isValidValidateCode(code);
-
-    if (isInvalidValidateCode) {
-        return (
-            <NotFoundPage
-                shouldShow
-                onLinkPress={() => {
-                    Navigation.goBack();
-                }}
-            />
-        );
-    }
     return (
-        <View style={styles.deeplinkWrapperContainer}>
-            <View style={styles.deeplinkWrapperMessage}>
-                <View style={styles.mb2}>
+        <FullPageNotFoundView
+            shouldShow={!ValidationUtils.isValidValidateCode(code)}
+            onLinkPress={() => {
+                Navigation.goBack();
+            }}
+        >
+            <View style={styles.deeplinkWrapperContainer}>
+                <View style={styles.deeplinkWrapperMessage}>
+                    <View style={styles.mb2}>
+                        <Icon
+                            width={variables.modalTopIconWidth}
+                            height={variables.modalTopIconHeight}
+                            src={Illustrations.MagicCode}
+                        />
+                    </View>
+                    <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
+                    <View style={[styles.mt2, styles.mb2]}>
+                        <Text style={styles.textAlignCenter}>
+                            {translate('validateCodeModal.description')}
+                            {!session?.authToken && (
+                                <>
+                                    {translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{translate('validateCodeModal.signInHere')}</TextLink>
+                                </>
+                            )}
+                            .
+                        </Text>
+                    </View>
+                    <View style={styles.mt6}>
+                        <Text style={styles.validateCodeDigits}>{code}</Text>
+                    </View>
+                </View>
+                <View style={styles.deeplinkWrapperFooter}>
                     <Icon
-                        width={variables.modalTopIconWidth}
-                        height={variables.modalTopIconHeight}
-                        src={Illustrations.MagicCode}
+                        width={variables.modalWordmarkWidth}
+                        height={variables.modalWordmarkHeight}
+                        fill={theme.success}
+                        src={Expensicons.ExpensifyWordmark}
                     />
                 </View>
-                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
-                <View style={[styles.mt2, styles.mb2]}>
-                    <Text style={styles.textAlignCenter}>
-                        {translate('validateCodeModal.description')}
-                        {!session?.authToken && (
-                            <>
-                                {translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{translate('validateCodeModal.signInHere')}</TextLink>
-                            </>
-                        )}
-                        .
-                    </Text>
-                </View>
-                <View style={styles.mt6}>
-                    <Text style={styles.validateCodeDigits}>{code}</Text>
-                </View>
-            </View>
-            <View style={styles.deeplinkWrapperFooter}>
-                <Icon
-                    width={variables.modalWordmarkWidth}
-                    height={variables.modalWordmarkHeight}
-                    fill={theme.success}
-                    src={Expensicons.ExpensifyWordmark}
-                />
             </View>
-        </View>
+        </FullPageNotFoundView>
     );
 }
 

From 5ab201167b92b493cecf2129a123e8e7818fc4e3 Mon Sep 17 00:00:00 2001
From: mkzie2 <mkzie2@gmail.com>
Date: Fri, 15 Nov 2024 12:07:34 +0700
Subject: [PATCH 4/4] hide back button in wide screen

---
 src/components/ValidateCode/ValidateCodeModal.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 06b09b7e82ac..089416267b32 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -8,6 +8,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -29,10 +30,12 @@ function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]);
     const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <FullPageNotFoundView
             shouldShow={!ValidationUtils.isValidValidateCode(code)}
+            shouldShowBackButton={shouldUseNarrowLayout}
             onLinkPress={() => {
                 Navigation.goBack();
             }}