Make <CartProvider> use country code from <ShopifyProvider> (#2521)

Shopify · Jun 5, 2023 · ca65e24 · ca65e24
1 parent be4eab1
commit ca65e24
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/chilly-dogs-sneeze.md b/.changeset/chilly-dogs-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix the `<CartProvider>` to by default pull localization from `<ShopifyProvider>`. You can still override the countryCode by passing a prop directly to `<CartProvider>`. Resolves https://github.com/Shopify/hydrogen/issues/622
diff --git a/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx b/packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx
@@ -34,6 +34,7 @@ import {CartNoteUpdateMutationVariables} from './graphql/CartNoteUpdateMutation.
 import {useCartAPIStateMachine} from './useCartAPIStateMachine.client.js';
 import {CART_ID_STORAGE_KEY} from './constants.js';
 import {ClientAnalytics} from '../../foundation/Analytics/ClientAnalytics.js';
+import {useLocalization} from '../../hooks/useLocalization/useLocalization.js';
 
 export function CartProvider({
   children,
@@ -57,7 +58,7 @@ export function CartProvider({
   data: cart,
   cartFragment = defaultCartFragment,
   customerAccessToken,
-  countryCode = CountryCode.Us,
+  countryCode,
 }: {
   /** Any `ReactNode` elements. */
   children: React.ReactNode;
@@ -104,6 +105,12 @@ export function CartProvider({
   /** The ISO country code for i18n. */
   countryCode?: CountryCode;
 }) {
+  const {country} = useLocalization();
+
+  countryCode = (
+    (countryCode as string) ?? country.isoCode
+  ).toUpperCase() as CountryCode;
+
   if (countryCode) countryCode = countryCode.toUpperCase() as CountryCode;
   const [prevCountryCode, setPrevCountryCode] = useState(countryCode);
   const [prevCustomerAccessToken, setPrevCustomerAccessToken] =