From 0f7e98740d9f4e7d4c645d004ea88a91d6db7f9b Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 21 May 2025 20:53:23 +0500
Subject: [PATCH 1/5] add verify button

---
 src/components/MagicCodeInput.tsx                  |  6 +-----
 .../ValidateCodeForm/BaseValidateCodeForm.tsx      |  5 -----
 .../BaseOnboardingPrivateDomain.tsx                | 14 +++-----------
 3 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx
index e989e515c62b..6487530be7d0 100644
--- a/src/components/MagicCodeInput.tsx
+++ b/src/components/MagicCodeInput.tsx
@@ -57,9 +57,6 @@ type MagicCodeInputProps = {
 
     /** TestID for test */
     testID?: string;
-
-    /** Whether to allow auto submit again after the previous attempt fails */
-    allowResubmit?: boolean;
 };
 
 type MagicCodeInputHandle = {
@@ -108,7 +105,6 @@ function MagicCodeInput(
         autoComplete,
         hasError = false,
         testID = '',
-        allowResubmit = false,
     }: MagicCodeInputProps,
     ref: ForwardedRef<MagicCodeInputHandle>,
 ) {
@@ -179,7 +175,7 @@ function MagicCodeInput(
     const validateAndSubmit = () => {
         const numbers = decomposeString(value, maxLength);
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        if ((wasSubmitted && !allowResubmit) || !shouldSubmitOnComplete || numbers.filter((n) => isNumeric(n)).length !== maxLength || isOffline) {
+        if (wasSubmitted || !shouldSubmitOnComplete || numbers.filter((n) => isNumeric(n)).length !== maxLength || isOffline) {
             return;
         }
         if (!wasSubmitted) {
diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
index 8628fc19ab06..56329a501ea2 100644
--- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -80,9 +80,6 @@ type ValidateCodeFormProps = {
     /** Whether the form is loading or not */
     isLoading?: boolean;
 
-    /** Whether to allow auto submit again after the previous attempt fails */
-    allowResubmit?: boolean;
-
     /** Whether to show skip button */
     shouldShowSkipButton?: boolean;
 
@@ -104,7 +101,6 @@ function BaseValidateCodeForm({
     hideSubmitButton,
     submitButtonText,
     isLoading,
-    allowResubmit,
     shouldShowSkipButton = false,
     handleSkipButtonPress,
 }: ValidateCodeFormProps) {
@@ -271,7 +267,6 @@ function BaseValidateCodeForm({
                 hasError={canShowError && !isEmptyObject(finalValidateError)}
                 onFulfill={validateAndSubmitForm}
                 autoFocus={false}
-                allowResubmit={allowResubmit}
             />
             {shouldShowTimer && (
                 <Text style={[styles.mt5]}>
diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
index be15bf44326a..320200600100 100644
--- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
+++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -85,19 +84,12 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
                             setHasMagicCodeBeenSent(true);
                         }}
                         clearError={() => clearGetAccessiblePoliciesErrors()}
-                        hideSubmitButton
                         validateError={getAccessiblePoliciesAction?.errors}
                         hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                        allowResubmit
-                    />
-                </View>
-                <View style={[styles.mb5]}>
-                    <Button
-                        success={false}
-                        large
-                        text={translate('common.skip')}
+                        shouldShowSkipButton
+                        handleSkipButtonPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
+                        buttonStyles={[styles.flex2, styles.justifyContentEnd]}
                         isLoading={getAccessiblePoliciesAction?.loading}
-                        onPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
                     />
                 </View>
             </View>

From 575c5aec3e7f9e3d7c62b01865d9c3694d5fe1f1 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Sat, 24 May 2025 01:20:22 +0500
Subject: [PATCH 2/5] update margin

---
 .../ValidateCodeForm/BaseValidateCodeForm.tsx                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
index 56329a501ea2..a1b1a1037cf2 100644
--- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -309,7 +309,7 @@ function BaseValidateCodeForm({
                 shouldDisplayErrorAbove
                 pendingAction={validatePendingAction}
                 errors={canShowError ? finalValidateError : undefined}
-                errorRowStyles={[styles.mt2, styles.textWrap]}
+                errorRowStyles={[styles.mv2, styles.textWrap]}
                 onClose={() => {
                     clearError();
                     if (!isEmptyObject(validateCodeAction?.errorFields) && validateCodeActionErrorField) {

From 8ac4f0160c95accdbd25b772e1593040b429d6d9 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Mon, 26 May 2025 18:16:45 +0500
Subject: [PATCH 3/5] handle comments

---
 .../ValidateCodeForm/BaseValidateCodeForm.tsx                  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
index a1b1a1037cf2..b9f6b75e346a 100644
--- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -309,7 +309,7 @@ function BaseValidateCodeForm({
                 shouldDisplayErrorAbove
                 pendingAction={validatePendingAction}
                 errors={canShowError ? finalValidateError : undefined}
-                errorRowStyles={[styles.mv2, styles.textWrap]}
+                errorRowStyles={[styles.mt2, styles.textWrap]}
                 onClose={() => {
                     clearError();
                     if (!isEmptyObject(validateCodeAction?.errorFields) && validateCodeActionErrorField) {
@@ -322,6 +322,7 @@ function BaseValidateCodeForm({
                     <Button
                         text={translate('common.skip')}
                         onPress={handleSkipButtonPress}
+                        style={[styles.mt4]}
                         success={false}
                         large
                     />

From a8e06d917b05482fdad905b1d94958139bbed9cd Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Wed, 28 May 2025 04:51:45 +0500
Subject: [PATCH 4/5] handle scrolling

---
 .../BaseOnboardingPrivateDomain.tsx           | 51 ++++++++++---------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
index 320200600100..43abb3ff110f 100644
--- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
+++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
@@ -1,8 +1,8 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm';
 import useLocalize from '@hooks/useLocalize';
@@ -69,30 +69,31 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
                 progressBarPercentage={40}
                 onBackButtonPress={Navigation.goBack}
             />
-            <View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, styles.justifyContentBetween]}>
-                <View style={[styles.flexGrow1, styles.mb5]}>
-                    <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
-                    <Text style={[styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
-                    <ValidateCodeForm
-                        validateCodeActionErrorField="getAccessiblePolicies"
-                        handleSubmitForm={(code) => {
-                            getAccessiblePolicies(code);
-                            setHasMagicCodeBeenSent(false);
-                        }}
-                        sendValidateCode={() => {
-                            sendValidateCode();
-                            setHasMagicCodeBeenSent(true);
-                        }}
-                        clearError={() => clearGetAccessiblePoliciesErrors()}
-                        validateError={getAccessiblePoliciesAction?.errors}
-                        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                        shouldShowSkipButton
-                        handleSkipButtonPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
-                        buttonStyles={[styles.flex2, styles.justifyContentEnd]}
-                        isLoading={getAccessiblePoliciesAction?.loading}
-                    />
-                </View>
-            </View>
+            <ScrollView
+                style={[styles.w100, styles.h100, styles.flex1]}
+                contentContainerStyle={[styles.flexGrow1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
+            >
+                <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
+                <Text style={[styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
+                <ValidateCodeForm
+                    validateCodeActionErrorField="getAccessiblePolicies"
+                    handleSubmitForm={(code) => {
+                        getAccessiblePolicies(code);
+                        setHasMagicCodeBeenSent(false);
+                    }}
+                    sendValidateCode={() => {
+                        sendValidateCode();
+                        setHasMagicCodeBeenSent(true);
+                    }}
+                    clearError={() => clearGetAccessiblePoliciesErrors()}
+                    validateError={getAccessiblePoliciesAction?.errors}
+                    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                    shouldShowSkipButton
+                    handleSkipButtonPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
+                    buttonStyles={[styles.flex2, styles.justifyContentEnd]}
+                    isLoading={getAccessiblePoliciesAction?.loading}
+                />
+            </ScrollView>
         </ScreenWrapper>
     );
 }

From 66dc2f8892b31e79675b4409e4579c772efd225f Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Mon, 2 Jun 2025 13:23:23 +0500
Subject: [PATCH 5/5] use correct bottom padding for scrollview

---
 .../BaseOnboardingPrivateDomain.tsx           | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
index 43abb3ff110f..e295707dda46 100644
--- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
+++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
@@ -1,4 +1,5 @@
 import React, {useCallback, useEffect, useState} from 'react';
+import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -71,28 +72,30 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
             />
             <ScrollView
                 style={[styles.w100, styles.h100, styles.flex1]}
-                contentContainerStyle={[styles.flexGrow1, styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
+                contentContainerStyle={styles.flexGrow1}
             >
-                <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
-                <Text style={[styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
-                <ValidateCodeForm
-                    validateCodeActionErrorField="getAccessiblePolicies"
-                    handleSubmitForm={(code) => {
-                        getAccessiblePolicies(code);
-                        setHasMagicCodeBeenSent(false);
-                    }}
-                    sendValidateCode={() => {
-                        sendValidateCode();
-                        setHasMagicCodeBeenSent(true);
-                    }}
-                    clearError={() => clearGetAccessiblePoliciesErrors()}
-                    validateError={getAccessiblePoliciesAction?.errors}
-                    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                    shouldShowSkipButton
-                    handleSkipButtonPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
-                    buttonStyles={[styles.flex2, styles.justifyContentEnd]}
-                    isLoading={getAccessiblePoliciesAction?.loading}
-                />
+                <View style={[styles.mb5, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, styles.flex1]}>
+                    <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
+                    <Text style={[styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
+                    <ValidateCodeForm
+                        validateCodeActionErrorField="getAccessiblePolicies"
+                        handleSubmitForm={(code) => {
+                            getAccessiblePolicies(code);
+                            setHasMagicCodeBeenSent(false);
+                        }}
+                        sendValidateCode={() => {
+                            sendValidateCode();
+                            setHasMagicCodeBeenSent(true);
+                        }}
+                        clearError={() => clearGetAccessiblePoliciesErrors()}
+                        validateError={getAccessiblePoliciesAction?.errors}
+                        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                        shouldShowSkipButton
+                        handleSkipButtonPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
+                        buttonStyles={[styles.flex2, styles.justifyContentEnd]}
+                        isLoading={getAccessiblePoliciesAction?.loading}
+                    />
+                </View>
             </ScrollView>
         </ScreenWrapper>
     );