From 4aeb78af1598fa6d3ee59821350c0ec2ab5c3b17 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Mon, 4 Nov 2024 13:52:09 +0200 Subject: [PATCH 1/4] Workspace Feed - Limit card name --- src/CONST.ts | 1 + .../WorkspaceCompanyCardEditCardNamePage.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 437ee4e7fd42..b5a1acb15027 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2873,6 +2873,7 @@ const CONST = { */ NVP_FINANCIALFORCE_EXPORT_VENDOR_POLICY_ID: 'financialforce_export_vendor_policy_id', }, + CARD_NAME_INPUT_LIMIT: 100, }, AVATAR_ROW_SIZE: { DEFAULT: 4, diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx index 476a6320b760..c8e6e7296242 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -39,8 +40,14 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC Navigation.goBack(); }; - const validate = (values: FormOnyxValues): FormInputErrors => - ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); + const validate = (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); + const length = values.name.length; + if (length > CONST.COMPANY_CARDS.CARD_NAME_INPUT_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.COMPANY_CARDS.CARD_NAME_INPUT_LIMIT})); + } + return errors; + }; return ( From 78f96ba577da39e2a806fd9b3ff241eae353f5be Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Mon, 4 Nov 2024 16:51:33 +0200 Subject: [PATCH 2/4] updates after c+ review --- src/CONST.ts | 2 +- .../WorkspaceCompanyCardEditCardNamePage.tsx | 4 ++-- .../expensifyCard/WorkspaceEditCardNamePage.tsx | 12 +++++++++--- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index b5a1acb15027..0c9336eac82f 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2873,7 +2873,7 @@ const CONST = { */ NVP_FINANCIALFORCE_EXPORT_VENDOR_POLICY_ID: 'financialforce_export_vendor_policy_id', }, - CARD_NAME_INPUT_LIMIT: 100, + CARD_TITLE_INPUT_LIMIT: 100, }, AVATAR_ROW_SIZE: { DEFAULT: 4, diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx index c8e6e7296242..5e8d0bf762a3 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx @@ -43,8 +43,8 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC const validate = (values: FormOnyxValues): FormInputErrors => { const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); const length = values.name.length; - if (length > CONST.COMPANY_CARDS.CARD_NAME_INPUT_LIMIT) { - ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.COMPANY_CARDS.CARD_NAME_INPUT_LIMIT})); + if (length > CONST.COMPANY_CARDS.CARD_TITLE_INPUT_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.COMPANY_CARDS.CARD_TITLE_INPUT_LIMIT})); } return errors; }; diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx index c5eb8a53930a..903ee9db32f6 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import Navigation from '@navigation/Navigation'; @@ -40,8 +41,14 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { Navigation.goBack(); }; - const validate = (values: FormOnyxValues): FormInputErrors => - ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); + const validate = (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); + const length = values.name.length; + if (length > CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT})); + } + return errors; + }; return ( From 582af7297653ca89bf0064519580d205134e924c Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Mon, 4 Nov 2024 18:09:00 +0200 Subject: [PATCH 3/4] add some more fixes for the same places --- .../companyCards/addNew/CardNameStep.tsx | 9 +++++++-- .../expensifyCard/issueNew/CardNameStep.tsx | 19 +++++++++---------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx index c1fd28accef6..4cd5fe26d37a 100644 --- a/src/pages/workspace/companyCards/addNew/CardNameStep.tsx +++ b/src/pages/workspace/companyCards/addNew/CardNameStep.tsx @@ -10,6 +10,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as CompanyCards from '@userActions/CompanyCards'; import CONST from '@src/CONST'; @@ -23,7 +24,12 @@ function CardNameStep() { const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD); const validate = (values: FormOnyxValues): FormInputErrors => { - return ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const length = values.cardTitle.length; + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + } + return errors; }; const submit = (values: FormOnyxValues) => { @@ -67,7 +73,6 @@ function CardNameStep() { role={CONST.ROLE.PRESENTATION} defaultValue={addNewCard?.data?.bankName} containerStyles={[styles.mb6]} - maxLength={CONST.STANDARD_LENGTH_LIMIT} ref={inputCallbackRef} /> diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index 26ae497406d6..d21a819540fa 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -9,6 +9,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as Card from '@userActions/Card'; @@ -28,16 +29,14 @@ function CardNameStep() { const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : ''; - const validate = useCallback( - (values: FormOnyxValues): FormInputErrors => { - const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); - if (!values.cardTitle) { - errors.cardTitle = translate('common.error.fieldRequired'); - } - return errors; - }, - [translate], - ); + const validate = (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]); + const length = values.cardTitle.length; + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.CARD_TITLE, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); + } + return errors; + }; const submit = useCallback((values: FormOnyxValues) => { Card.setIssueNewCardStepAndData({ From f7d7a4762758f11244f2a8d452aadf6869b5871c Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu Date: Mon, 4 Nov 2024 18:35:23 +0200 Subject: [PATCH 4/4] add standard length limit --- src/CONST.ts | 2 -- .../companyCards/WorkspaceCompanyCardEditCardNamePage.tsx | 4 ++-- .../workspace/expensifyCard/WorkspaceEditCardNamePage.tsx | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0c9336eac82f..2f293e695855 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2736,7 +2736,6 @@ const CONST = { DAILY: 'daily', MONTHLY: 'monthly', }, - CARD_TITLE_INPUT_LIMIT: 255, MANAGE_EXPENSIFY_CARDS_ARTICLE_LINK: 'https://help.expensify.com/articles/new-expensify/expensify-card/Manage-Expensify-Cards', }, COMPANY_CARDS: { @@ -2873,7 +2872,6 @@ const CONST = { */ NVP_FINANCIALFORCE_EXPORT_VENDOR_POLICY_ID: 'financialforce_export_vendor_policy_id', }, - CARD_TITLE_INPUT_LIMIT: 100, }, AVATAR_ROW_SIZE: { DEFAULT: 4, diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx index 5e8d0bf762a3..5431206c13c4 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardEditCardNamePage.tsx @@ -43,8 +43,8 @@ function WorkspaceCompanyCardEditCardNamePage({route}: WorkspaceCompanyCardEditC const validate = (values: FormOnyxValues): FormInputErrors => { const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); const length = values.name.length; - if (length > CONST.COMPANY_CARDS.CARD_TITLE_INPUT_LIMIT) { - ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.COMPANY_CARDS.CARD_TITLE_INPUT_LIMIT})); + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); } return errors; }; diff --git a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx index 903ee9db32f6..6a876d7de61a 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx @@ -44,8 +44,8 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) { const validate = (values: FormOnyxValues): FormInputErrors => { const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]); const length = values.name.length; - if (length > CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT) { - ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.EXPENSIFY_CARD.CARD_TITLE_INPUT_LIMIT})); + if (length > CONST.STANDARD_LENGTH_LIMIT) { + ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT})); } return errors; };