Added new flow for missing personal details

src/CONST.ts

@@ -1818,6 +1818,15 @@ const CONST = {
         VENDOR_BILL: 'bill',
     },
 
+    MISSING_PERSONAL_DETAILS_INDEXES: {
+        MAPPING: {
+            LEGAL_NAME: 0,
+            ADDRESS: 1,
+            PHONE_NUMBER: 2,
+        },
+        INDEX_LIST: ['1', '2', '3'],
+    },
+
     ACCOUNT_ID: {
         ACCOUNTING: Number(Config?.EXPENSIFY_ACCOUNT_ID_ACCOUNTING ?? 9645353),
         ADMIN: Number(Config?.EXPENSIFY_ACCOUNT_ID_ADMIN ?? -1),

src/ONYXKEYS.ts

@@ -545,6 +545,8 @@ const ONYXKEYS = {
         DATE_OF_BIRTH_FORM_DRAFT: 'dateOfBirthFormDraft',
         HOME_ADDRESS_FORM: 'homeAddressForm',
         HOME_ADDRESS_FORM_DRAFT: 'homeAddressFormDraft',
+        PERSONAL_DETAILS_FORM: 'personalDetailsForm',
+        PERSONAL_DETAILS_FORM_DRAFT: 'personalDetailsFormDraft',
         NEW_ROOM_FORM: 'newRoomForm',
         NEW_ROOM_FORM_DRAFT: 'newRoomFormDraft',
         ROOM_SETTINGS_FORM: 'roomSettingsForm',
@@ -688,6 +690,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM]: FormTypes.WorkspaceInviteMessageForm;
     [ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM]: FormTypes.DateOfBirthForm;
     [ONYXKEYS.FORMS.HOME_ADDRESS_FORM]: FormTypes.HomeAddressForm;
+    [ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM]: FormTypes.PersonalDetailsForm;
     [ONYXKEYS.FORMS.NEW_ROOM_FORM]: FormTypes.NewRoomForm;
     [ONYXKEYS.FORMS.ROOM_SETTINGS_FORM]: FormTypes.RoomSettingsForm;
     [ONYXKEYS.FORMS.NEW_TASK_FORM]: FormTypes.NewTaskForm;

src/ROUTES.ts

@@ -1197,6 +1197,7 @@ const ROUTES = {
         route: 'restricted-action/workspace/:policyID',
         getRoute: (policyID: string) => `restricted-action/workspace/${policyID}` as const,
     },
+    MISSING_PERSONAL_DETAILS: 'missing-personal-details',
     POLICY_ACCOUNTING_NETSUITE_SUBSIDIARY_SELECTOR: {
         route: 'settings/workspaces/:policyID/accounting/netsuite/subsidiary-selector',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/netsuite/subsidiary-selector` as const,

src/SCREENS.ts

@@ -170,6 +170,7 @@ const SCREENS = {
         SETTINGS_CATEGORIES: 'SettingsCategories',
         RESTRICTED_ACTION: 'RestrictedAction',
         REPORT_EXPORT: 'Report_Export',
+        MISSING_PERSONAL_DETAILS: 'MissingPersonalDetails',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',
@@ -524,6 +525,7 @@ const SCREENS = {
     TRANSACTION_RECEIPT: 'TransactionReceipt',
     FEATURE_TRAINING_ROOT: 'FeatureTraining_Root',
     RESTRICTED_ACTION_ROOT: 'RestrictedAction_Root',
+    MISSING_PERSONAL_DETAILS_ROOT: 'MissingPersonalDetails_Root',
 } as const;
 
 type Screen = DeepValueOf<typeof SCREENS>;

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -0,0 +1,101 @@
+import React, {useMemo} from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import searchCountryOptions from '@libs/searchCountryOptions';
+import type {CountryData} from '@libs/searchCountryOptions';
+import StringUtils from '@libs/StringUtils';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+
+type CountrySelectorModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Function to call when the user closes the business type selector modal */
+    onClose: () => void;
+
+    /** Label to display on field */
+    label: string;
+
+    /** Country selected  */
+    currentCountry: string;
+
+    /** Function to call when the user selects a country */
+    onCountrySelected: (value: CountryData) => void;
+
+    /** Function to call when the user presses on the modal backdrop */
+    onBackdropPress?: () => void;
+};
+
+function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onClose, label, onBackdropPress}: CountrySelectorModalProps) {
+    const {translate} = useLocalize();
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+
+    const countries = useMemo(
+        () =>
+            Object.keys(CONST.ALL_COUNTRIES).map((countryISO) => {
+                const countryName = translate(`allCountries.${countryISO}` as TranslationPaths);
+                return {
+                    value: countryISO,
+                    keyForList: countryISO,
+                    text: countryName,
+                    isSelected: currentCountry === countryISO,
+                    searchValue: StringUtils.sanitizeString(`${countryISO}${countryName}`),
+                };
+            }),
+        [translate, currentCountry],
+    );
+
+    const searchResults = searchCountryOptions(debouncedSearchValue, countries);
+    const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
+
+    const styles = useThemeStyles();
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={onClose}
+            onModalHide={onClose}
+            hideModalContentWhileAnimating
+            useNativeDriver
+            onBackdropPress={onBackdropPress}
+        >
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+                testID={CountrySelectorModal.displayName}
+            >
+                <HeaderWithBackButton
+                    title={label}
+                    shouldShowBackButton
+                    onBackButtonPress={onClose}
+                />
+                <SelectionList
+                    headerMessage={headerMessage}
+                    sections={[{data: searchResults}]}
+                    textInputValue={searchValue}
+                    textInputLabel={translate('common.search')}
+                    onChangeText={setSearchValue}
+                    onSelectRow={onCountrySelected}
+                    ListItem={RadioListItem}
+                    initiallyFocusedOptionKey={currentCountry}
+                    shouldSingleExecuteRowSelect
+                    shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
+                />
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+CountrySelectorModal.displayName = 'CountrySelectorModal';
+
+export default CountrySelectorModal;

src/components/CountryPicker/index.tsx

@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import type {CountryData} from '@libs/searchCountryOptions';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import CountrySelectorModal from './CountrySelectorModal';
+
+type CountryPickerProps = {
+    /** Current value of the selected item */
+    value?: string;
+
+    /** Callback when the list item is selected */
+    onInputChange?: (value: string, key?: string) => void;
+
+    /** Form Error description */
+    errorText?: string;
+};
+
+function CountryPicker({value, errorText, onInputChange = () => {}}: CountryPickerProps) {
+    const {translate} = useLocalize();
+    const [isPickerVisible, setIsPickerVisible] = useState(false);
+
+    const hidePickerModal = () => {
+        setIsPickerVisible(false);
+    };
+
+    const updateInput = (item: CountryData) => {
+        onInputChange?.(item.value);
+        hidePickerModal();
+    };
+
+    return (
+        <>
+            <MenuItemWithTopDescription
+                shouldShowRightIcon
+                title={value ? translate(`allCountries.${value}` as TranslationPaths) : undefined}
+                description={translate('common.country')}
+                onPress={() => setIsPickerVisible(true)}
+                brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                errorText={errorText}
+            />
+            <CountrySelectorModal
+                isVisible={isPickerVisible}
+                currentCountry={value ?? ''}
+                onCountrySelected={updateInput}
+                onClose={hidePickerModal}
+                label={translate('common.country')}
+                onBackdropPress={Navigation.dismissModal}
+            />
+        </>
+    );
+}
+
+CountryPicker.displayName = 'CountryPicker';
+export default CountryPicker;

src/components/Form/types.ts

@@ -7,6 +7,7 @@ import type AmountForm from '@components/AmountForm';
 import type AmountPicker from '@components/AmountPicker';
 import type AmountTextInput from '@components/AmountTextInput';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
+import type CountryPicker from '@components/CountryPicker';
 import type CountrySelector from '@components/CountrySelector';
 import type CurrencySelector from '@components/CurrencySelector';
 import type DatePicker from '@components/DatePicker';
@@ -16,6 +17,7 @@ import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type RoomNameInput from '@components/RoomNameInput';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
+import type StatePicker from '@components/StatePicker';
 import type StateSelector from '@components/StateSelector';
 import type TextInput from '@components/TextInput';
 import type TextPicker from '@components/TextPicker';
@@ -57,7 +59,9 @@ type ValidInputs =
     | typeof EmojiPickerButtonDropdown
     | typeof NetSuiteCustomListPicker
     | typeof NetSuiteCustomFieldMappingPicker
-    | typeof NetSuiteMenuWithTopDescriptionForm;
+    | typeof NetSuiteMenuWithTopDescriptionForm
+    | typeof CountryPicker
+    | typeof StatePicker;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country' | 'reportFields' | 'disabledListValues';
 type ValueTypeMap = {

src/components/ReportActionItem/IssueCardMessage.tsx

@@ -31,7 +31,14 @@ function IssueCardMessage({action}: IssueCardMessageProps) {
     const assignee = `<mention-user accountID=${(action?.originalMessage as IssueNewCardOriginalMessage)?.assigneeAccountID}></mention-user>`;
     const link = `<a href='${environmentURL}/${ROUTES.SETTINGS_WALLET}'>${translate('cardPage.expensifyCard')}</a>`;
 
-    const noMailingAddress = action?.actionName === CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS && isEmptyObject(privatePersonalDetails?.address);
+    const missingDetails =
+        !privatePersonalDetails?.legalFirstName ||
+        !privatePersonalDetails?.legalLastName ||
+        !privatePersonalDetails?.phoneNumber ||
+        isEmptyObject(privatePersonalDetails?.addresses) ||
+        privatePersonalDetails.addresses.length === 0;
+
+    const shouldShowDetailsButton = action?.actionName === CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS && missingDetails;
 
     const getTranslation = () => {
         switch (action?.actionName) {
@@ -40,7 +47,7 @@ function IssueCardMessage({action}: IssueCardMessageProps) {
             case CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL:
                 return translate('workspace.expensifyCard.issuedCardVirtual', {assignee, link});
             case CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS:
-                return translate(`workspace.expensifyCard.${noMailingAddress ? 'issuedCardNoMailingAddress' : 'addedAddress'}`, assignee);
+                return translate(`workspace.expensifyCard.${shouldShowDetailsButton ? 'issuedCardNoPersonalDetails' : 'addedPersonalDetails'}`, assignee);
             default:
                 return '';
         }
@@ -49,13 +56,13 @@ function IssueCardMessage({action}: IssueCardMessageProps) {
     return (
         <>
             <RenderHTML html={`<muted-text>${getTranslation()}</muted-text>`} />
-            {noMailingAddress && (
+            {shouldShowDetailsButton && (
                 <Button
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_ADDRESS)}
+                    onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
                     success
                     medium
                     style={[styles.alignSelfStart, styles.mt3]}
-                    text={translate('workspace.expensifyCard.addMailingAddress')}
+                    text={translate('workspace.expensifyCard.addPersonalDetails')}
                 />
             )}
         </>

src/components/StatePicker/StateSelectorModal.tsx

@@ -0,0 +1,105 @@
+import {CONST as COMMON_CONST} from 'expensify-common';
+import React, {useMemo} from 'react';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import RadioListItem from '@components/SelectionList/RadioListItem';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import searchCountryOptions from '@libs/searchCountryOptions';
+import type {CountryData} from '@libs/searchCountryOptions';
+import StringUtils from '@libs/StringUtils';
+import CONST from '@src/CONST';
+
+type State = keyof typeof COMMON_CONST.STATES;
+
+type StateSelectorModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Function to call when the user closes the business type selector modal */
+    onClose: () => void;
+
+    /** Label to display on field */
+    label: string;
+
+    /** State selected  */
+    currentState: string;
+
+    /** Function to call when the user selects a state */
+    onStateSelected: (value: CountryData) => void;
+
+    /** Function to call when the user presses on the modal backdrop */
+    onBackdropPress?: () => void;
+};
+
+function StateSelectorModal({isVisible, currentState, onStateSelected, onClose, label, onBackdropPress}: StateSelectorModalProps) {
+    const {translate} = useLocalize();
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+
+    const countryStates = useMemo(
+        () =>
+            Object.keys(COMMON_CONST.STATES).map((state) => {
+                const stateName = translate(`allStates.${state as State}.stateName`);
+                const stateISO = translate(`allStates.${state as State}.stateISO`);
+                return {
+                    value: stateISO,
+                    keyForList: stateISO,
+                    text: stateName,
+                    isSelected: currentState === stateISO,
+                    searchValue: StringUtils.sanitizeString(`${stateISO}${stateName}`),
+                };
+            }),
+
+        [translate, currentState],
+    );
+
+    const searchResults = searchCountryOptions(debouncedSearchValue, countryStates);
+    const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
+
+    const styles = useThemeStyles();
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={onClose}
+            onModalHide={onClose}
+            hideModalContentWhileAnimating
+            useNativeDriver
+            onBackdropPress={onBackdropPress}
+        >
+            <ScreenWrapper
+                style={[styles.pb0]}
+                includePaddingTop={false}
+                includeSafeAreaPaddingBottom={false}
+                testID={StateSelectorModal.displayName}
+            >
+                <HeaderWithBackButton
+                    title={label}
+                    shouldShowBackButton
+                    onBackButtonPress={onClose}
+                />
+                <SelectionList
+                    headerMessage={headerMessage}
+                    sections={[{data: searchResults}]}
+                    textInputValue={searchValue}
+                    textInputLabel={translate('common.search')}
+                    onChangeText={setSearchValue}
+                    onSelectRow={onStateSelected}
+                    ListItem={RadioListItem}
+                    initiallyFocusedOptionKey={currentState}
+                    shouldSingleExecuteRowSelect
+                    shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
+                />
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+StateSelectorModal.displayName = 'StateSelectorModal';
+
+export default StateSelectorModal;