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.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}) => ( + + {children} + + ), + }, + ); + + 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', + }); + }); }); 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(