feat: replace mock.shop domain with mockdotshop.myshopify.com internally

.changeset/mock-shop-domain-migration.md

@@ -0,0 +1,8 @@
+---
+'@shopify/hydrogen-react': minor
+'@shopify/hydrogen': minor
+'@shopify/cli-hydrogen': minor
+'@shopify/create-hydrogen': minor
+---
+
+Replace deprecated `mock.shop` domain with `mockdotshop.myshopify.com` as the default demo storefront. The `mock.shop` domain is no longer recognized as a mock shop — if you had it set explicitly in your `.env`, update it to `mockdotshop.myshopify.com` or remove it to use the new default automatically.

e2e/envs/.env.mockShop

@@ -1,5 +1,5 @@
 SESSION_SECRET="mock-session"
-PUBLIC_CHECKOUT_DOMAIN="mock.shop"
-PUBLIC_STORE_DOMAIN="mock.shop"
+PUBLIC_CHECKOUT_DOMAIN="mockdotshop.myshopify.com"
+PUBLIC_STORE_DOMAIN="mockdotshop.myshopify.com"
 PUBLIC_STOREFRONT_API_TOKEN=""
 PUBLIC_STOREFRONT_ID=""

packages/cli/oclif.manifest.json

@@ -1018,7 +1018,7 @@
           "type": "boolean"
         },
         "mock-shop": {
-          "description": "Use mock.shop as the data source for the storefront.",
+          "description": "Use Mock Shop as the data source for the storefront.",
           "env": "SHOPIFY_HYDROGEN_FLAG_MOCK_DATA",
           "name": "mock-shop",
           "allowNo": false,

packages/cli/src/commands/hydrogen/init.ts

@@ -39,7 +39,7 @@ export default class Init extends Command {
     }),
     ...commonFlags.installDeps,
     'mock-shop': Flags.boolean({
-      description: 'Use mock.shop as the data source for the storefront.',
+      description: 'Use Mock Shop as the data source for the storefront.',
       env: 'SHOPIFY_HYDROGEN_FLAG_MOCK_DATA',
     }),
     ...commonFlags.styling,

packages/cli/src/lib/dev-shared.ts

@@ -16,19 +16,22 @@ import {startTunnelPlugin, pollTunnelURL} from './tunneling.js';
 import {getConfig} from './shopify-config.js';
 import {getGraphiQLUrl} from './graphiql-url.js';
 
+const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com';
+
 export function isMockShop(envVariables: Record<string, string>) {
+  const domain = envVariables.PUBLIC_STORE_DOMAIN;
   return (
-    envVariables.PUBLIC_STORE_DOMAIN === 'mock.shop' ||
-    // We fallback to mock.shop if the env var is falsy.
+    domain === MOCK_SHOP_DOMAIN ||
+    // We fallback to Mock Shop if the env var is falsy.
     // When it's undefined, it might be overwritten by remote variables.
-    envVariables.PUBLIC_STORE_DOMAIN === ''
+    domain === ''
   );
 }
 
 export function notifyIssueWithTunnelAndMockShop(cliCommand: string) {
   renderInfo({
     headline:
-      'Using mock.shop with `--customer-account-push` flag is not supported',
+      'Using Mock Shop with `--customer-account-push` flag is not supported',
     body: 'The functionalities of this flag are disabled.',
     nextSteps: [
       'You may continue knowing Customer Account API (/account) interactions will fail.',

packages/cli/src/lib/log.ts

@@ -322,7 +322,7 @@ export function enhanceH2Logs(options: {
 
       if (
         stringArg.startsWith('[h2:info:createStorefrontClient]') &&
-        stringArg.includes('defaulting to mock.shop')
+        stringArg.includes('defaulting to Mock Shop')
       ) {
         // This message comes from hydrogen-react. Let's enhance it:
         stringArg += '\nRun `h2 link` to link your store.';

packages/cli/src/lib/onboarding/local.test.ts

@@ -62,9 +62,9 @@ describe('local templates', () => {
         `"name": "${basename(tmpDir)}"`,
       );
 
-      // Creates .env without mock.shop
+      // Creates .env without Mock Shop domain
       await expect(readFile(`${tmpDir}/.env`)).resolves.not.toMatch(
-        `mock.shop`,
+        `mockdotshop.myshopify.com`,
       );
 
       const output = outputMock.info();

packages/cli/src/lib/onboarding/local.ts

@@ -52,7 +52,7 @@ export async function setupLocalStarterTemplate(
         choices: [
           {
             label:
-              'Use sample data from mock.shop (You can connect a Shopify account later)',
+              'Use sample data from Mock Shop (You can connect a Shopify account later)',
             value: 'mock',
           },
           {label: 'Link your Shopify account', value: 'link'},
@@ -74,7 +74,7 @@ export async function setupLocalStarterTemplate(
 
   if (!project) return;
 
-  if (templateAction === 'mock') project.storefrontTitle = 'Mock.shop';
+  if (templateAction === 'mock') project.storefrontTitle = 'Mock Shop';
 
   const abort = createAbortHandler(controller, project);
 

packages/create-hydrogen/integration.test.ts

@@ -45,7 +45,7 @@ describe('create-hydrogen', () => {
         │                                                                              │
         │  Storefront setup complete!                                                  │
         │                                                                              │
-        │    Shopify:   Mock.shop                                                      │
+        │    Shopify:   Mock Shop                                                      │
         │    Language:  JavaScript                                                     │
         │    Routes:                                                                   │
         │      • Home (/ & /:catchAll)                                                 │

packages/hydrogen-react/src/storefront-client.test.ts

@@ -116,13 +116,13 @@ describe(`createStorefrontClient`, () => {
       );
     });
 
-    it(`generates a URL correctly for mock.shop`, () => {
+    it(`generates a URL correctly for Mock Shop`, () => {
       const client = createStorefrontClient(
-        generateConfig({storeDomain: 'mock.shop'}),
+        generateConfig({storeDomain: 'mockdotshop.myshopify.com'}),
       );
 
       expect(client.getStorefrontApiUrl()).toBe(
-        `https://mock.shop/api/${SFAPI_VERSION}/graphql.json`,
+        `https://mockdotshop.myshopify.com/api/${SFAPI_VERSION}/graphql.json`,
       );
     });
   });

packages/hydrogen-react/src/storefront-client.ts

@@ -17,7 +17,7 @@ export type StorefrontClientProps = {
   contentType?: 'json' | 'graphql';
 };
 
-const MOCK_SHOP_DOMAIN = 'mock.shop';
+const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com';
 const isMockShop = (domain: string): boolean =>
   domain.includes(MOCK_SHOP_DOMAIN);
 
@@ -36,10 +36,7 @@ export function createStorefrontClient({
   if (!storeDomain) {
     if (__HYDROGEN_DEV__) {
       storeDomain = MOCK_SHOP_DOMAIN;
-      warnOnce(
-        `storeDomain missing, defaulting to ${MOCK_SHOP_DOMAIN}`,
-        'info',
-      );
+      warnOnce(`storeDomain missing, defaulting to Mock Shop`, 'info');
     } else {
       throw new Error(
         H2_PREFIX_ERROR +

packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx

@@ -73,7 +73,9 @@ export function ShopifyAnalytics({
   useCustomerPrivacy({
     ...consent,
     locale: language,
-    checkoutDomain: !checkoutDomain ? 'mock.shop' : checkoutDomain,
+    checkoutDomain: !checkoutDomain
+      ? 'mockdotshop.myshopify.com'
+      : checkoutDomain,
     storefrontAccessToken: !storefrontAccessToken
       ? 'abcdefghijklmnopqrstuvwxyz123456'
       : storefrontAccessToken,

packages/hydrogen/src/cart/cart-test-helper.ts

@@ -8,7 +8,7 @@ export const BUYER_LOCATION_ID = 'gid://shopify/CompanyLocation/1';
 export const CART_ID = 'gid://shopify/Cart/c1-123';
 export const NEW_CART_ID = 'c1-new-cart-id';
 export const CHECKOUT_URL =
-  'https://demostore.mock.shop/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2';
+  'https://mockdotshop.myshopify.com/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2';
 
 function storefrontQuery(
   query: string,

packages/hydrogen/src/vite/virtual-routes/routes/index.tsx

@@ -44,7 +44,10 @@ export async function loader({
   context: AppLoadContext;
 }) {
   const layout = await storefront.query<{shop: Shop}>(LAYOUT_QUERY);
-  return {layout, isMockShop: storefront.getApiUrl().includes('mock.shop')};
+  const isMockShop = storefront
+    .getApiUrl()
+    .includes('mockdotshop.myshopify.com');
+  return {layout, isMockShop};
 }
 
 export const HYDROGEN_SHOP_ID = 'gid://shopify/Shop/55145660472';