Repository: Shopify/hydrogen (TypeScript)

Issue:
[Bug] useMoney Hook Error: Incorrect locale provided (hydrogen-react package)
### What is the location of your example repository?

_No response_

### Which package or tool is having this issue?

hydrogen-react

### What version of that package or tool are you using?

2023.4.4

### What version of Remix are you using?

_No response_

### Steps to Reproduce

This happens when using the useMoney hook from hydrogen-react when having a language iso code with more then 2 characters. For example: 'PT_PT', 'PT_BR'. 

Meaning that there are possible locales like: PT_PT-PT, PT_PT-BR, PT_ES

So there is a combination of the country iso code (that are always 2 digits) - [documentation here](https://shopify.dev/api/storefront/2022-07/enums/CountryCode) - and language iso code (that can be 2 digits - XX - or 5 digits - XX_XX) - [documentation here](https://shopify.dev/api/storefront/2022-07/enums/LanguageCode)

### Expected Behavior

It should take into count that are possible iso codes that have more then two characters.

### Actual Behavior

It should take into count that are possible languages iso codes that have more then two characters.

Related issue: [[BUG] useMeasurement and useMoney Hooks Error: Incorrect locale information provided #1800](https://github.com/Shopify/hydrogen-v1/issues/1800)


Discussion:
Hello @lordofthecactus and @frehner,

Sorry to ping you but I think you are familiar with this issue.

Thanks,
Daniel
Hi @danf97, thank you for spotting this bug. we'll get a release out with a fix that make sure we stripe out SFAPI specific language strings so that it works with `Intl.NumberFormat` spec.
> we'll get a release out with a fix that make sure we stripe out SFAPI specific language strings

@wizardlyhel does this mean that there will be a change to the language and money codes in the near future?
Not on the storefront API - just within Hydrogen



Patch:
diff --git a/.changeset/cyan-cats-unite.md b/.changeset/cyan-cats-unite.md
new file mode 100644
index 0000000000..6cb93092c0
--- /dev/null
+++ b/.changeset/cyan-cats-unite.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Fix long language code breaking useMoney hook - Contributed by @QuentinGibson
diff --git a/packages/hydrogen-react/src/useMoney.tsx b/packages/hydrogen-react/src/useMoney.tsx
index 871f12195c..65deb0bc34 100644
--- a/packages/hydrogen-react/src/useMoney.tsx
+++ b/packages/hydrogen-react/src/useMoney.tsx
@@ -103,7 +103,9 @@ export type UseMoneyValue = {
  */
 export function useMoney(money: MoneyV2): UseMoneyValue {
   const {countryIsoCode, languageIsoCode} = useShop();
-  const locale = `${languageIsoCode}-${countryIsoCode}`;
+  const locale = languageIsoCode.includes('_')
+    ? languageIsoCode.replace('_', '-')
+    : `${languageIsoCode}-${countryIsoCode}`;
 
   if (!locale) {
     throw new Error(


Test patch:
diff --git a/packages/hydrogen-react/src/useMoney.test.tsx b/packages/hydrogen-react/src/useMoney.test.tsx
index 40c9f004b4..d284fd8f92 100644
--- a/packages/hydrogen-react/src/useMoney.test.tsx
+++ b/packages/hydrogen-react/src/useMoney.test.tsx
@@ -1,5 +1,6 @@
 import {describe, expect, it} from 'vitest';
 import {renderHook} from '@testing-library/react';
+import {ShopifyProvider, ShopifyProviderProps} from './ShopifyProvider.js';
 import {useMoney} from './useMoney.js';
 
 describe(`useMoney`, () => {
@@ -62,4 +63,69 @@ describe(`useMoney`, () => {
       withoutTrailingZerosAndCurrency: '19',
     });
   });
+
+  it(`does not fail when language ISO code is more than 2 characters`, () => {
+    const SHOPIFY_CONFIG: ShopifyProviderProps = {
+      storeDomain: 'https://notashop.myshopify.com',
+      storefrontToken: 'abc123',
+      storefrontApiVersion: '2023-07',
+      countryIsoCode: 'BR',
+      languageIsoCode: 'PT_PT',
+    };
+
+    const {result} = renderHook(
+      () =>
+        useMoney({
+          amount: '19.00',
+          currencyCode: 'USD',
+        }),
+      {
+        wrapper: ({children}) => (
+          <ShopifyProvider
+            {...SHOPIFY_CONFIG}
+            storeDomain="https://notashop.myshopify.com"
+          >
+            {children}
+          </ShopifyProvider>
+        ),
+      },
+    );
+
+    expect(result.current).toEqual({
+      amount: '19,00 ',
+      currencyCode: 'USD',
+      currencyName: 'dólares dos Estados Unidos',
+      currencyNarrowSymbol: '$',
+      currencySymbol: 'US$',
+      localizedString: '19,00 US$',
+      original: {
+        amount: '19.00',
+        currencyCode: 'USD',
+      },
+      parts: [
+        {
+          type: 'integer',
+          value: '19',
+        },
+        {
+          type: 'decimal',
+          value: ',',
+        },
+        {
+          type: 'fraction',
+          value: '00',
+        },
+        {
+          type: 'literal',
+          value: ' ',
+        },
+        {
+          type: 'currency',
+          value: 'US$',
+        },
+      ],
+      withoutTrailingZeros: '19 US$',
+      withoutTrailingZerosAndCurrency: '19',
+    });
+  });
 });