feat: draft values

src/CONST.ts

@@ -384,8 +384,8 @@ const CONST = {
                 OWNERSHIP_CHART: 5,
                 OWNERS_LIST: 6,
             },
-            BENEFICIAL_OWNER_DATA: {
-                BENEFICIAL_OWNER_KEYS: 'ownerKeys',
+            OWNER_DATA: {
+                OWNER_KEYS: 'ownerKeys',
                 PREFIX: 'owner',
                 FIRST_NAME: 'firstName',
                 LAST_NAME: 'lastName',
@@ -407,6 +407,8 @@ const CONST = {
                 HANG_TIGHT: 4,
             },
         },
+        ALLOWED_FILE_TYPES: ['pdf', 'jpg', 'jpeg', 'png'],
+        MAX_FILE_SIZE_MB: 5,
     },
     INCORPORATION_TYPES: {
         LLC: 'LLC',

src/components/Form/types.ts

@@ -12,6 +12,7 @@ import type CurrencySelector from '@components/CurrencySelector';
 import type DatePicker from '@components/DatePicker';
 import type EmojiPickerButtonDropdown from '@components/EmojiPicker/EmojiPickerButtonDropdown';
 import type Picker from '@components/Picker';
+import type PushRowWithModal from '@components/PushRowWithModal';
 import type RadioButtons from '@components/RadioButtons';
 import type RoomNameInput from '@components/RoomNameInput';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
@@ -55,7 +56,8 @@ type ValidInputs =
     | typeof EmojiPickerButtonDropdown
     | typeof NetSuiteCustomListPicker
     | typeof NetSuiteCustomFieldMappingPicker
-    | typeof NetSuiteMenuWithTopDescriptionForm;
+    | typeof NetSuiteMenuWithTopDescriptionForm
+    | typeof PushRowWithModal;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country' | 'reportFields' | 'disabledListValues';
 type ValueTypeMap = {

src/components/Icon/Illustrations.ts

@@ -82,6 +82,7 @@ import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__o
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.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';
@@ -199,6 +200,7 @@ export {
     Car,
     Coins,
     Pencil,
+    Pillow,
     Tag,
     CarIce,
     ReceiptLocationMarker,

src/components/PushRowWithModal/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import CONST from '@src/CONST';
 import PushRowModal from './PushRowModal';
 
 type PushRowWithModalProps = {
@@ -27,9 +28,26 @@ type PushRowWithModalProps = {
 
     /** Whether the selected option is editable */
     shouldAllowChange?: boolean;
+
+    /** Text to display on error message */
+    errorText?: string;
+
+    /** Function called whenever option changes */
+    onInputChange?: (value: string) => void;
 };
 
-function PushRowWithModal({selectedOption, onOptionChange, optionsList, wrapperStyles, description, modalHeaderTitle, searchInputTitle, shouldAllowChange = true}: PushRowWithModalProps) {
+function PushRowWithModal({
+    selectedOption,
+    onOptionChange,
+    optionsList,
+    wrapperStyles,
+    description,
+    modalHeaderTitle,
+    searchInputTitle,
+    shouldAllowChange = true,
+    errorText,
+    onInputChange = () => {},
+}: PushRowWithModalProps) {
     const [isModalVisible, setIsModalVisible] = useState(false);
 
     const handleModalClose = () => {
@@ -40,20 +58,27 @@ function PushRowWithModal({selectedOption, onOptionChange, optionsList, wrapperS
         setIsModalVisible(true);
     };
 
+    const handleOptionChange = (value: string) => {
+        onOptionChange(value);
+        onInputChange(value);
+    };
+
     return (
         <>
             <MenuItemWithTopDescription
                 description={description}
                 title={optionsList[selectedOption]}
-                shouldShowRightIcon
+                shouldShowRightIcon={shouldAllowChange}
                 onPress={handleModalOpen}
                 wrapperStyle={wrapperStyles}
                 interactive={shouldAllowChange}
+                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                errorText={errorText}
             />
             <PushRowModal
                 isVisible={isModalVisible}
                 selectedOption={selectedOption}
-                onOptionChange={onOptionChange}
+                onOptionChange={handleOptionChange}
                 onClose={handleModalClose}
                 optionsList={optionsList}
                 headerTitle={modalHeaderTitle}

src/components/UploadFile.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {FileObject} from './AttachmentModal';
+import AttachmentPicker from './AttachmentPicker';
+import Button from './Button';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import {PressableWithFeedback} from './Pressable';
+import Text from './Text';
+
+type UploadFileProps = {
+    /** Text displayed on button when no file is uploaded */
+    buttonText: string;
+
+    /** Name of currently uploaded file */
+    uploadedFileName: string;
+
+    /** Handler that fires when file is selected for upload */
+    onUpload: (fileURL: string) => void;
+
+    /** Handler that fires when file is removed */
+    onRemove: () => void;
+
+    /** Array containing accepted file types */
+    acceptedFileTypes: Array<ValueOf<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>>;
+
+    /** Max file size in MB */
+    maxFileSize: number;
+
+    /** Styles to be assigned to Container */
+    style?: StyleProp<ViewStyle>;
+};
+
+function UploadFile({buttonText, uploadedFileName, onUpload, onRemove, acceptedFileTypes, maxFileSize, style}: UploadFileProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const handleFileUpload = (file: FileObject) => {
+        onUpload(file?.name ?? '');
+    };
+
+    return (
+        <View style={[styles.alignItemsStart, style]}>
+            {uploadedFileName !== '' ? (
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.border, styles.p4]}>
+                    <Icon
+                        height={20}
+                        width={14}
+                        src={Expensicons.Paperclip}
+                        fill={theme.textSupporting}
+                    />
+                    <Text style={[styles.ml4, styles.mr3, styles.textBold]}>{uploadedFileName}</Text>
+                    <PressableWithFeedback
+                        onPress={onRemove}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={translate('common.remove')}
+                    >
+                        <Icon
+                            height={16}
+                            width={16}
+                            src={Expensicons.Close}
+                            fill={theme.textSupporting}
+                        />
+                    </PressableWithFeedback>
+                </View>
+            ) : (
+                <AttachmentPicker acceptedFileTypes={acceptedFileTypes}>
+                    {({openPicker}) => (
+                        <Button
+                            medium
+                            style={[styles.mb6]}
+                            text={buttonText}
+                            accessibilityLabel={buttonText}
+                            onPress={() => {
+                                openPicker({
+                                    onPicked: handleFileUpload,
+                                });
+                            }}
+                        />
+                    )}
+                </AttachmentPicker>
+            )}
+        </View>
+    );
+}
+
+UploadFile.displayName = 'UploadFile';
+
+export default UploadFile;

src/hooks/useNonUSDReimbursementAccountStepFormSubmit.ts

@@ -11,7 +11,7 @@ type UseNonUSDReimbursementAccountStepFormSubmitParams = Pick<SubStepProps, 'onN
 };
 
 /**
- * Hook for handling submit method in ReimbursementAccount substeps.
+ * Hook for handling submit method in NonUSDReimbursementAccount sub steps.
  * When user is in editing mode, we should save values only when user confirms the change
  * @param onNext - callback
  * @param fieldIds - field IDs for particular step

src/hooks/useStepFormSubmit.ts

@@ -29,7 +29,6 @@ export default function useStepFormSubmit<T extends keyof OnyxFormValuesMapping>
                     return acc;
                 }, {} as Record<TupleToUnion<typeof fieldIds>, OnyxValues[T][Exclude<keyof OnyxValues[T], keyof BaseForm>]>);
 
-                console.log(stepValues);
                 FormActions.setDraftValues(formId, stepValues);
             }
 

src/languages/en.ts

@@ -2116,8 +2116,8 @@ export default {
         ownerInfo: 'Owner info',
         businessOwner: 'Business owner',
         signerInfo: 'Signer info',
-        doYouOwn: 'Do you own 25% or more of ',
-        doesAnyoneOwn: 'Does any individuals own 25% or more of ',
+        doYouOwn: ({companyName}) => `Do you own 25% or more of ${companyName}`,
+        doesAnyoneOwn: ({companyName}) => `Does any individuals own 25% or more of ${companyName}`,
         regulationsRequire: 'Regulations require us to verify the identity of any individual who owns more than 25% of the business.',
         legalFirstName: 'Legal first name',
         legalLastName: 'Legal last name',
@@ -2138,7 +2138,7 @@ export default {
         letsDoubleCheck: 'Let’s double check that everything looks right.',
         legalName: 'Legal name',
         ownershipPercentage: 'Ownership percentage',
-        areThereOther: 'Are there other individuals who own 25% or more of ',
+        areThereOther: ({companyName}) => `Are there other individuals who own 25% or more of ${companyName}`,
         owners: 'Owners',
         addCertified: 'Add a certified org chart that shows the beneficial owners',
         regulationRequiresChart: 'Regulation requires us to collect a certified copy of the ownership chart that shows every individual or entity who owns 25% or more of the business.',
@@ -2171,6 +2171,7 @@ export default {
         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: {
         pleaseConfirm: 'Please confirm the agreements below',