diff --git a/src/CONST.ts b/src/CONST.ts index 829a26c5cb96..451d8523d5c6 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2289,6 +2289,7 @@ const CONST = { DAILY: 'daily', MONTHLY: 'monthly', }, + CARD_TITLE_INPUT_LIMIT: 255, }, AVATAR_ROW_SIZE: { DEFAULT: 4, diff --git a/src/libs/API/parameters/UpdateExpensifyCardTitleParams.ts b/src/libs/API/parameters/UpdateExpensifyCardTitleParams.ts new file mode 100644 index 000000000000..94e79634a72a --- /dev/null +++ b/src/libs/API/parameters/UpdateExpensifyCardTitleParams.ts @@ -0,0 +1,7 @@ +type UpdateExpensifyCardTitleParams = { + authToken: string; + cardID: number; + cardTitle: string; +}; + +export default UpdateExpensifyCardTitleParams; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index 81c6c8887c3f..2292cd2a29a2 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -272,3 +272,4 @@ export type {CreateWorkspaceApprovalParams, UpdateWorkspaceApprovalParams, Remov export type {default as StartIssueNewCardFlowParams} from './StartIssueNewCardFlowParams'; export type {default as ConfigureExpensifyCardsForPolicyParams} from './ConfigureExpensifyCardsForPolicyParams'; export type {default as CreateExpensifyCardParams} from './CreateExpensifyCardParams'; +export type {default as UpdateExpensifyCardTitleParams} from './UpdateExpensifyCardTitleParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index 9e8c8995c09f..d520ce13df23 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -32,6 +32,7 @@ const WRITE_COMMANDS = { REQUEST_REPLACEMENT_EXPENSIFY_CARD: 'RequestReplacementExpensifyCard', ACTIVATE_PHYSICAL_EXPENSIFY_CARD: 'ActivatePhysicalExpensifyCard', UPDATE_EXPENSIFY_CARD_LIMIT: 'UpdateExpensifyCardLimit', + UPDATE_EXPENSIFY_CARD_TITLE: 'UpdateExpensifyCardTitle', CHRONOS_REMOVE_OOO_EVENT: 'Chronos_RemoveOOOEvent', MAKE_DEFAULT_PAYMENT_METHOD: 'MakeDefaultPaymentMethod', ADD_PAYMENT_CARD: 'AddPaymentCard', @@ -351,6 +352,7 @@ type WriteCommandParameters = { [WRITE_COMMANDS.REQUEST_REPLACEMENT_EXPENSIFY_CARD]: Parameters.RequestReplacementExpensifyCardParams; [WRITE_COMMANDS.ACTIVATE_PHYSICAL_EXPENSIFY_CARD]: Parameters.ActivatePhysicalExpensifyCardParams; [WRITE_COMMANDS.UPDATE_EXPENSIFY_CARD_LIMIT]: Parameters.UpdateExpensifyCardLimitParams; + [WRITE_COMMANDS.UPDATE_EXPENSIFY_CARD_TITLE]: Parameters.UpdateExpensifyCardTitleParams; [WRITE_COMMANDS.MAKE_DEFAULT_PAYMENT_METHOD]: Parameters.MakeDefaultPaymentMethodParams; [WRITE_COMMANDS.ADD_PAYMENT_CARD]: Parameters.AddPaymentCardParams; [WRITE_COMMANDS.ADD_PAYMENT_CARD_GBP]: Parameters.AddPaymentCardParams; diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index 52e028e3909a..eaebb8fb318b 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -9,6 +9,7 @@ import type { RevealExpensifyCardDetailsParams, StartIssueNewCardFlowParams, UpdateExpensifyCardLimitParams, + UpdateExpensifyCardTitleParams, } from '@libs/API/parameters'; import {READ_COMMANDS, SIDE_EFFECT_REQUEST_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import * as ErrorUtils from '@libs/ErrorUtils'; @@ -373,6 +374,66 @@ function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, ne API.write(WRITE_COMMANDS.UPDATE_EXPENSIFY_CARD_LIMIT, parameters, {optimisticData, successData, failureData}); } +function updateExpensifyCardTitle(workspaceAccountID: number, cardID: number, newCardTitle: string, oldCardTitle?: string) { + const authToken = NetworkStore.getAuthToken(); + + if (!authToken) { + return; + } + + const optimisticData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`, + value: { + [cardID]: { + nameValuePairs: { + cardTitle: newCardTitle, + }, + isLoading: true, + errors: null, + }, + }, + }, + ]; + + const successData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`, + value: { + [cardID]: { + isLoading: false, + }, + }, + }, + ]; + + const failureData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`, + value: { + [cardID]: { + nameValuePairs: { + cardTitle: oldCardTitle, + }, + isLoading: false, + errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'), + }, + }, + }, + ]; + + const parameters: UpdateExpensifyCardTitleParams = { + authToken, + cardID, + cardTitle: newCardTitle, + }; + + API.write(WRITE_COMMANDS.UPDATE_EXPENSIFY_CARD_TITLE, parameters, {optimisticData, successData, failureData}); +} + function startIssueNewCardFlow(policyID: string) { const parameters: StartIssueNewCardFlowParams = { policyID, @@ -428,6 +489,7 @@ export { setIssueNewCardStepAndData, clearIssueNewCardFlow, updateExpensifyCardLimit, + updateExpensifyCardTitle, updateSettlementAccount, startIssueNewCardFlow, configureExpensifyCardsForPolicy, diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx index 1ad4c5f29163..c5eb8a53930a 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx @@ -15,6 +15,7 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; import type {SettingsNavigatorParamList} from '@navigation/types'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -34,9 +35,8 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`); const card = cardsList?.[cardID]; - // eslint-disable-next-line @typescript-eslint/no-unused-vars const submit = (values: FormOnyxValues) => { - // TODO: add API call when it's supported https://github.com/Expensify/Expensify/issues/407832 + Card.updateExpensifyCardTitle(workspaceAccountID, Number(cardID), values[INPUT_IDS.NAME], card?.nameValuePairs?.cardTitle); Navigation.goBack(); }; @@ -74,6 +74,7 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { aria-label={translate('workspace.card.issueNewCard.cardName')} role={CONST.ROLE.PRESENTATION} defaultValue={card?.nameValuePairs?.cardTitle} + maxLength={CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT} ref={inputCallbackRef} />