Skip to content

Commit c885f96

Browse files
yuwenmemonyuwenmemon
authored
Merge pull request #48278 from koko57/feat/47377-card-assignement-flow
[No QA] Card Assignment Flow
2 parents c737172 + 034349a commit c885f96

26 files changed

+950
-2
lines changed

‎assets/images/product-illustrations/broken-magnifying-glass.svg

+28
Loading

‎src/CONST.ts

+11
Original file line numberDiff line numberDiff line change
@@ -2292,6 +2292,17 @@ const CONST = {
22922292
VISA: 'vcf',
22932293
AMEX: 'gl1025',
22942294
},
2295+
STEP_NAMES: ['1', '2', '3', '4'],
2296+
STEP: {
2297+
ASSIGNEE: 'Assignee',
2298+
CARD: 'Card',
2299+
TRANSACTION_START_DATE: 'TransactionStartDate',
2300+
CONFIRMATION: 'Confirmation',
2301+
},
2302+
TRANSACTION_START_DATE_OPTIONS: {
2303+
FROM_BEGINNING: 'fromBeginning',
2304+
CUSTOM: 'custom',
2305+
},
22952306
},
22962307
EXPENSIFY_CARD: {
22972308
BANK: 'Expensify Card',

‎src/ONYXKEYS.ts

+7
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,9 @@ const ONYXKEYS = {
392392
/** Stores the information about the state of issuing a new card */
393393
ISSUE_NEW_EXPENSIFY_CARD: 'issueNewExpensifyCard',
394394

395+
/** Stores the information about the state of assigning a company card */
396+
ASSIGN_CARD: 'assignCard',
397+
395398
/** Stores the information if mobile selection mode is active */
396399
MOBILE_SELECTION_MODE: 'mobileSelectionMode',
397400

@@ -615,6 +618,8 @@ const ONYXKEYS = {
615618
SUBSCRIPTION_SIZE_FORM_DRAFT: 'subscriptionSizeFormDraft',
616619
ISSUE_NEW_EXPENSIFY_CARD_FORM: 'issueNewExpensifyCard',
617620
ISSUE_NEW_EXPENSIFY_CARD_FORM_DRAFT: 'issueNewExpensifyCardDraft',
621+
ASSIGN_CARD_FORM: 'assignCard',
622+
ASSIGN_CARD_FORM_DRAFT: 'assignCardDraft',
618623
EDIT_EXPENSIFY_CARD_NAME_FORM: 'editExpensifyCardName',
619624
EDIT_EXPENSIFY_CARD_NAME_DRAFT_FORM: 'editExpensifyCardNameDraft',
620625
EDIT_EXPENSIFY_CARD_LIMIT_FORM: 'editExpensifyCardLimit',
@@ -712,6 +717,7 @@ type OnyxFormValuesMapping = {
712717
[ONYXKEYS.FORMS.NEW_CHAT_NAME_FORM]: FormTypes.NewChatNameForm;
713718
[ONYXKEYS.FORMS.SUBSCRIPTION_SIZE_FORM]: FormTypes.SubscriptionSizeForm;
714719
[ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM]: FormTypes.IssueNewExpensifyCardForm;
720+
[ONYXKEYS.FORMS.ASSIGN_CARD_FORM]: FormTypes.AssignCardForm;
715721
[ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM]: FormTypes.EditExpensifyCardNameForm;
716722
[ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_LIMIT_FORM]: FormTypes.EditExpensifyCardLimitForm;
717723
[ONYXKEYS.FORMS.SAGE_INTACCT_CREDENTIALS_FORM]: FormTypes.SageIntactCredentialsForm;
@@ -908,6 +914,7 @@ type OnyxValuesMapping = {
908914
[ONYXKEYS.NVP_TRAVEL_SETTINGS]: OnyxTypes.TravelSettings;
909915
[ONYXKEYS.REVIEW_DUPLICATES]: OnyxTypes.ReviewDuplicates;
910916
[ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD]: OnyxTypes.IssueNewCard;
917+
[ONYXKEYS.ASSIGN_CARD]: OnyxTypes.AssignCard;
911918
[ONYXKEYS.MOBILE_SELECTION_MODE]: OnyxTypes.MobileSelectionMode;
912919
[ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL]: string;
913920
[ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL]: string;

‎src/ROUTES.ts

+4
Original file line numberDiff line numberDiff line change
@@ -910,6 +910,10 @@ const ROUTES = {
910910
route: 'settings/workspaces/:policyID/company-cards',
911911
getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
912912
},
913+
WORKSPACE_COMPANY_CARDS_ASSIGN_CARD: {
914+
route: 'settings/workspaces/:policyID/company-cards/:feed/assign-card',
915+
getRoute: (policyID: string, feed: string) => `settings/workspaces/${policyID}/company-cards/${feed}/assign-card` as const,
916+
},
913917
WORKSPACE_EXPENSIFY_CARD_DETAILS: {
914918
route: 'settings/workspaces/:policyID/expensify-card/:cardID',
915919
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}`, backTo),

‎src/SCREENS.ts

+1
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,7 @@ const SCREENS = {
368368
RATE_AND_UNIT_RATE: 'Workspace_RateAndUnit_Rate',
369369
RATE_AND_UNIT_UNIT: 'Workspace_RateAndUnit_Unit',
370370
COMPANY_CARDS: 'Workspace_CompanyCards',
371+
COMPANY_CARDS_ASSIGN_CARD: 'Workspace_CompanyCards_AssignCard',
371372
COMPANY_CARDS_SELECT_FEED: 'Workspace_CompanyCards_Select_Feed',
372373
COMPANY_CARDS_SETTINGS: 'Workspace_CompanyCards_Settings',
373374
COMPANY_CARDS_SETTINGS_FEED_NAME: 'Workspace_CompanyCards_Settings_Feed_Name',

‎src/components/Icon/Illustrations.ts

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
99
import BankArrowPink from '@assets/images/product-illustrations/bank-arrow--pink.svg';
1010
import BankMouseGreen from '@assets/images/product-illustrations/bank-mouse--green.svg';
1111
import BankUserGreen from '@assets/images/product-illustrations/bank-user--green.svg';
12+
import BrokenMagnifyingGlass from '@assets/images/product-illustrations/broken-magnifying-glass.svg';
1213
import ConciergeBlue from '@assets/images/product-illustrations/concierge--blue.svg';
1314
import ConciergeExclamation from '@assets/images/product-illustrations/concierge--exclamation.svg';
1415
import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
@@ -121,6 +122,7 @@ export {
121122
BankMouseGreen,
122123
BankUserGreen,
123124
BigRocket,
125+
BrokenMagnifyingGlass,
124126
ChatBubbles,
125127
CoffeeMug,
126128
ConciergeBlue,

‎src/components/InteractiveStepWrapper.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import {View} from 'react-native';
3+
import useThemeStyles from '@hooks/useThemeStyles';
4+
import CONST from '@src/CONST';
5+
import HeaderWithBackButton from './HeaderWithBackButton';
6+
import InteractiveStepSubHeader from './InteractiveStepSubHeader';
7+
import ScreenWrapper from './ScreenWrapper';
8+
9+
type InteractiveStepWrapperProps = {
10+
// Step content
11+
children: React.ReactNode;
12+
13+
// ID of the wrapper
14+
wrapperID: string;
15+
16+
// Function to handle back button press
17+
handleBackButtonPress: () => void;
18+
19+
// Title of the back button header
20+
headerTitle: string;
21+
22+
// Index of the highlighted step
23+
startStepIndex?: number;
24+
25+
// Array of step names
26+
stepNames?: readonly string[];
27+
};
28+
29+
function InteractiveStepWrapper({children, wrapperID, handleBackButtonPress, headerTitle, startStepIndex, stepNames}: InteractiveStepWrapperProps) {
30+
const styles = useThemeStyles();
31+
32+
return (
33+
<ScreenWrapper
34+
testID={wrapperID}
35+
includeSafeAreaPaddingBottom={false}
36+
shouldEnablePickerAvoiding={false}
37+
shouldEnableMaxHeight
38+
>
39+
<HeaderWithBackButton
40+
title={headerTitle}
41+
onBackButtonPress={handleBackButtonPress}
42+
/>
43+
{stepNames && (
44+
<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
45+
<InteractiveStepSubHeader
46+
startStepIndex={startStepIndex}
47+
stepNames={stepNames}
48+
/>
49+
</View>
50+
)}
51+
{children}
52+
</ScreenWrapper>
53+
);
54+
}
55+
56+
InteractiveStepWrapper.displayName = 'InteractiveStepWrapper';
57+
58+
export default InteractiveStepWrapper;

‎src/languages/en.ts

+18
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type {
1010
AlreadySignedInParams,
1111
ApprovalWorkflowErrorParams,
1212
ApprovedAmountParams,
13+
AssignCardParams,
1314
BeginningOfChatHistoryAdminRoomPartOneParams,
1415
BeginningOfChatHistoryAnnounceRoomPartOneParams,
1516
BeginningOfChatHistoryAnnounceRoomPartTwo,
@@ -2794,6 +2795,23 @@ export default {
27942795
assignCard: 'Assign card',
27952796
cardNumber: 'Card number',
27962797
customFeed: 'Custom feed',
2798+
whoNeedsCardAssigned: 'Who needs a card assigned?',
2799+
chooseCard: 'Choose a card',
2800+
chooseCardFor: ({assignee, feed}: AssignCardParams) => `Choose a card for ${assignee} from the ${feed} cards feed.`,
2801+
noActiveCards: 'No active cards on this feed',
2802+
somethingMightBeBroken: 'Or something might be broken. Either way, if you have any questions, just',
2803+
contactConcierge: 'contact Concierge',
2804+
chooseTransactionStartDate: 'Choose a transaction start date',
2805+
startDateDescription: 'We will import all transaction from this date onwards. If no date is specified, we’ll go as far back as your bank allows.',
2806+
fromTheBeginning: 'From the beginning',
2807+
customStartDate: 'Custom start date',
2808+
letsDoubleCheck: 'Let’s double check that everything looks right.',
2809+
confirmationDescription: 'We’ll begin importing transactions immediately.',
2810+
cardholder: 'Cardholder',
2811+
card: 'Card',
2812+
startTransactionDate: 'Start transaction date',
2813+
cardName: 'Card name',
2814+
assignedYouCard: (assigner: string) => `${assigner} assigned you a company card! Imported transactions will appear in this chat.`,
27972815
},
27982816
expensifyCard: {
27992817
issueAndManageCards: 'Issue and manage your Expensify Cards',

‎src/languages/es.ts

+18
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
AlreadySignedInParams,
99
ApprovalWorkflowErrorParams,
1010
ApprovedAmountParams,
11+
AssignCardParams,
1112
BeginningOfChatHistoryAdminRoomPartOneParams,
1213
BeginningOfChatHistoryAnnounceRoomPartOneParams,
1314
BeginningOfChatHistoryAnnounceRoomPartTwo,
@@ -2841,6 +2842,23 @@ export default {
28412842
assignCard: 'Asignar tarjeta',
28422843
cardNumber: 'Número de la tarjeta',
28432844
customFeed: 'Fuente personalizada',
2845+
whoNeedsCardAssigned: '¿Quién necesita una tarjeta?',
2846+
chooseCard: 'Elige una tarjeta',
2847+
chooseCardFor: ({assignee, feed}: AssignCardParams) => `Elige una tarjeta para ${assignee} del feed de tarjetas ${feed}.`,
2848+
noActiveCards: 'No hay tarjetas activas en este feed',
2849+
somethingMightBeBroken: 'O algo podría estar roto. De cualquier manera, si tienes alguna pregunta,',
2850+
contactConcierge: 'contacta a Concierge',
2851+
chooseTransactionStartDate: 'Elige una fecha de inicio de transacciones',
2852+
startDateDescription: 'Importaremos todas las transacciones desde esta fecha en adelante. Si no se especifica una fecha, iremos tan atrás como lo permita tu banco.',
2853+
fromTheBeginning: 'Desde el principio',
2854+
customStartDate: 'Fecha de inicio personalizada',
2855+
letsDoubleCheck: 'Verifiquemos que todo esté bien.',
2856+
confirmationDescription: 'Comenzaremos a importar transacciones inmediatamente.',
2857+
cardholder: 'Titular de la tarjeta',
2858+
card: 'Tarjeta',
2859+
startTransactionDate: 'Fecha de inicio de transacciones',
2860+
cardName: 'Nombre de la tarjeta',
2861+
assignedYouCard: (assigner: string) => `¡${assigner} te ha asignado una tarjeta de empresa! Las transacciones importadas aparecerán en este chat.`,
28442862
},
28452863
expensifyCard: {
28462864
issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',

‎src/languages/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,11 @@ type ApprovalWorkflowErrorParams = {
361361
name2: string;
362362
};
363363

364+
type AssignCardParams = {
365+
assignee: string;
366+
feed: string;
367+
};
368+
364369
export type {
365370
AddressLineParams,
366371
AdminCanceledRequestParams,
@@ -485,4 +490,5 @@ export type {
485490
RemoveMembersWarningPrompt,
486491
DeleteExpenseTranslationParams,
487492
ApprovalWorkflowErrorParams,
493+
AssignCardParams,
488494
};

‎src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
424424
[SCREENS.WORKSPACE.TAX_CODE]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceTaxCodePage').default,
425425
[SCREENS.WORKSPACE.INVOICES_COMPANY_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/invoices/WorkspaceInvoicingDetailsName').default,
426426
[SCREENS.WORKSPACE.INVOICES_COMPANY_WEBSITE]: () => require<ReactComponentModule>('../../../../pages/workspace/invoices/WorkspaceInvoicingDetailsWebsite').default,
427+
[SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/assignCard/AssignCardFeedPage').default,
427428
[SCREENS.WORKSPACE.COMPANY_CARDS_SELECT_FEED]: () => require<ReactComponentModule>('../../../../pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage').default,
428429
[SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/issueNew/IssueNewCardPage').default,
429430
[SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceCardSettingsPage').default,

‎src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,12 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
162162
SCREENS.WORKSPACE.REPORT_FIELDS_EDIT_INITIAL_VALUE,
163163
],
164164
[SCREENS.WORKSPACE.INVOICES]: [SCREENS.WORKSPACE.INVOICES_COMPANY_NAME, SCREENS.WORKSPACE.INVOICES_COMPANY_WEBSITE],
165-
[SCREENS.WORKSPACE.COMPANY_CARDS]: [SCREENS.WORKSPACE.COMPANY_CARDS_SELECT_FEED, SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS, SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS_FEED_NAME],
165+
[SCREENS.WORKSPACE.COMPANY_CARDS]: [
166+
SCREENS.WORKSPACE.COMPANY_CARDS_SELECT_FEED,
167+
SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS,
168+
SCREENS.WORKSPACE.COMPANY_CARDS_SETTINGS_FEED_NAME,
169+
SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD,
170+
],
166171
[SCREENS.WORKSPACE.EXPENSIFY_CARD]: [
167172
SCREENS.WORKSPACE.EXPENSIFY_CARD_ISSUE_NEW,
168173
SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT,

0 commit comments

Comments
 (0)