Merge pull request #51648 from callstack-internal/feat/50901-GR-step-…

…5-director-information-screen

[GR Phase 2] Step 5 Director information screen (without API calls) - implementation

src/CONST.ts

@@ -621,6 +621,14 @@ const CONST = {
         },
         STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
         STEP_HEADER_HEIGHT: 40,
+        SIGNER_INFO_STEP: {
+            SUBSTEP: {
+                IS_DIRECTOR: 1,
+                ENTER_EMAIL: 2,
+                SIGNER_DETAILS_FORM: 3,
+                HANG_TIGHT: 4,
+            },
+        },
     },
     INCORPORATION_TYPES: {
         LLC: 'LLC',

src/components/Icon/Illustrations.ts

@@ -114,6 +114,7 @@ import PalmTree from '@assets/images/simple-illustrations/simple-illustration__p
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
 import PerDiem from '@assets/images/simple-illustrations/simple-illustration__perdiem.svg';
 import PiggyBank from '@assets/images/simple-illustrations/simple-illustration__piggybank.svg';
+import Pillow from '@assets/images/simple-illustrations/simple-illustration__pillow.svg';
 import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
 import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
 import ReceiptEnvelope from '@assets/images/simple-illustrations/simple-illustration__receipt-envelope.svg';
@@ -234,6 +235,7 @@ export {
     ExpensifyCardIllustration,
     SplitBill,
     PiggyBank,
+    Pillow,
     Accounting,
     Car,
     Coins,

src/components/RadioButton.tsx

@@ -41,8 +41,8 @@ function RadioButton({isChecked, onPress, accessibilityLabel, hasError = false,
                 <Icon
                     src={Expensicons.Checkmark}
                     fill={theme.checkBox}
-                    height={14}
-                    width={14}
+                    height={20}
+                    width={20}
                 />
             )}
         </PressableWithFeedback>

src/components/SubStepForms/DateOfBirthStep.tsx

@@ -9,7 +9,6 @@ import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import CONST from '@src/CONST';
 import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
 
@@ -35,8 +34,8 @@ type DateOfBirthStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStep
     /** The default value for the date of birth input */
     dobDefaultValue: string;
 
-    /** Whether the component should show help links */
-    shouldShowHelpLinks?: boolean;
+    /** Optional footer component */
+    footerComponent?: React.ReactNode;
 };
 
 function DateOfBirthStep<TFormID extends keyof OnyxFormValuesMapping>({
@@ -48,7 +47,7 @@ function DateOfBirthStep<TFormID extends keyof OnyxFormValuesMapping>({
     dobInputID,
     dobDefaultValue,
     isEditing,
-    shouldShowHelpLinks = true,
+    footerComponent,
 }: DateOfBirthStepProps<TFormID>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -96,7 +95,7 @@ function DateOfBirthStep<TFormID extends keyof OnyxFormValuesMapping>({
                 maxDate={maxDate}
                 shouldSaveDraft={!isEditing}
             />
-            {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt5]} />}
+            {footerComponent}
         </FormProvider>
     );
 }

src/components/SubStepForms/SingleFieldStep.tsx

@@ -75,7 +75,7 @@ function SingleFieldStep<TFormID extends keyof OnyxFormValuesMapping>({
             submitButtonStyles={[styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{formTitle}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL]}>{formTitle}</Text>
                 {!!formDisclaimer && <Text style={[styles.textSupporting]}>{formDisclaimer}</Text>}
                 <View style={[styles.flex1]}>
                     <InputWrapper
@@ -89,6 +89,7 @@ function SingleFieldStep<TFormID extends keyof OnyxFormValuesMapping>({
                         defaultValue={defaultValue}
                         maxLength={maxLength}
                         shouldSaveDraft={!isEditing}
+                        autoFocus
                     />
                 </View>
                 {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt5]} />}

src/components/SubStepForms/YesNoStep.tsx

@@ -0,0 +1,73 @@
+import React, {useMemo, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import type {Choice} from '@components/RadioButtons';
+import RadioButtons from '@components/RadioButtons';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type YesNoStepProps = {
+    /** The title of the question */
+    title: string;
+
+    /** The description of the question */
+    description: string;
+
+    /** The default value of the radio button */
+    defaultValue: boolean;
+
+    /** Callback when the value is selected */
+    onSelectedValue: (value: boolean) => void;
+
+    /** The style of the submit button */
+    submitButtonStyles?: StyleProp<ViewStyle>;
+};
+
+function YesNoStep({title, description, defaultValue, onSelectedValue, submitButtonStyles}: YesNoStepProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const [value, setValue] = useState(defaultValue);
+
+    const handleSubmit = () => {
+        onSelectedValue(value);
+    };
+    const handleSelectValue = (newValue: string) => setValue(newValue === 'true');
+    const options = useMemo<Choice[]>(
+        () => [
+            {
+                label: translate('common.yes'),
+                value: 'true',
+            },
+            {
+                label: translate('common.no'),
+                value: 'false',
+            },
+        ],
+        [translate],
+    );
+
+    return (
+        <FormProvider
+            formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+            submitButtonText={translate('common.confirm')}
+            onSubmit={handleSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+            submitButtonStyles={submitButtonStyles}
+        >
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{title}</Text>
+            <Text style={[styles.pv3, styles.textSupporting]}>{description}</Text>
+            <RadioButtons
+                items={options}
+                onPress={handleSelectValue}
+                defaultCheckedValue={defaultValue.toString()}
+                radioButtonStyle={[styles.mb6]}
+            />
+        </FormProvider>
+    );
+}
+
+YesNoStep.displayName = 'YesNoStep';
+
+export default YesNoStep;

src/languages/en.ts

@@ -41,6 +41,7 @@ import type {
     CharacterLimitParams,
     CompanyCardBankName,
     CompanyCardFeedNameParams,
+    CompanyNameParams,
     ConfirmThatParams,
     ConnectionNameParams,
     ConnectionParams,
@@ -1929,6 +1930,7 @@ const translations = {
             website: 'Please enter a valid website.',
             zipCode: `Please enter a valid ZIP code using the format: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}.`,
             phoneNumber: 'Please enter a valid phone number.',
+            email: 'Please enter a valid email address.',
             companyName: 'Please enter a valid business name.',
             addressCity: 'Please enter a valid city.',
             addressStreet: 'Please enter a valid street address.',
@@ -1950,6 +1952,7 @@ const translations = {
             lastName: 'Please enter a valid last name.',
             noDefaultDepositAccountOrDebitCardAvailable: 'Please add a default deposit account or debit card.',
             validationAmounts: 'The validation amounts you entered are incorrect. Please double check your bank statement and try again.',
+            fullName: 'Please enter a valid full name.',
         },
     },
     addPersonalBankAccountPage: {
@@ -2303,6 +2306,26 @@ const translations = {
     },
     signerInfoStep: {
         signerInfo: 'Signer info',
+        areYouDirector: ({companyName}: CompanyNameParams) => `Are you a director or senior officer at ${companyName}?`,
+        regulationRequiresUs: 'Regulation requires us to verify if the signer has the authority to take this action on behalf of the business.',
+        whatsYourName: "What's your legal name",
+        fullName: 'Legal full name',
+        whatsYourJobTitle: "What's your job title?",
+        jobTitle: 'Job title',
+        whatsYourDOB: "What's your date of birth?",
+        uploadID: 'Upload ID and proof of address',
+        id: "ID (driver's license or passport)",
+        personalAddress: 'Proof of personal address (e.g. utility bill)',
+        letsDoubleCheck: 'Let’s double check that everything looks right.',
+        legalName: 'Legal name',
+        proofOf: 'Proof of personal address',
+        enterOneEmail: 'Enter the email of director or senior officer at',
+        regulationRequiresOneMoreDirector: 'Regulation requires one more director or senior officer as a signer.',
+        hangTight: 'Hang tight...',
+        enterTwoEmails: 'Enter the emails of two directors or senior officers at',
+        sendReminder: 'Send a reminder',
+        chooseFile: 'Choose file',
+        weAreWaiting: "We're waiting for others to verify their identities as directors or senior officers of the business.",
     },
     agreementsStep: {
         agreements: 'Agreements',

src/languages/es.ts

@@ -40,6 +40,7 @@ import type {
     CharacterLimitParams,
     CompanyCardBankName,
     CompanyCardFeedNameParams,
+    CompanyNameParams,
     ConfirmThatParams,
     ConnectionNameParams,
     ConnectionParams,
@@ -1950,6 +1951,7 @@ const translations = {
             website: 'Por favor, introduce un sitio web válido.',
             zipCode: `Formato de código postal incorrecto. Formato aceptable: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}.`,
             phoneNumber: 'Por favor, introduce un teléfono válido.',
+            email: 'Por favor, introduce una dirección de correo electrónico válida.',
             companyName: 'Por favor, introduce un nombre comercial legal válido.',
             addressCity: 'Por favor, introduce una ciudad válida.',
             addressStreet: 'Por favor, introduce una dirección válida que no sea un apartado postal.',
@@ -1972,6 +1974,7 @@ const translations = {
             lastName: 'Por favor, introduce los apellidos.',
             noDefaultDepositAccountOrDebitCardAvailable: 'Por favor, añade una cuenta bancaria para depósitos o una tarjeta de débito.',
             validationAmounts: 'Los importes de validación que introduciste son incorrectos. Por favor, comprueba tu cuenta bancaria e inténtalo de nuevo.',
+            fullName: 'Please enter a valid full name.',
         },
     },
     addPersonalBankAccountPage: {
@@ -2328,6 +2331,26 @@ const translations = {
     },
     signerInfoStep: {
         signerInfo: 'Información del firmante',
+        areYouDirector: ({companyName}: CompanyNameParams) => `¿Es usted director o alto funcionario de ${companyName}?`,
+        regulationRequiresUs: 'La regulación requiere que verifiquemos si el firmante tiene la autoridad para realizar esta acción en nombre de la empresa.',
+        whatsYourName: '¿Cuál es tu nombre legal?',
+        fullName: 'Nombre legal completo',
+        whatsYourJobTitle: '¿Cuál es tu puesto de trabajo?',
+        jobTitle: 'Título profesional',
+        whatsYourDOB: '¿Cual es tu fecha de nacimiento?',
+        uploadID: 'Subir documento de identidad y prueba de domicilio',
+        id: 'Identificación (licencia de conducir o pasaporte)',
+        personalAddress: 'Prueba de domicilio personal (por ejemplo, factura de servicios públicos)',
+        letsDoubleCheck: 'Vamos a comprobar que todo está bien.',
+        legalName: 'Nombre legal',
+        proofOf: 'Comprobante de domicilio personal',
+        enterOneEmail: 'Introduce el correo electrónico del director o alto funcionario en',
+        regulationRequiresOneMoreDirector: 'El reglamento exige que haya otro director o funcionario superior como firmante.',
+        hangTight: 'Espera un momento...',
+        enterTwoEmails: 'Introduce los correos electrónicos de dos directores o altos funcionarios en',
+        sendReminder: 'Enviar un recordatorio',
+        chooseFile: 'Seleccionar archivo',
+        weAreWaiting: 'Estamos esperando que otros verifiquen sus identidades como directores o altos funcionarios de la empresa.',
     },
     agreementsStep: {
         agreements: 'Acuerdos',

src/languages/params.ts

@@ -555,6 +555,10 @@ type CurrencyCodeParams = {
     currencyCode: string;
 };
 
+type CompanyNameParams = {
+    companyName: string;
+};
+
 export type {
     AuthenticationErrorParams,
     ImportMembersSuccessfullDescriptionParams,
@@ -756,4 +760,5 @@ export type {
     AssignCardParams,
     ImportedTypesParams,
     CurrencyCodeParams,
+    CompanyNameParams,
 };

src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx

@@ -28,7 +28,6 @@ function DateOfBirth({isEditing, onNext, onMove, personalDetailsValues}: CustomS
             stepFields={STEP_FIELDS}
             dobInputID={INPUT_IDS.DATE_OF_BIRTH}
             dobDefaultValue={personalDetailsValues[INPUT_IDS.DATE_OF_BIRTH]}
-            shouldShowHelpLinks={false}
         />
     );
 }