[HOLD for payment 2024-05-09] [$250] Standardize Error Periods

[grgia]

I noticed some of our error messages have periods, and some don't. Let's standardize the rule here.

Tagging marketing for confirmation on the rule!

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bae2463fd69274c1
• Upwork Job ID: 1772922546343596032
• Last Price Increase: 2024-03-27
• Automatic offers:
• getusha | Reviewer | 0
• ShridharGoel | Contributor | 0

[melvin-bot]

Triggered auto assignment to @NickTooker (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We need to standardise error periods.

What is the root cause of that problem?

As an example, if you see the below block, some messages have dot at the end and others don't have it.

App/src/languages/en.ts

Lines 222 to 237 in d8361ee

	error: {
	invalidAmount: 'Invalid amount',
	acceptTerms: 'You must accept the Terms of Service to continue',
	phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER})`,
	fieldRequired: 'This field is required.',
	requestModified: 'This request is being modified by another member.',
	characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters`,
	characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit})`,
	dateInvalid: 'Please select a valid date',
	invalidDateShouldBeFuture: 'Please choose today or a future date.',
	invalidTimeShouldBeFuture: 'Please choose a time at least one minute ahead.',
	invalidCharacter: 'Invalid character',
	enterMerchant: 'Enter a merchant name',
	enterAmount: 'Enter an amount',
	enterDate: 'Enter a date',
	},

What changes do you think we should make in order to solve the problem?

We need to add periods at the end of each message.

After change:

error: {
    invalidAmount: 'Invalid amount.',
    acceptTerms: 'You must accept the Terms of Service to continue.',
    phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
    fieldRequired: 'This field is required.',
    requestModified: 'This request is being modified by another member.',
    characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters.`,
    characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit}).`,
    dateInvalid: 'Please select a valid date.',
    invalidDateShouldBeFuture: 'Please choose today or a future date.',
    invalidTimeShouldBeFuture: 'Please choose a time at least one minute ahead.',
    invalidCharacter: 'Invalid character.',
    enterMerchant: 'Enter a merchant name.',
    enterAmount: 'Enter an amount.',
    enterDate: 'Enter a date.',
}

Also, we'll need to update the es.ts file as well.

This needs to be done for all error messages, above list is just one of the examples.

We can also add new ESlint rule to prevent error messages with a dot at the end.

Pseudo code:

module.exports = {
    create: function(context) {
        return {
            Property: function(node) {
                if (node.key && node.key.name === "error" && node.value && node.value.type === "ObjectExpression") {
                    node.value.properties.forEach(property => {
                        if (property.value && property.value.type === "Literal" && typeof property.value.value === "string") {
                            const errorMessage = property.value.value;
                            if (!errorMessage.endsWith(".")) {
                                context.report({
                                    node: property,
                                    message: "Error message should end with a period",
                                    fix: function(fixer) {
                                        const lastChar = errorMessage[errorMessage.length - 1];
                                        const fixedMessage = lastChar === "." ? errorMessage : errorMessage + ".";
                                        return fixer.replaceText(property.value, `'${fixedMessage}'`);
                                    }
                                });
                            }
                        }
                    });
                }
            }
        };
    }
};

This will be added in a new rule created in eslint-config-expensify.

[ShridharGoel]

@grgia Can this be made external after confirmation from marketing team?

[NickTooker]

Let's standardize on using periods for all error messages please!

[ghost]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Standardize Error Periods

What is the root cause of that problem?

As mentioned here by @NickTooker , we need to add periods for all the error messages. we can do it for all the error messages here :

App/src/languages/en.ts

Lines 222 to 237 in d8361ee

	error: {
	invalidAmount: 'Invalid amount',
	acceptTerms: 'You must accept the Terms of Service to continue',
	phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER})`,
	fieldRequired: 'This field is required.',
	requestModified: 'This request is being modified by another member.',
	characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters`,
	characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit})`,
	dateInvalid: 'Please select a valid date',
	invalidDateShouldBeFuture: 'Please choose today or a future date.',
	invalidTimeShouldBeFuture: 'Please choose a time at least one minute ahead.',
	invalidCharacter: 'Invalid character',
	enterMerchant: 'Enter a merchant name',
	enterAmount: 'Enter an amount',
	enterDate: 'Enter a date',
	},

What changes do you think we should make in order to solve the problem?

We can add . to the end of all the error messages here like this :

error: {
    invalidAmount: 'Invalid amount.',
    acceptTerms: 'You must accept the Terms of Service to continue.',
    phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
    fieldRequired: 'This field is required.',
    requestModified: 'This request is being modified by another member.',
    characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters.`,
    characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit}).`,
    dateInvalid: 'Please select a valid date.',
    invalidDateShouldBeFuture: 'Please choose today or a future date.',
    invalidTimeShouldBeFuture: 'Please choose a time at least one minute ahead.',
    invalidCharacter: 'Invalid character.',
    enterMerchant: 'Enter a merchant name.',
    enterAmount: 'Enter an amount.',
    enterDate: 'Enter a date.',
}

Similarly, we can do this for es.ts file as well like this :

        error: {
            invalidAmount: 'Importe no válido.',
            acceptTerms: 'Debes aceptar los Términos de Servicio para continuar.',
            phoneNumber: `Introduce un teléfono válido, incluyendo el código del país (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
            fieldRequired: 'Este campo es obligatorio.',
            requestModified: 'Esta solicitud está siendo modificada por otro miembro.',
            characterLimit: ({limit}: CharacterLimitParams) => `Supera el límite de ${limit} caracteres.`,
            characterLimitExceedCounter: ({length, limit}) => `Se superó el límite de caracteres (${length}/${limit}).`,
            dateInvalid: 'Por favor, selecciona una fecha válida.',
            invalidDateShouldBeFuture: 'Por favor, elige una fecha igual o posterior a hoy.',
            invalidTimeShouldBeFuture: 'Por favor, elige una hora al menos un minuto en el futuro.',
            invalidCharacter: 'Carácter invalido.',
            enterMerchant: 'Introduce un comerciante.',
            enterAmount: 'Introduce un importe.',
            enterDate: 'Introduce una fecha.',
        },

And all the other places in en.ts and es.ts files where we have error messages in the entire app.

What alternative solutions did you explore? (Optional)

N/A

[ShridharGoel]

Proposal

Updated to have only one scenario since the expectation is now defined by the copy team. Earlier my proposal mentioned both scenarios since the expectation was yet to be decided.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01bae2463fd69274c1

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @getusha (External)

[melvin-bot]

Upwork job price has been updated to $250

[grgia]

@getusha only gotcha that comes to mind is how should we approach testing for this?

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Standardize Error Periods

What is the root cause of that problem?

We currently have periods at some places but not everywhere, we need to fix this:
All the places are below

App/src/languages/en.ts

Line 243 in 43f8b39

fixTheErrors: 'fix the errors',

App/src/languages/en.ts

Lines 928 to 932 in 43f8b39

	errors: {
	currentPassword: 'Current password is required',
	newPasswordSameAsOld: 'New password must be different than your old password',
	newPassword: 'Your password must have at least 8 characters, 1 capital letter, 1 lowercase letter, and 1 number.',
	},

App/src/languages/en.ts

Lines 2493 to 2496 in 43f8b39

	errors: {
	selectSuggestedAddress: 'Please select a suggested address or use current location',
	},
	},

App/src/languages/en.ts

Lines 222 to 237 in 43f8b39

	error: {
	invalidAmount: 'Invalid amount',
	acceptTerms: 'You must accept the Terms of Service to continue',
	phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER})`,
	fieldRequired: 'This field is required.',
	requestModified: 'This request is being modified by another member.',
	characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters`,
	characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit})`,
	dateInvalid: 'Please select a valid date',
	invalidDateShouldBeFuture: 'Please choose today or a future date.',
	invalidTimeShouldBeFuture: 'Please choose a time at least one minute ahead.',
	invalidCharacter: 'Invalid character',
	enterMerchant: 'Enter a merchant name',
	enterAmount: 'Enter an amount',
	enterDate: 'Enter a date',
	},

App/src/languages/en.ts

Lines 331 to 333 in 43f8b39

	attachmentError: 'Attachment error',
	errorWhileSelectingAttachment: 'An error occurred while selecting an attachment, please try again',
	errorWhileSelectingCorruptedImage: 'An error occurred while selecting a corrupted attachment, please try another file',

App/src/languages/en.ts

Lines 577 to 578 in 43f8b39

	cameraErrorTitle: 'Camera Error',
	cameraErrorMessage: 'An error occurred while taking a photo, please try again',

App/src/languages/en.ts

Lines 683 to 688 in 43f8b39

	error: {
	invalidCategoryLength: 'The length of the category chosen exceeds the maximum allowed (255). Please choose a different or shorten the category name first.',
	invalidAmount: 'Please enter a valid amount before continuing.',
	invalidTaxAmount: ({amount}: RequestAmountParams) => `Maximum tax amount is ${amount}`,
	invalidSplit: 'Split amounts do not equal total amount',
	other: 'Unexpected error, please try again later',

App/src/languages/en.ts

Lines 928 to 932 in 43f8b39

	errors: {
	currentPassword: 'Current password is required',
	newPasswordSameAsOld: 'New password must be different than your old password',
	newPassword: 'Your password must have at least 8 characters, 1 capital letter, 1 lowercase letter, and 1 number.',
	},

App/src/languages/en.ts

Lines 968 to 969 in 43f8b39

	error: {
	pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',

App/src/languages/en.ts

Lines 983 to 984 in 43f8b39

	error: {
	genericFailureMessage: "Private notes couldn't be saved",

App/src/languages/en.ts

Lines 997 to 999 in 43f8b39

	error: {
	invalidName: 'Name can only include letters.',
	addressZipCode: 'Please enter a valid zip code',

App/src/languages/en.ts

Lines 1258 to 1261 in 43f8b39

	error: {
	pleaseFillMagicCode: 'Please enter your magic code',
	incorrectMagicCode: 'Incorrect magic code.',
	pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',

App/src/languages/en.ts

Lines 1294 to 1295 in 43f8b39

	error: {
	containsReservedWord: 'Name cannot contain the words Expensify or Concierge',

App/src/languages/en.ts

Lines 1425 to 1427 in 43f8b39

	validateAccountError: {
	phrase1: 'Hold up! We need you to validate your account first. To do so, ',
	phrase2: 'sign back in with a magic code',

App/src/languages/en.ts

Lines 1439 to 1440 in 43f8b39

	phoneNumber: 'Please enter a valid phone number',
	companyName: 'Please enter a valid legal business name',

App/src/languages/en.ts

Line 1486 in 43f8b39

errorMessageInvalidEmail: 'Invalid email',

App/src/languages/en.ts

Line 1515 in 43f8b39

ssnFull9Error: 'Please enter a valid 9 digit SSN',

App/src/languages/en.ts

Lines 1721 to 1722 in 43f8b39

	error: {
	certify: 'Must certify information is true and accurate',

App/src/languages/en.ts

Line 1729 in 43f8b39

certifyTrueAndAccurateError: 'Must certify information is true and accurate',

App/src/languages/en.ts

Lines 1995 to 1996 in 43f8b39

	invalidRateError: 'Please enter a valid rate',
	lowRateError: 'Rate must be greater than 0',

App/src/languages/en.ts

Line 2180 in 43f8b39

roomAlreadyExistsError: 'A room with this name already exists',

App/src/languages/en.ts

Lines 2346 to 2350 in 43f8b39

	report: {
	genericCreateReportFailureMessage: 'Unexpected error creating this chat, please try again later',
	genericAddCommentFailureMessage: 'Unexpected error while posting the comment, please try again later',
	genericUpdateReportFieldFailureMessage: 'Unexpected error while updating the field, please try again later',
	genericUpdateReporNameEditFailureMessage: 'Unexpected error while renaming the report, please try again later',

App/src/languages/en.ts

Lines 2467 to 2471 in 43f8b39

	error: {
	enterPhoneEmail: 'Enter a valid email or phone number',
	enterEmail: 'Enter an email',
	enterValidEmail: 'Enter a valid email',
	tryDifferentEmail: 'Please try a different email',

What changes do you think we should make in order to solve the problem?

add . period at the end of each line where errors are missing.

What alternative solutions did you explore? (Optional)

N/A

[ghost]

Updated Proposal

[rayane-djouah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Standardize Error Periods

What is the root cause of that problem?

Some of our error messages have periods, and some don't.

What changes do you think we should make in order to solve the problem?

we need to add a logic to the getTranslatedPhrase function in Localize lib here to append a period if phraseKey contain ".error." or ".errors." here

    if (translatedPhrase) {
        if (typeof translatedPhrase === 'function') {
            return translatedPhrase(...phraseParameters);
        }
        let translatedString: string = translatedPhrase;
        if (phraseKey.includes(".error.") || phraseKey.includes(".errors.")) {
            // Append the period to the translated phrase
            translatedString += '.';
        }
        // We set the translated value in the cache only for the phrases without parameters.
        cacheForLocale?.set(phraseKey, translatedString);
        return translatedString;
    }

and we should remove all existing periods from error messages translations in the en.ts and es.ts files. and ensure that the ".error." and ".errors." patterns are consistently used in error messages translations.

[ShridharGoel]

Proposal

Updated to add ESlint check.

[getusha]

@getusha only gotcha that comes to mind is how should we approach testing for this?

@grgia the idea of having a lint rule for it sounds good.

[ShridharGoel]

@getusha Can you check my proposal when possible?

[getusha]

@ShridharGoel's proposal looks good to me
First a pull request to update the lint rules.
Next, PR to bump the version of https://github.com/Expensify/eslint-config-expensify with corrections to the error messages.

🎀 👀 🎀 C+ Reviewed.

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @getusha 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @ShridharGoel 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[ShridharGoel]

@getusha Link to eslint-config-expensify PR: Expensify/eslint-config-expensify#88

[ShridharGoel]

@getusha Can you have a look at the PR when possible?

[grgia]

PR in review

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.69-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [NoQA] Use periods at the end of error messages with ESLint check #39988

If no regressions arise, payment will be issued on 2024-05-09. 🎊

For reference, here are some details about the assignees on this issue:

• @ShridharGoel requires payment automatic offer (Contributor)
• @getusha requires payment automatic offer (Reviewer)

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @adelekennedy you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[adelekennedy]

@ShridharGoel it looks like the automatic offer failed for some reason - I just created a manual offer for this issue I'll pay out once you accept!

[ShridharGoel]

@adelekennedy I've accepted it, thanks.

…

On Fri, 10 May 2024 at 00:45, adelekennedy ***@***.***> wrote: @ShridharGoel <https://github.com/ShridharGoel> it looks like the automatic offer failed for some reason - I just created a manual offer for this issue <https://www.upwork.com/nx/wm/offer/102241851> I'll pay out once you accept! — Reply to this email directly, view it on GitHub <#38989 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIPLJHDAZCTMVY2MYY7A2LDZBPDM3AVCNFSM6AAAAABFIR65LWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBTGI3DKOBUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[adelekennedy]

Payouts due:

• Contributor: $250 @ShridharGoel Upwork
• Contributor+: $250 @getusha Upwork