# Localization

The API for localizing your extension.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Text,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  return (
    <Text>{translate('welcomeMessage')}</Text>
  );
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {extension} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const welcomeMsg = i18n.translate(
      'welcomeMessage',
    );

    root.appendChild(root.createText(welcomeMsg));
  },
);

```

```json
{
  "welcomeMessage": "Welcome to our store!"
}

```

## StandardApi

The base API object provided to this and other `customer-account` extension targets.

### Docs_Standard_LocalizationApi

### i18n

value: `I18n`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
Utilities for translating content and formatting values according to the current `localization` of the user.

### localization

value: `Localization`

  - Localization: export interface Localization {
  /**
   * The language the buyer sees in the customer account hub.
   */
  language: StatefulRemoteSubscribable<Language>;

  /**
   * This is the buyer's language, as supported by the extension.
   * If the buyer's actual language is not supported by the extension,
   * this is the fallback locale used for translations.
   *
   * For example, if the buyer's language is 'fr-CA' but your extension
   * only supports translations for 'fr', then the `isoCode` for this
   * language is 'fr'. If your extension does not provide french
   * translations at all, this value is the default locale for your
   * extension (that is, the one matching your .default.json file).
   */
  extensionLanguage: StatefulRemoteSubscribable<Language>;

  /**
   * The country context of the buyer sees in the customer account.
   * It will update if the buyer changes the country in the customer account
   * If the country is unknown, then the value is undefined.
   */
  country: StatefulRemoteSubscribable<Country | undefined>;
}
Details about the language of the buyer.

### I18n

### formatCurrency

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized currency value.

This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.

### formatDate

value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string`

Returns a localized date value.

This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.

### formatNumber

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized number.

This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.

### translate

value: `I18nTranslate`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
  - I18nTranslate: export interface I18nTranslate {
  /**
   * This returns a translated string matching a key in a locale file.
   *
   * @example translate("banner.title")
   */
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}
Returns translated content in the buyer's locale, as supported by the extension.

- `options.count` is a special numeric value used in pluralization.
- The other option keys and values are treated as replacements for interpolation.
- If the replacements are all primitives, then `translate()` returns a single string.
- If replacements contain UI components, then `translate()` returns an array of elements.

### Localization

### country

value: `StatefulRemoteSubscribable<Country | undefined>`

  - Country: export interface Country {
  /**
   * The ISO-3166-1 code for this country.
   * @see https://www.iso.org/iso-3166-country-codes.html
   */
  isoCode: CountryCode;
}
The country context of the buyer sees in the customer account. It will update if the buyer changes the country in the customer account If the country is unknown, then the value is undefined.

### extensionLanguage

value: `StatefulRemoteSubscribable<Language>`

  - Language: export interface Language {
  /**
   * The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
   *
   * @example 'en' for English, or 'en-US' for English local to United States.
   * @see https://en.wikipedia.org/wiki/IETF_language_tag
   * @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   */
  isoCode: string;
}
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations.

For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).

### language

value: `StatefulRemoteSubscribable<Language>`

  - Language: export interface Language {
  /**
   * The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
   *
   * @example 'en' for English, or 'en-US' for English local to United States.
   * @see https://en.wikipedia.org/wiki/IETF_language_tag
   * @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   */
  isoCode: string;
}
The language the buyer sees in the customer account hub.

### Country

### isoCode

value: `CountryCode`

  - Country: export interface Country {
  /**
   * The ISO-3166-1 code for this country.
   * @see https://www.iso.org/iso-3166-country-codes.html
   */
  isoCode: CountryCode;
}
  - CountryCode: 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'
The ISO-3166-1 code for this country.

### Language

### isoCode

value: `string`

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## useLanguage

Returns the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, it will return the fallback locale used for translations.

### UseLanguageGeneratedType

Returns the current language of the checkout, and automatically re-renders your component if the language changes.

#### Returns: Language
export function useLanguage<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Language {
  const {localization} = useApi<Target>();

  return useSubscription(localization.language);
}


### Language

### isoCode

value: `string`

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## useLocalizationCountry

Returns the country of the buyer's current session, and automatically re-renders your component if the country changes.

### UseLocalizationCountryGeneratedType

Returns the country associated with either the current order on the order status page or the selected country in the customer account interface, and automatically re-renders your component if the country changes.

#### Returns: Country | undefined
export function useLocalizationCountry<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Country | undefined {
  const api = useApi<Target>();
  const extensionTarget = api.extension.target;

  if (!('country' in api.localization)) {
    throw new ExtensionHasNoFieldError('country', extensionTarget);
  }

  return useSubscription(api.localization.country);
}


### Country

### isoCode

value: `CountryCode`

  - Country: export interface Country {
  /**
   * The ISO-3166-1 code for this country.
   * @see https://www.iso.org/iso-3166-country-codes.html
   */
  isoCode: CountryCode;
}
  - CountryCode: 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'
The ISO-3166-1 code for this country.

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## useExtensionLanguage

Returns the language the buyer sees in the customer account hub.

### UseExtensionLanguageGeneratedType

Returns the buyer's language, as supported by the extension.

#### Returns: Language
export function useExtensionLanguage<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Language {
  const {localization} = useApi<Target>();

  return useSubscription(localization.extensionLanguage);
}


### Language

### isoCode

value: `string`

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## useI18n

Returns utilities for translating content and formatting values according to the current localization of the user.

### UseI18nGeneratedType

Returns utilities for translating content and formatting values    according to the current localization of the user.

#### Returns: I18n
export function useI18n<
  Target extends RenderCustomerAccountExtensionTarget = RenderCustomerAccountExtensionTarget,
>(): I18n {
  return useApi<Target>().i18n;
}


### I18n

### formatCurrency

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized currency value.

This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.

### formatDate

value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string`

Returns a localized date value.

This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.

### formatNumber

value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`

Returns a localized number.

This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.

### translate

value: `I18nTranslate`

  - I18n: export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}
  - I18nTranslate: export interface I18nTranslate {
  /**
   * This returns a translated string matching a key in a locale file.
   *
   * @example translate("banner.title")
   */
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}
Returns translated content in the buyer's locale, as supported by the extension.

- `options.count` is a special numeric value used in pluralization.
- The other option keys and values are treated as replacements for interpolation.
- If the replacements are all primitives, then `translate()` returns a single string.
- If replacements contain UI components, then `translate()` returns an array of elements.

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## useTranslate

Returns the `I18nTranslate` interface used to translate strings.

### UseTranslateGeneratedType

Returns the `I18nTranslate` interface used to translate strings.

#### Returns: I18nTranslate
export function useTranslate<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): I18nTranslate {
  const {i18n} = useApi<Target>();

  const translate = useCallback<I18nTranslate>(
    (...args) => {
      const translation = i18n.translate(...args);

      if (!Array.isArray(translation)) {
        return translation as any;
      }

      return translation.map((part, index) => {
        if (isValidElement(part)) {
          // eslint-disable-next-line react/no-array-index-key
          return cloneElement(part as RemoteComponentType<any>, {key: index});
        }
        return part;
      });
    },
    [i18n],
  );

  return translate;
}


## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```

## Examples

The API for localizing your extension.


You can access the current country of a customer to implement country specific logic.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  reactExtension,
  useI18n,
  useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const country = useLocalizationCountry();

  if (country?.isoCode === 'CA') {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'canadaPostWarningMessage',
        )}
      />
    );
  }

  return null;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, localization}) => {
    const country = localization.country.current;

    if (country?.isoCode === 'CA') {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'canadaPostWarningMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

```

```json
{
  "canadaPostWarningMessage": "Canada Post has issued a red delivery service alert for Ontario due to a severe snowstorm, suspending package delivery and collection for the week."
}

```


You can use the count option in the translate method to get a pluralized string based on the current locale.

```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  reactExtension,
  Banner,
  useApi,
  useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const {i18n} = useApi();
  const translate = useTranslate();

  const points = 10000;
  const formattedPoints =
    i18n.formatNumber(points);
  // Translate the loyalty points message, using pluralization to differentiate messages
  const loyaltyPointsMsg = translate(
    'loyaltyPoints',
    {
      count: points,
      formattedPoints,
    },
  );

  return <Banner title={loyaltyPointsMsg} />;
}

```

```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  extension,
  Banner,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, {i18n}) => {
    const points = 10000;
    const formattedPoints =
      i18n.formatNumber(points);
    // Translate the loyalty points message, using pluralization to differentiate messages
    const loyaltyPointsMsg = i18n.translate(
      'loyaltyPoints',
      {
        count: points,
        formattedPoints,
      },
    );

    const app = root.createComponent(Banner, {
      title: loyaltyPointsMsg,
    });

    root.appendChild(app);
  },
);

```

```json
{
  "loyaltyPoints": {
    "one": "You have {{formattedPoints}} loyalty point",
    "other": "You have {{formattedPoints}} loyalty points"
  }
}

```