[No QA] 1-6 Card Flow UI

src/CONST.ts

@@ -2070,6 +2070,10 @@ const CONST = {
             CARD_NAME: 'CardName',
             CONFIRMATION: 'Confirmation',
         },
+        CARD_TYPE: {
+            PHYSICAL: 'physical',
+            VIRTUAL: 'virtual',
+        },
     },
     AVATAR_ROW_SIZE: {
         DEFAULT: 4,

src/ONYXKEYS.ts

@@ -548,8 +548,8 @@ const ONYXKEYS = {
         NEW_CHAT_NAME_FORM_DRAFT: 'newChatNameFormDraft',
         SUBSCRIPTION_SIZE_FORM: 'subscriptionSizeForm',
         SUBSCRIPTION_SIZE_FORM_DRAFT: 'subscriptionSizeFormDraft',
-        ISSUE_NEW_EXPENSIFY_CARD_FORM: 'issueNewExpensifyCardForm',
-        ISSUE_NEW_EXPENSIFY_CARD_FORM_DRAFT: 'issueNewExpensifyCardFormDraft',
+        ISSUE_NEW_EXPENSIFY_CARD_FORM: 'issueNewExpensifyCard',
+        ISSUE_NEW_EXPENSIFY_CARD_FORM_DRAFT: 'issueNewExpensifyCardDraft',
         SAGE_INTACCT_CREDENTIALS_FORM: 'sageIntacctCredentialsForm',
         SAGE_INTACCT_CREDENTIALS_FORM_DRAFT: 'sageIntacctCredentialsFormDraft',
     },

src/ROUTES.ts

@@ -787,13 +787,10 @@ const ROUTES = {
         route: 'settings/workspaces/:policyID/expensify-card',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` as const,
     },
-    // TODO: uncomment after development is done
-    // WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: {
-    // route: 'settings/workspaces/:policyID/expensify-card/issues-new',
-    // getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/issue-new` as const,
-    // },
-    // TODO: remove after development is done - this one is for testing purposes
-    WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: 'settings/workspaces/expensify-card/issue-new',
+    WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: {
+        route: 'settings/workspaces/:policyID/expensify-card/issue-new',
+        getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/issue-new` as const,
+    },
     WORKSPACE_DISTANCE_RATES: {
         route: 'settings/workspaces/:policyID/distance-rates',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/distance-rates` as const,

src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts

@@ -33,6 +33,7 @@ const WIDE_LAYOUT_INACTIVE_SCREENS: string[] = [
     SCREENS.WORKSPACE.REPORT_FIELDS,
     SCREENS.WORKSPACE.EXPENSIFY_CARD,
     SCREENS.WORKSPACE.DISTANCE_RATES,
+    SCREENS.WORKSPACE.EXPENSIFY_CARD,
     SCREENS.SEARCH.CENTRAL_PANE,
     SCREENS.SETTINGS.TROUBLESHOOT,
     SCREENS.SETTINGS.SAVE_THE_WORLD,

src/components/Icon/Illustrations.ts

@@ -91,6 +91,7 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati
 import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg';
 import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg';
 import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
+import VirtualCard from '@assets/images/simple-illustrations/simple-illustration__virtualcard.svg';
 import WalletAlt from '@assets/images/simple-illustrations/simple-illustration__wallet-alt.svg';
 import Workflows from '@assets/images/simple-illustrations/simple-illustration__workflows.svg';
 import ExpensifyApprovedLogoLight from '@assets/images/subscription-details__approvedlogo--light.svg';
@@ -194,4 +195,5 @@ export {
     CheckmarkCircle,
     CreditCardEyes,
     LockClosedOrange,
+    VirtualCard,
 };

src/libs/CurrencyUtils.ts

@@ -96,11 +96,11 @@ function convertToFrontendAmountAsInteger(amountAsInt: number): number {
  *
  * @note we do not support any currencies with more than two decimal places.
  */
-function convertToFrontendAmountAsString(amountAsInt: number | null | undefined): string {
+function convertToFrontendAmountAsString(amountAsInt: number | null | undefined, withDecimals = true): string {
     if (amountAsInt === null || amountAsInt === undefined) {
         return '';
     }
-    return convertToFrontendAmountAsInteger(amountAsInt).toFixed(2);
+    return convertToFrontendAmountAsInteger(amountAsInt).toFixed(withDecimals ? 2 : 0);
 }
 
 /**

src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

@@ -103,7 +103,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
         SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS,
     ],
     [SCREENS.WORKSPACE.REPORT_FIELDS]: [],
-    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [],
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW],
 };
 
 export default FULL_SCREEN_TO_RHP_MAPPING;

src/libs/Navigation/linkingConfig/config.ts

@@ -410,7 +410,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.WORKSPACE_PROFILE_SHARE.route,
                         },
                         [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
-                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW,
+                            path: ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.route,
                         },
                         [SCREENS.WORKSPACE.RATE_AND_UNIT]: {
                             path: ROUTES.WORKSPACE_RATE_AND_UNIT.route,

src/libs/Navigation/types.ts

@@ -478,6 +478,9 @@ type SettingsNavigatorParamList = {
         policyID: string;
         taxID: string;
     };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: {
+        policyID: string;
+    };
 } & ReimbursementAccountNavigatorParamList;
 
 type NewChatNavigatorParamList = {
@@ -908,7 +911,6 @@ type FullScreenNavigatorParamList = {
     [SCREENS.WORKSPACE.DISTANCE_RATES]: {
         policyID: string;
     };
-
     [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: {
         policyID: string;
     };
@@ -921,6 +923,9 @@ type FullScreenNavigatorParamList = {
     [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_INVOICE_ACCOUNT_SELECTOR]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.EXPENSIFY_CARD]: {
+        policyID: string;
+    };
 };
 
 type OnboardingModalNavigatorParamList = {

src/libs/actions/Card.ts

@@ -5,7 +5,7 @@ import type {ActivatePhysicalExpensifyCardParams, ReportVirtualExpensifyCardFrau
 import {SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ExpensifyCardDetails, IssueNewCardStep} from '@src/types/onyx/Card';
+import type {ExpensifyCardDetails, IssueNewCardData, IssueNewCardStep} from '@src/types/onyx/Card';
 
 type ReplacementReason = 'damaged' | 'stolen';
 
@@ -189,5 +189,25 @@ function setIssueNewCardStep(step: IssueNewCardStep | null) {
     Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {currentStep: step});
 }
 
-export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud, revealVirtualCardDetails, setIssueNewCardStep};
+function setIssueNewCardDataAndGoToStep(data: Partial<IssueNewCardData>, step: IssueNewCardStep) {
+    Onyx.merge(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {data, currentStep: step});
+}
+
+function clearIssueNewCardFlow() {
+    Onyx.set(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD, {
+        currentStep: null,
+        data: {},
+    });
+}
+
+export {
+    requestReplacementExpensifyCard,
+    activatePhysicalExpensifyCard,
+    clearCardListErrors,
+    reportVirtualExpensifyCardFraud,
+    revealVirtualCardDetails,
+    setIssueNewCardStep,
+    setIssueNewCardDataAndGoToStep,
+    clearIssueNewCardFlow,
+};
 export type {ReplacementReason};

src/pages/workspace/card/issueNew/AssigneeStep.tsx

@@ -1,30 +1,91 @@
-import React from 'react';
+import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
-import FormProvider from '@components/Form/FormProvider';
+import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import type {ListItem} from '@components/SelectionList/types';
+import UserListItem from '@components/SelectionList/UserListItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
+import type * as OnyxTypes from '@src/types/onyx';
 
-function AssigneeStep() {
+type AssigneeStepProps = {
+    // The policy that the card will be issued under
+    policy: OnyxEntry<OnyxTypes.Policy>;
+};
+
+function AssigneeStep({policy}: AssigneeStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const [searchTerm, setSearchTerm] = useState('');
 
-    const submit = () => {
-        // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309
-        Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CARD_TYPE);
+    const submit = (assignee: ListItem) => {
+        Card.setIssueNewCardDataAndGoToStep({assigneeEmail: assignee?.login ?? ''}, CONST.EXPENSIFY_CARD.STEP.CARD_TYPE);
     };
 
     const handleBackButtonPress = () => {
         Navigation.goBack();
     };
 
+    const shouldShowSearchInput = policy?.employeeList && Object.keys(policy.employeeList).length > 8;
+    const textInputLabel = shouldShowSearchInput ? translate('workspace.card.issueNewCard.findMember') : undefined;
+
+    const membersDetails = useMemo(() => {
+        if (!policy?.employeeList) {
+            return [];
+        }
+
+        return Object.keys(policy.employeeList)
+            .map(PersonalDetailsUtils.getPersonalDetailByEmail)
+            .map((detail) => ({
+                keyForList: detail?.login,
+                text: detail?.displayName,
+                alternateText: detail?.login,
+                login: detail?.login,
+                accountID: detail?.accountID,
+                icons: [
+                    {
+                        source: detail?.avatar ?? Expensicons.FallbackAvatar,
+                        name: formatPhoneNumber(detail?.login ?? ''),
+                        type: CONST.ICON_TYPE_AVATAR,
+                        id: detail?.accountID,
+                    },
+                ],
+            }));
+    }, [policy?.employeeList]);
+
+    const sections = useMemo(() => {
+        if (!searchTerm) {
+            return [
+                {
+                    data: membersDetails,
+                    shouldShow: true,
+                },
+            ];
+        }
+
+        const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(searchTerm).toLowerCase();
+        const filteredOptions = membersDetails.filter((option) => !!option.text?.toLowerCase().includes(searchValue) || !!option.alternateText?.toLowerCase().includes(searchValue));
+
+        return [
+            {
+                title: undefined,
+                data: filteredOptions,
+                shouldShow: true,
+            },
+        ];
+    }, [membersDetails, searchTerm]);
+
     return (
         <ScreenWrapper
             testID={AssigneeStep.displayName}
@@ -43,15 +104,14 @@ function AssigneeStep() {
                 />
             </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.whoNeedsCard')}</Text>
-            <FormProvider
-                formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
-                submitButtonText={translate('common.next')}
-                onSubmit={submit}
-                style={[styles.mh5, styles.flexGrow1]}
-            >
-                {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */}
-                <View />
-            </FormProvider>
+            <SelectionList
+                textInputLabel={textInputLabel}
+                textInputValue={searchTerm}
+                onChangeText={setSearchTerm}
+                sections={sections}
+                ListItem={UserListItem}
+                onSelectRow={submit}
+            />
         </ScreenWrapper>
     );
 }

src/pages/workspace/card/issueNew/CardNameStep.tsx

@@ -1,28 +1,45 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import * as Card from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/IssueNewExpensifyCardForm';
 
 function CardNameStep() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD);
 
-    const submit = () => {
-        // TODO: the logic will be created in https://github.com/Expensify/App/issues/44309
-        Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.CONFIRMATION);
-    };
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]);
+            if (!values.cardTitle) {
+                errors.cardTitle = translate('common.error.fieldRequired');
+            }
+            return errors;
+        },
+        [translate],
+    );
+
+    const submit = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>) => {
+        Card.setIssueNewCardDataAndGoToStep({cardTitle: values.cardTitle}, CONST.EXPENSIFY_CARD.STEP.CONFIRMATION);
+    }, []);
 
-    const handleBackButtonPress = () => {
+    const handleBackButtonPress = useCallback(() => {
         Card.setIssueNewCardStep(CONST.EXPENSIFY_CARD.STEP.LIMIT);
-    };
+    }, []);
 
     return (
         <ScreenWrapper
@@ -44,12 +61,23 @@ function CardNameStep() {
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.giveItName')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
+                // TODO: change the submitButtonText to 'common.confirm' when editing and navigate to ConfirmationStep
                 submitButtonText={translate('common.next')}
                 onSubmit={submit}
+                validate={validate}
                 style={[styles.mh5, styles.flexGrow1]}
             >
-                {/* TODO: the content will be created in https://github.com/Expensify/App/issues/44309 */}
-                <View />
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.CARD_TITLE}
+                    label={translate('workspace.card.issueNewCard.cardName')}
+                    hint={translate('workspace.card.issueNewCard.giveItNameInstruction')}
+                    aria-label={translate('workspace.card.issueNewCard.cardName')}
+                    role={CONST.ROLE.PRESENTATION}
+                    // TODO: default value for card name
+                    defaultValue={issueNewCard?.data?.cardTitle}
+                    containerStyles={[styles.mb6]}
+                />
             </FormProvider>
         </ScreenWrapper>
     );