Untranslated error messages (shipping address and probably more)

[DanielRuf]

It seems you only translate the %1 is required and replace the %1 with the label but this leads to company ist Pflicht in our case where we show the error message in the banner.

formSectionErrors

https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/reactapp/src/components/shippingAddress/components/ShippingAddressFormikProvider.jsx#L47

https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/reactapp/src/components/shippingAddress/ShippingAddress.jsx#L40

https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/reactapp/src/components/common/Form/TextInput.jsx#L53

What would be the easiest and correct solution?

This should probably not the way to go:

[DanielRuf]

So to me it seems these are never really or correctly translated as they should be.

[DanielRuf]

Same probably also applies to billingAddress.

[DanielRuf]

We will try something like this as quickfix:

diff --git a/src/reactapp/src/components/shippingAddress/ShippingAddress.jsx
--- a/src/reactapp/src/components/shippingAddress/ShippingAddress.jsx
+++ b/src/reactapp/src/components/shippingAddress/ShippingAddress.jsx
@@ -37,6 +37,60 @@
   const { formSectionValues, formSectionErrors, isFormSectionTouched } =
     sectionFormikData;
   const streetError = _get(formSectionErrors, 'street');
+  const companyError = _get(formSectionErrors, 'company');
+  const firstnameError = _get(formSectionErrors, 'firstname');
+  const lastnameError = _get(formSectionErrors, 'lastname');
+  const phoneError = _get(formSectionErrors, 'phone');
+  const zipcodeError = _get(formSectionErrors, 'zipcode');
+  const cityError = _get(formSectionErrors, 'city');
+
+  if (companyError) {
+    _set(
+      formSectionErrors,
+      'company',
+      __('%1 is required', 'Company')
+    );
+  }
+
+  if (firstnameError) {
+    _set(
+      formSectionErrors,
+      'firstname',
+      __('%1 is required', 'First name')
+    );
+  }
+
+  if (lastnameError) {
+    _set(
+      formSectionErrors,
+      'lastname',
+      __('%1 is required', 'Last name')
+    );
+  }
+
+  if (phoneError) {
+    _set(
+      formSectionErrors,
+      'phone',
+      __('%1 is required', 'Phone')
+    );
+  }
+
+  if (zipcodeError) {
+    _set(
+      formSectionErrors,
+      'zipcode',
+      __('%1 is required', 'Postal Code')
+    );
+  }
+
+  if (cityError) {
+    _set(
+      formSectionErrors,
+      'city',
+      __('%1 is required', 'City')
+    );
+  }

   if (streetError) {
     _set(

diff --git a/src/reactapp/src/components/billingAddress/BillingAddress.jsx
--- a/src/reactapp/src/components/billingAddress/BillingAddress.jsx
+++ b/src/reactapp/src/components/billingAddress/BillingAddress.jsx
@@ -35,6 +35,60 @@
   const { formSectionValues, formSectionErrors, isFormSectionTouched } =
     formSectionData;
   const streetError = _get(formSectionErrors, 'street');
+  const companyError = _get(formSectionErrors, 'company');
+  const firstnameError = _get(formSectionErrors, 'firstname');
+  const lastnameError = _get(formSectionErrors, 'lastname');
+  const phoneError = _get(formSectionErrors, 'phone');
+  const zipcodeError = _get(formSectionErrors, 'zipcode');
+  const cityError = _get(formSectionErrors, 'city');
+
+  if (companyError) {
+    _set(
+      formSectionErrors,
+      'company',
+      __('%1 is required', 'Company')
+    );
+  }
+
+  if (firstnameError) {
+    _set(
+      formSectionErrors,
+      'firstname',
+      __('%1 is required', 'First name')
+    );
+  }
+
+  if (lastnameError) {
+    _set(
+      formSectionErrors,
+      'lastname',
+      __('%1 is required', 'Last name')
+    );
+  }
+
+  if (phoneError) {
+    _set(
+      formSectionErrors,
+      'phone',
+      __('%1 is required', 'Phone')
+    );
+  }
+
+  if (zipcodeError) {
+    _set(
+      formSectionErrors,
+      'zipcode',
+      __('%1 is required', 'Postal Code')
+    );
+  }
+
+  if (cityError) {
+    _set(
+      formSectionErrors,
+      'city',
+      __('%1 is required', 'City')
+    );
+  }

   if (streetError) {
     _set(

[rajeev-k-tomy]

See the implementation __() which is used to translate strings within the app. https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/reactapp/src/i18n/__.js#L13

As you see, we are translating the parameters too by self-invoking __() function.

stringLiteral = stringLiteral.replace('%1', __(dataToReplace));

So the only reason I can think of the reason behind those non-translating parameter is they are not passed via layout xml file: https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/view/frontend/layout/hyvareactcheckout_reactcheckout_index.xml#L19

Make sure they exist in that list.

[DanielRuf]

So the only reason I can think of the reason behind those non-translating parameter is they are not passed via layout xml file: https://github.com/hyva-themes/magento2-react-checkout/blob/main/src/view/frontend/layout/hyvareactcheckout_reactcheckout_index.xml#L19

Make sure they exist in that list.

I already tried to add "company" to that list, this did not work at all.

[DanielRuf]

Our version of i18n already looks like this:

[DanielRuf]

Adding "company" to the xml + csv (company,aaa) we still get this:

[DanielRuf]

And it is definitely available there:

[rajeev-k-tomy]

@DanielRuf Now i get it. It uses the company field name and not the label in the error message. A bug. It needs to be resolved. However, I assume this would be a tough one to fix

[rajeev-k-tomy]

@DanielRuf Can you please add the exact scenario to reproduce the error. It would be helpful for me to quickly check on the issue or to suggest a solution in your case.

[DanielRuf]

@DanielRuf Can you please add the exact scenario to reproduce the error. It would be helpful for me to quickly check on the issue or to suggest a solution in your case.

In our case we just have to translate the "%1 is required" error messages to show them in the banner at the top (Message and ErrorMessage components).

For us the workaround with the patches (https://github.com/hyva-themes/magento2-react-checkout/issues/274#issuecomment-1047661770) is currently "ok" to have them properly translated.

[DanielRuf]

@DanielRuf Now i get it. It uses the company field name and not the label in the error message. A bug. It needs to be resolved. However, I assume this would be a tough one to fix

Ah ok. I will keep an eye on this issue here and we will add the workaround as patch files using cweagans/composer-patches, that is ok for us at the moment.

[rajeev-k-tomy]

@DanielRuf I just checked this with the latest version of react checkout and it works just fine. Hence closing this issue.