Localization

yarn add @commercetools-frontend/l10n

yarn add react

import {
  getSupportedLocales,
  getSupportedLocale,
} from '@commercetools-frontend/l10n';

// `getSupportedLocales` returns all supported locales
console.log(getSupportedLocales());
// ["en", "de", "es", "fr-FR", "pt-BR", "zh-CN"]

// `getSupportedLocale` returns the specified locale if it's supported; otherwise, it returns the default locale
console.log(getSupportedLocale('en')); // Output: 'en'
console.log(getSupportedLocale('sv')); // Output: 'en'

import { useCountries } from '@commercetools-frontend/l10n';

function MyComponent() {
  const { isLoading, data: countries } = useCountries('en');

  if (isLoading) return <LoadingSpinner />;

  return <div>Countries: {JSON.stringify(countries)}</div>;
  // Countries format: { <countryCode>: <countryLabel> }
  // Example: { "de": "Germany" }"
}

import { useCurrencies } from '@commercetools-frontend/l10n';

function MyComponent() {
  const { isLoading, data: currencies } = useCurrencies('en');

  if (isLoading) return <LoadingSpinner />;

  return <div>Currencies: {JSON.stringify(currencies)}</div>;
  // Currencies format: { <currencyCode>: { label, symbol } }
  // Example: { "EUR": { "label": "Euro", "symbol": "€" } }
}

import { useLanguages } from '@commercetools-frontend/l10n';

function MyComponent() {
  const { isLoading, data: languages } = useLanguages('en');

  if (isLoading) return <LoadingSpinner />;

  return <div>Languages: {JSON.stringify(languages)}</div>;
  // Languages format: { <languageCode>: { language, country } }
  // Example with primary language: { "es": { "language": "Spanish" } }
  // Example with language of a region:
  // { "es-AR": { "language": "Spanish", "country": "Argentina" } }
}

import { useTimeZones } from '@commercetools-frontend/l10n';

function MyComponent() {
  const { isLoading, data: timeZones } = useTimeZones('en');

  if (isLoading) return <LoadingSpinner />;

  return <div>Time zones: {JSON.stringify(timeZones)}</div>;
  // Time zones format: { <timezone>: { name, abbr, offset } }
  // Example:
  // { "Europe/Berlin": { "name": "Central European Time - Berlin", "abbr": "CEST", "offset": "+02:00" } }
}

{
  // `name` is a `LocalizedString`
  // as defined by https://docs.commercetools.com/api/projects/products#productdata
  name: {
    en: 'Milk';
  }
}

type TLocalizedString = {
  __typename?: 'LocalizedString';
  locale: string;
  value: string;
};

{
  nameAllLocales: [
    {
      locale: 'en',
      value: 'Milk',
    },
  ];
}

const output = applyTransformedLocalizedStrings(
  {
    id: '1',
    name: { en: 'Milk', de: 'Milch' },
  },
  [{ from: 'name', to: 'nameAllLocales' }]
);
console.log(output);
// { id: 1, nameAllLocales:  [{ locale: 'de', value: 'Milch' }, { locale: 'en', value: 'Milk' }] }

const product = {
  nameAllLocales: [
    {
      locale: 'en',
      value: 'Milk',
    },
    {
      locale: 'de',
      value: 'Milch',
    },
  ],
};
const fieldNameTransformationMappings = [
  {
    from: 'nameAllLocales',
    to: 'name',
  },
];
const transformedProduct = applyTransformedLocalizedFields(
  product,
  fieldNameTransformationMappings
);

console.log(transformedProduct);
// { name: { de: 'Milch', en: 'Milk' } }

// fetching a product from the Composable Commerce GraphQL API returns a product with a `nameAllLocales`
const product = useMcQuery(ProductQuery, {
  context: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
});

// Since LocalizedTextInput accepts a value in the format `{ [key: string]: string }`,
// we transform our product to match the required shape
const transformedProduct = applyTransformedLocalizedFields(
  product,
  fieldNameTransformMappings
);

// Finally, we are ready to render our form with the correctly shaped `name`
return <LocalizedTextInput name="name" value={transformedProduct.name} />;

const output = transformLocalizedFieldToLocalizedString([
  { locale: 'en', value: 'Milk' },
  { locale: 'de', value: 'Milch' },
]);
console.log(output);
// {en: 'Milk', de: 'Milch'}

const output = transformLocalizedStringToLocalizedField({
  en: 'Milk',
  de: 'Milch',
});
console.log(output);
// [{ locale: 'en', value: 'Milk' }, { locale: 'de', value: 'Milch' }]

const product = {
  name: {
    en: 'Milk',
    de: 'Milch',
  },
};

const translatedName = formatLocalizedString(product, {
  key: 'name',
  locale: 'de',
});

console.log(translatedName);
// 'Milch'

const translatedName = formatLocalizedString(product, {
  key: 'name',
  locale: 'sv',
});

console.log(translatedName);
// 'Milk (EN)'

const translatedName = formatLocalizedString(product, {
  key: 'name',
  locale: 'de-AT',
});

console.log(translatedName);
// 'Milch'

const translatedName = formatLocalizedString(product, {
  obj: product,
  key: 'name',
  locale: 'sv',
  fallback: '-',
});

const translatedName = formatLocalizedString(product, {
  obj: product,
  key: 'name',
  locale: 'sv',
  fallbackOrder: ['en', 'de', 'es', 'it'],
  fallback: '-',
});

import Text from '@commercetools-uikit/text';
import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';

const { dataLocale, projectLanguages } = useApplicationContext(
  (applicationContext) => ({
    dataLocale: applicationContext.dataLocale,
    // The Application Context also exposes the languages that are defined on the Project settings
    // we can rely on this to determine the fallback order.
    // This helps with consistency, although you can specify the fallback order however you want
    projectLanguages: context.project.languages,
  })
);

return (
  <Text.Headline>
    {formatLocalizedString(product, {
      key: 'name',
      locale: dataLocale,
      fallback: NO_VALUE_FALLBACK,
      fallbackOrder: projectLanguages,
    })}
  </Text.Headline>
);