From 32515232aa03077b542f5fcf95f38a715af09327 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Thu, 8 Jun 2023 16:07:08 +0900
Subject: [PATCH] Support mock.shop as a `storeDomain` (#986)

* Auto add protocol if missing

* Stop adding protocol manually to storeDomain parameter

* Changesets

* Support mock.shop as storeDomain

* Do not throw errors when missing tokens for mock.shop

* Refactor

* Changesets
---
 .changeset/curly-adults-develop.md                |  5 +++++
 .../hydrogen-react/src/storefront-client.test.ts  |  8 ++++++++
 packages/hydrogen-react/src/storefront-client.ts  | 15 +++++++++++++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/curly-adults-develop.md

diff --git a/.changeset/curly-adults-develop.md b/.changeset/curly-adults-develop.md
new file mode 100644
index 0000000000..3228eab9d9
--- /dev/null
+++ b/.changeset/curly-adults-develop.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Add support for [`mock.shop`](https://mock.shop/) as a `storeDomain`.
diff --git a/packages/hydrogen-react/src/storefront-client.test.ts b/packages/hydrogen-react/src/storefront-client.test.ts
index 8d1e6475e2..c48c688d77 100644
--- a/packages/hydrogen-react/src/storefront-client.test.ts
+++ b/packages/hydrogen-react/src/storefront-client.test.ts
@@ -115,6 +115,14 @@ describe(`createStorefrontClient`, () => {
         `https://newdomain.myshopify.com/api/${SFAPI_VERSION}/graphql.json`,
       );
     });
+
+    it(`generates a URL correctly for mock.shop`, () => {
+      const client = createStorefrontClient(
+        generateConfig({storeDomain: 'mock.shop'}),
+      );
+
+      expect(client.getStorefrontApiUrl()).toBe(`https://mock.shop/api`);
+    });
   });
 
   describe(`getPrivateTokenHeaders`, () => {
diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts
index 3ded0c81d2..64ae8174d4 100644
--- a/packages/hydrogen-react/src/storefront-client.ts
+++ b/packages/hydrogen-react/src/storefront-client.ts
@@ -53,6 +53,7 @@ export function createStorefrontClient(
     );
   }
 
+  const isMockShop = (domain: string): boolean => domain.includes('mock.shop');
   const getShopifyDomain: StorefrontClientReturn['getShopifyDomain'] = (
     overrideProps,
   ) => {
@@ -66,12 +67,18 @@ export function createStorefrontClient(
       const domain = getShopifyDomain(overrideProps);
       const apiUrl = domain + (domain.endsWith('/') ? 'api' : '/api');
 
+      if (isMockShop(domain)) return apiUrl;
+
       return `${apiUrl}/${
         overrideProps?.storefrontApiVersion ?? storefrontApiVersion
       }/graphql.json`;
     },
     getPrivateTokenHeaders(overrideProps): Record<string, string> {
-      if (!privateStorefrontToken && !overrideProps?.privateStorefrontToken) {
+      if (
+        !privateStorefrontToken &&
+        !overrideProps?.privateStorefrontToken &&
+        !isMockShop(storeDomain)
+      ) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'privateStorefrontToken' while using 'getPrivateTokenHeaders()'`,
         );
@@ -102,7 +109,11 @@ export function createStorefrontClient(
       };
     },
     getPublicTokenHeaders(overrideProps): Record<string, string> {
-      if (!publicStorefrontToken && !overrideProps?.publicStorefrontToken) {
+      if (
+        !publicStorefrontToken &&
+        !overrideProps?.publicStorefrontToken &&
+        !isMockShop(storeDomain)
+      ) {
         throw new Error(
           `StorefrontClient: You did not pass in a 'publicStorefrontToken' while using 'getPublicTokenHeaders()'`,
         );