Merge pull request #54186 from allgandalf/privateDomainScreen

Author: blimpich

src/CONST.ts

@@ -5615,6 +5615,9 @@ const CONST = {
             DEBUG: 'DEBUG',
         },
     },
+
+    // We need to store this server side error in order to not show the blocking screen when the error is for invalid code
+    MERGE_ACCOUNT_INVALID_CODE_ERROR: '401 Not authorized - Invalid validateCode',
     REIMBURSEMENT_ACCOUNT: {
         DEFAULT_DATA: {
             achData: {

src/ONYXKEYS.ts

@@ -799,6 +799,8 @@ const ONYXKEYS = {
         RULES_CUSTOM_FORM_DRAFT: 'rulesCustomFormDraft',
         DEBUG_DETAILS_FORM: 'debugDetailsForm',
         DEBUG_DETAILS_FORM_DRAFT: 'debugDetailsFormDraft',
+        ONBOARDING_WORK_EMAIL_FORM: 'onboardingWorkEmailForm',
+        ONBOARDING_WORK_EMAIL_FORM_DRAFT: 'onboardingWorkEmailFormDraft',
         MERGE_ACCOUNT_DETAILS_FORM: 'mergeAccountDetailsForm',
         MERGE_ACCOUNT_DETAILS_FORM_DRAFT: 'mergeAccountDetailsFormDraft',
         WORKSPACE_PER_DIEM_FORM: 'workspacePerDiemForm',
@@ -903,6 +905,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_CUSTOM_FORM]: FormTypes.RulesCustomForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
     [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
+    [ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM]: FormTypes.OnboardingWorkEmailForm;
     [ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM]: FormTypes.MergeAccountDetailsForm;
     [ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM]: FormTypes.InternationalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_PER_DIEM_FORM]: FormTypes.WorkspacePerDiemForm;

src/ROUTES.ts

@@ -1883,6 +1883,14 @@ const ROUTES = {
         route: 'onboarding/join-workspaces',
         getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/join-workspaces`, backTo),
     },
+    ONBOARDING_WORK_EMAIL: {
+        route: 'onboarding/work-email',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/work-email`, backTo),
+    },
+    ONBOARDING_WORK_EMAIL_VALIDATION: {
+        route: 'onboarding/work-email-validation',
+        getRoute: (backTo?: string) => getUrlWithBackToParam(`onboarding/work-email-validation`, backTo),
+    },
     WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
     EXPLANATION_MODAL_ROOT: 'onboarding/explanation',
     WORKSPACE_CONFIRMATION: {

src/SCREENS.ts

@@ -642,6 +642,8 @@ const SCREENS = {
         EMPLOYEES: 'Onboarding_Employees',
         ACCOUNTING: 'Onboarding_Accounting',
         WORKSPACES: 'Onboarding_Workspaces',
+        WORK_EMAIL: 'Onboarding_Work_Email',
+        WORK_EMAIL_VALIDATION: 'Onboarding_Work_Email_Validation',
     },
 
     WELCOME_VIDEO: {

src/components/AutoEmailLink.tsx

@@ -18,32 +18,43 @@ type AutoEmailLinkProps = {
 
 function AutoEmailLink({text, style}: AutoEmailLinkProps) {
     const styles = useThemeStyles();
+    const emailRegex = COMMON_CONST.REG_EXP.EXTRACT_EMAIL;
+    const matches = [...text.matchAll(emailRegex)];
+
+    if (matches.length === 0) {
+        return <Text style={style}>{text}</Text>;
+    }
+
+    let lastIndex = 0;
+
     return (
         <Text style={style}>
-            {text.split(COMMON_CONST.REG_EXP.EXTRACT_EMAIL).map((str, index) => {
-                if (COMMON_CONST.REG_EXP.EMAIL.test(str)) {
-                    return (
-                        <TextLink
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${index}-${str}`}
-                            href={`mailto:${str}`}
-                            style={styles.link}
-                        >
-                            {str}
-                        </TextLink>
-                    );
+            {matches.flatMap((match, index) => {
+                const email = match[0];
+                const startIndex = match.index ?? 0;
+                const elements = [];
+
+                // Push plain text before email
+                if (startIndex > lastIndex) {
+                    elements.push(text.slice(lastIndex, startIndex));
                 }
 
-                return (
-                    <Text
-                        style={style}
+                // Push email as a link
+                elements.push(
+                    <TextLink
                         // eslint-disable-next-line react/no-array-index-key
-                        key={`${index}-${str}`}
+                        key={`email-${index}`}
+                        href={`mailto:${email}`}
+                        style={styles.link}
                     >
-                        {str}
-                    </Text>
+                        {email}
+                    </TextLink>,
                 );
+
+                lastIndex = startIndex + email.length;
+                return elements;
             })}
+            {lastIndex < text.length && text.slice(lastIndex)}
         </Text>
     );
 }

src/components/Form/FormProvider.tsx

@@ -73,6 +73,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
     /** Whether HTML is allowed in form inputs */
     allowHTML?: boolean;
 
+    /** Whether to render the submit button above the footer. */
+    shouldRenderFooterAboveSubmit?: boolean;
+
     /** Whether the form is loading */
     isLoading?: boolean;
 
@@ -98,13 +101,14 @@ function FormProvider(
         shouldTrimValues = true,
         allowHTML = false,
         isLoading = false,
+        shouldRenderFooterAboveSubmit = false,
         ...rest
     }: FormProviderProps,
     forwardedRef: ForwardedRef<FormRef>,
 ) {
-    const [network] = useOnyx(ONYXKEYS.NETWORK);
-    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`);
-    const [draftValues] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`);
+    const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true});
+    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`, {canBeMissing: true});
+    const [draftValues] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`, {canBeMissing: true});
     const {preferredLocale, translate} = useLocalize();
     const inputRefs = useRef<InputRefs>({});
     const touchedInputs = useRef<Record<string, boolean>>({});
@@ -432,6 +436,7 @@ function FormProvider(
                 errors={errors}
                 isLoading={isLoading}
                 enabledWhenOffline={enabledWhenOffline}
+                shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
             >
                 {typeof children === 'function' ? children({inputValues}) : children}
             </FormWrapper>

src/components/Form/FormWrapper.tsx

@@ -38,6 +38,9 @@ type FormWrapperProps = ChildrenProps &
         /** Callback to submit the form */
         onSubmit: () => void;
 
+        /** should render the extra button above submit button */
+        shouldRenderFooterAboveSubmit?: boolean;
+
         /** Whether the form is loading */
         isLoading?: boolean;
 
@@ -76,6 +79,7 @@ function FormWrapper({
     shouldHideFixErrorsAlert = false,
     disablePressOnEnter = false,
     isSubmitDisabled = false,
+    shouldRenderFooterAboveSubmit = false,
     isLoading = false,
     shouldScrollToEnd = false,
     addBottomSafeAreaPadding,
@@ -87,7 +91,7 @@ function FormWrapper({
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
 
-    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`);
+    const [formState] = useOnyx<OnyxFormKey, Form>(`${formID}`, {canBeMissing: true});
 
     const errorMessage = useMemo(() => (formState ? getLatestErrorMessage(formState) : undefined), [formState]);
 
@@ -168,6 +172,7 @@ function FormWrapper({
                     isSubmitActionDangerous={isSubmitActionDangerous}
                     disablePressOnEnter={disablePressOnEnter}
                     enterKeyEventListenerPriority={1}
+                    shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit}
                     shouldBlendOpacity={shouldSubmitButtonBlendOpacity}
                 />
             ),
@@ -196,6 +201,7 @@ function FormWrapper({
             submitButtonStylesWithBottomSafeAreaPadding,
             submitButtonText,
             submitFlexEnabled,
+            shouldRenderFooterAboveSubmit,
         ],
     );
 

src/components/Form/types.ts

@@ -164,6 +164,8 @@ type FormProps<TFormID extends OnyxFormKey = OnyxFormKey> = {
     /** Disable press on enter for submit button */
     disablePressOnEnter?: boolean;
 
+    /** Render extra button above submit button */
+    shouldRenderFooterAboveSubmit?: boolean;
     /**
      * Determines whether the form should automatically scroll to the end upon rendering or when the value changes.
      * If `true`, the form will smoothly scroll to the bottom after interactions have completed.

src/components/FormAlertWithSubmitButton.tsx

@@ -63,6 +63,9 @@ type FormAlertWithSubmitButtonProps = {
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;
 
+    /** should render the extra button above submit button */
+    shouldRenderFooterAboveSubmit?: boolean;
+
     /**
      * Whether the button should have a background layer in the color of theme.appBG.
      * This is needed for buttons that allow content to display under them.
@@ -92,6 +95,7 @@ function FormAlertWithSubmitButton({
     useSmallerSubmitButtonSize = false,
     errorMessageStyle,
     enterKeyEventListenerPriority = 0,
+    shouldRenderFooterAboveSubmit = false,
     shouldBlendOpacity = false,
     addButtonBottomPadding = true,
 }: FormAlertWithSubmitButtonProps) {
@@ -115,6 +119,7 @@ function FormAlertWithSubmitButton({
         >
             {(isOffline: boolean | undefined) => (
                 <View>
+                    {shouldRenderFooterAboveSubmit && footerContent}
                     {isOffline && !enabledWhenOffline ? (
                         <Button
                             success
@@ -143,7 +148,7 @@ function FormAlertWithSubmitButton({
                             large={!useSmallerSubmitButtonSize}
                         />
                     )}
-                    {footerContent}
+                    {!shouldRenderFooterAboveSubmit && footerContent}
                 </View>
             )}
         </FormAlertWrapper>

src/components/ValidateCodeActionForm/type.ts

@@ -33,6 +33,12 @@ type ValidateCodeActionFormProps = {
     /** Ref for validate code form */
     forwardedRef: ForwardedRef<ValidateCodeFormHandle>;
 
+    /** Whether to show the skip button */
+    shouldShowSkipButton?: boolean;
+
+    /** Function to call when the skip button is pressed */
+    handleSkipButtonPress?: () => void;
+
     /** Text for submit button */
     submitButtonText?: string;