From 8c7d7dd86da9b89c9972f47e2043d373008c64b2 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 13 Feb 2024 16:53:14 +0200 Subject: [PATCH 1/3] Language - Error message on New contact method page remains on Spanish --- src/components/Form/FormProvider.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 82a8d0870946..24db4a8ecd34 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -1,9 +1,10 @@ import lodashIsEqual from 'lodash/isEqual'; import type {ForwardedRef, MutableRefObject, ReactNode} from 'react'; -import React, {createRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {createRef, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import type {NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import useLocalize from '@hooks/useLocalize'; import * as ValidationUtils from '@libs/ValidationUtils'; import Visibility from '@libs/Visibility'; import * as FormActions from '@userActions/FormActions'; @@ -90,6 +91,7 @@ function FormProvider( }: FormProviderProps, forwardedRef: ForwardedRef, ) { + const {preferredLocale} = useLocalize(); const inputRefs = useRef({}); const touchedInputs = useRef>({}); const [inputValues, setInputValues] = useState
(() => ({...draftValues})); @@ -157,6 +159,25 @@ function FormProvider( [errors, formID, validate], ); + // When locales change from another session of the same account, + // validate the form in order to update the error translations + // See issue: https://github.com/Expensify/App/issues/34684 + useEffect(() => { + // Return since we only have issues with error translations + if (Object.keys(errors).length === 0) { + return; + } + + // Prepare validation values + const trimmedStringValues = ValidationUtils.prepareValues(inputValues); + + // Validate in order to make sure the correct error translations are displayed, + // making sure to not clear server errors if they exist + onValidate(trimmedStringValues, !hasServerError); + // Only run when locales change + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [preferredLocale]); + /** @param inputID - The inputID of the input being touched */ const setTouchedInput = useCallback( (inputID: keyof Form) => { From 8cde1e2e0dffec75e84d205969153fabaa838611 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 13 Feb 2024 17:59:48 +0200 Subject: [PATCH 2/3] Update src/components/Form/FormProvider.tsx Removed extra comment line as it cam be found from the git blame. Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com> --- src/components/Form/FormProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 24db4a8ecd34..86979679f344 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -161,7 +161,6 @@ function FormProvider( // When locales change from another session of the same account, // validate the form in order to update the error translations - // See issue: https://github.com/Expensify/App/issues/34684 useEffect(() => { // Return since we only have issues with error translations if (Object.keys(errors).length === 0) { From 5c6e435e279572ee1850cdfef318c7b74c05e2a6 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 13 Feb 2024 18:00:05 +0200 Subject: [PATCH 3/3] Update src/components/Form/FormProvider.tsx Removed redundant comment Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com> --- src/components/Form/FormProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx index 86979679f344..8cf6df2fa8f5 100644 --- a/src/components/Form/FormProvider.tsx +++ b/src/components/Form/FormProvider.tsx @@ -173,6 +173,7 @@ function FormProvider( // Validate in order to make sure the correct error translations are displayed, // making sure to not clear server errors if they exist onValidate(trimmedStringValues, !hasServerError); + // Only run when locales change // eslint-disable-next-line react-hooks/exhaustive-deps }, [preferredLocale]);