Update to shopifyDomain to only provide exactly what is passed in

Author: frehner

.changeset/wet-hounds-add.md

@@ -0,0 +1,16 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Updated to Storefront API version `2023-01`
+
+## Storefront API Changes
+
+The Storefront API changelog can be viewed [here](https://shopify.dev/api/release-notes/2023-01#graphql-storefront-api-changes). There are not any breaking changes in the Storefront API itself.
+
+## Storefront Kit changes
+
+### Breaking Changes
+
+- The default Cart query no longer uses `compareAtPriceV2` and `priceV2`; use `compareAtPrice` and `price` instead. The `V2` fields will be removed in an upcoming version of the Storefront API.
+- The storefront client and ShopifyProvider now provide the `storeDomain` exactly as it is received; it's recommended that you pass the domain with the protocol and the fully-qualified domain name for your Storefront. For example: `https://hydrogen-test.myshopify.com`

CONTRIBUTING.md

@@ -49,6 +49,7 @@ Processes that need to happen:
 
 - Create a new branch for the version, e.g. `2022-10`.
 - Comment out the "Create release pull request or publish" job in `releases.yml` so that it won't auto-publish a new version of the branch until you're ready
+- Create a new changeset. Use this changeset to add notes and guides to important things that are changed as part of this update.
 - Do a find & replace in the code to replace nearly all instances of the old version with the new version.
   - However, don't replace documentation unless it makes sense.
   - Also be careful that some versions of the Storefront API don't exactly match code here: for example, SFAPI `2022-07` could be both `2022-07` and `2022-7` in this codebase.

packages/react/src/ShopPayButton.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {vi} from 'vitest';
 import {render} from '@testing-library/react';
 import {ShopifyProvider} from './ShopifyProvider.js';

packages/react/src/ShopPayButton.tsx

@@ -89,10 +89,7 @@ export function ShopPayButton({
   return (
     <div className={className} style={style}>
       {shopPayLoadedStatus === 'done' && (
-        <shop-pay-button
-          store-url={`https://${storeDomain}`}
-          variants={ids.join(',')}
-        />
+        <shop-pay-button store-url={storeDomain} variants={ids.join(',')} />
       )}
     </div>
   );

packages/react/src/ShopifyProvider.test.tsx

@@ -7,7 +7,7 @@ import {
 import type {PartialDeep} from 'type-fest';
 
 const SHOPIFY_CONFIG: ShopifyContextProps = {
-  storeDomain: 'notashop.myshopify.com',
+  storeDomain: 'https://notashop.myshopify.com',
   storefrontToken: 'abc123',
   storefrontApiVersion: '2023-01',
   country: {
@@ -30,23 +30,6 @@ describe('<ShopifyProvider/>', () => {
     expect(screen.getByText('child')).toBeInTheDocument();
   });
 
-  it(`contains 'storeDomain' without https:// prefix`, () => {
-    const {result} = renderHook(() => useShop(), {
-      wrapper: ({children}) => (
-        <ShopifyProvider
-          shopifyConfig={{
-            ...SHOPIFY_CONFIG,
-            storeDomain: 'https://notashop.myshopify.com',
-          }}
-        >
-          {children}
-        </ShopifyProvider>
-      ),
-    });
-
-    expect(result.current.storeDomain).toBe('notashop.myshopify.com');
-  });
-
   describe(`getStorefrontApiUrl()`, () => {
     it(`returns the correct values`, () => {
       const {result} = renderHook(() => useShop(), {
@@ -83,7 +66,7 @@ describe('<ShopifyProvider/>', () => {
 
       expect(
         result.current.getStorefrontApiUrl({
-          storeDomain: 'override.myshopify.com',
+          storeDomain: 'https://override.myshopify.com',
           storefrontApiVersion: '2022-07',
         })
       ).toBe('https://override.myshopify.com/api/2022-07/graphql.json');
@@ -145,53 +128,14 @@ describe('<ShopifyProvider/>', () => {
     });
   });
 
-  describe(`storeDomain`, () => {
-    it(`works with just the subdomain`, () => {
-      const {result} = renderHook(() => useShop(), {
-        wrapper: ({children}) => (
-          <ShopifyProvider
-            shopifyConfig={{
-              ...SHOPIFY_CONFIG,
-              storeDomain: 'notashop',
-            }}
-          >
-            {children}
-          </ShopifyProvider>
-        ),
-      });
-
-      expect(result.current.storeDomain).toBe('notashop');
-    });
-  });
-
   describe(`getShopifyDomain()`, () => {
-    it(`works with just the subdomain`, () => {
-      const {result} = renderHook(() => useShop(), {
-        wrapper: ({children}) => (
-          <ShopifyProvider
-            shopifyConfig={{
-              ...SHOPIFY_CONFIG,
-              storeDomain: 'notashop',
-            }}
-          >
-            {children}
-          </ShopifyProvider>
-        ),
-      });
-
-      expect(result.current.getShopifyDomain()).toBe(
-        'https://notashop.myshopify.com'
-      );
-    });
-
     it(`works with the domain`, () => {
-      // @deprecated to be removed when we no longer support passing in '.myshopify.com' for domainName
       const {result} = renderHook(() => useShop(), {
         wrapper: ({children}) => (
           <ShopifyProvider
             shopifyConfig={{
               ...SHOPIFY_CONFIG,
-              storeDomain: 'notashop.myshopify.com',
+              storeDomain: 'https://notashop.myshopify.com',
             }}
           >
             {children}
@@ -204,33 +148,13 @@ describe('<ShopifyProvider/>', () => {
       );
     });
 
-    it(`works with just the subdomain as override`, () => {
-      const {result} = renderHook(() => useShop(), {
-        wrapper: ({children}) => (
-          <ShopifyProvider
-            shopifyConfig={{
-              ...SHOPIFY_CONFIG,
-              storeDomain: 'notashop',
-            }}
-          >
-            {children}
-          </ShopifyProvider>
-        ),
-      });
-
-      expect(result.current.getShopifyDomain({storeDomain: 'test'})).toBe(
-        'https://test.myshopify.com'
-      );
-    });
-
     it(`works with the domain as override`, () => {
-      // @deprecated to be removed when we no longer support passing in '.myshopify.com' for domainName
       const {result} = renderHook(() => useShop(), {
         wrapper: ({children}) => (
           <ShopifyProvider
             shopifyConfig={{
               ...SHOPIFY_CONFIG,
-              storeDomain: 'notashop.myshopify.com',
+              storeDomain: 'https://notashop.myshopify.com',
             }}
           >
             {children}
@@ -239,7 +163,9 @@ describe('<ShopifyProvider/>', () => {
       });
 
       expect(
-        result.current.getShopifyDomain({storeDomain: 'test.myshopify.com'})
+        result.current.getShopifyDomain({
+          storeDomain: 'https://test.myshopify.com',
+        })
       ).toBe('https://test.myshopify.com');
     });
   });
@@ -256,7 +182,7 @@ export function getShopifyConfig(
       isoCode: config.language?.isoCode ?? 'EN',
     },
     locale: config.locale ?? 'EN-US',
-    storeDomain: config.storeDomain ?? 'notashop.myshopify.io',
+    storeDomain: config.storeDomain ?? 'https://notashop.myshopify.io',
     storefrontToken: config.storefrontToken ?? 'abc123',
     storefrontApiVersion: config.storefrontApiVersion ?? '2023-01',
   };

packages/react/src/ShopifyProvider.tsx

@@ -48,27 +48,12 @@ export function ShopifyProvider({
   }
 
   const finalConfig = useMemo<ShopifyContextValue>(() => {
-    const storeDomain = shopifyConfig.storeDomain.replace(/^https?:\/\//, '');
-
-    // @deprecated remove the ability to pass in '.myshopify.com' strings in the future
-    if (storeDomain.includes('.myshopify.com')) {
-      if (__HYDROGEN_DEV__) {
-        console.warn(
-          `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`
-        );
-      }
-    }
-
     function getShopifyDomain(overrideProps?: {storeDomain?: string}) {
-      let subDomain = overrideProps?.storeDomain ?? storeDomain;
-      subDomain = subDomain.replace('.myshopify.com', '');
-
-      return `https://${subDomain}.myshopify.com`;
+      return overrideProps?.storeDomain ?? shopifyConfig.storeDomain;
     }
 
     return {
       ...shopifyConfig,
-      storeDomain,
       getPublicTokenHeaders(overrideProps) {
         return getPublicTokenHeadersRaw(
           overrideProps.contentType,
@@ -86,7 +71,7 @@ export function ShopifyProvider({
           }
         }
         return `${getShopifyDomain({
-          storeDomain: overrideProps?.storeDomain ?? storeDomain,
+          storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,
         })}/api/${
           overrideProps?.storefrontApiVersion ??
           shopifyConfig.storefrontApiVersion
@@ -119,7 +104,7 @@ export function useShop() {
 export type ShopifyContextProps = {
   /** The globally-unique identifier for the Shop */
   storefrontId?: string;
-  /** The subdomain of your Shopify storefront URL (eg: `{subdomain}.myshopify.com`). */
+  /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */
   storeDomain: string;
   /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
   storefrontToken: string;

packages/react/src/cart-queries.ts

@@ -190,17 +190,9 @@ export const defaultCartFragment = /* GraphQL */ `
               compareAtPrice {
                 ...MoneyFragment
               }
-              # @deprecated remove in next major
-              compareAtPriceV2 {
-                ...MoneyFragment
-              }
               price {
                 ...MoneyFragment
               }
-              # @deprecated remove in next major
-              priceV2 {
-                ...MoneyFragment
-              }
               requiresShipping
               title
               image {