Update ShopifyProvider with flattened props (#156)

Shopify · Feb 2, 2023 · 3309706 · 3309706
1 parent afa2524
commit 3309706
Show file tree

Hide file tree

Showing 17 changed files with 471 additions and 252 deletions.
diff --git a/.changeset/tall-laws-relate.md b/.changeset/tall-laws-relate.md
@@ -0,0 +1,74 @@
+---
+'@shopify/storefront-kit-react': patch
+---
+
+`<ShopifyProvider />` and `useShop()` have had a breaking update:
+
+## `ShopifyProvider`
+
+- `<ShopifyProvider />` previously accepted a single `shopifyConfig` object as a prop; now, each of the keys in this object are their own separate props.
+- We also removed `country` and `language` as objects, and they are now strings with the names `countryIsoCode` and `languageIsoCode`, respectively.
+- The `locale` prop has been removed completely; this was a duplicative prop that was a combination of `countryIsoCode` and `languageIsoCode`, so it made no sense to have to include it as well.
+
+An example:
+
+```tsx
+// previously:
+
+<ShopifyProvider
+  shopifyConfig={{
+    storeDomain: 'my-store',
+    storefrontToken: 'abc123',
+    storefrontApiVersion: '2022-10',
+    country: {
+      isoCode: 'CA',
+    },
+    language: {
+      isoCode: 'EN',
+    },
+    locale: 'EN-CA',
+  }}
+>
+  {/* rest of your client-side app */}
+</ShopifyProvider>
+```
+
+```tsx
+// now
+
+<ShopifyProvider
+  storeDomain="my-store"
+  storefrontToken="abc123"
+  storefrontApiVersion="2022-10"
+  countryIsoCode="CA"
+  languageIsoCode="EN"
+>
+  {/* rest of your client-side app */}
+</ShopifyProvider>
+```
+
+## `useShop()`
+
+As noted above, `locale` was removed from the `<ShopifyProvider />` component, and `countryIsoCode` and `languageIsoCode` were renamed. Here's an example of how the return value of `useShop()` was affected
+
+```tsx
+// before
+
+const {country, language, locale} = useShop();
+
+console.log(country.isoCode);
+console.log(language.isoCode);
+console.log(locale);
+```
+
+```tsx
+// after
+
+const {countryIsoCode, languageIsoCode} = useShop();
+
+console.log(countryIsoCode);
+console.log(languageIsoCode);
+console.log(`${languageIsoCode}-${countryIsoCode}`);
+```
+
+Note that `locale` can be replicated by combining `languageIsoCode` and `countryIsoCode` with a hypthen (`-`) between them.
diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
@@ -55,12 +55,11 @@ export default function App({Component, pageProps}: AppProps) {
 
   return (
     <ShopifyProvider
-      shopifyConfig={{
-        storeDomain: `https://hydrogen-preview.myshopify.com`,
-        storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
-        storefrontApiVersion: '2023-01',
-        locale: 'EN-US',
-      }}
+      storeDomain="https://hydrogen-preview.myshopify.com"
+      storefrontToken="3b580e70970c4528da70c98e097c2fa0"
+      storefrontApiVersion="2023-01"
+      countryIsoCode="US"
+      languageIsoCode="EN"
     >
       <CartProvider>
         <Component {...pagePropsWithAppAnalytics} />

diff --git a/packages/react/docs/generated/generated_docs_data.json b/packages/react/docs/generated/generated_docs_data.json
diff --git a/packages/react/src/CartCost.test.tsx b/packages/react/src/CartCost.test.tsx
@@ -13,7 +13,7 @@ function ShopifyCartProvider(
 ) {
   return function Wrapper({children}: PropsWithChildren) {
     return (
-      <ShopifyProvider shopifyConfig={getShopifyConfig()}>
+      <ShopifyProvider {...getShopifyConfig()}>
         <CartProvider {...props}>{children}</CartProvider>
       </ShopifyProvider>
     );

diff --git a/packages/react/src/CartProvider.stories.tsx b/packages/react/src/CartProvider.stories.tsx
@@ -1,7 +1,7 @@
 import {ComponentProps, useState} from 'react';
 import type {Story} from '@ladle/react';
 import {CartProvider, storageAvailable, useCart} from './CartProvider.js';
-import {type ShopifyContextProps, ShopifyProvider} from './ShopifyProvider.js';
+import {type ShopifyProviderProps, ShopifyProvider} from './ShopifyProvider.js';
 import {CART_ID_STORAGE_KEY} from './cart-constants.js';
 
 const merchandiseId = 'gid://shopify/ProductVariant/41007290482744';
@@ -208,22 +208,17 @@ function CartComponent() {
   );
 }
 
-const config: ShopifyContextProps = {
+const config: ShopifyProviderProps = {
   storeDomain: 'hydrogen-preview.myshopify.com',
   storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
   storefrontApiVersion: '2023-01',
-  country: {
-    isoCode: 'CA',
-  },
-  language: {
-    isoCode: 'EN',
-  },
-  locale: 'en-CA',
+  countryIsoCode: 'CA',
+  languageIsoCode: 'EN',
 };
 
 const Template: Story<ComponentProps<typeof CartProvider>> = (props) => {
   return (
-    <ShopifyProvider shopifyConfig={config}>
+    <ShopifyProvider {...config}>
       <CartProvider {...props}>
         <CartComponent />
       </CartProvider>

diff --git a/packages/react/src/CartProvider.test.tsx b/packages/react/src/CartProvider.test.tsx
@@ -28,7 +28,7 @@ function ShopifyCartProvider(
 ) {
   return function Wrapper({children}: PropsWithChildren) {
     return (
-      <ShopifyProvider shopifyConfig={getShopifyConfig()}>
+      <ShopifyProvider {...getShopifyConfig()}>
         <CartProvider {...props}>{children}</CartProvider>
       </ShopifyProvider>
     );

diff --git a/packages/react/src/Money.test.tsx b/packages/react/src/Money.test.tsx
@@ -9,9 +9,7 @@ describe('<Money />', () => {
     const money = getPrice({currencyCode: 'USD'});
     render(<Money data={money} />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -24,9 +22,7 @@ describe('<Money />', () => {
     });
     render(<Money data={money} />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -37,9 +33,7 @@ describe('<Money />', () => {
     const money = getPrice();
     render(<Money data={money} className="money" />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -51,9 +45,7 @@ describe('<Money />', () => {
 
     render(<Money data={money} as="button" disabled />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -71,9 +63,7 @@ describe('<Money />', () => {
     });
     render(<Money data={money} withoutTrailingZeros />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -87,9 +77,7 @@ describe('<Money />', () => {
     });
     render(<Money data={money} withoutCurrency />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -104,9 +92,7 @@ describe('<Money />', () => {
     });
     render(<Money data={money} withoutCurrency withoutTrailingZeros />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -124,9 +110,7 @@ describe('<Money />', () => {
     const measurement = getUnitPriceMeasurement();
     render(<Money data={money} measurement={measurement} />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -152,9 +136,7 @@ describe('<Money />', () => {
       />,
       {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       }
     );
@@ -182,9 +164,7 @@ describe('<Money />', () => {
       />,
       {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       }
     );

diff --git a/packages/react/src/ShopPayButton.test.tsx b/packages/react/src/ShopPayButton.test.tsx
@@ -26,9 +26,7 @@ describe(`<ShopPayButton />`, () => {
       // @ts-expect-error Purposely not passing the correct props
       render(<ShopPayButton />, {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       })
     ).toThrow(MissingPropsErrorMessage);
@@ -39,9 +37,7 @@ describe(`<ShopPayButton />`, () => {
       // @ts-expect-error Purposely passing in both props when they shouyldn't be
       render(<ShopPayButton variantIds={[]} variantIdsAndQuantities={[]} />, {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       })
     ).toThrow(DoublePropsErrorMessage);
@@ -51,9 +47,7 @@ describe(`<ShopPayButton />`, () => {
     const fakeId = 'gid://shopify/ProductVariant/123';
     const {container} = render(<ShopPayButton variantIds={[fakeId]} />, {
       wrapper: ({children}) => (
-        <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-          {children}
-        </ShopifyProvider>
+        <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
       ),
     });
 
@@ -75,9 +69,7 @@ describe(`<ShopPayButton />`, () => {
       />,
       {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       }
     );
@@ -101,9 +93,7 @@ describe(`<ShopPayButton />`, () => {
       />,
       {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       }
     );
@@ -119,9 +109,7 @@ describe(`<ShopPayButton />`, () => {
     expect(() =>
       render(<ShopPayButton variantIds={[fakeId]} />, {
         wrapper: ({children}) => (
-          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
-            {children}
-          </ShopifyProvider>
+          <ShopifyProvider {...getShopifyConfig()}>{children}</ShopifyProvider>
         ),
       })
     ).toThrow(InvalidPropsErrorMessage);

diff --git a/packages/react/src/ShopifyProvider.example.jsx b/packages/react/src/ShopifyProvider.example.jsx
@@ -1,15 +1,27 @@
-import {ShopifyProvider} from '@shopify/storefront-kit-react';
+import {ShopifyProvider, useShop} from '@shopify/storefront-kit-react';
 
 export default function App() {
   return (
     <ShopifyProvider
-      shopifyConfig={{
-        storeDomain: 'my-store',
-        storefrontToken: 'abc123',
-        storefrontApiVersion: '2022-10',
-      }}
+      storeDomain="my-store"
+      storefrontToken="abc123"
+      storefrontApiVersion="2022-10"
+      countryIsoCode="CA"
+      languageIsoCode="EN"
     >
-      {/* rest of your client-side app */}
+      <UsingUseShop />
     </ShopifyProvider>
   );
 }
+
+export function UsingUseShop() {
+  const shop = useShop();
+
+  return (
+    <>
+      <div>{shop.storeDomain}</div>
+      <div>{shop.storefrontToken}</div>
+      <div>{shop.storefrontApiVersion}</div>
+    </>
+  );
+}
diff --git a/packages/react/src/ShopifyProvider.example.tsx b/packages/react/src/ShopifyProvider.example.tsx
@@ -1,15 +1,27 @@
-import {ShopifyProvider} from '@shopify/storefront-kit-react';
+import {ShopifyProvider, useShop} from '@shopify/storefront-kit-react';
 
 export default function App() {
   return (
     <ShopifyProvider
-      shopifyConfig={{
-        storeDomain: 'my-store',
-        storefrontToken: 'abc123',
-        storefrontApiVersion: '2022-10',
-      }}
+      storeDomain="my-store"
+      storefrontToken="abc123"
+      storefrontApiVersion="2022-10"
+      countryIsoCode="CA"
+      languageIsoCode="EN"
     >
-      {/* rest of your client-side app */}
+      <UsingUseShop />
     </ShopifyProvider>
   );
 }
+
+export function UsingUseShop() {
+  const shop = useShop();
+
+  return (
+    <>
+      <div>{shop.storeDomain}</div>
+      <div>{shop.storefrontToken}</div>
+      <div>{shop.storefrontApiVersion}</div>
+    </>
+  );
+}