Shopify / shopify-frontend-template-react

MIT License
132 stars 61 forks source link

Polaris translations should be initialized based on the locale of the request #139

Open movermeyer opened 2 years ago

movermeyer commented 2 years ago

Issue summary

Right now, PolarisProvider.jsx imports the en translations, regardless of the locale of the request.

Expected behavior

Which translations are used in the Polaris components should depend on the locale of the request, and should fallback to en only when no appropriate translations could be found.

Actual behavior

en.json is used regardless. See hard-coded import statement.

Steps to reproduce the problem

Add a Polaris DatePicker to your app:

const [{month, year}, setDate] = useState({month: 1, year: 2018});
const [selectedDates, setSelectedDates] = useState({
  start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
  end: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
});

return (
  <>
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      // onMonthChange={handleMonthChange}
      selected={selectedDates}
    />

Then set your Shopify Admin/Identity account prefered language to something other than English (e.g., nb-NO)

Expected:

image

Actual:

image

Potential solution

Shopify provides the merchant's chosen locale in the locale query parameter. As a first step, PolarisProvider could be changed to allow the locale to be passed in.

Then it could load the corresponding translations based on an exact match of the locale. This would work for locales like fr, but not those like nb-NO, since there is no nb-NO.json in Polaris, just a nb.json.

As a next better step, it would follow the parentLocales data from CLDR to determine a fallback chain for the locale (e.g., nb-NO -> nb -> no), checking each locale in the fallback chain until finally defaulting to en.

trishrempel commented 1 year ago

This issue will be solved by this PR.

mete89 commented 1 year ago

@trishrempel I don't see any locale query param in shopify admin urls. do you see any? https://github.com/Shopify/shopify-frontend-template-react/blob/9c232a1f062c7d2bb31a58d9ffc53b452b7b8ed9/utils/i18nUtils.js#L48

trishrempel commented 1 year ago

Hi @mete89, the locale is available on the query param accessible to the embedded app; you can find it in Developer Tools by filtering on &locale=:

08-00-qq5bs-0gal4