🐛[Bug]local is not working.

[Yamashou]

Issue summary

The language is not localized by AppProvider. AppProvider does not localize the language. No matter which language is specified, the display will always be in English. I have specified the following

<AppProvider locale="ja" ianaTimezone="Asia/Tokyo">

Expected behavior

I hope that the language in the component will be Japanese!

Actual behavior

Always in English

Steps to reproduce the problem

1. Proceed as per this URL
2. Set AppProvider local to ja and ianaTimezone to Asia/Tokyo

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N): Y
• discount-app-components version number: 1.0.7
• Browser: Chrome
• Device: mac
• Operating System: macOS

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/discount-app-components to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

[Yamashou]

@devisscher Is this likely to be cured?

[devisscher]

Hi @Yamashou, we tried reproducing this issue, it seems the locale is properly set when using it in an example app. Do you have any additional information on how you reproduced this? (Codesandox or code examples?) You can refer to this as an example: https://github.com/Shopify/discount-app-components/blob/main/src/stories/foundation/Provider.tsx - please let us know if you're still encountering the issue.

[Yamashou]

@devisscher
This one still occurs.
Is it possible to have it tested to see if it will be in Japanese? If possible, in a vite environment.

[Yamashou]

@devisscher
I am still getting these errors. When will it be fixed?

[maneko00]

@devisscher
The same error is occurring. I followed this tutorial to build the environment.
https://shopify.dev/docs/apps/selling-strategies/discounts/experience

[mbaumbach]

I've seen the same thing as well. We're using a Vite build, but it appears to be due to the way languages are imported in the DiscountsI18nProvider:

import(
      /* webpackChunkName: "DiscountAppComponents-i18n", webpackMode: "lazy-once" */
    `/../../../../../../locales/${locale}.json`).then(dictionary => {

That results in attempting to fetch https://yourhost/locales/en.json or whatever language you're looking for. If that code is monkey patched to something like this:

import(`/node_modules/@shopify/discount-app-components/locales/${locale}.json`).then(dictionary => {

That loads for me in a standard Vite build by attempting to fetch https://yourhost/node_modules/@shopify/discount-app-components/locales/en.json.

Perhaps there's some configuration that needs to be modified to make that work with Vite vs webpack (which that code seems to be referencing).

[mbaumbach]

After some tinkering, it seems like it may need to be left up to the consumer of this library to decide how to load in the translations. I think it'll be very difficult to make this library support dynamically loading translations that works with the various build tools out there (e.g., Webpack, Vite, Rollup, etc.).

Perhaps there's a mechanism where a consumer can provide them directly to the provider similar to what is done in Polaris with the i18n prop on the AppProvider:

<PolarisAppProvider i18n={enPolarisTranslations}>

In the Vite world, this allows us to build a map of all translations:

const LOCALES = import.meta.glob('../../node_modules/@shopify/polaris/locales/*.json');

And then dynamically import them as needed:

async loadPolarisTranslation(locale) {
    const translations = await LOCALES[`../../node_modules/@shopify/polaris/locales/${locale}.json`]();
    return translations;
}

Once we have the translations for the current locale, we are able to pass them into the i18n prop. A similar mechanism for this library should provide the necessary flexibility to support various build systems.

I created a fork and tried implementing a rudimentary version of this here.

It's usage within Vite is something like this:

import { AppProvider } from '@shopify/discount-app-components';

// The exact path for these will depend where your node_modules is.
// This example assumes the SomeComponent file lives in the root-project-folder/src/components folder.
const LOCALES = import.meta.glob('../../node_modules/@shopify/discount-app-components/locales/*.json');

function discountTranslations(locale) {
     return LOCALES[`../../node_modules/@shopify/discount-app-components/locales/${locale}.json`]();
}

export default function SomeComponent({ locale, timezone, children }) {
     return (
        <AppProvider locale={locale} ianaTimezone={timezone} translationsFn={discountTranslations}>
            {children}
        </AppProvider>
    );
}

The example commit I gave is backwards compatible and falls back to the webpack chunk loading if no translationsFn is provided.

[maneko00]

@mbaumbach
Thank you for the kind advice!

I solved the problem by copying /node_modules/@shopify/discount-app-components/locales/en.json to https://yourhost/locales/en.json.