Feature/20459 sub steps refactor

src/components/InteractiveStepWrapper.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -24,21 +25,55 @@ type InteractiveStepWrapperProps = {
 
     // Array of step names
     stepNames?: readonly string[];
+
+    // Should enable max height
+    shouldEnableMaxHeight?: boolean;
+
+    // Should show offline indicator
+    shouldShowOfflineIndicator?: boolean;
+
+    // Should enable picker avoiding
+    shouldEnablePickerAvoiding?: boolean;
+
+    // Call task ID for the guides
+    guidesCallTaskID?: string;
+
+    // Offline indicator style
+    offlineIndicatorStyle?: StyleProp<ViewStyle>;
 };
 
-function InteractiveStepWrapper({children, wrapperID, handleBackButtonPress, headerTitle, startStepIndex, stepNames}: InteractiveStepWrapperProps) {
+function InteractiveStepWrapper(
+    {
+        children,
+        wrapperID,
+        handleBackButtonPress,
+        headerTitle,
+        startStepIndex,
+        stepNames,
+        shouldEnableMaxHeight,
+        shouldShowOfflineIndicator,
+        shouldEnablePickerAvoiding = false,
+        guidesCallTaskID,
+        offlineIndicatorStyle,
+    }: InteractiveStepWrapperProps,
+    ref: React.ForwardedRef<View>,
+) {
     const styles = useThemeStyles();
 
     return (
         <ScreenWrapper
+            ref={ref}
             testID={wrapperID}
             includeSafeAreaPaddingBottom={false}
-            shouldEnablePickerAvoiding={false}
-            shouldEnableMaxHeight
+            shouldEnablePickerAvoiding={shouldEnablePickerAvoiding}
+            shouldEnableMaxHeight={shouldEnableMaxHeight}
+            shouldShowOfflineIndicator={shouldShowOfflineIndicator}
+            offlineIndicatorStyle={offlineIndicatorStyle}
         >
             <HeaderWithBackButton
                 title={headerTitle}
                 onBackButtonPress={handleBackButtonPress}
+                guidesCallTaskID={guidesCallTaskID}
             />
             {stepNames && (
                 <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
@@ -55,4 +90,4 @@ function InteractiveStepWrapper({children, wrapperID, handleBackButtonPress, hea
 
 InteractiveStepWrapper.displayName = 'InteractiveStepWrapper';
 
-export default InteractiveStepWrapper;
+export default forwardRef(InteractiveStepWrapper);

src/components/SubStepForms/AddressStep.tsx

@@ -0,0 +1,111 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import type {FormInputErrors, FormOnyxKeys, FormOnyxValues, FormValue} from '@components/Form/types';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
+import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
+
+type AddressValues = {
+    street: string;
+    city: string;
+    state: string;
+    zipCode: string;
+};
+
+type AddressStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProps & {
+    /** The ID of the form */
+    formID: TFormID;
+
+    /** The title of the form */
+    formTitle: string;
+
+    /** The disclaimer informing that PO box is not allowed */
+    formPOBoxDisclaimer?: string;
+
+    /** The validation function to call when the form is submitted */
+    customValidate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+
+    /** A function to call when the form is submitted */
+    onSubmit: (values: FormOnyxValues<TFormID>) => void;
+
+    /** Fields list of the form */
+    stepFields: Array<FormOnyxKeys<TFormID>>;
+
+    /* The IDs of the input fields */
+    inputFieldsIDs: AddressValues;
+
+    /** The default values for the form */
+    defaultValues: AddressValues;
+
+    /** Should show help links */
+    shouldShowHelpLinks?: boolean;
+};
+
+function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
+    formID,
+    formTitle,
+    formPOBoxDisclaimer,
+    customValidate,
+    onSubmit,
+    stepFields,
+    inputFieldsIDs,
+    defaultValues,
+    shouldShowHelpLinks,
+    isEditing,
+}: AddressStepProps<TFormID>) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const validate = useCallback(
+        (values: FormOnyxValues<TFormID>): FormInputErrors<TFormID> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
+
+            const street = values[inputFieldsIDs.street as keyof typeof values];
+            if (street && !ValidationUtils.isValidAddress(street as FormValue)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[inputFieldsIDs.street] = translate('bankAccount.error.addressStreet');
+            }
+
+            const zipCode = values[inputFieldsIDs.zipCode as keyof typeof values];
+            if (zipCode && !ValidationUtils.isValidZipCode(zipCode as string)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[inputFieldsIDs.zipCode] = translate('bankAccount.error.zipCode');
+            }
+
+            return errors;
+        },
+        [inputFieldsIDs.street, inputFieldsIDs.zipCode, stepFields, translate],
+    );
+
+    return (
+        <FormProvider
+            formID={formID}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            validate={customValidate ?? validate}
+            onSubmit={onSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+        >
+            <View>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{formTitle}</Text>
+                {formPOBoxDisclaimer && <Text style={[styles.textSupporting]}>{formPOBoxDisclaimer}</Text>}
+                <AddressFormFields
+                    inputKeys={inputFieldsIDs}
+                    streetTranslationKey="common.streetAddress"
+                    defaultValues={defaultValues}
+                    shouldSaveDraft={!isEditing}
+                />
+                {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt6]} />}
+            </View>
+        </FormProvider>
+    );
+}
+
+AddressStep.displayName = 'AddressStep';
+
+export default AddressStep;

src/components/SubStepForms/ConfirmationStep.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import DotIndicatorMessage from '@components/DotIndicatorMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type SummaryItem = {
+    description: string;
+    title: string;
+    shouldShowRightIcon: boolean;
+    onPress: () => void;
+};
+
+type ConfirmationStepProps = SubStepProps & {
+    /** The title of the step */
+    pageTitle: string;
+
+    /** The summary items to display */
+    summaryItems: SummaryItem[];
+
+    /** Whether show additional section with Onfido terms etc. */
+    showOnfidoLinks: boolean;
+
+    /** The title of the Onfido section */
+    onfidoLinksTitle?: string;
+
+    /** Whether the data is loading */
+    isLoading?: boolean;
+
+    /** The error message to display */
+    error?: string;
+};
+
+function ConfirmationStep({pageTitle, summaryItems, showOnfidoLinks, onfidoLinksTitle, isLoading, error, onNext}: ConfirmationStepProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+
+    return (
+        <SafeAreaConsumer>
+            {({safeAreaPaddingBottomStyle}) => (
+                <ScrollView
+                    style={styles.pt0}
+                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
+                >
+                    <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{pageTitle}</Text>
+                    {summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
+                        <MenuItemWithTopDescription
+                            key={`${title}_${description}`}
+                            description={description}
+                            title={title}
+                            shouldShowRightIcon={shouldShowRightIcon}
+                            onPress={onPress}
+                        />
+                    ))}
+
+                    {showOnfidoLinks && (
+                        <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
+                            {onfidoLinksTitle}
+                            <TextLink
+                                href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('onfidoStep.facialScan')}
+                            </TextLink>
+                            {', '}
+                            <TextLink
+                                href={CONST.ONFIDO_PRIVACY_POLICY_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('common.privacy')}
+                            </TextLink>
+                            {` ${translate('common.and')} `}
+                            <TextLink
+                                href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('common.termsOfService')}
+                            </TextLink>
+                        </Text>
+                    )}
+
+                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                        {error && error.length > 0 && (
+                            <DotIndicatorMessage
+                                textStyles={[styles.formError]}
+                                type="error"
+                                messages={{error}}
+                            />
+                        )}
+                        <Button
+                            isDisabled={isOffline}
+                            success
+                            large
+                            isLoading={isLoading}
+                            style={[styles.w100]}
+                            onPress={onNext}
+                            text={translate('common.confirm')}
+                        />
+                    </View>
+                </ScrollView>
+            )}
+        </SafeAreaConsumer>
+    );
+}
+
+ConfirmationStep.displayName = 'ConfirmationStep';
+
+export default ConfirmationStep;