From 382acc8ef241a4605397ab0de8c9940e4c4d3474 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 6 Jan 2023 14:30:57 -0800
Subject: [PATCH 01/58] working shopify analytics

---
 apps/nextjs/pages/_app.tsx                    |  56 +++++-
 apps/nextjs/pages/index.tsx                   |   8 +-
 apps/nextjs/pages/test.tsx                    | 105 +++++++++++
 packages/react/src/ShopifyCookies.tsx         |  52 ++++++
 packages/react/src/index.ts                   |  18 ++
 packages/react/src/shopify-analytics-types.ts |  51 ++++++
 packages/react/src/shopify-analytics.tsx      | 165 ++++++++++++++++++
 .../analytics-errors-utils.ts                 |   7 +
 .../custom-storefront-customer-tracking.ts    |  93 ++++++++++
 .../schemas/trekkie-storefront-page-view.ts   |  52 ++++++
 .../shopify-analytics-constants.ts            |  29 +++
 .../shopify-analytics-utils.ts                |  39 +++++
 .../shopify-cookies-utils.tsx                 |  74 ++++++++
 13 files changed, 747 insertions(+), 2 deletions(-)
 create mode 100644 apps/nextjs/pages/test.tsx
 create mode 100644 packages/react/src/ShopifyCookies.tsx
 create mode 100644 packages/react/src/shopify-analytics-types.ts
 create mode 100644 packages/react/src/shopify-analytics.tsx
 create mode 100644 packages/react/src/shopify-analytics/analytics-errors-utils.ts
 create mode 100644 packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
 create mode 100644 packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts
 create mode 100644 packages/react/src/shopify-analytics/shopify-analytics-constants.ts
 create mode 100644 packages/react/src/shopify-analytics/shopify-analytics-utils.ts
 create mode 100644 packages/react/src/shopify-analytics/shopify-cookies-utils.tsx

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 2110e84c..35aa4aee 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -1,8 +1,50 @@
 import '../styles/globals.css';
 import type {AppProps} from 'next/app';
-import {ShopifyProvider, CartProvider} from '@shopify/hydrogen-react';
+import {
+  ShopifyProvider,
+  CartProvider,
+  ShopifyCookies,
+  sendShopifyAnalytics,
+  getClientBrowserParameters,
+  AnalyticsEventName,
+  type ShopifyPageViewPayload,
+} from '@shopify/hydrogen-react';
+import {useRouter} from 'next/router';
+import {useEffect} from 'react';
+
+const analyticsShopData = {
+  shopId: 55145660472,
+  currency: 'USD',
+  storefrontId: '9928760',
+};
+let isInit = false;
 
 export default function App({Component, pageProps}: AppProps) {
+  const router = useRouter()
+  const hasUserConsent = true;
+  const analyticsPageData = {
+    hasUserConsent,
+    pageType: pageProps.data.pageType,
+  }
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      sendPageView(analyticsPageData);
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    // First load event guard
+    if (!isInit) {
+      isInit = true;
+      sendPageView(analyticsPageData);
+    }
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [analyticsPageData])
+
   return (
     <ShopifyProvider
       shopifyConfig={{
@@ -15,6 +57,18 @@ export default function App({Component, pageProps}: AppProps) {
       <CartProvider>
         <Component {...pageProps} />
       </CartProvider>
+      <ShopifyCookies domain='' hasUserConsent={hasUserConsent}/>
     </ShopifyProvider>
   );
 }
+
+function sendPageView(analyticsPageData: Partial<ShopifyPageViewPayload>) {
+  sendShopifyAnalytics({
+    eventName: AnalyticsEventName.PAGE_VIEW,
+    payload: {
+      ...getClientBrowserParameters(),
+      ...analyticsShopData,
+      ...analyticsPageData,
+    } as ShopifyPageViewPayload
+  })
+}
diff --git a/apps/nextjs/pages/index.tsx b/apps/nextjs/pages/index.tsx
index 0648e8fa..9419a955 100644
--- a/apps/nextjs/pages/index.tsx
+++ b/apps/nextjs/pages/index.tsx
@@ -10,7 +10,9 @@ import {
   Image as ShopifyImage,
   type StorefrontApiResponseOk,
   useShop,
+  AnalyticsPageType,
 } from '@shopify/hydrogen-react';
+import Link from 'next/link';
 
 export const getServerSideProps: GetServerSideProps = async () => {
   // @TODO figure out how to get the client's IP address correctly and accurately.
@@ -28,7 +30,10 @@ export const getServerSideProps: GetServerSideProps = async () => {
     });
 
     // @TODO I don't love how we do this with 'errors' and 'data'
-    return {props: {data: response, errors: null}};
+    return {props: {data: {
+      pageType: AnalyticsPageType.home,
+      ...response
+    }, errors: null}};
   } catch (err) {
     console.error(err);
     return {props: {data: null, errors: [(err as Error).toString()]}};
@@ -63,6 +68,7 @@ export default function Home({
           loading="eager"
         />
         <div>Storefront API Domain: {storeDomain}</div>
+        <Link href="/test">Go to Test</Link>
       </main>
 
       <footer className={styles.footer}>
diff --git a/apps/nextjs/pages/test.tsx b/apps/nextjs/pages/test.tsx
new file mode 100644
index 00000000..0146834e
--- /dev/null
+++ b/apps/nextjs/pages/test.tsx
@@ -0,0 +1,105 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import {graphql} from '../gql/gql';
+import {request} from 'graphql-request';
+import type {GetServerSideProps} from 'next';
+import {shopClient} from '../src/shopify-client';
+import type {IndexQueryQuery} from '../gql/graphql';
+import {
+  type StorefrontApiResponseOk,
+  useShop,
+} from '@shopify/hydrogen-react';
+import Link from 'next/link';
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  // @TODO figure out how to get the client's IP address correctly and accurately.
+  // const buyerIp =
+  //   req.headers["x-real-ip"] ??
+  //   req.headers["x-forwarded-for"] ??
+  //   req.socket.remoteAddress;
+
+  try {
+    const response = await request({
+      url: shopClient.getStorefrontApiUrl(),
+      document: query,
+      // @TODO: convert to 'getPrivateTokenHeaders({buyerIp})'
+      requestHeaders: shopClient.getPublicTokenHeaders(),
+    });
+
+    // @TODO I don't love how we do this with 'errors' and 'data'
+    return {props: {data: response, errors: null}};
+  } catch (err) {
+    console.error(err);
+    return {props: {data: null, errors: [(err as Error).toString()]}};
+  }
+};
+
+export default function Home({
+  data,
+  errors,
+}: StorefrontApiResponseOk<IndexQueryQuery>) {
+  const {storeDomain} = useShop();
+
+  if (!data || errors) {
+    console.error(errors);
+    return <div>Whoops there was an error! Please refresh and try again.</div>;
+  }
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1>Test Page</h1>
+        <div>Storefront API Domain: {storeDomain}</div>
+        <Link href="/">Back to Home</Link>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  );
+}
+
+const query = graphql(`
+  query IndexQuery {
+    shop {
+      name
+    }
+    products(first: 1) {
+      nodes {
+        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'
+        # blah
+        id
+        title
+        publishedAt
+        handle
+        variants(first: 1) {
+          nodes {
+            id
+            image {
+              url
+              altText
+              width
+              height
+            }
+          }
+        }
+      }
+    }
+  }
+`);
diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
new file mode 100644
index 00000000..5663ee04
--- /dev/null
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -0,0 +1,52 @@
+import {useEffect} from 'react';
+import {stringify} from 'worktop/cookie';
+import {
+  SHOPIFY_Y,
+  SHOPIFY_S,
+} from './cart-constants';
+import {
+  buildUUID,
+  getShopifyCookies,
+} from './shopify-analytics/shopify-cookies-utils';
+
+const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
+const shortTermLength = 60 * 30; // 30 mins
+
+interface ShopifyCookiesProps {
+  /** The domain scope of the cookie */
+  domain: string;
+  /**
+   * Defaults to false. If hasUserConsent is true, we can set Shopify unique user token cookie
+   * lifetime to 1 year
+   */
+  hasUserConsent?: boolean;
+}
+
+export function ShopifyCookies(props: ShopifyCookiesProps) {
+  const {
+    domain = '',
+    hasUserConsent = false,
+  } = props;
+
+  useEffect(() => {
+    const cookies = getShopifyCookies(document.cookie);
+
+    /**
+     * Set user and session cookies and refresh the expiry time
+     */
+    document.cookie = stringify(SHOPIFY_Y, cookies[SHOPIFY_Y] || buildUUID(), {
+      maxage: hasUserConsent ? longTermLength : shortTermLength,
+      domain,
+      samesite: 'Lax',
+      path: '/',
+    });
+    document.cookie = stringify(SHOPIFY_S, cookies[SHOPIFY_S] || buildUUID(), {
+      maxage: shortTermLength,
+      domain,
+      samesite: 'Lax',
+      path: '/',
+    });
+  });
+
+  return null;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 64cb4ff2..52a91e38 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -32,3 +32,21 @@ export type {
 export {createStorefrontClient} from './storefront-client.js';
 export {useMoney} from './useMoney.js';
 export {Video} from './Video.js';
+export {
+  AnalyticsEventName,
+  AnalyticsPageType,
+} from './shopify-analytics/shopify-analytics-constants'
+export type {
+  ClientBrowserParameters,
+  ShopifyPageViewPayload,
+  ShopifyPageView,
+  ShopifyAddToCartPayload,
+  ShopifyAddToCart,
+  ShopifyAnalyticsPayload,
+  ShopifyAnalytics,
+} from './shopify-analytics-types.js'
+export {ShopifyCookies} from './ShopifyCookies.js'
+export {
+  sendShopifyAnalytics,
+  getClientBrowserParameters,
+} from './shopify-analytics.js';
diff --git a/packages/react/src/shopify-analytics-types.ts b/packages/react/src/shopify-analytics-types.ts
new file mode 100644
index 00000000..cbe03369
--- /dev/null
+++ b/packages/react/src/shopify-analytics-types.ts
@@ -0,0 +1,51 @@
+import {AnalyticsEventName} from "./shopify-analytics/shopify-analytics-constants";
+
+export type ClientBrowserParameters = {
+  uniqueToken: string;
+  visitToken: string;
+  url: string;
+  path: string;
+  search: string;
+  referrer: string;
+  title: string;
+  userAgent: string;
+  navigationType: string;
+  navigationApi: string;
+};
+
+export type ShopifyCommonPayload = ClientBrowserParameters & {
+  hasUserConsent: boolean;
+  shopId: string | number;
+  currency: string;
+  storefrontId?: string;
+  acceptedLanguage?: string;
+  customerId?: string;
+  totalValue?: string;
+  products?: [];
+};
+
+export type ShopifyPageViewPayload = ShopifyCommonPayload & {
+  canonicalUrl?: string;
+  pageType?: string;
+  resourceId?: string;
+  collectionHandle?: string;
+  searchString?: string;
+};
+
+export type ShopifyPageView = {
+  eventName: AnalyticsEventName.PAGE_VIEW,
+  payload: ShopifyPageViewPayload
+}
+
+export type ShopifyAddToCartPayload = ShopifyCommonPayload & {
+  cartToken: string;
+};
+
+export type ShopifyAddToCart = {
+  eventName: AnalyticsEventName.ADD_TO_CART,
+  payload: ShopifyAddToCartPayload,
+}
+
+export type ShopifyMonorailPayload = Record<string, unknown>;
+export type ShopifyAnalyticsPayload = ShopifyPageViewPayload | ShopifyAddToCartPayload;
+export type ShopifyAnalytics = ShopifyPageView | ShopifyAddToCart;
diff --git a/packages/react/src/shopify-analytics.tsx b/packages/react/src/shopify-analytics.tsx
new file mode 100644
index 00000000..bacd3911
--- /dev/null
+++ b/packages/react/src/shopify-analytics.tsx
@@ -0,0 +1,165 @@
+import {SHOPIFY_S, SHOPIFY_Y} from "./cart-constants";
+import type {
+  ClientBrowserParameters,
+  ShopifyAnalytics,
+  ShopifyMonorailPayload,
+} from "./shopify-analytics-types";
+import {AnalyticsEventName} from "./shopify-analytics/shopify-analytics-constants";
+import {errorIfServer} from "./shopify-analytics/analytics-errors-utils";
+import {getShopifyCookies} from "./shopify-analytics/shopify-cookies-utils";
+
+import * as TrekkieStorefrontPageView from './shopify-analytics/schemas/trekkie-storefront-page-view';
+import * as CustomStorefrontCustomerTracking from './shopify-analytics/schemas/custom-storefront-customer-tracking';
+
+export function sendShopifyAnalytics({
+  eventName,
+  payload
+}: ShopifyAnalytics) {
+  let events: ShopifyMonorailPayload[] = [];
+
+  switch(eventName) {
+    case AnalyticsEventName.PAGE_VIEW:
+      events = events.concat(TrekkieStorefrontPageView.pageView(payload));
+      events = events.concat(CustomStorefrontCustomerTracking.pageView(payload));
+      break;
+    case AnalyticsEventName.ADD_TO_CART:
+      events = events.concat(CustomStorefrontCustomerTracking.addToCart(payload));
+      break;
+  }
+
+  console.log(events);
+  sendToShopify(events);
+}
+
+type MonorailResponse = {
+  status: number;
+  message: string;
+}
+
+const ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';
+
+function sendToShopify(events: ShopifyMonorailPayload[]) {
+  const eventsToBeSent = {
+    events,
+    metadata: {
+      event_sent_at_ms: Date.now(),
+    },
+  };
+
+  try {
+    fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
+      method: 'post',
+      headers: {
+        'content-type': 'text/plain',
+      },
+      body: JSON.stringify(eventsToBeSent),
+    })
+    .then(response => response.text())
+    .then(data => {
+      if (data) {
+        const jsonResponse = JSON.parse(data);
+        jsonResponse.result.forEach(((eventResponse: MonorailResponse) => {
+          if(eventResponse.status !== 200) {
+            console.error(ERROR_MESSAGE, '\n\n' , eventResponse.message);
+          }
+        }))
+      }
+    }).catch(err => {
+      console.error(ERROR_MESSAGE, err)
+    });
+  } catch (error) {
+    // Do nothing
+  }
+}
+
+export function getClientBrowserParameters(): ClientBrowserParameters | {} {
+  if (errorIfServer('getClientBrowserParameters')) {
+    return {};
+  }
+
+  const [navigationType, navigationApi] = getNavigationType();
+  const cookies = getShopifyCookies(document.cookie);
+
+  return {
+    uniqueToken: cookies[SHOPIFY_Y],
+    visitToken: cookies[SHOPIFY_S],
+    url: location.href,
+    path: location.pathname,
+    search: location.search,
+    referrer: document.referrer,
+    title: document.title,
+    userAgent: navigator.userAgent,
+    navigationType,
+    navigationApi,
+  };
+}
+
+function getNavigationTypeExperimental() {
+  try {
+    const navigationEntries =
+      performance?.getEntriesByType &&
+      performance?.getEntriesByType('navigation');
+
+    if (navigationEntries && navigationEntries[0]) {
+      //  https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
+      const rawType = (
+        window.performance.getEntriesByType('navigation')[0] as any
+      )['type'];
+      const navType = rawType && rawType.toString();
+
+      return navType;
+    }
+  } catch (err) {
+    // Do nothing
+  }
+  return undefined;
+}
+
+function getNavigationTypeLegacy() {
+  try {
+    if (
+      PerformanceNavigation &&
+      performance?.navigation?.type !== null &&
+      performance?.navigation?.type !== undefined
+    ) {
+      //  https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
+
+      const rawType = performance.navigation.type;
+      switch (rawType) {
+        case PerformanceNavigation.TYPE_NAVIGATE:
+          return 'navigate';
+          break;
+        case PerformanceNavigation.TYPE_RELOAD:
+          return 'reload';
+          break;
+        case PerformanceNavigation.TYPE_BACK_FORWARD:
+          return 'back_forward';
+          break;
+        default:
+          return `unknown: ${rawType}`;
+      }
+    }
+  } catch (err) {
+    // do nothing
+  }
+  return undefined;
+}
+
+function getNavigationType() {
+  try {
+    let navApi = 'PerformanceNavigationTiming';
+    let navType = getNavigationTypeExperimental();
+    if (!navType) {
+      navType = getNavigationTypeLegacy();
+      navApi = 'performance.navigation';
+    }
+    if (navType) {
+      return [navType, navApi];
+    } else {
+      return ['unknown', 'unknown'];
+    }
+  } catch (err) {
+    // do nothing
+  }
+  return ['error', 'error'];
+}
diff --git a/packages/react/src/shopify-analytics/analytics-errors-utils.ts b/packages/react/src/shopify-analytics/analytics-errors-utils.ts
new file mode 100644
index 00000000..9742bfcd
--- /dev/null
+++ b/packages/react/src/shopify-analytics/analytics-errors-utils.ts
@@ -0,0 +1,7 @@
+export function errorIfServer(fnName: string): boolean {
+  if (!window) {
+    console.error(`${fnName} should only be used within the useEffect callback or event handlers`);
+    return true;
+  }
+  return false;
+}
diff --git a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
new file mode 100644
index 00000000..acf1a754
--- /dev/null
+++ b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
@@ -0,0 +1,93 @@
+import {
+  ShopifyAnalyticsPayload,
+  ShopifyPageViewPayload,
+  ShopifyAddToCartPayload,
+  ShopifyMonorailPayload,
+} from "../../shopify-analytics-types";
+import { AnalyticsPageType } from "../shopify-analytics-constants";
+import {addDataIf, schemaWrapper, stripGId, stripId} from "../shopify-analytics-utils";
+import {buildUUID} from "../shopify-cookies-utils";
+
+const SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';
+const PAGE_RENDERED_EVENT_NAME = 'page_rendered';
+const COLLECTION_PAGE_RENDERED_EVENT_NAME = 'collection_page_rendered';
+const PRODUCT_PAGE_RENDERED_EVENT_NAME = 'product_page_rendered';
+const PRODUCT_ADDED_TO_CART_EVENT_NAME = 'product_added_to_cart';
+const SEARCH_SUBMITTED_EVENT_NAME = 'search_submitted';
+
+export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
+  const pageViewPayload = payload as ShopifyPageViewPayload;
+  const additionalPayload = {
+    canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
+    customerId: pageViewPayload.customerId,
+  };
+  const pageType = pageViewPayload.pageType;
+  const pageViewEvents = [];
+
+  pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
+    event_name: PAGE_RENDERED_EVENT_NAME,
+    ...additionalPayload,
+  }, formatPayload(pageViewPayload))));
+
+  if(pageType === AnalyticsPageType.collection) {
+    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
+      event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+      ...additionalPayload,
+      collection_name: pageViewPayload.collectionHandle,
+    }, formatPayload(pageViewPayload))));
+  }
+
+  if(pageType === AnalyticsPageType.product) {
+    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
+      event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+      ...additionalPayload,
+      collection_name: pageViewPayload.collectionHandle,
+      products: pageViewPayload.products,
+      total_value: pageViewPayload.totalValue,
+    }, formatPayload(pageViewPayload))));
+  }
+
+  if(pageType === AnalyticsPageType.search) {
+    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
+      event_name: SEARCH_SUBMITTED_EVENT_NAME,
+      ...additionalPayload,
+      search_string: pageViewPayload.searchString,
+    }, formatPayload(pageViewPayload))));
+  }
+
+  return pageViewEvents;
+}
+
+export function addToCart(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
+  const addToCartPayload = payload as ShopifyAddToCartPayload
+  return [schemaWrapper(SCHEMA_ID, addDataIf({
+    event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
+    customerId: addToCartPayload.customerId,
+    cart_token: stripId(addToCartPayload.cartToken),
+    total_value: addToCartPayload.totalValue,
+    products: addToCartPayload.products
+  }, formatPayload(addToCartPayload)))];
+}
+
+function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
+  return {
+    source: 'hydrogen',
+    hydrogenSubchannelId: payload.storefrontId || '0',
+
+    is_persistent_cookie: payload.hasUserConsent,
+    ccpa_enforced: false,
+    gdpr_enforced: false,
+    unique_token: payload.uniqueToken,
+    event_time: Date.now(),
+    event_id: buildUUID(),
+
+    event_source_url: payload.url,
+    referrer: payload.referrer,
+    user_agent: payload.userAgent,
+    navigation_type: payload.navigationType,
+    navigation_api: payload.navigationApi,
+
+    shop_id: stripGId(payload.shopId),
+    currency: payload.currency,
+  };
+}
diff --git a/packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts b/packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts
new file mode 100644
index 00000000..ca03720f
--- /dev/null
+++ b/packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts
@@ -0,0 +1,52 @@
+import {
+  ShopifyAnalyticsPayload,
+  ShopifyPageViewPayload,
+  ShopifyMonorailPayload,
+} from "../../shopify-analytics-types";
+import {addDataIf, schemaWrapper, stripGId, getResourceType} from "../shopify-analytics-utils";
+import {buildUUID} from "../shopify-cookies-utils";
+
+const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
+const oxygenDomain = 'myshopify.dev';
+
+export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
+  const pageViewPayload = payload as ShopifyPageViewPayload;
+  return [schemaWrapper(SCHEMA_ID, addDataIf({
+    pageType: pageViewPayload.pageType,
+    customerId: pageViewPayload.customerId,
+    resourceType: getResourceType(pageViewPayload.resourceId),
+    resourceId: stripGId(pageViewPayload.resourceId),
+  }, formatPayload(pageViewPayload)))];
+}
+
+function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
+  return {
+    appClientId: '6167201',
+    isMerchantRequest: isMerchantRequest(payload.url),
+    hydrogenSubchannelId: payload.storefrontId || '0',
+
+    isPersistentCookie: payload.hasUserConsent,
+    uniqToken: payload.uniqueToken,
+    visitToken: payload.visitToken,
+    microSessionId: buildUUID(),
+    microSessionCount: 1,
+
+    url: payload.url,
+    path: payload.path,
+    search: payload.search,
+    referrer: payload.referrer,
+    title: payload.title,
+
+    shopId: stripGId(payload.shopId),
+    currency: payload.currency,
+    contentLanguage: payload.acceptedLanguage || 'en',
+  };
+}
+
+function isMerchantRequest(url: string): Boolean {
+  const hostname = new URL(url).hostname;
+  if (hostname.indexOf(oxygenDomain) !== -1 || hostname === 'localhost') {
+    return true;
+  }
+  return false;
+}
diff --git a/packages/react/src/shopify-analytics/shopify-analytics-constants.ts b/packages/react/src/shopify-analytics/shopify-analytics-constants.ts
new file mode 100644
index 00000000..1db3ae1f
--- /dev/null
+++ b/packages/react/src/shopify-analytics/shopify-analytics-constants.ts
@@ -0,0 +1,29 @@
+export enum AnalyticsEventName {
+  PAGE_VIEW = 'PAGE_VIEW',
+  ADD_TO_CART = 'ADD_TO_CART',
+}
+
+export enum AnalyticsPageType {
+  article = 'article',
+  blog = 'blog',
+  captcha = 'captcha',
+  cart = 'cart',
+  collection = 'collection',
+  customersAccount = 'customers/account',
+  customersActivateAccount = 'customers/activate_account',
+  customersAddresses = 'customers/addresses',
+  customersLogin = 'customers/login',
+  customersOrder = 'customers/order',
+  customersRegister = 'customers/register',
+  customersResetPassword = 'customers/reset_password',
+  giftCard = 'gift_card',
+  home = 'index',
+  listCollections = 'list-collections',
+  forbidden = '403',
+  notFound = '404',
+  page = 'page',
+  password = 'password',
+  product = 'product',
+  policy = 'policy',
+  search = 'search',
+}
diff --git a/packages/react/src/shopify-analytics/shopify-analytics-utils.ts b/packages/react/src/shopify-analytics/shopify-analytics-utils.ts
new file mode 100644
index 00000000..6971fca9
--- /dev/null
+++ b/packages/react/src/shopify-analytics/shopify-analytics-utils.ts
@@ -0,0 +1,39 @@
+import type {ShopifyMonorailPayload} from "../shopify-analytics-types";
+
+export function schemaWrapper(schemaId: string, payload: unknown) {
+  return {
+    schema_id: schemaId,
+    payload,
+    metadata: {
+      event_created_at_ms: Date.now(),
+    },
+  };
+}
+
+export function stripGId(text: number | string | undefined): number {
+  if (typeof text === 'number') return text;
+  return parseInt(stripId(text || ''));
+}
+
+export function stripId(text = ''): string {
+  return text.substring(text.lastIndexOf('/') + 1);
+}
+
+export function addDataIf(
+  keyValuePairs: ShopifyMonorailPayload,
+  formattedData: ShopifyMonorailPayload
+): ShopifyMonorailPayload {
+  Object.entries(keyValuePairs).forEach(([key, value]) => {
+    if (value) {
+      formattedData[key] = value;
+    }
+  });
+  return formattedData;
+}
+
+export function getResourceType(text = ''): string {
+  return text
+    .substring(0, text.lastIndexOf('/'))
+    .replace(/.*shopify\//, '')
+    .toLowerCase();
+}
diff --git a/packages/react/src/shopify-analytics/shopify-cookies-utils.tsx b/packages/react/src/shopify-analytics/shopify-cookies-utils.tsx
new file mode 100644
index 00000000..95c3fb3f
--- /dev/null
+++ b/packages/react/src/shopify-analytics/shopify-cookies-utils.tsx
@@ -0,0 +1,74 @@
+import {parse} from "worktop/cookie";
+import {
+  SHOPIFY_Y,
+  SHOPIFY_S,
+} from "../cart-constants";
+
+const zeros = '00000000';
+const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
+
+export function buildUUID(): string {
+  let hash = '';
+
+  try {
+    const crypto: Crypto = window.crypto;
+    const randomValuesArray = new Uint16Array(31);
+    crypto.getRandomValues(randomValuesArray);
+
+    // Generate a strong UUID
+    let i = 0;
+    hash = tokenHash
+      .replace(/[x]/g, (c: string, ...args: any[]): string => {
+        const r = randomValuesArray[i] % 16;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        i++;
+        return v.toString(16);
+      })
+      .toUpperCase();
+  } catch (err) {
+    // crypto not available, generate weak UUID
+    hash = tokenHash
+      .replace(/[x]/g, (c: string, ...args: any[]): string => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      })
+      .toUpperCase();
+  }
+
+  return `${hexTime()}-${hash}`;
+}
+
+export function hexTime(): string {
+  // 32 bit representations of new Date().getTime() and performance.now()
+  let dateNumber = 0;
+  let perfNumber = 0;
+
+  // Result of zero-fill right shift is always positive
+  dateNumber = new Date().getTime() >>> 0;
+
+  try {
+    perfNumber = performance.now() >>> 0;
+  } catch (err) {
+    perfNumber = 0;
+  }
+
+  const output = Math.abs(dateNumber + perfNumber)
+    .toString(16)
+    .toLowerCase();
+
+  return zeros.substr(0, 8 - output.length) + output;
+}
+
+export type ShopifyCookies = {
+  [SHOPIFY_Y]: string;
+  [SHOPIFY_S]: string;
+}
+
+export function getShopifyCookies(cookies: string): ShopifyCookies {
+  const cookieData = parse(cookies);
+  return {
+    [SHOPIFY_Y]: cookieData[SHOPIFY_Y],
+    [SHOPIFY_S]: cookieData[SHOPIFY_S],
+  }
+}

From 2beabf773060dcbc1fe479d0eec19072e04aedd3 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 9 Jan 2023 15:43:34 -0800
Subject: [PATCH 02/58] add to cart analytics

---
 apps/nextjs/pages/_app.tsx                    |  7 +--
 apps/nextjs/pages/test.tsx                    | 54 ++++++++++++++++++-
 packages/react/src/index.ts                   |  1 +
 packages/react/src/shopify-analytics-types.ts | 21 +++++++-
 .../custom-storefront-customer-tracking.ts    | 29 ++++++++--
 5 files changed, 102 insertions(+), 10 deletions(-)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 35aa4aee..d241595f 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -8,6 +8,7 @@ import {
   getClientBrowserParameters,
   AnalyticsEventName,
   type ShopifyPageViewPayload,
+  type ShopifyAnalyticsProduct,
 } from '@shopify/hydrogen-react';
 import {useRouter} from 'next/router';
 import {useEffect} from 'react';
@@ -15,7 +16,7 @@ import {useEffect} from 'react';
 const analyticsShopData = {
   shopId: 55145660472,
   currency: 'USD',
-  storefrontId: '9928760',
+  acceptedLanguage: 'en',
 };
 let isInit = false;
 
@@ -24,7 +25,7 @@ export default function App({Component, pageProps}: AppProps) {
   const hasUserConsent = true;
   const analyticsPageData = {
     hasUserConsent,
-    pageType: pageProps.data.pageType,
+    pageType: pageProps.data?.pageType,
   }
 
   useEffect(() => {
@@ -70,5 +71,5 @@ function sendPageView(analyticsPageData: Partial<ShopifyPageViewPayload>) {
       ...analyticsShopData,
       ...analyticsPageData,
     } as ShopifyPageViewPayload
-  })
+  });
 }
diff --git a/apps/nextjs/pages/test.tsx b/apps/nextjs/pages/test.tsx
index 0146834e..3a3bdf38 100644
--- a/apps/nextjs/pages/test.tsx
+++ b/apps/nextjs/pages/test.tsx
@@ -9,9 +9,21 @@ import type {IndexQueryQuery} from '../gql/graphql';
 import {
   type StorefrontApiResponseOk,
   useShop,
+  AnalyticsPageType,
+  sendShopifyAnalytics,
+  AnalyticsEventName,
+  getClientBrowserParameters,
+  type ShopifyAddToCartPayload,
+  ShopifyAnalyticsProduct,
 } from '@shopify/hydrogen-react';
 import Link from 'next/link';
 
+const analyticsShopData = {
+  shopId: 55145660472,
+  currency: 'USD',
+  acceptedLanguage: 'en',
+};
+
 export const getServerSideProps: GetServerSideProps = async () => {
   // @TODO figure out how to get the client's IP address correctly and accurately.
   // const buyerIp =
@@ -28,7 +40,10 @@ export const getServerSideProps: GetServerSideProps = async () => {
     });
 
     // @TODO I don't love how we do this with 'errors' and 'data'
-    return {props: {data: response, errors: null}};
+    return {props: {data: {
+      pageType: AnalyticsPageType.product,
+      ...response
+    }, errors: null}};
   } catch (err) {
     console.error(err);
     return {props: {data: null, errors: [(err as Error).toString()]}};
@@ -45,6 +60,22 @@ export default function Home({
     console.error(errors);
     return <div>Whoops there was an error! Please refresh and try again.</div>;
   }
+
+  const product = data.products.nodes[0];
+  const variant = product.variants.nodes[0];
+
+  console.log(product, variant)
+
+  const productAnalytics: ShopifyAnalyticsProduct = {
+    product_gid: product.id,
+    // variant_gid: variant.id,
+    name: product.title,
+    // variantName: variant.title,
+    brand: product.vendor,
+    price: variant.price.amount,
+    quantity: 1,
+  };
+
   return (
     <div className={styles.container}>
       <Head>
@@ -56,6 +87,20 @@ export default function Home({
       <main className={styles.main}>
         <h1>Test Page</h1>
         <div>Storefront API Domain: {storeDomain}</div>
+        <br/>
+        <button onClick={() => {
+          sendShopifyAnalytics({
+            eventName: AnalyticsEventName.ADD_TO_CART,
+            payload: {
+              ...getClientBrowserParameters(),
+              ...analyticsShopData,
+              hasUserConsent: true,
+              cartId: '123',
+              products: [productAnalytics],
+            } as ShopifyAddToCartPayload
+          });
+        }}>Analytics - Add to cart</button>
+        <br/>
         <Link href="/">Back to Home</Link>
       </main>
 
@@ -76,7 +121,7 @@ export default function Home({
 }
 
 const query = graphql(`
-  query IndexQuery {
+  query TestQuery {
     shop {
       name
     }
@@ -86,11 +131,16 @@ const query = graphql(`
         # blah
         id
         title
+        vendor
         publishedAt
         handle
         variants(first: 1) {
           nodes {
             id
+            title
+            price {
+              amount
+            }
             image {
               url
               altText
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 52a91e38..f1bb92d1 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -44,6 +44,7 @@ export type {
   ShopifyAddToCart,
   ShopifyAnalyticsPayload,
   ShopifyAnalytics,
+  ShopifyAnalyticsProduct,
 } from './shopify-analytics-types.js'
 export {ShopifyCookies} from './ShopifyCookies.js'
 export {
diff --git a/packages/react/src/shopify-analytics-types.ts b/packages/react/src/shopify-analytics-types.ts
index cbe03369..47a145a9 100644
--- a/packages/react/src/shopify-analytics-types.ts
+++ b/packages/react/src/shopify-analytics-types.ts
@@ -1,3 +1,7 @@
+import type {
+  Product,
+  ProductVariant,
+} from './storefront-api-types.js';
 import {AnalyticsEventName} from "./shopify-analytics/shopify-analytics-constants";
 
 export type ClientBrowserParameters = {
@@ -13,6 +17,18 @@ export type ClientBrowserParameters = {
   navigationApi: string;
 };
 
+export type ShopifyAnalyticsProduct = {
+  product_gid: Product['id'];
+  variant_gid?: ProductVariant['id'];
+  name: Product['title'];
+  variantName?: ProductVariant['title'];
+  brand: Product['vendor'];
+  category?: Product['productType'];
+  price: ProductVariant['price']['amount'];
+  sku?: ProductVariant['sku'];
+  quantity: number;
+}
+
 export type ShopifyCommonPayload = ClientBrowserParameters & {
   hasUserConsent: boolean;
   shopId: string | number;
@@ -21,7 +37,7 @@ export type ShopifyCommonPayload = ClientBrowserParameters & {
   acceptedLanguage?: string;
   customerId?: string;
   totalValue?: string;
-  products?: [];
+  products?: ShopifyAnalyticsProduct[];
 };
 
 export type ShopifyPageViewPayload = ShopifyCommonPayload & {
@@ -38,7 +54,8 @@ export type ShopifyPageView = {
 }
 
 export type ShopifyAddToCartPayload = ShopifyCommonPayload & {
-  cartToken: string;
+  /** The cart's ID if it has been created through the Storefront API. */
+  cartId: string;
 };
 
 export type ShopifyAddToCart = {
diff --git a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
index acf1a754..737cc99c 100644
--- a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
+++ b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
@@ -3,6 +3,7 @@ import {
   ShopifyPageViewPayload,
   ShopifyAddToCartPayload,
   ShopifyMonorailPayload,
+  ShopifyAnalyticsProduct,
 } from "../../shopify-analytics-types";
 import { AnalyticsPageType } from "../shopify-analytics-constants";
 import {addDataIf, schemaWrapper, stripGId, stripId} from "../shopify-analytics-utils";
@@ -42,7 +43,7 @@ export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPaylo
       event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
       ...additionalPayload,
       collection_name: pageViewPayload.collectionHandle,
-      products: pageViewPayload.products,
+      products: formatProductPayload(pageViewPayload.products),
       total_value: pageViewPayload.totalValue,
     }, formatPayload(pageViewPayload))));
   }
@@ -63,9 +64,9 @@ export function addToCart(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayl
   return [schemaWrapper(SCHEMA_ID, addDataIf({
     event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
     customerId: addToCartPayload.customerId,
-    cart_token: stripId(addToCartPayload.cartToken),
+    cart_token: stripId(addToCartPayload.cartId),
     total_value: addToCartPayload.totalValue,
-    products: addToCartPayload.products
+    products: formatProductPayload(addToCartPayload.products),
   }, formatPayload(addToCartPayload)))];
 }
 
@@ -91,3 +92,25 @@ function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload
     currency: payload.currency,
   };
 }
+
+function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
+  return products ? products.map((p: ShopifyAnalyticsProduct) => {
+    const p2 = p as ShopifyAnalyticsProduct;
+    console.log(p2);
+    const product = addDataIf({
+      variant_gid: p.variant_gid,
+      category: p.category,
+      sku: p.sku,
+      product_id: stripGId(p.product_gid),
+      variant_id: stripGId(p.variant_gid),
+    }, {
+      product_gid: p.product_gid,
+      name: p.name,
+      variant: p.variantName || '',
+      brand: p.brand,
+      price: p.price,
+      quantity: Number(p.quantity || 0),
+    })
+    return JSON.stringify(product as ShopifyAnalyticsProduct);
+  }) : [];
+}

From c566941393700bcbcde359f54d70c9ae152639df Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Jan 2023 11:56:18 -0800
Subject: [PATCH 03/58] workign all events

---
 .changeset/plenty-moles-listen.md             |   5 +
 apps/nextjs/gql/fragment-masking.ts           |  10 +-
 apps/nextjs/gql/gql.ts                        |  41 +++++++
 apps/nextjs/gql/graphql.ts                    |  24 +++-
 apps/nextjs/pages/_app.tsx                    |  20 +--
 apps/nextjs/pages/collection.tsx              | 115 ++++++++++++++++++
 apps/nextjs/pages/index.tsx                   |  19 ++-
 apps/nextjs/pages/{test.tsx => product.tsx}   |  86 +++++++------
 apps/nextjs/pages/search.tsx                  | 113 +++++++++++++++++
 packages/react/src/shopify-analytics-types.ts |   2 +-
 packages/react/src/shopify-analytics.tsx      |   1 -
 .../custom-storefront-customer-tracking.ts    |   2 -
 12 files changed, 379 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/plenty-moles-listen.md
 create mode 100644 apps/nextjs/pages/collection.tsx
 rename apps/nextjs/pages/{test.tsx => product.tsx} (68%)
 create mode 100644 apps/nextjs/pages/search.tsx

diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
new file mode 100644
index 00000000..c0989382
--- /dev/null
+++ b/.changeset/plenty-moles-listen.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': minor
+---
+
+Shopify Analytics methods and components
diff --git a/apps/nextjs/gql/fragment-masking.ts b/apps/nextjs/gql/fragment-masking.ts
index af0fecab..0df1ecfb 100644
--- a/apps/nextjs/gql/fragment-masking.ts
+++ b/apps/nextjs/gql/fragment-masking.ts
@@ -1,4 +1,4 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';
 
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
@@ -38,3 +38,11 @@ export function useFragment<TType>(
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any
 }
+
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
\ No newline at end of file
diff --git a/apps/nextjs/gql/gql.ts b/apps/nextjs/gql/gql.ts
index 257616a8..cc9754bd 100644
--- a/apps/nextjs/gql/gql.ts
+++ b/apps/nextjs/gql/gql.ts
@@ -2,13 +2,54 @@
 import * as types from './graphql';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel-plugin for production.
+ */
 const documents = {
+    "\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n": types.CollectionDocument,
     "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.IndexQueryDocument,
+    "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.ProductDocument,
+    "\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"): (typeof documents)["\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(source: "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+**/
 export function graphql(source: string): unknown;
+
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }
diff --git a/apps/nextjs/gql/graphql.ts b/apps/nextjs/gql/graphql.ts
index 6deda5d1..2bc5429a 100644
--- a/apps/nextjs/gql/graphql.ts
+++ b/apps/nextjs/gql/graphql.ts
@@ -6842,10 +6842,32 @@ export enum WeightUnit {
   Pounds = 'POUNDS'
 }
 
+export type CollectionQueryVariables = Exact<{
+  handle: Scalars['String'];
+}>;
+
+
+export type CollectionQuery = { __typename?: 'QueryRoot', collection?: { __typename?: 'Collection', id: string, handle: string, title: string, description: string } | null };
+
 export type IndexQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type IndexQueryQuery = { __typename?: 'QueryRoot', shop: { __typename?: 'Shop', name: string }, products: { __typename?: 'ProductConnection', nodes: Array<{ __typename?: 'Product', id: string, title: string, publishedAt: string, handle: string, variants: { __typename?: 'ProductVariantConnection', nodes: Array<{ __typename?: 'ProductVariant', id: string, image?: { __typename?: 'Image', url: string, altText?: string | null, width?: number | null, height?: number | null } | null }> } }> } };
 
+export type ProductQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ProductQuery = { __typename?: 'QueryRoot', shop: { __typename?: 'Shop', name: string }, products: { __typename?: 'ProductConnection', nodes: Array<{ __typename?: 'Product', id: string, title: string, vendor: string, publishedAt: string, handle: string, variants: { __typename?: 'ProductVariantConnection', nodes: Array<{ __typename?: 'ProductVariant', id: string, title: string, price: { __typename?: 'MoneyV2', amount: string }, image?: { __typename?: 'Image', url: string, altText?: string | null, width?: number | null, height?: number | null } | null }> } }> } };
+
+export type SearchQueryVariables = Exact<{
+  searchTerm?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type SearchQuery = { __typename?: 'QueryRoot', products: { __typename?: 'ProductConnection', pageInfo: { __typename?: 'PageInfo', startCursor?: string | null, endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean } } };
+
 
-export const IndexQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"IndexQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shop"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<IndexQueryQuery, IndexQueryQueryVariables>;
\ No newline at end of file
+export const CollectionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Collection"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"handle"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"handle"},"value":{"kind":"Variable","name":{"kind":"Name","value":"handle"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}}]}}]} as unknown as DocumentNode<CollectionQuery, CollectionQueryVariables>;
+export const IndexQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"IndexQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shop"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<IndexQueryQuery, IndexQueryQueryVariables>;
+export const ProductDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"shop"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"vendor"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"handle"}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"altText"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"height"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ProductQuery, ProductQueryVariables>;
+export const SearchDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Search"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"searchTerm"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"IntValue","value":"1"}},{"kind":"Argument","name":{"kind":"Name","value":"sortKey"},"value":{"kind":"EnumValue","value":"RELEVANCE"}},{"kind":"Argument","name":{"kind":"Name","value":"query"},"value":{"kind":"Variable","name":{"kind":"Name","value":"searchTerm"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"startCursor"}},{"kind":"Field","name":{"kind":"Name","value":"endCursor"}},{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}}]}}]}}]}}]} as unknown as DocumentNode<SearchQuery, SearchQueryVariables>;
\ No newline at end of file
diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index d241595f..c2557c3e 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -23,14 +23,19 @@ let isInit = false;
 export default function App({Component, pageProps}: AppProps) {
   const router = useRouter()
   const hasUserConsent = true;
-  const analyticsPageData = {
+  const analytics = {
     hasUserConsent,
-    pageType: pageProps.data?.pageType,
-  }
+    ...analyticsShopData,
+    ...pageProps.analytics,
+  };
+  const pagePropsWithAppAnalytics = {
+    ...pageProps,
+    analytics,
+  };
 
   useEffect(() => {
     const handleRouteChange = () => {
-      sendPageView(analyticsPageData);
+      sendPageView(analytics);
     }
 
     router.events.on('routeChangeComplete', handleRouteChange);
@@ -38,13 +43,13 @@ export default function App({Component, pageProps}: AppProps) {
     // First load event guard
     if (!isInit) {
       isInit = true;
-      sendPageView(analyticsPageData);
+      sendPageView(analytics);
     }
 
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [analyticsPageData])
+  }, [analytics])
 
   return (
     <ShopifyProvider
@@ -56,7 +61,7 @@ export default function App({Component, pageProps}: AppProps) {
       }}
     >
       <CartProvider>
-        <Component {...pageProps} />
+        <Component {...pagePropsWithAppAnalytics} />
       </CartProvider>
       <ShopifyCookies domain='' hasUserConsent={hasUserConsent}/>
     </ShopifyProvider>
@@ -68,7 +73,6 @@ function sendPageView(analyticsPageData: Partial<ShopifyPageViewPayload>) {
     eventName: AnalyticsEventName.PAGE_VIEW,
     payload: {
       ...getClientBrowserParameters(),
-      ...analyticsShopData,
       ...analyticsPageData,
     } as ShopifyPageViewPayload
   });
diff --git a/apps/nextjs/pages/collection.tsx b/apps/nextjs/pages/collection.tsx
new file mode 100644
index 00000000..5d3cdc74
--- /dev/null
+++ b/apps/nextjs/pages/collection.tsx
@@ -0,0 +1,115 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import {graphql} from '../gql/gql';
+import {request} from 'graphql-request';
+import type {GetServerSideProps} from 'next';
+import {shopClient} from '../src/shopify-client';
+import type {CollectionQuery} from '../gql/graphql';
+import {
+  type StorefrontApiResponseOk,
+  useShop,
+  AnalyticsPageType,
+} from '@shopify/hydrogen-react';
+import Link from 'next/link';
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  // @TODO figure out how to get the client's IP address correctly and accurately.
+  // const buyerIp =
+  //   req.headers["x-real-ip"] ??
+  //   req.headers["x-forwarded-for"] ??
+  //   req.socket.remoteAddress;
+
+  try {
+    const response = await request({
+      url: shopClient.getStorefrontApiUrl(),
+      document: query,
+      variables: {
+        handle: 'freestyle'
+      },
+      // @TODO: convert to 'getPrivateTokenHeaders({buyerIp})'
+      requestHeaders: shopClient.getPublicTokenHeaders(),
+    });
+
+    if (!response.collection) {
+      return {props: {data: null, errors: ['No collection found']}};
+    }
+
+    const collection = response.collection;
+
+    // @TODO I don't love how we do this with 'errors' and 'data'
+    return {
+      props: {
+        data: response,
+        errors: null,
+        analytics: {
+          pageType: AnalyticsPageType.collection,
+          resourceId: collection.id,
+          collectionHandle: collection.handle,
+        }
+      }
+    };
+  } catch (err) {
+    console.error(err);
+    return {props: {data: null, errors: [(err as Error).toString()]}};
+  }
+};
+
+export default function Collection({
+  data,
+  errors,
+}: StorefrontApiResponseOk<CollectionQuery>) {
+  const {storeDomain} = useShop();
+
+  if (!data || errors) {
+    console.error(errors);
+    return <div>Whoops there was an error! Please refresh and try again.</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1>Collection Page</h1>
+        <div>Storefront API Domain: {storeDomain}</div>
+        <br/>
+
+        <br/>
+        <Link href="/">Back to Home</Link>
+        <Link href="/product">Go to Product</Link>
+        <Link href="/search">Go to Search</Link>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  );
+}
+
+const query = graphql(`
+  query Collection (
+    $handle: String!
+  ) {
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      description
+    }
+  }
+`);
diff --git a/apps/nextjs/pages/index.tsx b/apps/nextjs/pages/index.tsx
index 9419a955..0d2151c7 100644
--- a/apps/nextjs/pages/index.tsx
+++ b/apps/nextjs/pages/index.tsx
@@ -30,10 +30,15 @@ export const getServerSideProps: GetServerSideProps = async () => {
     });
 
     // @TODO I don't love how we do this with 'errors' and 'data'
-    return {props: {data: {
-      pageType: AnalyticsPageType.home,
-      ...response
-    }, errors: null}};
+    return {
+      props: {
+        data: response,
+        errors: null,
+        analytics: {
+          pageType: AnalyticsPageType.home,
+        }
+      }
+    };
   } catch (err) {
     console.error(err);
     return {props: {data: null, errors: [(err as Error).toString()]}};
@@ -68,7 +73,11 @@ export default function Home({
           loading="eager"
         />
         <div>Storefront API Domain: {storeDomain}</div>
-        <Link href="/test">Go to Test</Link>
+        <br/>
+        <Link href="/collection">Go to Collection</Link>
+        <Link href="/product">Go to Product</Link>
+        <Link href="/search">Go to Search</Link>
+
       </main>
 
       <footer className={styles.footer}>
diff --git a/apps/nextjs/pages/test.tsx b/apps/nextjs/pages/product.tsx
similarity index 68%
rename from apps/nextjs/pages/test.tsx
rename to apps/nextjs/pages/product.tsx
index 3a3bdf38..a635c6f1 100644
--- a/apps/nextjs/pages/test.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -5,7 +5,7 @@ import {graphql} from '../gql/gql';
 import {request} from 'graphql-request';
 import type {GetServerSideProps} from 'next';
 import {shopClient} from '../src/shopify-client';
-import type {IndexQueryQuery} from '../gql/graphql';
+import type {ProductQuery} from '../gql/graphql';
 import {
   type StorefrontApiResponseOk,
   useShop,
@@ -15,15 +15,10 @@ import {
   getClientBrowserParameters,
   type ShopifyAddToCartPayload,
   ShopifyAnalyticsProduct,
+  ShopifyAnalyticsPayload,
 } from '@shopify/hydrogen-react';
 import Link from 'next/link';
 
-const analyticsShopData = {
-  shopId: 55145660472,
-  currency: 'USD',
-  acceptedLanguage: 'en',
-};
-
 export const getServerSideProps: GetServerSideProps = async () => {
   // @TODO figure out how to get the client's IP address correctly and accurately.
   // const buyerIp =
@@ -39,21 +34,41 @@ export const getServerSideProps: GetServerSideProps = async () => {
       requestHeaders: shopClient.getPublicTokenHeaders(),
     });
 
+    const product = response.products.nodes[0];
+    const variant = product.variants.nodes[0];
+
+    const productAnalytics: ShopifyAnalyticsProduct = {
+      product_gid: product.id,
+      variant_gid: variant.id,
+      name: product.title,
+      variantName: variant.title,
+      brand: product.vendor,
+      price: variant.price.amount,
+    };
+
     // @TODO I don't love how we do this with 'errors' and 'data'
-    return {props: {data: {
-      pageType: AnalyticsPageType.product,
-      ...response
-    }, errors: null}};
+    return {
+      props: {
+        data: response,
+        errors: null,
+        analytics: {
+          pageType: AnalyticsPageType.product,
+          resourceId: product.id,
+          products: [productAnalytics]
+        }
+      }
+    };
   } catch (err) {
     console.error(err);
     return {props: {data: null, errors: [(err as Error).toString()]}};
   }
 };
 
-export default function Home({
+export default function Product({
   data,
   errors,
-}: StorefrontApiResponseOk<IndexQueryQuery>) {
+  analytics
+}: StorefrontApiResponseOk<ProductQuery> & {analytics: ShopifyAnalyticsPayload}) {
   const {storeDomain} = useShop();
 
   if (!data || errors) {
@@ -61,21 +76,6 @@ export default function Home({
     return <div>Whoops there was an error! Please refresh and try again.</div>;
   }
 
-  const product = data.products.nodes[0];
-  const variant = product.variants.nodes[0];
-
-  console.log(product, variant)
-
-  const productAnalytics: ShopifyAnalyticsProduct = {
-    product_gid: product.id,
-    // variant_gid: variant.id,
-    name: product.title,
-    // variantName: variant.title,
-    brand: product.vendor,
-    price: variant.price.amount,
-    quantity: 1,
-  };
-
   return (
     <div className={styles.container}>
       <Head>
@@ -85,23 +85,29 @@ export default function Home({
       </Head>
 
       <main className={styles.main}>
-        <h1>Test Page</h1>
+        <h1>Product Page</h1>
         <div>Storefront API Domain: {storeDomain}</div>
         <br/>
         <button onClick={() => {
-          sendShopifyAnalytics({
-            eventName: AnalyticsEventName.ADD_TO_CART,
-            payload: {
-              ...getClientBrowserParameters(),
-              ...analyticsShopData,
-              hasUserConsent: true,
-              cartId: '123',
-              products: [productAnalytics],
-            } as ShopifyAddToCartPayload
-          });
+          if (analytics.products) {
+            const product = analytics.products[0];
+            sendShopifyAnalytics({
+              eventName: AnalyticsEventName.ADD_TO_CART,
+              payload: {
+                ...getClientBrowserParameters(),
+                ...analytics,
+                products: [{
+                  ...product,
+                  quantity: 1,
+                }]
+              } as ShopifyAddToCartPayload
+            });
+          }
         }}>Analytics - Add to cart</button>
         <br/>
         <Link href="/">Back to Home</Link>
+        <Link href="/collection">Go to Collection</Link>
+        <Link href="/search">Go to Search</Link>
       </main>
 
       <footer className={styles.footer}>
@@ -121,7 +127,7 @@ export default function Home({
 }
 
 const query = graphql(`
-  query TestQuery {
+  query Product {
     shop {
       name
     }
diff --git a/apps/nextjs/pages/search.tsx b/apps/nextjs/pages/search.tsx
new file mode 100644
index 00000000..31b47ea1
--- /dev/null
+++ b/apps/nextjs/pages/search.tsx
@@ -0,0 +1,113 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import {graphql} from '../gql/gql';
+import {request} from 'graphql-request';
+import type {GetServerSideProps} from 'next';
+import {shopClient} from '../src/shopify-client';
+import type {SearchQuery} from '../gql/graphql';
+import {
+  type StorefrontApiResponseOk,
+  useShop,
+  AnalyticsPageType,
+} from '@shopify/hydrogen-react';
+import Link from 'next/link';
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  // @TODO figure out how to get the client's IP address correctly and accurately.
+  // const buyerIp =
+  //   req.headers["x-real-ip"] ??
+  //   req.headers["x-forwarded-for"] ??
+  //   req.socket.remoteAddress;
+
+  try {
+    const searchTerm = 'liquid';
+    const response = await request({
+      url: shopClient.getStorefrontApiUrl(),
+      document: query,
+      variables: {
+        searchTerm,
+      },
+      // @TODO: convert to 'getPrivateTokenHeaders({buyerIp})'
+      requestHeaders: shopClient.getPublicTokenHeaders(),
+    });
+
+    // @TODO I don't love how we do this with 'errors' and 'data'
+    return {
+      props: {
+        data: response,
+        errors: null,
+        analytics: {
+          pageType: AnalyticsPageType.search,
+          searchString: searchTerm,
+        }
+      }
+    };
+  } catch (err) {
+    console.error(err);
+    return {props: {data: null, errors: [(err as Error).toString()]}};
+  }
+};
+
+export default function Search({
+  data,
+  errors,
+}: StorefrontApiResponseOk<SearchQuery>) {
+  const {storeDomain} = useShop();
+
+  if (!data || errors) {
+    console.error(errors);
+    return <div>Whoops there was an error! Please refresh and try again.</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1>Search Page</h1>
+        <div>Storefront API Domain: {storeDomain}</div>
+        <br/>
+        <Link href="/">Back to Home</Link>
+        <Link href="/collection">Go to Collection</Link>
+        <Link href="/product">Go to Product</Link>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  );
+}
+
+const query = graphql(`
+  query Search (
+    $searchTerm: String
+  ) {
+    products(
+      first: 1
+      sortKey: RELEVANCE
+      query: $searchTerm
+    ) {
+      pageInfo {
+        startCursor
+        endCursor
+        hasNextPage
+        hasPreviousPage
+      }
+    }
+  }
+`);
diff --git a/packages/react/src/shopify-analytics-types.ts b/packages/react/src/shopify-analytics-types.ts
index 47a145a9..9be2b567 100644
--- a/packages/react/src/shopify-analytics-types.ts
+++ b/packages/react/src/shopify-analytics-types.ts
@@ -26,7 +26,7 @@ export type ShopifyAnalyticsProduct = {
   category?: Product['productType'];
   price: ProductVariant['price']['amount'];
   sku?: ProductVariant['sku'];
-  quantity: number;
+  quantity?: number;
 }
 
 export type ShopifyCommonPayload = ClientBrowserParameters & {
diff --git a/packages/react/src/shopify-analytics.tsx b/packages/react/src/shopify-analytics.tsx
index bacd3911..b8f2f8d1 100644
--- a/packages/react/src/shopify-analytics.tsx
+++ b/packages/react/src/shopify-analytics.tsx
@@ -27,7 +27,6 @@ export function sendShopifyAnalytics({
       break;
   }
 
-  console.log(events);
   sendToShopify(events);
 }
 
diff --git a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
index 737cc99c..c5583a6f 100644
--- a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
+++ b/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
@@ -95,8 +95,6 @@ function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload
 
 function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
   return products ? products.map((p: ShopifyAnalyticsProduct) => {
-    const p2 = p as ShopifyAnalyticsProduct;
-    console.log(p2);
     const product = addDataIf({
       variant_gid: p.variant_gid,
       category: p.category,

From fc7dde45edb1cd74ac59ddfc5ca680ae9b87b4b9 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Jan 2023 15:58:19 -0800
Subject: [PATCH 04/58] file renames

---
 .changeset/plenty-moles-listen.md             |   2 +-
 apps/nextjs/gql/graphql.ts                    | 124 +++++++++++++++++-
 packages/react/src/ShopifyCookies.tsx         |   2 +-
 ...cs-constants.ts => analytics-constants.ts} |  10 ++
 .../analytics-errors-utils.ts                 |   0
 ...ma-custom-storefront-customer-tracking.ts} |  10 +-
 ...cs-schema-trekkie-storefront-page-view.ts} |   9 +-
 ...-analytics-types.ts => analytics-types.ts} |   5 +-
 ...-analytics-utils.ts => analytics-utils.ts} |   2 +-
 .../{shopify-analytics.tsx => analytics.tsx}  |  12 +-
 ...fy-cookies-utils.tsx => cookies-utils.tsx} |   2 +-
 packages/react/src/index.ts                   |   6 +-
 12 files changed, 159 insertions(+), 25 deletions(-)
 rename packages/react/src/{shopify-analytics/shopify-analytics-constants.ts => analytics-constants.ts} (82%)
 rename packages/react/src/{shopify-analytics => }/analytics-errors-utils.ts (100%)
 rename packages/react/src/{shopify-analytics/schemas/custom-storefront-customer-tracking.ts => analytics-schema-custom-storefront-customer-tracking.ts} (92%)
 rename packages/react/src/{shopify-analytics/schemas/trekkie-storefront-page-view.ts => analytics-schema-trekkie-storefront-page-view.ts} (85%)
 rename packages/react/src/{shopify-analytics-types.ts => analytics-types.ts} (90%)
 rename packages/react/src/{shopify-analytics/shopify-analytics-utils.ts => analytics-utils.ts} (92%)
 rename packages/react/src/{shopify-analytics.tsx => analytics.tsx} (89%)
 rename packages/react/src/{shopify-analytics/shopify-cookies-utils.tsx => cookies-utils.tsx} (98%)

diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
index c0989382..d5b5ec06 100644
--- a/.changeset/plenty-moles-listen.md
+++ b/.changeset/plenty-moles-listen.md
@@ -1,5 +1,5 @@
 ---
-'@shopify/hydrogen-react': minor
+'@shopify/hydrogen-react': patch
 ---
 
 Shopify Analytics methods and components
diff --git a/apps/nextjs/gql/graphql.ts b/apps/nextjs/gql/graphql.ts
index 2bc5429a..b048b3f1 100644
--- a/apps/nextjs/gql/graphql.ts
+++ b/apps/nextjs/gql/graphql.ts
@@ -37,7 +37,7 @@ export type Scalars = {
    * A string containing HTML code. Refer to the [HTML spec](https://html.spec.whatwg.org/#elements-3) for a
    * complete list of HTML elements.
    *
-   * Example value: `"<p>Grey cotton knit sweater.</p>"`.
+   * Example value: `"<p>Grey cotton knit sweater.</p>"`
    *
    */
   HTML: string;
@@ -1366,6 +1366,8 @@ export enum CheckoutErrorCode {
   CustomerAlreadyUsedOncePerCustomerDiscountNotice = 'CUSTOMER_ALREADY_USED_ONCE_PER_CUSTOMER_DISCOUNT_NOTICE',
   /** Discount already applied. */
   DiscountAlreadyApplied = 'DISCOUNT_ALREADY_APPLIED',
+  /** Discount code isn't working right now. Please contact us for help. */
+  DiscountCodeApplicationFailed = 'DISCOUNT_CODE_APPLICATION_FAILED',
   /** Discount disabled. */
   DiscountDisabled = 'DISCOUNT_DISABLED',
   /** Discount expired. */
@@ -4402,7 +4404,7 @@ export type MetafieldParentResource = Article | Blog | Collection | Customer | O
  * Returns the resource which is being referred to by a metafield.
  *
  */
-export type MetafieldReference = Collection | GenericFile | MediaImage | Page | Product | ProductVariant | Video;
+export type MetafieldReference = Collection | GenericFile | MediaImage | Metaobject | Page | Product | ProductVariant | Video;
 
 /**
  * An auto-generated type for paginating through multiple MetafieldReferences.
@@ -4430,6 +4432,95 @@ export type MetafieldReferenceEdge = {
   node: MetafieldReference;
 };
 
+/** An instance of a user-defined model based on a MetaobjectDefinition. */
+export type Metaobject = Node & {
+  __typename?: 'Metaobject';
+  /** Accesses a field of the object by key. */
+  field?: Maybe<MetaobjectField>;
+  /**
+   * All object fields with defined values.
+   * Omitted object keys can be assumed null, and no guarantees are made about field order.
+   *
+   */
+  fields: Array<MetaobjectField>;
+  /** The unique handle of the metaobject. Useful as a custom ID. */
+  handle: Scalars['String'];
+  /** A globally-unique identifier. */
+  id: Scalars['ID'];
+  /** The type of the metaobject. Defines the namespace of its associated metafields. */
+  type: Scalars['String'];
+  /** The date and time when the metaobject was last updated. */
+  updatedAt: Scalars['DateTime'];
+};
+
+
+/** An instance of a user-defined model based on a MetaobjectDefinition. */
+export type MetaobjectFieldArgs = {
+  key: Scalars['String'];
+};
+
+/**
+ * An auto-generated type for paginating through multiple Metaobjects.
+ *
+ */
+export type MetaobjectConnection = {
+  __typename?: 'MetaobjectConnection';
+  /** A list of edges. */
+  edges: Array<MetaobjectEdge>;
+  /** A list of the nodes contained in MetaobjectEdge. */
+  nodes: Array<Metaobject>;
+  /** Information to aid in pagination. */
+  pageInfo: PageInfo;
+};
+
+/**
+ * An auto-generated type which holds one Metaobject and a cursor during pagination.
+ *
+ */
+export type MetaobjectEdge = {
+  __typename?: 'MetaobjectEdge';
+  /** A cursor for use in pagination. */
+  cursor: Scalars['String'];
+  /** The item at the end of MetaobjectEdge. */
+  node: Metaobject;
+};
+
+/** Provides the value of a Metaobject field. */
+export type MetaobjectField = {
+  __typename?: 'MetaobjectField';
+  /** The field key. */
+  key: Scalars['String'];
+  /** A referenced object if the field type is a resource reference. */
+  reference?: Maybe<MetafieldReference>;
+  /** A list of referenced objects if the field type is a resource reference list. */
+  references?: Maybe<MetafieldReferenceConnection>;
+  /**
+   * The type name of the field.
+   * See the list of [supported types](https://shopify.dev/apps/metafields/definitions/types).
+   *
+   */
+  type: Scalars['String'];
+  /** The field value. */
+  value?: Maybe<Scalars['String']>;
+};
+
+
+/** Provides the value of a Metaobject field. */
+export type MetaobjectFieldReferencesArgs = {
+  after?: InputMaybe<Scalars['String']>;
+  before?: InputMaybe<Scalars['String']>;
+  first?: InputMaybe<Scalars['Int']>;
+  last?: InputMaybe<Scalars['Int']>;
+};
+
+/** The input fields used to retrieve a metaobject by handle. */
+export type MetaobjectHandleInput = {
+  /** The handle of the metaobject. */
+  handle: Scalars['String'];
+  /** The type of the metaobject. */
+  type: Scalars['String'];
+};
+
 /** Represents a Shopify hosted 3D model. */
 export type Model3d = Media & Node & {
   __typename?: 'Model3d';
@@ -4928,6 +5019,8 @@ export type Order = HasMetafields & Node & {
   currentTotalPrice: MoneyV2;
   /** The total of all taxes applied to the order, excluding taxes for returned line items. */
   currentTotalTax: MoneyV2;
+  /** A list of the custom attributes added to the order. */
+  customAttributes: Array<Attribute>;
   /** The locale code in which this specific order happened. */
   customerLocale?: Maybe<Scalars['String']>;
   /** The unique URL that the customer can use to access the order. */
@@ -5667,6 +5760,8 @@ export type ProductFilter = {
   productType?: InputMaybe<Scalars['String']>;
   /** The product vendor to filter on. */
   productVendor?: InputMaybe<Scalars['String']>;
+  /** A product tag to filter on. */
+  tag?: InputMaybe<Scalars['String']>;
   /** A variant metafield to filter on. */
   variantMetafield?: InputMaybe<MetafieldFilter>;
   /** A variant option to filter on. */
@@ -5847,6 +5942,7 @@ export type ProductVariantStoreAvailabilityArgs = {
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  near?: InputMaybe<GeoCoordinateInput>;
   reverse?: InputMaybe<Scalars['Boolean']>;
 };
 
@@ -5936,6 +6032,10 @@ export type QueryRoot = {
   locations: LocationConnection;
   /** A storefront menu. */
   menu?: Maybe<Menu>;
+  /** Fetch a specific Metaobject by one of its unique identifiers. */
+  metaobject?: Maybe<Metaobject>;
+  /** All active metaobjects for the shop. */
+  metaobjects: MetaobjectConnection;
   /** Returns a specific node by ID. */
   node?: Maybe<Node>;
   /** Returns the list of nodes with the given IDs. */
@@ -6074,6 +6174,25 @@ export type QueryRootMenuArgs = {
 };
 
 
+/** The schema’s entry-point for queries. This acts as the public, top-level API from which all queries must start. */
+export type QueryRootMetaobjectArgs = {
+  handle?: InputMaybe<MetaobjectHandleInput>;
+  id?: InputMaybe<Scalars['ID']>;
+};
+
+
+/** The schema’s entry-point for queries. This acts as the public, top-level API from which all queries must start. */
+export type QueryRootMetaobjectsArgs = {
+  after?: InputMaybe<Scalars['String']>;
+  before?: InputMaybe<Scalars['String']>;
+  first?: InputMaybe<Scalars['Int']>;
+  last?: InputMaybe<Scalars['Int']>;
+  reverse?: InputMaybe<Scalars['Boolean']>;
+  sortKey?: InputMaybe<Scalars['String']>;
+  type: Scalars['String'];
+};
+
+
 /** The schema’s entry-point for queries. This acts as the public, top-level API from which all queries must start. */
 export type QueryRootNodeArgs = {
   id: Scalars['ID'];
@@ -6160,6 +6279,7 @@ export type QueryRootUrlRedirectsArgs = {
   before?: InputMaybe<Scalars['String']>;
   first?: InputMaybe<Scalars['Int']>;
   last?: InputMaybe<Scalars['Int']>;
+  query?: InputMaybe<Scalars['String']>;
   reverse?: InputMaybe<Scalars['Boolean']>;
 };
 
diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
index 5663ee04..a77c38a2 100644
--- a/packages/react/src/ShopifyCookies.tsx
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -7,7 +7,7 @@ import {
 import {
   buildUUID,
   getShopifyCookies,
-} from './shopify-analytics/shopify-cookies-utils';
+} from './shopify-analytics/cookies-utils';
 
 const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
 const shortTermLength = 60 * 30; // 30 mins
diff --git a/packages/react/src/shopify-analytics/shopify-analytics-constants.ts b/packages/react/src/analytics-constants.ts
similarity index 82%
rename from packages/react/src/shopify-analytics/shopify-analytics-constants.ts
rename to packages/react/src/analytics-constants.ts
index 1db3ae1f..15eb67ff 100644
--- a/packages/react/src/shopify-analytics/shopify-analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -27,3 +27,13 @@ export enum AnalyticsPageType {
   policy = 'policy',
   search = 'search',
 }
+
+export enum ShopifyAppSource {
+  hydrogen = 'hydrogen',
+  headless = 'headless',
+}
+
+export const ShopifyAppId = {
+  hydrogen: '6167201',
+  headless: '12875497473',
+}
diff --git a/packages/react/src/shopify-analytics/analytics-errors-utils.ts b/packages/react/src/analytics-errors-utils.ts
similarity index 100%
rename from packages/react/src/shopify-analytics/analytics-errors-utils.ts
rename to packages/react/src/analytics-errors-utils.ts
diff --git a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
similarity index 92%
rename from packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
rename to packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index c5583a6f..35b415ec 100644
--- a/packages/react/src/shopify-analytics/schemas/custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -4,10 +4,10 @@ import {
   ShopifyAddToCartPayload,
   ShopifyMonorailPayload,
   ShopifyAnalyticsProduct,
-} from "../../shopify-analytics-types";
-import { AnalyticsPageType } from "../shopify-analytics-constants";
-import {addDataIf, schemaWrapper, stripGId, stripId} from "../shopify-analytics-utils";
-import {buildUUID} from "../shopify-cookies-utils";
+} from "./analytics-types";
+import { AnalyticsPageType, ShopifyAppSource } from "./analytics-constants";
+import {addDataIf, schemaWrapper, stripGId, stripId} from "./analytics-utils";
+import {buildUUID} from "./cookies-utils";
 
 const SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';
 const PAGE_RENDERED_EVENT_NAME = 'page_rendered';
@@ -72,7 +72,7 @@ export function addToCart(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayl
 
 function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
   return {
-    source: 'hydrogen',
+    source: payload.shopifyAppSource || ShopifyAppSource.headless,
     hydrogenSubchannelId: payload.storefrontId || '0',
 
     is_persistent_cookie: payload.hasUserConsent,
diff --git a/packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
similarity index 85%
rename from packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts
rename to packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index ca03720f..29f26538 100644
--- a/packages/react/src/shopify-analytics/schemas/trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -2,9 +2,10 @@ import {
   ShopifyAnalyticsPayload,
   ShopifyPageViewPayload,
   ShopifyMonorailPayload,
-} from "../../shopify-analytics-types";
-import {addDataIf, schemaWrapper, stripGId, getResourceType} from "../shopify-analytics-utils";
-import {buildUUID} from "../shopify-cookies-utils";
+} from "./analytics-types";
+import { ShopifyAppId } from "./analytics-constants";
+import {addDataIf, schemaWrapper, stripGId, getResourceType} from "./analytics-utils";
+import {buildUUID} from "./cookies-utils";
 
 const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
 const oxygenDomain = 'myshopify.dev';
@@ -21,7 +22,7 @@ export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPaylo
 
 function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
   return {
-    appClientId: '6167201',
+    appClientId: payload.shopifyAppSource ? ShopifyAppId[payload.shopifyAppSource] : ShopifyAppId.headless,
     isMerchantRequest: isMerchantRequest(payload.url),
     hydrogenSubchannelId: payload.storefrontId || '0',
 
diff --git a/packages/react/src/shopify-analytics-types.ts b/packages/react/src/analytics-types.ts
similarity index 90%
rename from packages/react/src/shopify-analytics-types.ts
rename to packages/react/src/analytics-types.ts
index 9be2b567..30d0bf26 100644
--- a/packages/react/src/shopify-analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -2,7 +2,7 @@ import type {
   Product,
   ProductVariant,
 } from './storefront-api-types.js';
-import {AnalyticsEventName} from "./shopify-analytics/shopify-analytics-constants";
+import {AnalyticsEventName, ShopifyAppSource} from "./analytics-constants";
 
 export type ClientBrowserParameters = {
   uniqueToken: string;
@@ -29,7 +29,10 @@ export type ShopifyAnalyticsProduct = {
   quantity?: number;
 }
 
+export type ShopifyAppSources = keyof typeof ShopifyAppSource;
+
 export type ShopifyCommonPayload = ClientBrowserParameters & {
+  shopifyAppSource?: ShopifyAppSources;
   hasUserConsent: boolean;
   shopId: string | number;
   currency: string;
diff --git a/packages/react/src/shopify-analytics/shopify-analytics-utils.ts b/packages/react/src/analytics-utils.ts
similarity index 92%
rename from packages/react/src/shopify-analytics/shopify-analytics-utils.ts
rename to packages/react/src/analytics-utils.ts
index 6971fca9..de94a30f 100644
--- a/packages/react/src/shopify-analytics/shopify-analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,4 +1,4 @@
-import type {ShopifyMonorailPayload} from "../shopify-analytics-types";
+import type {ShopifyMonorailPayload} from "./analytics-types";
 
 export function schemaWrapper(schemaId: string, payload: unknown) {
   return {
diff --git a/packages/react/src/shopify-analytics.tsx b/packages/react/src/analytics.tsx
similarity index 89%
rename from packages/react/src/shopify-analytics.tsx
rename to packages/react/src/analytics.tsx
index b8f2f8d1..37e5f720 100644
--- a/packages/react/src/shopify-analytics.tsx
+++ b/packages/react/src/analytics.tsx
@@ -3,13 +3,13 @@ import type {
   ClientBrowserParameters,
   ShopifyAnalytics,
   ShopifyMonorailPayload,
-} from "./shopify-analytics-types";
-import {AnalyticsEventName} from "./shopify-analytics/shopify-analytics-constants";
-import {errorIfServer} from "./shopify-analytics/analytics-errors-utils";
-import {getShopifyCookies} from "./shopify-analytics/shopify-cookies-utils";
+} from "./analytics-types";
+import {AnalyticsEventName} from "./analytics-constants";
+import {errorIfServer} from "./analytics-errors-utils";
+import {getShopifyCookies} from "./cookies-utils";
 
-import * as TrekkieStorefrontPageView from './shopify-analytics/schemas/trekkie-storefront-page-view';
-import * as CustomStorefrontCustomerTracking from './shopify-analytics/schemas/custom-storefront-customer-tracking';
+import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view';
+import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking';
 
 export function sendShopifyAnalytics({
   eventName,
diff --git a/packages/react/src/shopify-analytics/shopify-cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
similarity index 98%
rename from packages/react/src/shopify-analytics/shopify-cookies-utils.tsx
rename to packages/react/src/cookies-utils.tsx
index 95c3fb3f..8b2dbc53 100644
--- a/packages/react/src/shopify-analytics/shopify-cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -2,7 +2,7 @@ import {parse} from "worktop/cookie";
 import {
   SHOPIFY_Y,
   SHOPIFY_S,
-} from "../cart-constants";
+} from "./cart-constants";
 
 const zeros = '00000000';
 const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index a4d6777a..7d4bae45 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -34,7 +34,7 @@ export {Video} from './Video.js';
 export {
   AnalyticsEventName,
   AnalyticsPageType,
-} from './shopify-analytics/shopify-analytics-constants'
+} from './analytics-constants'
 export type {
   ClientBrowserParameters,
   ShopifyPageViewPayload,
@@ -44,9 +44,9 @@ export type {
   ShopifyAnalyticsPayload,
   ShopifyAnalytics,
   ShopifyAnalyticsProduct,
-} from './shopify-analytics-types.js'
+} from './analytics-types.js'
 export {ShopifyCookies} from './ShopifyCookies.js'
 export {
   sendShopifyAnalytics,
   getClientBrowserParameters,
-} from './shopify-analytics.js';
+} from './analytics.js';

From 52486b1101f9446af8394bca310e11a6362971e8 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Jan 2023 16:04:20 -0800
Subject: [PATCH 05/58] file paths

---
 apps/nextjs/pages/_app.tsx                                | 1 -
 packages/react/src/ShopifyCookies.tsx                     | 4 ++--
 ...nalytics-schema-custom-storefront-customer-tracking.ts | 8 ++++----
 .../src/analytics-schema-trekkie-storefront-page-view.ts  | 8 ++++----
 packages/react/src/analytics-types.ts                     | 2 +-
 packages/react/src/analytics-utils.ts                     | 2 +-
 packages/react/src/analytics.tsx                          | 8 ++++----
 packages/react/src/cookies-utils.tsx                      | 2 +-
 8 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index eab1d9f9..183207d7 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -8,7 +8,6 @@ import {
   getClientBrowserParameters,
   AnalyticsEventName,
   type ShopifyPageViewPayload,
-  type ShopifyAnalyticsProduct,
 } from '@shopify/hydrogen-react';
 import {useRouter} from 'next/router';
 import {useEffect} from 'react';
diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
index a77c38a2..a12cce25 100644
--- a/packages/react/src/ShopifyCookies.tsx
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -3,11 +3,11 @@ import {stringify} from 'worktop/cookie';
 import {
   SHOPIFY_Y,
   SHOPIFY_S,
-} from './cart-constants';
+} from './cart-constants.js';
 import {
   buildUUID,
   getShopifyCookies,
-} from './shopify-analytics/cookies-utils';
+} from './cookies-utils.js';
 
 const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
 const shortTermLength = 60 * 30; // 30 mins
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 35b415ec..748fef89 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -4,10 +4,10 @@ import {
   ShopifyAddToCartPayload,
   ShopifyMonorailPayload,
   ShopifyAnalyticsProduct,
-} from "./analytics-types";
-import { AnalyticsPageType, ShopifyAppSource } from "./analytics-constants";
-import {addDataIf, schemaWrapper, stripGId, stripId} from "./analytics-utils";
-import {buildUUID} from "./cookies-utils";
+} from "./analytics-types.js";
+import { AnalyticsPageType, ShopifyAppSource } from "./analytics-constants.js";
+import {addDataIf, schemaWrapper, stripGId, stripId} from "./analytics-utils.js";
+import {buildUUID} from "./cookies-utils.js";
 
 const SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';
 const PAGE_RENDERED_EVENT_NAME = 'page_rendered';
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index 29f26538..9f57ee4e 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -2,10 +2,10 @@ import {
   ShopifyAnalyticsPayload,
   ShopifyPageViewPayload,
   ShopifyMonorailPayload,
-} from "./analytics-types";
-import { ShopifyAppId } from "./analytics-constants";
-import {addDataIf, schemaWrapper, stripGId, getResourceType} from "./analytics-utils";
-import {buildUUID} from "./cookies-utils";
+} from "./analytics-types.js";
+import { ShopifyAppId } from "./analytics-constants.js";
+import {addDataIf, schemaWrapper, stripGId, getResourceType} from "./analytics-utils.js";
+import {buildUUID} from "./cookies-utils.js";
 
 const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
 const oxygenDomain = 'myshopify.dev';
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index 30d0bf26..f675dbd3 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -2,7 +2,7 @@ import type {
   Product,
   ProductVariant,
 } from './storefront-api-types.js';
-import {AnalyticsEventName, ShopifyAppSource} from "./analytics-constants";
+import {AnalyticsEventName, ShopifyAppSource} from "./analytics-constants.js";
 
 export type ClientBrowserParameters = {
   uniqueToken: string;
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index de94a30f..7018ca9c 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,4 +1,4 @@
-import type {ShopifyMonorailPayload} from "./analytics-types";
+import type {ShopifyMonorailPayload} from "./analytics-types.js";
 
 export function schemaWrapper(schemaId: string, payload: unknown) {
   return {
diff --git a/packages/react/src/analytics.tsx b/packages/react/src/analytics.tsx
index 37e5f720..f3349645 100644
--- a/packages/react/src/analytics.tsx
+++ b/packages/react/src/analytics.tsx
@@ -5,11 +5,11 @@ import type {
   ShopifyMonorailPayload,
 } from "./analytics-types";
 import {AnalyticsEventName} from "./analytics-constants";
-import {errorIfServer} from "./analytics-errors-utils";
-import {getShopifyCookies} from "./cookies-utils";
+import {errorIfServer} from "./analytics-errors-utils.js";
+import {getShopifyCookies} from "./cookies-utils.js";
 
-import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view';
-import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking';
+import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
+import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
 
 export function sendShopifyAnalytics({
   eventName,
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index 8b2dbc53..c980d633 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -2,7 +2,7 @@ import {parse} from "worktop/cookie";
 import {
   SHOPIFY_Y,
   SHOPIFY_S,
-} from "./cart-constants";
+} from "./cart-constants.js";
 
 const zeros = '00000000';
 const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';

From 32966c420202f5f5443832d2f1b2873100f8fac4 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Jan 2023 16:12:25 -0800
Subject: [PATCH 06/58] lint

---
 apps/nextjs/gql/gql.ts                        |   8 +-
 apps/nextjs/pages/_app.tsx                    |  14 +-
 apps/nextjs/pages/collection.tsx              |  14 +-
 apps/nextjs/pages/index.tsx                   |   7 +-
 apps/nextjs/pages/product.tsx                 |  54 +++---
 apps/nextjs/pages/search.tsx                  |  16 +-
 packages/react/src/ShopifyCookies.tsx         |  15 +-
 packages/react/src/analytics-constants.ts     |   2 +-
 packages/react/src/analytics-errors-utils.ts  |   4 +-
 ...ema-custom-storefront-customer-tracking.ts | 168 ++++++++++++------
 ...ics-schema-trekkie-storefront-page-view.ts |  45 +++--
 packages/react/src/analytics-types.ts         |  25 ++-
 packages/react/src/analytics-utils.ts         |   2 +-
 packages/react/src/analytics.tsx              |  54 +++---
 packages/react/src/cookies-utils.tsx          |  11 +-
 packages/react/src/index.ts                   |  14 +-
 16 files changed, 256 insertions(+), 197 deletions(-)

diff --git a/apps/nextjs/gql/gql.ts b/apps/nextjs/gql/gql.ts
index cc9754bd..720e48cb 100644
--- a/apps/nextjs/gql/gql.ts
+++ b/apps/nextjs/gql/gql.ts
@@ -13,16 +13,16 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel-plugin for production.
  */
 const documents = {
-    "\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n": types.CollectionDocument,
+    "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n": types.CollectionDocument,
     "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.IndexQueryDocument,
     "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.ProductDocument,
-    "\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
+    "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
 };
 
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"): (typeof documents)["\n  query Collection (\n    $handle: String!\n  ) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"];
+export function graphql(source: "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"): (typeof documents)["\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -34,7 +34,7 @@ export function graphql(source: "\n  query Product {\n    shop {\n      name\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search (\n    $searchTerm: String\n  ) {\n    products(\n      first: 1\n      sortKey: RELEVANCE\n      query: $searchTerm\n    ) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
 
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 183207d7..1c41d8b7 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -20,7 +20,7 @@ const analyticsShopData = {
 let isInit = false;
 
 export default function App({Component, pageProps}: AppProps) {
-  const router = useRouter()
+  const router = useRouter();
   const hasUserConsent = true;
   const analytics = {
     hasUserConsent,
@@ -35,7 +35,7 @@ export default function App({Component, pageProps}: AppProps) {
   useEffect(() => {
     const handleRouteChange = () => {
       sendPageView(analytics);
-    }
+    };
 
     router.events.on('routeChangeComplete', handleRouteChange);
 
@@ -46,9 +46,9 @@ export default function App({Component, pageProps}: AppProps) {
     }
 
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [analytics])
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [analytics]);
 
   return (
     <ShopifyProvider
@@ -62,7 +62,7 @@ export default function App({Component, pageProps}: AppProps) {
       <CartProvider>
         <Component {...pagePropsWithAppAnalytics} />
       </CartProvider>
-      <ShopifyCookies domain='' hasUserConsent={hasUserConsent}/>
+      <ShopifyCookies domain="" hasUserConsent={hasUserConsent} />
     </ShopifyProvider>
   );
 }
@@ -73,6 +73,6 @@ function sendPageView(analyticsPageData: Partial<ShopifyPageViewPayload>) {
     payload: {
       ...getClientBrowserParameters(),
       ...analyticsPageData,
-    } as ShopifyPageViewPayload
+    } as ShopifyPageViewPayload,
   });
 }
diff --git a/apps/nextjs/pages/collection.tsx b/apps/nextjs/pages/collection.tsx
index 5d3cdc74..0e86bd13 100644
--- a/apps/nextjs/pages/collection.tsx
+++ b/apps/nextjs/pages/collection.tsx
@@ -25,7 +25,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
       url: shopClient.getStorefrontApiUrl(),
       document: query,
       variables: {
-        handle: 'freestyle'
+        handle: 'freestyle',
       },
       // @TODO: convert to 'getPrivateTokenHeaders({buyerIp})'
       requestHeaders: shopClient.getPublicTokenHeaders(),
@@ -46,8 +46,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
           pageType: AnalyticsPageType.collection,
           resourceId: collection.id,
           collectionHandle: collection.handle,
-        }
-      }
+        },
+      },
     };
   } catch (err) {
     console.error(err);
@@ -77,9 +77,9 @@ export default function Collection({
       <main className={styles.main}>
         <h1>Collection Page</h1>
         <div>Storefront API Domain: {storeDomain}</div>
-        <br/>
+        <br />
 
-        <br/>
+        <br />
         <Link href="/">Back to Home</Link>
         <Link href="/product">Go to Product</Link>
         <Link href="/search">Go to Search</Link>
@@ -102,9 +102,7 @@ export default function Collection({
 }
 
 const query = graphql(`
-  query Collection (
-    $handle: String!
-  ) {
+  query Collection($handle: String!) {
     collection(handle: $handle) {
       id
       handle
diff --git a/apps/nextjs/pages/index.tsx b/apps/nextjs/pages/index.tsx
index 0d2151c7..65a74ce8 100644
--- a/apps/nextjs/pages/index.tsx
+++ b/apps/nextjs/pages/index.tsx
@@ -36,8 +36,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
         errors: null,
         analytics: {
           pageType: AnalyticsPageType.home,
-        }
-      }
+        },
+      },
     };
   } catch (err) {
     console.error(err);
@@ -73,11 +73,10 @@ export default function Home({
           loading="eager"
         />
         <div>Storefront API Domain: {storeDomain}</div>
-        <br/>
+        <br />
         <Link href="/collection">Go to Collection</Link>
         <Link href="/product">Go to Product</Link>
         <Link href="/search">Go to Search</Link>
-
       </main>
 
       <footer className={styles.footer}>
diff --git a/apps/nextjs/pages/product.tsx b/apps/nextjs/pages/product.tsx
index a635c6f1..59a1b58f 100644
--- a/apps/nextjs/pages/product.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -54,9 +54,9 @@ export const getServerSideProps: GetServerSideProps = async () => {
         analytics: {
           pageType: AnalyticsPageType.product,
           resourceId: product.id,
-          products: [productAnalytics]
-        }
-      }
+          products: [productAnalytics],
+        },
+      },
     };
   } catch (err) {
     console.error(err);
@@ -67,8 +67,10 @@ export const getServerSideProps: GetServerSideProps = async () => {
 export default function Product({
   data,
   errors,
-  analytics
-}: StorefrontApiResponseOk<ProductQuery> & {analytics: ShopifyAnalyticsPayload}) {
+  analytics,
+}: StorefrontApiResponseOk<ProductQuery> & {
+  analytics: ShopifyAnalyticsPayload;
+}) {
   const {storeDomain} = useShop();
 
   if (!data || errors) {
@@ -87,24 +89,30 @@ export default function Product({
       <main className={styles.main}>
         <h1>Product Page</h1>
         <div>Storefront API Domain: {storeDomain}</div>
-        <br/>
-        <button onClick={() => {
-          if (analytics.products) {
-            const product = analytics.products[0];
-            sendShopifyAnalytics({
-              eventName: AnalyticsEventName.ADD_TO_CART,
-              payload: {
-                ...getClientBrowserParameters(),
-                ...analytics,
-                products: [{
-                  ...product,
-                  quantity: 1,
-                }]
-              } as ShopifyAddToCartPayload
-            });
-          }
-        }}>Analytics - Add to cart</button>
-        <br/>
+        <br />
+        <button
+          onClick={() => {
+            if (analytics.products) {
+              const product = analytics.products[0];
+              sendShopifyAnalytics({
+                eventName: AnalyticsEventName.ADD_TO_CART,
+                payload: {
+                  ...getClientBrowserParameters(),
+                  ...analytics,
+                  products: [
+                    {
+                      ...product,
+                      quantity: 1,
+                    },
+                  ],
+                } as ShopifyAddToCartPayload,
+              });
+            }
+          }}
+        >
+          Analytics - Add to cart
+        </button>
+        <br />
         <Link href="/">Back to Home</Link>
         <Link href="/collection">Go to Collection</Link>
         <Link href="/search">Go to Search</Link>
diff --git a/apps/nextjs/pages/search.tsx b/apps/nextjs/pages/search.tsx
index 31b47ea1..15a4a6d9 100644
--- a/apps/nextjs/pages/search.tsx
+++ b/apps/nextjs/pages/search.tsx
@@ -40,8 +40,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
         analytics: {
           pageType: AnalyticsPageType.search,
           searchString: searchTerm,
-        }
-      }
+        },
+      },
     };
   } catch (err) {
     console.error(err);
@@ -71,7 +71,7 @@ export default function Search({
       <main className={styles.main}>
         <h1>Search Page</h1>
         <div>Storefront API Domain: {storeDomain}</div>
-        <br/>
+        <br />
         <Link href="/">Back to Home</Link>
         <Link href="/collection">Go to Collection</Link>
         <Link href="/product">Go to Product</Link>
@@ -94,14 +94,8 @@ export default function Search({
 }
 
 const query = graphql(`
-  query Search (
-    $searchTerm: String
-  ) {
-    products(
-      first: 1
-      sortKey: RELEVANCE
-      query: $searchTerm
-    ) {
+  query Search($searchTerm: String) {
+    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {
       pageInfo {
         startCursor
         endCursor
diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
index a12cce25..3fd9c3f1 100644
--- a/packages/react/src/ShopifyCookies.tsx
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -1,13 +1,7 @@
 import {useEffect} from 'react';
 import {stringify} from 'worktop/cookie';
-import {
-  SHOPIFY_Y,
-  SHOPIFY_S,
-} from './cart-constants.js';
-import {
-  buildUUID,
-  getShopifyCookies,
-} from './cookies-utils.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
+import {buildUUID, getShopifyCookies} from './cookies-utils.js';
 
 const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
 const shortTermLength = 60 * 30; // 30 mins
@@ -23,10 +17,7 @@ interface ShopifyCookiesProps {
 }
 
 export function ShopifyCookies(props: ShopifyCookiesProps) {
-  const {
-    domain = '',
-    hasUserConsent = false,
-  } = props;
+  const {domain = '', hasUserConsent = false} = props;
 
   useEffect(() => {
     const cookies = getShopifyCookies(document.cookie);
diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index 15eb67ff..42453bd6 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -36,4 +36,4 @@ export enum ShopifyAppSource {
 export const ShopifyAppId = {
   hydrogen: '6167201',
   headless: '12875497473',
-}
+};
diff --git a/packages/react/src/analytics-errors-utils.ts b/packages/react/src/analytics-errors-utils.ts
index 9742bfcd..7ea30242 100644
--- a/packages/react/src/analytics-errors-utils.ts
+++ b/packages/react/src/analytics-errors-utils.ts
@@ -1,6 +1,8 @@
 export function errorIfServer(fnName: string): boolean {
   if (!window) {
-    console.error(`${fnName} should only be used within the useEffect callback or event handlers`);
+    console.error(
+      `${fnName} should only be used within the useEffect callback or event handlers`
+    );
     return true;
   }
   return false;
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 748fef89..56de9c63 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -4,10 +4,15 @@ import {
   ShopifyAddToCartPayload,
   ShopifyMonorailPayload,
   ShopifyAnalyticsProduct,
-} from "./analytics-types.js";
-import { AnalyticsPageType, ShopifyAppSource } from "./analytics-constants.js";
-import {addDataIf, schemaWrapper, stripGId, stripId} from "./analytics-utils.js";
-import {buildUUID} from "./cookies-utils.js";
+} from './analytics-types.js';
+import {AnalyticsPageType, ShopifyAppSource} from './analytics-constants.js';
+import {
+  addDataIf,
+  schemaWrapper,
+  stripGId,
+  stripId,
+} from './analytics-utils.js';
+import {buildUUID} from './cookies-utils.js';
 
 const SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';
 const PAGE_RENDERED_EVENT_NAME = 'page_rendered';
@@ -16,7 +21,9 @@ const PRODUCT_PAGE_RENDERED_EVENT_NAME = 'product_page_rendered';
 const PRODUCT_ADDED_TO_CART_EVENT_NAME = 'product_added_to_cart';
 const SEARCH_SUBMITTED_EVENT_NAME = 'search_submitted';
 
-export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
+export function pageView(
+  payload: ShopifyAnalyticsPayload
+): ShopifyMonorailPayload[] {
   const pageViewPayload = payload as ShopifyPageViewPayload;
   const additionalPayload = {
     canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
@@ -25,52 +32,96 @@ export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPaylo
   const pageType = pageViewPayload.pageType;
   const pageViewEvents = [];
 
-  pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
-    event_name: PAGE_RENDERED_EVENT_NAME,
-    ...additionalPayload,
-  }, formatPayload(pageViewPayload))));
+  pageViewEvents.push(
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          event_name: PAGE_RENDERED_EVENT_NAME,
+          ...additionalPayload,
+        },
+        formatPayload(pageViewPayload)
+      )
+    )
+  );
 
-  if(pageType === AnalyticsPageType.collection) {
-    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
-      event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
-      ...additionalPayload,
-      collection_name: pageViewPayload.collectionHandle,
-    }, formatPayload(pageViewPayload))));
+  if (pageType === AnalyticsPageType.collection) {
+    pageViewEvents.push(
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload,
+            collection_name: pageViewPayload.collectionHandle,
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    );
   }
 
-  if(pageType === AnalyticsPageType.product) {
-    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
-      event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
-      ...additionalPayload,
-      collection_name: pageViewPayload.collectionHandle,
-      products: formatProductPayload(pageViewPayload.products),
-      total_value: pageViewPayload.totalValue,
-    }, formatPayload(pageViewPayload))));
+  if (pageType === AnalyticsPageType.product) {
+    pageViewEvents.push(
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+            ...additionalPayload,
+            collection_name: pageViewPayload.collectionHandle,
+            products: formatProductPayload(pageViewPayload.products),
+            total_value: pageViewPayload.totalValue,
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    );
   }
 
-  if(pageType === AnalyticsPageType.search) {
-    pageViewEvents.push(schemaWrapper(SCHEMA_ID, addDataIf({
-      event_name: SEARCH_SUBMITTED_EVENT_NAME,
-      ...additionalPayload,
-      search_string: pageViewPayload.searchString,
-    }, formatPayload(pageViewPayload))));
+  if (pageType === AnalyticsPageType.search) {
+    pageViewEvents.push(
+      schemaWrapper(
+        SCHEMA_ID,
+        addDataIf(
+          {
+            event_name: SEARCH_SUBMITTED_EVENT_NAME,
+            ...additionalPayload,
+            search_string: pageViewPayload.searchString,
+          },
+          formatPayload(pageViewPayload)
+        )
+      )
+    );
   }
 
   return pageViewEvents;
 }
 
-export function addToCart(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
-  const addToCartPayload = payload as ShopifyAddToCartPayload
-  return [schemaWrapper(SCHEMA_ID, addDataIf({
-    event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
-    customerId: addToCartPayload.customerId,
-    cart_token: stripId(addToCartPayload.cartId),
-    total_value: addToCartPayload.totalValue,
-    products: formatProductPayload(addToCartPayload.products),
-  }, formatPayload(addToCartPayload)))];
+export function addToCart(
+  payload: ShopifyAnalyticsPayload
+): ShopifyMonorailPayload[] {
+  const addToCartPayload = payload as ShopifyAddToCartPayload;
+  return [
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
+          customerId: addToCartPayload.customerId,
+          cart_token: stripId(addToCartPayload.cartId),
+          total_value: addToCartPayload.totalValue,
+          products: formatProductPayload(addToCartPayload.products),
+        },
+        formatPayload(addToCartPayload)
+      )
+    ),
+  ];
 }
 
-function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
+function formatPayload(
+  payload: ShopifyAnalyticsPayload
+): ShopifyMonorailPayload {
   return {
     source: payload.shopifyAppSource || ShopifyAppSource.headless,
     hydrogenSubchannelId: payload.storefrontId || '0',
@@ -94,21 +145,26 @@ function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload
 }
 
 function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
-  return products ? products.map((p: ShopifyAnalyticsProduct) => {
-    const product = addDataIf({
-      variant_gid: p.variant_gid,
-      category: p.category,
-      sku: p.sku,
-      product_id: stripGId(p.product_gid),
-      variant_id: stripGId(p.variant_gid),
-    }, {
-      product_gid: p.product_gid,
-      name: p.name,
-      variant: p.variantName || '',
-      brand: p.brand,
-      price: p.price,
-      quantity: Number(p.quantity || 0),
-    })
-    return JSON.stringify(product as ShopifyAnalyticsProduct);
-  }) : [];
+  return products
+    ? products.map((p: ShopifyAnalyticsProduct) => {
+        const product = addDataIf(
+          {
+            variant_gid: p.variant_gid,
+            category: p.category,
+            sku: p.sku,
+            product_id: stripGId(p.product_gid),
+            variant_id: stripGId(p.variant_gid),
+          },
+          {
+            product_gid: p.product_gid,
+            name: p.name,
+            variant: p.variantName || '',
+            brand: p.brand,
+            price: p.price,
+            quantity: Number(p.quantity || 0),
+          }
+        );
+        return JSON.stringify(product as ShopifyAnalyticsProduct);
+      })
+    : [];
 }
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index 9f57ee4e..14c5aabe 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -2,27 +2,46 @@ import {
   ShopifyAnalyticsPayload,
   ShopifyPageViewPayload,
   ShopifyMonorailPayload,
-} from "./analytics-types.js";
-import { ShopifyAppId } from "./analytics-constants.js";
-import {addDataIf, schemaWrapper, stripGId, getResourceType} from "./analytics-utils.js";
-import {buildUUID} from "./cookies-utils.js";
+} from './analytics-types.js';
+import {ShopifyAppId} from './analytics-constants.js';
+import {
+  addDataIf,
+  schemaWrapper,
+  stripGId,
+  getResourceType,
+} from './analytics-utils.js';
+import {buildUUID} from './cookies-utils.js';
 
 const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
 const oxygenDomain = 'myshopify.dev';
 
-export function pageView(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload[] {
+export function pageView(
+  payload: ShopifyAnalyticsPayload
+): ShopifyMonorailPayload[] {
   const pageViewPayload = payload as ShopifyPageViewPayload;
-  return [schemaWrapper(SCHEMA_ID, addDataIf({
-    pageType: pageViewPayload.pageType,
-    customerId: pageViewPayload.customerId,
-    resourceType: getResourceType(pageViewPayload.resourceId),
-    resourceId: stripGId(pageViewPayload.resourceId),
-  }, formatPayload(pageViewPayload)))];
+  return [
+    schemaWrapper(
+      SCHEMA_ID,
+      addDataIf(
+        {
+          pageType: pageViewPayload.pageType,
+          customerId: pageViewPayload.customerId,
+          resourceType: getResourceType(pageViewPayload.resourceId),
+          resourceId: stripGId(pageViewPayload.resourceId),
+        },
+        formatPayload(pageViewPayload)
+      )
+    ),
+  ];
 }
 
-function formatPayload(payload: ShopifyAnalyticsPayload): ShopifyMonorailPayload {
+function formatPayload(
+  payload: ShopifyAnalyticsPayload
+): ShopifyMonorailPayload {
   return {
-    appClientId: payload.shopifyAppSource ? ShopifyAppId[payload.shopifyAppSource] : ShopifyAppId.headless,
+    appClientId: payload.shopifyAppSource
+      ? ShopifyAppId[payload.shopifyAppSource]
+      : ShopifyAppId.headless,
     isMerchantRequest: isMerchantRequest(payload.url),
     hydrogenSubchannelId: payload.storefrontId || '0',
 
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index f675dbd3..56427dae 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -1,8 +1,5 @@
-import type {
-  Product,
-  ProductVariant,
-} from './storefront-api-types.js';
-import {AnalyticsEventName, ShopifyAppSource} from "./analytics-constants.js";
+import type {Product, ProductVariant} from './storefront-api-types.js';
+import {AnalyticsEventName, ShopifyAppSource} from './analytics-constants.js';
 
 export type ClientBrowserParameters = {
   uniqueToken: string;
@@ -27,7 +24,7 @@ export type ShopifyAnalyticsProduct = {
   price: ProductVariant['price']['amount'];
   sku?: ProductVariant['sku'];
   quantity?: number;
-}
+};
 
 export type ShopifyAppSources = keyof typeof ShopifyAppSource;
 
@@ -52,9 +49,9 @@ export type ShopifyPageViewPayload = ShopifyCommonPayload & {
 };
 
 export type ShopifyPageView = {
-  eventName: AnalyticsEventName.PAGE_VIEW,
-  payload: ShopifyPageViewPayload
-}
+  eventName: AnalyticsEventName.PAGE_VIEW;
+  payload: ShopifyPageViewPayload;
+};
 
 export type ShopifyAddToCartPayload = ShopifyCommonPayload & {
   /** The cart's ID if it has been created through the Storefront API. */
@@ -62,10 +59,12 @@ export type ShopifyAddToCartPayload = ShopifyCommonPayload & {
 };
 
 export type ShopifyAddToCart = {
-  eventName: AnalyticsEventName.ADD_TO_CART,
-  payload: ShopifyAddToCartPayload,
-}
+  eventName: AnalyticsEventName.ADD_TO_CART;
+  payload: ShopifyAddToCartPayload;
+};
 
 export type ShopifyMonorailPayload = Record<string, unknown>;
-export type ShopifyAnalyticsPayload = ShopifyPageViewPayload | ShopifyAddToCartPayload;
+export type ShopifyAnalyticsPayload =
+  | ShopifyPageViewPayload
+  | ShopifyAddToCartPayload;
 export type ShopifyAnalytics = ShopifyPageView | ShopifyAddToCart;
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 7018ca9c..4fc228ec 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,4 +1,4 @@
-import type {ShopifyMonorailPayload} from "./analytics-types.js";
+import type {ShopifyMonorailPayload} from './analytics-types.js';
 
 export function schemaWrapper(schemaId: string, payload: unknown) {
   return {
diff --git a/packages/react/src/analytics.tsx b/packages/react/src/analytics.tsx
index f3349645..8b30c5c2 100644
--- a/packages/react/src/analytics.tsx
+++ b/packages/react/src/analytics.tsx
@@ -1,29 +1,30 @@
-import {SHOPIFY_S, SHOPIFY_Y} from "./cart-constants";
+import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants';
 import type {
   ClientBrowserParameters,
   ShopifyAnalytics,
   ShopifyMonorailPayload,
-} from "./analytics-types";
-import {AnalyticsEventName} from "./analytics-constants";
-import {errorIfServer} from "./analytics-errors-utils.js";
-import {getShopifyCookies} from "./cookies-utils.js";
+} from './analytics-types';
+import {AnalyticsEventName} from './analytics-constants';
+import {errorIfServer} from './analytics-errors-utils.js';
+import {getShopifyCookies} from './cookies-utils.js';
 
 import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
 import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
 
-export function sendShopifyAnalytics({
-  eventName,
-  payload
-}: ShopifyAnalytics) {
+export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
   let events: ShopifyMonorailPayload[] = [];
 
-  switch(eventName) {
+  switch (eventName) {
     case AnalyticsEventName.PAGE_VIEW:
       events = events.concat(TrekkieStorefrontPageView.pageView(payload));
-      events = events.concat(CustomStorefrontCustomerTracking.pageView(payload));
+      events = events.concat(
+        CustomStorefrontCustomerTracking.pageView(payload)
+      );
       break;
     case AnalyticsEventName.ADD_TO_CART:
-      events = events.concat(CustomStorefrontCustomerTracking.addToCart(payload));
+      events = events.concat(
+        CustomStorefrontCustomerTracking.addToCart(payload)
+      );
       break;
   }
 
@@ -33,7 +34,7 @@ export function sendShopifyAnalytics({
 type MonorailResponse = {
   status: number;
   message: string;
-}
+};
 
 const ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';
 
@@ -53,19 +54,20 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
       },
       body: JSON.stringify(eventsToBeSent),
     })
-    .then(response => response.text())
-    .then(data => {
-      if (data) {
-        const jsonResponse = JSON.parse(data);
-        jsonResponse.result.forEach(((eventResponse: MonorailResponse) => {
-          if(eventResponse.status !== 200) {
-            console.error(ERROR_MESSAGE, '\n\n' , eventResponse.message);
-          }
-        }))
-      }
-    }).catch(err => {
-      console.error(ERROR_MESSAGE, err)
-    });
+      .then((response) => response.text())
+      .then((data) => {
+        if (data) {
+          const jsonResponse = JSON.parse(data);
+          jsonResponse.result.forEach((eventResponse: MonorailResponse) => {
+            if (eventResponse.status !== 200) {
+              console.error(ERROR_MESSAGE, '\n\n', eventResponse.message);
+            }
+          });
+        }
+      })
+      .catch((err) => {
+        console.error(ERROR_MESSAGE, err);
+      });
   } catch (error) {
     // Do nothing
   }
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index c980d633..032178f1 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -1,8 +1,5 @@
-import {parse} from "worktop/cookie";
-import {
-  SHOPIFY_Y,
-  SHOPIFY_S,
-} from "./cart-constants.js";
+import {parse} from 'worktop/cookie';
+import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
 
 const zeros = '00000000';
 const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
@@ -63,12 +60,12 @@ export function hexTime(): string {
 export type ShopifyCookies = {
   [SHOPIFY_Y]: string;
   [SHOPIFY_S]: string;
-}
+};
 
 export function getShopifyCookies(cookies: string): ShopifyCookies {
   const cookieData = parse(cookies);
   return {
     [SHOPIFY_Y]: cookieData[SHOPIFY_Y],
     [SHOPIFY_S]: cookieData[SHOPIFY_S],
-  }
+  };
 }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 7d4bae45..e28bc9e8 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -31,10 +31,7 @@ export type {
 export {createStorefrontClient} from './storefront-client.js';
 export {useMoney} from './useMoney.js';
 export {Video} from './Video.js';
-export {
-  AnalyticsEventName,
-  AnalyticsPageType,
-} from './analytics-constants'
+export {AnalyticsEventName, AnalyticsPageType} from './analytics-constants';
 export type {
   ClientBrowserParameters,
   ShopifyPageViewPayload,
@@ -44,9 +41,6 @@ export type {
   ShopifyAnalyticsPayload,
   ShopifyAnalytics,
   ShopifyAnalyticsProduct,
-} from './analytics-types.js'
-export {ShopifyCookies} from './ShopifyCookies.js'
-export {
-  sendShopifyAnalytics,
-  getClientBrowserParameters,
-} from './analytics.js';
+} from './analytics-types.js';
+export {ShopifyCookies} from './ShopifyCookies.js';
+export {sendShopifyAnalytics, getClientBrowserParameters} from './analytics.js';

From 9ae1d65ef7f8226ef94b5d14d3ae2c322484e1fe Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 10 Jan 2023 16:25:49 -0800
Subject: [PATCH 07/58] lint

---
 ...nalytics-schema-trekkie-storefront-page-view.ts |  2 +-
 packages/react/src/analytics.tsx                   | 14 +++++++++-----
 packages/react/src/cookies-utils.tsx               |  4 ++--
 packages/react/src/index.ts                        |  2 +-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index 14c5aabe..cb4c0d55 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -63,7 +63,7 @@ function formatPayload(
   };
 }
 
-function isMerchantRequest(url: string): Boolean {
+function isMerchantRequest(url: string): boolean {
   const hostname = new URL(url).hostname;
   if (hostname.indexOf(oxygenDomain) !== -1 || hostname === 'localhost') {
     return true;
diff --git a/packages/react/src/analytics.tsx b/packages/react/src/analytics.tsx
index 8b30c5c2..56d31dd2 100644
--- a/packages/react/src/analytics.tsx
+++ b/packages/react/src/analytics.tsx
@@ -1,10 +1,10 @@
-import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants';
+import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants.js';
 import type {
   ClientBrowserParameters,
   ShopifyAnalytics,
   ShopifyMonorailPayload,
-} from './analytics-types';
-import {AnalyticsEventName} from './analytics-constants';
+} from './analytics-types.js';
+import {AnalyticsEventName} from './analytics-constants.js';
 import {errorIfServer} from './analytics-errors-utils.js';
 import {getShopifyCookies} from './cookies-utils.js';
 
@@ -73,7 +73,9 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
   }
 }
 
-export function getClientBrowserParameters(): ClientBrowserParameters | {} {
+export function getClientBrowserParameters():
+  | ClientBrowserParameters
+  | Record<string, never> {
   if (errorIfServer('getClientBrowserParameters')) {
     return {};
   }
@@ -104,7 +106,9 @@ function getNavigationTypeExperimental() {
     if (navigationEntries && navigationEntries[0]) {
       //  https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
       const rawType = (
-        window.performance.getEntriesByType('navigation')[0] as any
+        window.performance.getEntriesByType(
+          'navigation'
+        )[0] as PerformanceNavigationTiming
       )['type'];
       const navType = rawType && rawType.toString();
 
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index 032178f1..0ace0373 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -15,7 +15,7 @@ export function buildUUID(): string {
     // Generate a strong UUID
     let i = 0;
     hash = tokenHash
-      .replace(/[x]/g, (c: string, ...args: any[]): string => {
+      .replace(/[x]/g, (c: string): string => {
         const r = randomValuesArray[i] % 16;
         const v = c === 'x' ? r : (r & 0x3) | 0x8;
         i++;
@@ -25,7 +25,7 @@ export function buildUUID(): string {
   } catch (err) {
     // crypto not available, generate weak UUID
     hash = tokenHash
-      .replace(/[x]/g, (c: string, ...args: any[]): string => {
+      .replace(/[x]/g, (c: string): string => {
         const r = (Math.random() * 16) | 0;
         const v = c === 'x' ? r : (r & 0x3) | 0x8;
         return v.toString(16);
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index e28bc9e8..94797793 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -31,7 +31,7 @@ export type {
 export {createStorefrontClient} from './storefront-client.js';
 export {useMoney} from './useMoney.js';
 export {Video} from './Video.js';
-export {AnalyticsEventName, AnalyticsPageType} from './analytics-constants';
+export {AnalyticsEventName, AnalyticsPageType} from './analytics-constants.js';
 export type {
   ClientBrowserParameters,
   ShopifyPageViewPayload,

From b2dd06958ff3b3a5fda86654b505f1f03024dff9 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 10:55:55 -0800
Subject: [PATCH 08/58] fix nextjs app lint

---
 apps/nextjs/pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 1c41d8b7..db300574 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -48,7 +48,7 @@ export default function App({Component, pageProps}: AppProps) {
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange);
     };
-  }, [analytics]);
+  }, [analytics, router.events]);
 
   return (
     <ShopifyProvider

From e6e9f3726ed92b21974bd5d3455dcfa8eaa9e771 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 11:32:19 -0800
Subject: [PATCH 09/58] fix nextjs app lint

---
 apps/nextjs/pages/_app.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index db300574..197f8b86 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -22,6 +22,8 @@ let isInit = false;
 export default function App({Component, pageProps}: AppProps) {
   const router = useRouter();
   const hasUserConsent = true;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const analytics = {
     hasUserConsent,
     ...analyticsShopData,

From e6a231cd61af76c071b3a7334be237b73dc8f8d8 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 15:31:16 -0800
Subject: [PATCH 10/58] test for schemas

---
 ...ustom-storefront-customer-tracking.test.ts | 270 ++++++++++++++++++
 ...ema-custom-storefront-customer-tracking.ts |  11 +-
 ...chema-trekkie-storefront-page-view.test.ts | 106 +++++++
 .../src/analytics-schema.test.helpers.ts      |  24 ++
 packages/react/src/analytics-types.ts         |   6 +-
 5 files changed, 408 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
 create mode 100644 packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
 create mode 100644 packages/react/src/analytics-schema.test.helpers.ts

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
new file mode 100644
index 00000000..ea40cd6c
--- /dev/null
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -0,0 +1,270 @@
+import {expectType} from 'ts-expect';
+import {ShopifyAppSource} from './analytics-constants.js';
+import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
+import {BASE_PAYLOAD, BASE_PRODUCT_PAYLOAD} from './analytics-schema.test.helpers.js';
+import type {ShopifyMonorailPayload, ShopifyPageViewPayload} from './analytics-types.js';
+
+describe(`analytics schema - custom storefront customer tracking`, () => {
+  describe('page view', () => {
+    it(`base payload with default values`, () => {
+      const pageViewPayload = BASE_PAYLOAD;
+      const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+      expectType<ShopifyMonorailPayload[]>(events);
+      expect(events.length).toBe(1);
+      expect(events[0]).toEqual(
+        getExpectedPayload(pageViewPayload, {
+          event_name: 'page_rendered',
+          canonical_url: pageViewPayload.url,
+        })
+      );
+    });
+
+    it(`base payload with non-default values`, () => {
+      const pageViewPayload = {
+        ...BASE_PAYLOAD,
+        hasUserConsent: false,
+        url: 'https://example.com/fr',
+        shopifyAppSource: ShopifyAppSource.hydrogen,
+        storefrontId: '1',
+        acceptedLanguage: 'fr',
+        customerId: '1',
+        pageType: 'index',
+        resourceId: 'gid://shopify/Product/1',
+        canonicalUrl: 'https://example.com',
+      };
+      const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+      expectType<ShopifyMonorailPayload[]>(events);
+      expect(events.length).toBe(1);
+      expect(events[0]).toEqual(
+        getExpectedPayload(pageViewPayload, {
+          source: 'hydrogen',
+          event_name: 'page_rendered',
+          hydrogenSubchannelId: '1',
+          is_persistent_cookie: false,
+          customer_id: '1',
+          canonical_url: pageViewPayload.canonicalUrl,
+        })
+      );
+    });
+
+    describe('collection', () => {
+      it(`with base payload`, () => {
+        const pageViewPayload = {
+          ...BASE_PAYLOAD,
+          pageType: 'collection',
+          collectionHandle: 'test',
+        };
+        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+        expectType<ShopifyMonorailPayload[]>(events);
+        expect(events.length).toBe(2);
+        expect(events[0]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'page_rendered',
+            canonical_url: pageViewPayload.url,
+          })
+        );
+        expect(events[1]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'collection_page_rendered',
+            collection_name: pageViewPayload.collectionHandle,
+            canonical_url: pageViewPayload.url,
+          })
+        );
+      });
+    });
+
+    describe('product', () => {
+      it(`with base product payload`, () => {
+        const productPayload = BASE_PRODUCT_PAYLOAD;
+        const pageViewPayload = {
+          ...BASE_PAYLOAD,
+          pageType: 'product',
+          products: [productPayload],
+          totalValue: 100,
+        };;
+        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+        expectType<ShopifyMonorailPayload[]>(events);
+        expect(events.length).toBe(2);
+        expect(events[0]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'page_rendered',
+            canonical_url: pageViewPayload.url,
+          })
+        )
+        expect(events[1]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'product_page_rendered',
+            total_value: pageViewPayload.totalValue,
+            products: expect.any(Array),
+            canonical_url: pageViewPayload.url,
+          })
+        );
+        const productEventPayload = events[1].payload as any;
+        if (productEventPayload.products) {
+          const product = JSON.parse(productEventPayload.products[0]);
+          expect(product).toEqual({
+            ...getForwardedProductPayload(productPayload),
+            variant: '',
+            quantity: 0,
+            product_id: 1
+          });
+        }
+      });
+      it(`with non-default product payload`, () => {
+        const productPayload = {
+          ...BASE_PRODUCT_PAYLOAD,
+          variantGid: 'gid://shopify/ProductVariant/2',
+          variantName: 'test',
+          category: 'test',
+          sku: '123',
+          quantity: 1,
+        };
+        const pageViewPayload = {
+          ...BASE_PAYLOAD,
+          pageType: 'product',
+          products: [productPayload],
+          totalValue: 100,
+        };;
+        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+        expectType<ShopifyMonorailPayload[]>(events);
+        expect(events.length).toBe(2);
+        expect(events[0]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'page_rendered',
+            canonical_url: pageViewPayload.url,
+          })
+        )
+        expect(events[1]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'product_page_rendered',
+            total_value: pageViewPayload.totalValue,
+            products: expect.any(Array),
+            canonical_url: pageViewPayload.url,
+          })
+        );
+        const productEventPayload = events[1].payload as any;
+        if (productEventPayload.products) {
+          const product = JSON.parse(productEventPayload.products[0]);
+          expect(product).toEqual({
+            ...getForwardedProductPayload(productPayload),
+            variant: productPayload.variantName,
+            quantity: 1,
+            product_id: 1,
+            category: productPayload.category,
+            sku: productPayload.sku,
+            variant_gid: productPayload.variantGid,
+            variant_id: 2,
+          });
+        }
+      });
+    });
+
+    describe('search', () => {
+      it(`with base payload`, () => {
+        const pageViewPayload = {
+          ...BASE_PAYLOAD,
+          pageType: 'search',
+          searchString: 'test',
+        };
+        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+        expectType<ShopifyMonorailPayload[]>(events);
+        expect(events.length).toBe(2);
+        expect(events[0]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'page_rendered',
+            canonical_url: pageViewPayload.url,
+          })
+        );
+        expect(events[1]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'search_submitted',
+            search_string: pageViewPayload.searchString,
+            canonical_url: pageViewPayload.url,
+          })
+        );
+      });
+    });
+  });
+
+  describe('add to cart', () => {
+    it(`with base product payload`, () => {
+      const productPayload = BASE_PRODUCT_PAYLOAD;
+      const addToCartPayload = {
+        ...BASE_PAYLOAD,
+        cartId: '123',
+        products: [productPayload],
+        totalValue: 100,
+      };;
+      const events = CustomStorefrontCustomerTracking.addToCart(addToCartPayload);
+
+      expectType<ShopifyMonorailPayload[]>(events);
+      expect(events.length).toBe(1);
+      expect(events[0]).toEqual(
+        getExpectedPayload(addToCartPayload, {
+          event_name: 'product_added_to_cart',
+          cart_token: addToCartPayload.cartId,
+          total_value: addToCartPayload.totalValue,
+          products: expect.any(Array),
+        })
+      );
+      const productEventPayload = events[0].payload as any;
+      if (productEventPayload.products) {
+        const product = JSON.parse(productEventPayload.products[0]);
+        expect(product).toEqual({
+          ...getForwardedProductPayload(productPayload),
+          variant: '',
+          quantity: 0,
+          product_id: 1
+        });
+      }
+    });
+  })
+});
+
+function getExpectedPayload(initPayload: any, extraPayload: any) {
+  return {
+    schema_id: 'custom_storefront_customer_tracking/1.0',
+    payload: {
+      ...getForwardedPayload(initPayload),
+      ...extraPayload,
+    },
+    metadata: {
+      event_created_at_ms: expect.any(Number),
+    }
+  }
+}
+
+function getForwardedPayload(initPayload: any) {
+  return {
+    source: 'headless',
+    hydrogenSubchannelId: '0',
+    is_persistent_cookie: true,
+    user_agent: initPayload.userAgent,
+    unique_token: initPayload.uniqueToken,
+    event_id: expect.any(String),
+    event_time: expect.any(Number),
+    event_source_url: initPayload.url,
+    referrer: initPayload.referrer,
+    shop_id: initPayload.shopId,
+    currency: initPayload.currency,
+    ccpa_enforced: false,
+    gdpr_enforced: false,
+    navigation_api: initPayload.navigationApi,
+    navigation_type: initPayload.navigationType,
+  }
+}
+
+function getForwardedProductPayload(initPayload: any) {
+  return {
+    product_gid: initPayload.productGid,
+    name: initPayload.name,
+    brand: initPayload.brand,
+    price: initPayload.price,
+  }
+}
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 56de9c63..5aecf37f 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -27,7 +27,7 @@ export function pageView(
   const pageViewPayload = payload as ShopifyPageViewPayload;
   const additionalPayload = {
     canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
-    customerId: pageViewPayload.customerId,
+    customer_id: pageViewPayload.customerId,
   };
   const pageType = pageViewPayload.pageType;
   const pageViewEvents = [];
@@ -69,7 +69,6 @@ export function pageView(
           {
             event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
             ...additionalPayload,
-            collection_name: pageViewPayload.collectionHandle,
             products: formatProductPayload(pageViewPayload.products),
             total_value: pageViewPayload.totalValue,
           },
@@ -149,14 +148,14 @@ function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
     ? products.map((p: ShopifyAnalyticsProduct) => {
         const product = addDataIf(
           {
-            variant_gid: p.variant_gid,
+            variant_gid: p.variantGid,
             category: p.category,
             sku: p.sku,
-            product_id: stripGId(p.product_gid),
-            variant_id: stripGId(p.variant_gid),
+            product_id: stripGId(p.productGid),
+            variant_id: stripGId(p.variantGid),
           },
           {
-            product_gid: p.product_gid,
+            product_gid: p.productGid,
             name: p.name,
             variant: p.variantName || '',
             brand: p.brand,
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
new file mode 100644
index 00000000..01899191
--- /dev/null
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -0,0 +1,106 @@
+import {expectType} from 'ts-expect';
+import {ShopifyAppSource} from './analytics-constants.js';
+import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
+import {BASE_PAYLOAD} from './analytics-schema.test.helpers.js';
+import type {ShopifyMonorailPayload} from './analytics-types.js';
+
+describe(`analytics schema - trekkie storefront page view`, () => {
+  it(`base payload with default values`, () => {
+    const pageViewPayload = BASE_PAYLOAD;
+    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+
+    expectType<ShopifyMonorailPayload[]>(events);
+    expect(events.length).toBe(1);
+    expect(events[0]).toEqual({
+      schema_id: 'trekkie_storefront_page_view/1.4',
+      payload: {
+        ...getForwardedPayload(pageViewPayload),
+        appClientId: '12875497473',
+        isMerchantRequest: true,
+        hydrogenSubchannelId: '0',
+        isPersistentCookie: true,
+        contentLanguage: 'en'
+      },
+      metadata: {
+        event_created_at_ms: expect.any(Number),
+      }
+    });
+  });
+
+  it(`base payload with non-default values`, () => {
+    const pageViewPayload = {
+      ...BASE_PAYLOAD,
+      hasUserConsent: false,
+      url: 'https://example.com',
+      shopifyAppSource: ShopifyAppSource.hydrogen,
+      storefrontId: '1',
+      acceptedLanguage: 'fr',
+      customerId: '1',
+      pageType: 'product',
+      resourceId: 'gid://shopify/Product/1',
+    };
+    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+
+    expectType<ShopifyMonorailPayload[]>(events);
+    expect(events.length).toBe(1);
+    expect(events[0]).toEqual({
+      schema_id: 'trekkie_storefront_page_view/1.4',
+      payload: {
+        ...getForwardedPayload(pageViewPayload),
+        appClientId: '6167201',
+        isMerchantRequest: false,
+        hydrogenSubchannelId: '1',
+        isPersistentCookie: false,
+        pageType: 'product',
+        contentLanguage: 'fr',
+        customerId: '1',
+        resourceId: 1,
+        resourceType: 'product',
+      },
+      metadata: {
+        event_created_at_ms: expect.any(Number),
+      }
+    });
+  });
+
+  it(`base payload with oxygen domain url`, () => {
+    const pageViewPayload = {
+      ...BASE_PAYLOAD,
+      url: 'my-shop.myshopify.dev',
+    };
+    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+
+    expectType<ShopifyMonorailPayload[]>(events);
+    expect(events.length).toBe(1);
+    expect(events[0]).toEqual({
+      schema_id: 'trekkie_storefront_page_view/1.4',
+      payload: {
+        ...getForwardedPayload(pageViewPayload),
+        appClientId: '12875497473',
+        isMerchantRequest: false,
+        hydrogenSubchannelId: '0',
+        isPersistentCookie: true,
+        contentLanguage: 'en'
+      },
+      metadata: {
+        event_created_at_ms: expect.any(Number),
+      }
+    });
+  });
+});
+
+export function getForwardedPayload(initPayload: any) {
+  return {
+    uniqToken: initPayload.uniqueToken,
+    visitToken: initPayload.visitToken,
+    microSessionId: expect.any(String),
+    microSessionCount: 1,
+    url: initPayload.url,
+    path: initPayload.path,
+    search: initPayload.search,
+    referrer: initPayload.referrer,
+    title: initPayload.title,
+    shopId: initPayload.shopId,
+    currency: initPayload.currency,
+  }
+}
diff --git a/packages/react/src/analytics-schema.test.helpers.ts b/packages/react/src/analytics-schema.test.helpers.ts
new file mode 100644
index 00000000..fcab9a37
--- /dev/null
+++ b/packages/react/src/analytics-schema.test.helpers.ts
@@ -0,0 +1,24 @@
+import {faker} from '@faker-js/faker';
+
+export const BASE_PAYLOAD = {
+  hasUserConsent: true,
+  shopId: 1,
+  currency: 'USD',
+  uniqueToken: faker.datatype.string(),
+  visitToken: faker.datatype.string(),
+  url: 'https://localhost:3000',
+  path: '/',
+  search: '',
+  referrer: '',
+  title: faker.datatype.string(),
+  userAgent: faker.datatype.string(),
+  navigationType: faker.datatype.string(),
+  navigationApi: faker.datatype.string(),
+}
+
+export const BASE_PRODUCT_PAYLOAD = {
+  productGid: 'gid://shopify/Product/1',
+  name: faker.datatype.string(),
+  brand: faker.datatype.string(),
+  price: faker.datatype.number().toString(),
+}
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index 56427dae..f9572f1a 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -15,8 +15,8 @@ export type ClientBrowserParameters = {
 };
 
 export type ShopifyAnalyticsProduct = {
-  product_gid: Product['id'];
-  variant_gid?: ProductVariant['id'];
+  productGid: Product['id'];
+  variantGid?: ProductVariant['id'];
   name: Product['title'];
   variantName?: ProductVariant['title'];
   brand: Product['vendor'];
@@ -36,7 +36,7 @@ export type ShopifyCommonPayload = ClientBrowserParameters & {
   storefrontId?: string;
   acceptedLanguage?: string;
   customerId?: string;
-  totalValue?: string;
+  totalValue?: number;
   products?: ShopifyAnalyticsProduct[];
 };
 

From 3943144bdb671a424127709aa1daceb010534d8e Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:01:17 -0800
Subject: [PATCH 11/58] lint test

---
 ...ustom-storefront-customer-tracking.test.ts | 131 ++++++++++--------
 ...chema-trekkie-storefront-page-view.test.ts |  14 +-
 .../src/analytics-schema.test.helpers.ts      |   4 +-
 packages/react/src/analytics-types.ts         |   5 +-
 4 files changed, 87 insertions(+), 67 deletions(-)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index ea40cd6c..b856b223 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -1,8 +1,14 @@
 import {expectType} from 'ts-expect';
 import {ShopifyAppSource} from './analytics-constants.js';
 import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
-import {BASE_PAYLOAD, BASE_PRODUCT_PAYLOAD} from './analytics-schema.test.helpers.js';
-import type {ShopifyMonorailPayload, ShopifyPageViewPayload} from './analytics-types.js';
+import {
+  BASE_PAYLOAD,
+  BASE_PRODUCT_PAYLOAD,
+} from './analytics-schema.test.helpers.js';
+import type {
+  ShopifyAnalyticsPayload,
+  ShopifyMonorailPayload,
+} from './analytics-types.js';
 
 describe(`analytics schema - custom storefront customer tracking`, () => {
   describe('page view', () => {
@@ -56,7 +62,8 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'collection',
           collectionHandle: 'test',
         };
-        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events =
+          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -84,8 +91,9 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'product',
           products: [productPayload],
           totalValue: 100,
-        };;
-        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        };
+        const events =
+          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -94,25 +102,26 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
             event_name: 'page_rendered',
             canonical_url: pageViewPayload.url,
           })
-        )
+        );
         expect(events[1]).toEqual(
           getExpectedPayload(pageViewPayload, {
             event_name: 'product_page_rendered',
             total_value: pageViewPayload.totalValue,
-            products: expect.any(Array),
+            products: expect.anything(),
             canonical_url: pageViewPayload.url,
           })
         );
-        const productEventPayload = events[1].payload as any;
-        if (productEventPayload.products) {
-          const product = JSON.parse(productEventPayload.products[0]);
-          expect(product).toEqual({
-            ...getForwardedProductPayload(productPayload),
-            variant: '',
-            quantity: 0,
-            product_id: 1
-          });
-        }
+        const productEventPayload = events[1].payload as ShopifyMonorailPayload;
+        const product = JSON.parse(
+          (productEventPayload.products && productEventPayload.products[0]) ||
+            '{}'
+        );
+        expect(product).toEqual({
+          ...getForwardedProductPayload(productPayload),
+          variant: '',
+          quantity: 0,
+          product_id: 1,
+        });
       });
       it(`with non-default product payload`, () => {
         const productPayload = {
@@ -128,8 +137,9 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'product',
           products: [productPayload],
           totalValue: 100,
-        };;
-        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        };
+        const events =
+          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -138,29 +148,30 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
             event_name: 'page_rendered',
             canonical_url: pageViewPayload.url,
           })
-        )
+        );
         expect(events[1]).toEqual(
           getExpectedPayload(pageViewPayload, {
             event_name: 'product_page_rendered',
             total_value: pageViewPayload.totalValue,
-            products: expect.any(Array),
+            products: expect.anything(),
             canonical_url: pageViewPayload.url,
           })
         );
-        const productEventPayload = events[1].payload as any;
-        if (productEventPayload.products) {
-          const product = JSON.parse(productEventPayload.products[0]);
-          expect(product).toEqual({
-            ...getForwardedProductPayload(productPayload),
-            variant: productPayload.variantName,
-            quantity: 1,
-            product_id: 1,
-            category: productPayload.category,
-            sku: productPayload.sku,
-            variant_gid: productPayload.variantGid,
-            variant_id: 2,
-          });
-        }
+        const productEventPayload = events[1].payload as ShopifyMonorailPayload;
+        const product = JSON.parse(
+          (productEventPayload.products && productEventPayload.products[0]) ||
+            '{}'
+        );
+        expect(product).toEqual({
+          ...getForwardedProductPayload(productPayload),
+          variant: productPayload.variantName,
+          quantity: 1,
+          product_id: 1,
+          category: productPayload.category,
+          sku: productPayload.sku,
+          variant_gid: productPayload.variantGid,
+          variant_id: 2,
+        });
       });
     });
 
@@ -171,7 +182,8 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'search',
           searchString: 'test',
         };
-        const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events =
+          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -200,8 +212,9 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         cartId: '123',
         products: [productPayload],
         totalValue: 100,
-      };;
-      const events = CustomStorefrontCustomerTracking.addToCart(addToCartPayload);
+      };
+      const events =
+        CustomStorefrontCustomerTracking.addToCart(addToCartPayload);
 
       expectType<ShopifyMonorailPayload[]>(events);
       expect(events.length).toBe(1);
@@ -210,24 +223,28 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           event_name: 'product_added_to_cart',
           cart_token: addToCartPayload.cartId,
           total_value: addToCartPayload.totalValue,
-          products: expect.any(Array),
+          products: expect.anything(),
         })
       );
-      const productEventPayload = events[0].payload as any;
-      if (productEventPayload.products) {
-        const product = JSON.parse(productEventPayload.products[0]);
-        expect(product).toEqual({
-          ...getForwardedProductPayload(productPayload),
-          variant: '',
-          quantity: 0,
-          product_id: 1
-        });
-      }
+      const productEventPayload = events[0].payload as ShopifyMonorailPayload;
+      const product = JSON.parse(
+        (productEventPayload.products && productEventPayload.products[0]) ||
+          '{}'
+      );
+      expect(product).toEqual({
+        ...getForwardedProductPayload(productPayload),
+        variant: '',
+        quantity: 0,
+        product_id: 1,
+      });
     });
-  })
+  });
 });
 
-function getExpectedPayload(initPayload: any, extraPayload: any) {
+function getExpectedPayload(
+  initPayload: ShopifyAnalyticsPayload,
+  extraPayload: ShopifyMonorailPayload
+) {
   return {
     schema_id: 'custom_storefront_customer_tracking/1.0',
     payload: {
@@ -236,11 +253,11 @@ function getExpectedPayload(initPayload: any, extraPayload: any) {
     },
     metadata: {
       event_created_at_ms: expect.any(Number),
-    }
-  }
+    },
+  };
 }
 
-function getForwardedPayload(initPayload: any) {
+function getForwardedPayload(initPayload: ShopifyAnalyticsPayload) {
   return {
     source: 'headless',
     hydrogenSubchannelId: '0',
@@ -257,14 +274,14 @@ function getForwardedPayload(initPayload: any) {
     gdpr_enforced: false,
     navigation_api: initPayload.navigationApi,
     navigation_type: initPayload.navigationType,
-  }
+  };
 }
 
-function getForwardedProductPayload(initPayload: any) {
+function getForwardedProductPayload(initPayload: ShopifyMonorailPayload) {
   return {
     product_gid: initPayload.productGid,
     name: initPayload.name,
     brand: initPayload.brand,
     price: initPayload.price,
-  }
+  };
 }
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
index 01899191..9590bc88 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -19,11 +19,11 @@ describe(`analytics schema - trekkie storefront page view`, () => {
         isMerchantRequest: true,
         hydrogenSubchannelId: '0',
         isPersistentCookie: true,
-        contentLanguage: 'en'
+        contentLanguage: 'en',
       },
       metadata: {
         event_created_at_ms: expect.any(Number),
-      }
+      },
     });
   });
 
@@ -59,7 +59,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       },
       metadata: {
         event_created_at_ms: expect.any(Number),
-      }
+      },
     });
   });
 
@@ -80,16 +80,16 @@ describe(`analytics schema - trekkie storefront page view`, () => {
         isMerchantRequest: false,
         hydrogenSubchannelId: '0',
         isPersistentCookie: true,
-        contentLanguage: 'en'
+        contentLanguage: 'en',
       },
       metadata: {
         event_created_at_ms: expect.any(Number),
-      }
+      },
     });
   });
 });
 
-export function getForwardedPayload(initPayload: any) {
+export function getForwardedPayload(initPayload: ShopifyMonorailPayload) {
   return {
     uniqToken: initPayload.uniqueToken,
     visitToken: initPayload.visitToken,
@@ -102,5 +102,5 @@ export function getForwardedPayload(initPayload: any) {
     title: initPayload.title,
     shopId: initPayload.shopId,
     currency: initPayload.currency,
-  }
+  };
 }
diff --git a/packages/react/src/analytics-schema.test.helpers.ts b/packages/react/src/analytics-schema.test.helpers.ts
index fcab9a37..bcd352bf 100644
--- a/packages/react/src/analytics-schema.test.helpers.ts
+++ b/packages/react/src/analytics-schema.test.helpers.ts
@@ -14,11 +14,11 @@ export const BASE_PAYLOAD = {
   userAgent: faker.datatype.string(),
   navigationType: faker.datatype.string(),
   navigationApi: faker.datatype.string(),
-}
+};
 
 export const BASE_PRODUCT_PAYLOAD = {
   productGid: 'gid://shopify/Product/1',
   name: faker.datatype.string(),
   brand: faker.datatype.string(),
   price: faker.datatype.number().toString(),
-}
+};
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index f9572f1a..e2a50b5a 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -63,7 +63,10 @@ export type ShopifyAddToCart = {
   payload: ShopifyAddToCartPayload;
 };
 
-export type ShopifyMonorailPayload = Record<string, unknown>;
+export type ShopifyMonorailPayload = {
+  products?: string[];
+  [key: string]: unknown;
+};
 export type ShopifyAnalyticsPayload =
   | ShopifyPageViewPayload
   | ShopifyAddToCartPayload;

From f7974809058942d87d9dbe407de6087d8d474956 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:07:51 -0800
Subject: [PATCH 12/58] fix nextjs app

---
 apps/nextjs/pages/product.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/pages/product.tsx b/apps/nextjs/pages/product.tsx
index 59a1b58f..36b39bb9 100644
--- a/apps/nextjs/pages/product.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -38,8 +38,8 @@ export const getServerSideProps: GetServerSideProps = async () => {
     const variant = product.variants.nodes[0];
 
     const productAnalytics: ShopifyAnalyticsProduct = {
-      product_gid: product.id,
-      variant_gid: variant.id,
+      productGid: product.id,
+      variantGid: variant.id,
       name: product.title,
       variantName: variant.title,
       brand: product.vendor,

From 9e74df6a2da42bdfa57771e3b1513167d90e2a25 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <jp@calltheguys.co>
Date: Wed, 11 Jan 2023 16:11:15 -0800
Subject: [PATCH 13/58] add analytic-utils tests and refactor (#117)

* add analytic-utils tests and refactor
---
 packages/react/src/analytics-errors-utils.ts  |   9 --
 ...ema-custom-storefront-customer-tracking.ts |  21 ++--
 ...ics-schema-trekkie-storefront-page-view.ts |  26 +++--
 packages/react/src/analytics-utils.test.ts    | 108 ++++++++++++++++++
 packages/react/src/analytics-utils.ts         |  72 +++++++++---
 packages/react/src/analytics.tsx              |   3 +-
 6 files changed, 194 insertions(+), 45 deletions(-)
 delete mode 100644 packages/react/src/analytics-errors-utils.ts
 create mode 100644 packages/react/src/analytics-utils.test.ts

diff --git a/packages/react/src/analytics-errors-utils.ts b/packages/react/src/analytics-errors-utils.ts
deleted file mode 100644
index 7ea30242..00000000
--- a/packages/react/src/analytics-errors-utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function errorIfServer(fnName: string): boolean {
-  if (!window) {
-    console.error(
-      `${fnName} should only be used within the useEffect callback or event handlers`
-    );
-    return true;
-  }
-  return false;
-}
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 5aecf37f..84f77317 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -6,12 +6,7 @@ import {
   ShopifyAnalyticsProduct,
 } from './analytics-types.js';
 import {AnalyticsPageType, ShopifyAppSource} from './analytics-constants.js';
-import {
-  addDataIf,
-  schemaWrapper,
-  stripGId,
-  stripId,
-} from './analytics-utils.js';
+import {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';
 import {buildUUID} from './cookies-utils.js';
 
 const SCHEMA_ID = 'custom_storefront_customer_tracking/1.0';
@@ -101,6 +96,8 @@ export function addToCart(
   payload: ShopifyAnalyticsPayload
 ): ShopifyMonorailPayload[] {
   const addToCartPayload = payload as ShopifyAddToCartPayload;
+  const cartToken = parseGid(addToCartPayload.cartId);
+  const cart_token = cartToken?.id ? `${cartToken.id}` : null;
   return [
     schemaWrapper(
       SCHEMA_ID,
@@ -108,7 +105,7 @@ export function addToCart(
         {
           event_name: PRODUCT_ADDED_TO_CART_EVENT_NAME,
           customerId: addToCartPayload.customerId,
-          cart_token: stripId(addToCartPayload.cartId),
+          cart_token,
           total_value: addToCartPayload.totalValue,
           products: formatProductPayload(addToCartPayload.products),
         },
@@ -121,6 +118,10 @@ export function addToCart(
 function formatPayload(
   payload: ShopifyAnalyticsPayload
 ): ShopifyMonorailPayload {
+  const shop_id =
+    typeof payload.shopId === 'string'
+      ? parseGid(payload.shopId).id
+      : payload.shopId;
   return {
     source: payload.shopifyAppSource || ShopifyAppSource.headless,
     hydrogenSubchannelId: payload.storefrontId || '0',
@@ -138,7 +139,7 @@ function formatPayload(
     navigation_type: payload.navigationType,
     navigation_api: payload.navigationApi,
 
-    shop_id: stripGId(payload.shopId),
+    shop_id,
     currency: payload.currency,
   };
 }
@@ -151,8 +152,8 @@ function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
             variant_gid: p.variantGid,
             category: p.category,
             sku: p.sku,
-            product_id: stripGId(p.productGid),
-            variant_id: stripGId(p.variantGid),
+            product_id: parseGid(p.product_gid).id,
+            variant_id: parseGid(p.variant_gid).id,
           },
           {
             product_gid: p.productGid,
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index cb4c0d55..4787776c 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -4,21 +4,18 @@ import {
   ShopifyMonorailPayload,
 } from './analytics-types.js';
 import {ShopifyAppId} from './analytics-constants.js';
-import {
-  addDataIf,
-  schemaWrapper,
-  stripGId,
-  getResourceType,
-} from './analytics-utils.js';
+import {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';
 import {buildUUID} from './cookies-utils.js';
 
 const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
-const oxygenDomain = 'myshopify.dev';
+const OXYGEN_DOMAIN = 'myshopify.dev';
 
 export function pageView(
   payload: ShopifyAnalyticsPayload
 ): ShopifyMonorailPayload[] {
   const pageViewPayload = payload as ShopifyPageViewPayload;
+  const {id, resource} = parseGid(pageViewPayload.resourceId);
+  const resourceType = resource ? resource.toLowerCase() : undefined;
   return [
     schemaWrapper(
       SCHEMA_ID,
@@ -26,8 +23,8 @@ export function pageView(
         {
           pageType: pageViewPayload.pageType,
           customerId: pageViewPayload.customerId,
-          resourceType: getResourceType(pageViewPayload.resourceId),
-          resourceId: stripGId(pageViewPayload.resourceId),
+          resourceType,
+          resourceId: id,
         },
         formatPayload(pageViewPayload)
       )
@@ -38,6 +35,10 @@ export function pageView(
 function formatPayload(
   payload: ShopifyAnalyticsPayload
 ): ShopifyMonorailPayload {
+  const shopId =
+    typeof payload.shopId === 'string'
+      ? parseGid(payload.shopId).id
+      : payload.shopId;
   return {
     appClientId: payload.shopifyAppSource
       ? ShopifyAppId[payload.shopifyAppSource]
@@ -57,15 +58,18 @@ function formatPayload(
     referrer: payload.referrer,
     title: payload.title,
 
-    shopId: stripGId(payload.shopId),
+    shopId,
     currency: payload.currency,
     contentLanguage: payload.acceptedLanguage || 'en',
   };
 }
 
 function isMerchantRequest(url: string): boolean {
+  if (typeof url !== 'string') {
+    return false;
+  }
   const hostname = new URL(url).hostname;
-  if (hostname.indexOf(oxygenDomain) !== -1 || hostname === 'localhost') {
+  if (hostname.indexOf(OXYGEN_DOMAIN) !== -1 || hostname === 'localhost') {
     return true;
   }
   return false;
diff --git a/packages/react/src/analytics-utils.test.ts b/packages/react/src/analytics-utils.test.ts
new file mode 100644
index 00000000..c05f2d2e
--- /dev/null
+++ b/packages/react/src/analytics-utils.test.ts
@@ -0,0 +1,108 @@
+import {parseGid, addDataIf, schemaWrapper} from './analytics-utils.js';
+
+describe('analytic-utils', () => {
+  describe('parseGid', () => {
+    it('returns the id and resource type from a gid', () => {
+      const {id, resource} = parseGid('gid://shopify/Order/123');
+      expect(id).toBe(123);
+      expect(resource).toBe('Order');
+    });
+
+    it('returns null if the gid is not a string', () => {
+      //@ts-expect-error - testing invalid input
+      const {id, resource} = parseGid(123);
+      expect(id).toBe(null);
+      expect(resource).toBe(null);
+    });
+
+    it('returns null if the gid is not a valid gid', () => {
+      const {id, resource} = parseGid('gid://shopify/Order');
+      expect(id).toBe(null);
+      expect(resource).toBe(null);
+    });
+
+    it('returns the id and resource type from a gid with a query string', () => {
+      const {id, resource} = parseGid('gid://shopify/Order/123?namespace=123');
+      expect(id).toBe(123);
+      expect(resource).toBe('Order');
+    });
+
+    it('returns the id and resource type from a gid with a query string and a fragment', () => {
+      const {id, resource} = parseGid(
+        'gid://shopify/Order/123?namespace=123#fragment'
+      );
+      expect(id).toBe(123);
+      expect(resource).toBe('Order');
+    });
+
+    it('returns null if the resource is missing', () => {
+      const {id, resource} = parseGid('gid://shopify//123');
+      expect(id).toBe(null);
+      expect(resource).toBe(null);
+    });
+  });
+
+  describe('addDataIf', () => {
+    it('adds the key value pair when the value is truthy', () => {
+      const data = {foo: 'bar'};
+      const formattedData = {};
+
+      expect(addDataIf(data, formattedData)).toEqual({foo: 'bar'});
+    });
+
+    it('does not add the key value pair when the value is falsy', () => {
+      const data = {foo: null, bazz: ''};
+      const formattedData = {};
+
+      expect(addDataIf(data, formattedData)).toEqual({});
+    });
+
+    it('does not add the key value pair when the value is an empty string', () => {
+      const data = {foo: ''};
+      const formattedData = {};
+
+      expect(addDataIf(data, formattedData)).toEqual({});
+    });
+
+    it('returns and empty object if the key value pairs are not an object', () => {
+      const data = 'foo';
+      const formattedData = {};
+
+      //@ts-expect-error passing-and-invalid-type-for-testing
+      expect(addDataIf(data, formattedData)).toEqual({});
+    });
+  });
+
+  describe('schemaWrapper', () => {
+    it('returns a Shopify Monorail payload from a Shopify Analytics payload and a schema ID', () => {
+      const payload = {foo: 'bar'};
+      const schemaId = '123';
+
+      expect(schemaWrapper(schemaId, payload)).toEqual({
+        schema_id: '123',
+        payload: {foo: 'bar'},
+        metadata: {event_created_at_ms: expect.any(Number)},
+      });
+    });
+
+    it('throws an error if the schema ID is not a string', () => {
+      const payload = {foo: 'bar'};
+      const schemaId = 123;
+
+      //@ts-expect-error passing-and-invalid-type-for-testing
+      expect(() => schemaWrapper(schemaId, payload)).toThrow(
+        '`schemaId` must be a string'
+      );
+    });
+
+    it('throws an error if the payload is not an object', () => {
+      const payload = 'foo';
+      const schemaId = '123';
+
+      //@ts-expect-error passing-and-invalid-type-for-testing
+      expect(() => schemaWrapper(schemaId, payload)).toThrow(
+        '`payload` must be an object'
+      );
+    });
+  });
+});
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 4fc228ec..7abb3899 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,6 +1,18 @@
 import type {ShopifyMonorailPayload} from './analytics-types.js';
 
-export function schemaWrapper(schemaId: string, payload: unknown) {
+/**
+ * Builds a Shopify Monorail payload from a Shopify Analytics payload and a schema ID.
+ * @param payload - The payload to format
+ * @param schemaId - The schema ID to use
+ * @returns The formatted payload
+ **/
+export function schemaWrapper(schemaId: string, payload: object) {
+  if (typeof schemaId !== 'string') {
+    throw new Error('`schemaId` must be a string');
+  }
+  if (typeof payload !== 'object' || payload === null) {
+    throw new Error('`payload` must be an object');
+  }
   return {
     schema_id: schemaId,
     payload,
@@ -10,19 +22,45 @@ export function schemaWrapper(schemaId: string, payload: unknown) {
   };
 }
 
-export function stripGId(text: number | string | undefined): number {
-  if (typeof text === 'number') return text;
-  return parseInt(stripId(text || ''));
-}
-
-export function stripId(text = ''): string {
-  return text.substring(text.lastIndexOf('/') + 1);
+/**
+ * Parses global id (gid) and returns the resource type and id.
+ * @see https://shopify.dev/api/usage/gids
+ * @param gid - A shopify GID (string)
+ * @returns \{ id: number, resource: string \}
+ *
+ * @example
+ * ```ts
+ * const {id, resource} = parseGid('gid://shopify/Order/123')
+ * // => id = 123, resource = 'Order'
+ * ```
+ **/
+export function parseGid(gid: string | undefined): {
+  id: number | null;
+  resource: string | null;
+} {
+  if (typeof gid !== 'string') return {id: null, resource: null};
+  const matches = gid.match(/^gid:\/\/.hopify\/(\w+)\/(\d+)/);
+  if (!matches || matches.length === 1) {
+    return {id: null, resource: null};
+  }
+  const id = matches[2] ? parseInt(matches[2], 10) : null;
+  const resource = matches[1] ? matches[1] : null;
+  return {id, resource};
 }
 
+/**
+ * Filters properties from an object and returns a new object with only the properties that have a truthy value.
+ * @param keyValuePairs - An object of key-value pairs
+ * @param formattedData - An object which will hold the truthy values
+ * @returns The formatted object
+ **/
 export function addDataIf(
   keyValuePairs: ShopifyMonorailPayload,
   formattedData: ShopifyMonorailPayload
 ): ShopifyMonorailPayload {
+  if (typeof keyValuePairs !== 'object') {
+    return {};
+  }
   Object.entries(keyValuePairs).forEach(([key, value]) => {
     if (value) {
       formattedData[key] = value;
@@ -31,9 +69,17 @@ export function addDataIf(
   return formattedData;
 }
 
-export function getResourceType(text = ''): string {
-  return text
-    .substring(0, text.lastIndexOf('/'))
-    .replace(/.*shopify\//, '')
-    .toLowerCase();
+/**
+ * Utility that errors if a function is called on the server.
+ * @param fnName - The name of the function
+ * @returns A boolean
+ **/
+export function errorIfServer(fnName: string): boolean {
+  if (!window) {
+    console.error(
+      `${fnName} should only be used within the useEffect callback or event handlers`
+    );
+    return true;
+  }
+  return false;
 }
diff --git a/packages/react/src/analytics.tsx b/packages/react/src/analytics.tsx
index 56d31dd2..7be34bf5 100644
--- a/packages/react/src/analytics.tsx
+++ b/packages/react/src/analytics.tsx
@@ -5,7 +5,7 @@ import type {
   ShopifyMonorailPayload,
 } from './analytics-types.js';
 import {AnalyticsEventName} from './analytics-constants.js';
-import {errorIfServer} from './analytics-errors-utils.js';
+import {errorIfServer} from './analytics-utils.js';
 import {getShopifyCookies} from './cookies-utils.js';
 
 import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
@@ -128,7 +128,6 @@ function getNavigationTypeLegacy() {
       performance?.navigation?.type !== undefined
     ) {
       //  https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
-
       const rawType = performance.navigation.type;
       switch (rawType) {
         case PerformanceNavigation.TYPE_NAVIGATE:

From e5ce61334f6534c4ae593531db2d7dc36fa3f58e Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:15:28 -0800
Subject: [PATCH 14/58] fix name

---
 .../analytics-schema-custom-storefront-customer-tracking.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 84f77317..3d5166e0 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -152,8 +152,8 @@ function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
             variant_gid: p.variantGid,
             category: p.category,
             sku: p.sku,
-            product_id: parseGid(p.product_gid).id,
-            variant_id: parseGid(p.variant_gid).id,
+            product_id: parseGid(p.productGid).id,
+            variant_id: parseGid(p.variantGid).id,
           },
           {
             product_gid: p.productGid,

From 97d9545773671c1af491f26b6c0053ea52a54607 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:37:36 -0800
Subject: [PATCH 15/58] fix test

---
 ...alytics-schema-custom-storefront-customer-tracking.test.ts | 4 ++--
 .../src/analytics-schema-trekkie-storefront-page-view.test.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index b856b223..00bc0b59 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -209,7 +209,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
       const productPayload = BASE_PRODUCT_PAYLOAD;
       const addToCartPayload = {
         ...BASE_PAYLOAD,
-        cartId: '123',
+        cartId: 'gid://shopify/Cart/abc123',
         products: [productPayload],
         totalValue: 100,
       };
@@ -221,7 +221,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
       expect(events[0]).toEqual(
         getExpectedPayload(addToCartPayload, {
           event_name: 'product_added_to_cart',
-          cart_token: addToCartPayload.cartId,
+          cart_token: 'abc123',
           total_value: addToCartPayload.totalValue,
           products: expect.anything(),
         })
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
index 9590bc88..2fc08d59 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -66,7 +66,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
   it(`base payload with oxygen domain url`, () => {
     const pageViewPayload = {
       ...BASE_PAYLOAD,
-      url: 'my-shop.myshopify.dev',
+      url: 'https://my-shop.myshopify.dev',
     };
     const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
 
@@ -77,7 +77,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       payload: {
         ...getForwardedPayload(pageViewPayload),
         appClientId: '12875497473',
-        isMerchantRequest: false,
+        isMerchantRequest: true,
         hydrogenSubchannelId: '0',
         isPersistentCookie: true,
         contentLanguage: 'en',

From fab4b40e933b62ffeff618f61d6f4156198ae566 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:55:18 -0800
Subject: [PATCH 16/58] add test for coverage

---
 ...ustom-storefront-customer-tracking.test.ts | 30 +++++++++++++++++++
 ...chema-trekkie-storefront-page-view.test.ts |  2 ++
 2 files changed, 32 insertions(+)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index 00bc0b59..b65ae846 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -29,6 +29,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
     it(`base payload with non-default values`, () => {
       const pageViewPayload = {
         ...BASE_PAYLOAD,
+        shopId: 'gid://shopify/Shop/1',
         hasUserConsent: false,
         url: 'https://example.com/fr',
         shopifyAppSource: ShopifyAppSource.hydrogen,
@@ -46,6 +47,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
       expect(events[0]).toEqual(
         getExpectedPayload(pageViewPayload, {
           source: 'hydrogen',
+          shop_id: 1,
           event_name: 'page_rendered',
           hydrogenSubchannelId: '1',
           is_persistent_cookie: false,
@@ -84,6 +86,34 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
     });
 
     describe('product', () => {
+      it(`with no product payload`, () => {
+        const pageViewPayload = {
+          ...BASE_PAYLOAD,
+          pageType: 'product',
+          products: [],
+          totalValue: 100,
+        };
+        const events =
+          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+
+        expectType<ShopifyMonorailPayload[]>(events);
+        expect(events.length).toBe(2);
+        expect(events[0]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'page_rendered',
+            canonical_url: pageViewPayload.url,
+          })
+        );
+        expect(events[1]).toEqual(
+          getExpectedPayload(pageViewPayload, {
+            event_name: 'product_page_rendered',
+            total_value: pageViewPayload.totalValue,
+            products: [],
+            canonical_url: pageViewPayload.url,
+          })
+        );
+      });
+
       it(`with base product payload`, () => {
         const productPayload = BASE_PRODUCT_PAYLOAD;
         const pageViewPayload = {
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
index 2fc08d59..05bc0516 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -31,6 +31,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
     const pageViewPayload = {
       ...BASE_PAYLOAD,
       hasUserConsent: false,
+      shopId: 'gid://shopify/Shop/1',
       url: 'https://example.com',
       shopifyAppSource: ShopifyAppSource.hydrogen,
       storefrontId: '1',
@@ -47,6 +48,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       schema_id: 'trekkie_storefront_page_view/1.4',
       payload: {
         ...getForwardedPayload(pageViewPayload),
+        shopId: 1,
         appClientId: '6167201',
         isMerchantRequest: false,
         hydrogenSubchannelId: '1',

From ed2cf8e254999adfb24d88325cfd09e3963a2104 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Wed, 11 Jan 2023 16:59:49 -0800
Subject: [PATCH 17/58] fix no product payload test

---
 .../analytics-schema-custom-storefront-customer-tracking.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index b65ae846..ef931123 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -90,7 +90,6 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         const pageViewPayload = {
           ...BASE_PAYLOAD,
           pageType: 'product',
-          products: [],
           totalValue: 100,
         };
         const events =

From c806c5ba4548718b6a4ecaec572750bcb16e90a4 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <jp@calltheguys.co>
Date: Thu, 12 Jan 2023 11:10:51 -0800
Subject: [PATCH 18/58] @juanpprieto/fix-failing-tests (#120)

* add support for parsing complex gids and fix failing test

* shorten cond checks

* remove incorrect complex id parsing

* fix typo
---
 packages/react/src/analytics-utils.ts | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 7abb3899..f9b48cff 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -26,25 +26,40 @@ export function schemaWrapper(schemaId: string, payload: object) {
  * Parses global id (gid) and returns the resource type and id.
  * @see https://shopify.dev/api/usage/gids
  * @param gid - A shopify GID (string)
- * @returns \{ id: number, resource: string \}
+ * @returns \{ id: string | number | null, resource: string| null \}
  *
  * @example
  * ```ts
  * const {id, resource} = parseGid('gid://shopify/Order/123')
  * // => id = 123, resource = 'Order'
+ *
+ *  * const {id, resource} = parseGid('gid://shopify/Cart/abc123')
+ * // => id = "abc123", resource = 'Cart'
  * ```
  **/
 export function parseGid(gid: string | undefined): {
-  id: number | null;
+  id: string | number | null;
   resource: string | null;
 } {
-  if (typeof gid !== 'string') return {id: null, resource: null};
-  const matches = gid.match(/^gid:\/\/.hopify\/(\w+)\/(\d+)/);
+  const defaultReturn = {id: null, resource: null};
+
+  if (typeof gid !== 'string') {
+    return defaultReturn;
+  }
+
+  // TODO: add support for parsing query parameters on complex gids
+  const matches = gid.match(/^gid:\/\/.hopify\/(\w+)\/([a-z0-9]+)/);
+
   if (!matches || matches.length === 1) {
-    return {id: null, resource: null};
+    return defaultReturn;
+  }
+  const id = matches[2] ?? null;
+  const resource = matches[1] ?? null;
+
+  // if id is of only numbers, return as an integer
+  if (id && /^\d+$/.test(id)) {
+    return {id: parseInt(id, 10), resource};
   }
-  const id = matches[2] ? parseInt(matches[2], 10) : null;
-  const resource = matches[1] ? matches[1] : null;
   return {id, resource};
 }
 

From e583db386f982beb7cff5092fcdba7e01e945ea4 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Thu, 12 Jan 2023 16:14:19 -0800
Subject: [PATCH 19/58] sendShopifyAnalytics tests

---
 packages/react/src/analytics.test.ts          | 129 ++++++++++++++++++
 .../react/src/{analytics.tsx => analytics.ts} |  32 ++---
 2 files changed, 145 insertions(+), 16 deletions(-)
 create mode 100644 packages/react/src/analytics.test.ts
 rename packages/react/src/{analytics.tsx => analytics.ts} (87%)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
new file mode 100644
index 00000000..39e502be
--- /dev/null
+++ b/packages/react/src/analytics.test.ts
@@ -0,0 +1,129 @@
+import {vi, afterEach} from 'vitest'
+import {AnalyticsEventName} from "./analytics-constants";
+import {BASE_PAYLOAD} from "./analytics-schema.test.helpers";
+import {sendShopifyAnalytics} from "./analytics.js";
+
+const MONORAIL_ENDPOINT = 'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
+const createFetchSpy = ({
+  expectEventCounts,
+}: {
+  expectEventCounts: number
+}) => {
+  const mockFetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    // Mock Monorail endpoint
+    if(input === MONORAIL_ENDPOINT) {
+      if (init?.body) {
+        const reqData = await init.body.toString();
+        const data = JSON.parse(reqData || '{}');
+
+        // If this expect fails, it will be captured by the
+        // spy function on console.error
+        expect(data.events.length).toEqual(expectEventCounts);
+
+        // Mock Monorail returning a multi-status response
+        if(!data.events[0].payload.shopId && !data.events[0].payload.shop_id) {
+          return new Promise((resolve) => {
+            resolve(new Response(
+              JSON.stringify({
+                result: [
+                  {
+                    status: 400,
+                    message: 'Schema validation error'
+                  }
+                ]
+              }),
+              {
+                status: 207,
+              }
+            ));
+          });
+        }
+      }
+
+      // Mock Monorail returning a 200 response
+      return new Promise((resolve) => {
+        resolve(new Response('', {
+          status: 200,
+        }));
+      });
+    }
+
+    throw new Error('Analytics fetch mock - request not handled');
+  }
+  return vi.spyOn(global, 'fetch').mockImplementation(mockFetch);
+};
+const createConsoleErrorSpy = () => {
+  return vi.spyOn(console, 'error').mockImplementation(() => {});
+};
+
+describe('analytics', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('sendShopifyAnalytics', () => {
+    it('with base payload', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const fetchSpy = createFetchSpy({expectEventCounts: 2});
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.PAGE_VIEW,
+        payload: {
+          ...BASE_PAYLOAD,
+        }
+      });
+
+      expect(fetchSpy).toBeCalled();
+      expect(consoleErrorSpy).not.toBeCalled()
+    });
+
+    it('with error payload', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const fetchSpy = createFetchSpy({expectEventCounts: 2});
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.PAGE_VIEW,
+        payload: {
+          ...BASE_PAYLOAD,
+          shopId: 'NaN',
+        }
+      });
+
+      expect(fetchSpy).toBeCalled();
+      expect(consoleErrorSpy).toBeCalled();
+      expect(consoleErrorSpy.mock.calls[0][0]).toBe('sendShopifyAnalytics request is unsuccessful');
+    });
+
+    it('with a product payload', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const fetchSpy = createFetchSpy({expectEventCounts: 3});
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.PAGE_VIEW,
+        payload: {
+          ...BASE_PAYLOAD,
+          pageType: 'product'
+        }
+      });
+
+      expect(fetchSpy).toBeCalled();
+      expect(consoleErrorSpy).not.toBeCalled()
+    });
+
+    it('with a product payload', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const fetchSpy = createFetchSpy({expectEventCounts: 1});
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.ADD_TO_CART,
+        payload: {
+          ...BASE_PAYLOAD,
+          cartId: 'gid://shopify/Cart/abc123',
+        }
+      });
+
+      expect(fetchSpy).toBeCalled();
+      expect(consoleErrorSpy).not.toBeCalled()
+    });
+  });
+});
diff --git a/packages/react/src/analytics.tsx b/packages/react/src/analytics.ts
similarity index 87%
rename from packages/react/src/analytics.tsx
rename to packages/react/src/analytics.ts
index 7be34bf5..a9d94b02 100644
--- a/packages/react/src/analytics.tsx
+++ b/packages/react/src/analytics.ts
@@ -28,7 +28,7 @@ export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
       break;
   }
 
-  sendToShopify(events);
+  return sendToShopify(events);
 }
 
 type MonorailResponse = {
@@ -47,27 +47,27 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
   };
 
   try {
-    fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
+    return fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
       method: 'post',
       headers: {
         'content-type': 'text/plain',
       },
       body: JSON.stringify(eventsToBeSent),
     })
-      .then((response) => response.text())
-      .then((data) => {
-        if (data) {
-          const jsonResponse = JSON.parse(data);
-          jsonResponse.result.forEach((eventResponse: MonorailResponse) => {
-            if (eventResponse.status !== 200) {
-              console.error(ERROR_MESSAGE, '\n\n', eventResponse.message);
-            }
-          });
-        }
-      })
-      .catch((err) => {
-        console.error(ERROR_MESSAGE, err);
-      });
+    .then((response) => response.text())
+    .then((data) => {
+      if (data) {
+        const jsonResponse = JSON.parse(data);
+        jsonResponse.result.forEach((eventResponse: MonorailResponse) => {
+          if (eventResponse.status !== 200) {
+            console.error(ERROR_MESSAGE, '\n\n', eventResponse.message);
+          }
+        });
+      }
+    })
+    .catch((err) => {
+      console.error(ERROR_MESSAGE, err);
+    });
   } catch (error) {
     // Do nothing
   }

From a70eb11396e8a672c5d48d32694ddb93471a12be Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Thu, 12 Jan 2023 16:18:39 -0800
Subject: [PATCH 20/58] better test naming

---
 packages/react/src/analytics.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 39e502be..2bfff47d 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -62,7 +62,7 @@ describe('analytics', () => {
   })
 
   describe('sendShopifyAnalytics', () => {
-    it('with base payload', async () => {
+    it('with a page view event', async () => {
       const consoleErrorSpy = createConsoleErrorSpy();
       const fetchSpy = createFetchSpy({expectEventCounts: 2});
 
@@ -77,7 +77,7 @@ describe('analytics', () => {
       expect(consoleErrorSpy).not.toBeCalled()
     });
 
-    it('with error payload', async () => {
+    it('with a page view event that has a bad payload', async () => {
       const consoleErrorSpy = createConsoleErrorSpy();
       const fetchSpy = createFetchSpy({expectEventCounts: 2});
 
@@ -94,7 +94,7 @@ describe('analytics', () => {
       expect(consoleErrorSpy.mock.calls[0][0]).toBe('sendShopifyAnalytics request is unsuccessful');
     });
 
-    it('with a product payload', async () => {
+    it('with a product page view event', async () => {
       const consoleErrorSpy = createConsoleErrorSpy();
       const fetchSpy = createFetchSpy({expectEventCounts: 3});
 
@@ -110,7 +110,7 @@ describe('analytics', () => {
       expect(consoleErrorSpy).not.toBeCalled()
     });
 
-    it('with a product payload', async () => {
+    it('with an add to cart event', async () => {
       const consoleErrorSpy = createConsoleErrorSpy();
       const fetchSpy = createFetchSpy({expectEventCounts: 1});
 

From 9e2b44281f60511c6c05b562009fd0f420a636cc Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Thu, 12 Jan 2023 16:25:11 -0800
Subject: [PATCH 21/58] lint

---
 packages/react/src/analytics.test.ts | 101 ++++++++++++++-------------
 packages/react/src/analytics.ts      |  43 ++++++------
 2 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 2bfff47d..e874c3eb 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -1,17 +1,17 @@
-import {vi, afterEach} from 'vitest'
-import {AnalyticsEventName} from "./analytics-constants";
-import {BASE_PAYLOAD} from "./analytics-schema.test.helpers";
-import {sendShopifyAnalytics} from "./analytics.js";
-
-const MONORAIL_ENDPOINT = 'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
-const createFetchSpy = ({
-  expectEventCounts,
-}: {
-  expectEventCounts: number
-}) => {
-  const mockFetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+import {vi, afterEach} from 'vitest';
+import {AnalyticsEventName} from './analytics-constants.js';
+import {BASE_PAYLOAD} from './analytics-schema.test.helpers.js';
+import {sendShopifyAnalytics} from './analytics.js';
+
+const MONORAIL_ENDPOINT =
+  'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
+const createFetchSpy = ({expectEventCounts}: {expectEventCounts: number}) => {
+  const mockFetch = async (
+    input: RequestInfo | URL,
+    init?: RequestInit
+  ): Promise<Response> => {
     // Mock Monorail endpoint
-    if(input === MONORAIL_ENDPOINT) {
+    if (input === MONORAIL_ENDPOINT) {
       if (init?.body) {
         const reqData = await init.body.toString();
         const data = JSON.parse(reqData || '{}');
@@ -21,45 +21,50 @@ const createFetchSpy = ({
         expect(data.events.length).toEqual(expectEventCounts);
 
         // Mock Monorail returning a multi-status response
-        if(!data.events[0].payload.shopId && !data.events[0].payload.shop_id) {
+        if (!data.events[0].payload.shopId && !data.events[0].payload.shop_id) {
           return new Promise((resolve) => {
-            resolve(new Response(
-              JSON.stringify({
-                result: [
-                  {
-                    status: 400,
-                    message: 'Schema validation error'
-                  }
-                ]
-              }),
-              {
-                status: 207,
-              }
-            ));
+            resolve(
+              new Response(
+                JSON.stringify({
+                  result: [
+                    {
+                      status: 400,
+                      message: 'Schema validation error',
+                    },
+                  ],
+                }),
+                {
+                  status: 207,
+                }
+              )
+            );
           });
         }
       }
 
       // Mock Monorail returning a 200 response
       return new Promise((resolve) => {
-        resolve(new Response('', {
-          status: 200,
-        }));
+        resolve(
+          new Response('', {
+            status: 200,
+          })
+        );
       });
     }
 
     throw new Error('Analytics fetch mock - request not handled');
-  }
+  };
   return vi.spyOn(global, 'fetch').mockImplementation(mockFetch);
 };
 const createConsoleErrorSpy = () => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   return vi.spyOn(console, 'error').mockImplementation(() => {});
 };
 
 describe('analytics', () => {
   afterEach(() => {
-    vi.restoreAllMocks()
-  })
+    vi.restoreAllMocks();
+  });
 
   describe('sendShopifyAnalytics', () => {
     it('with a page view event', async () => {
@@ -70,11 +75,11 @@ describe('analytics', () => {
         eventName: AnalyticsEventName.PAGE_VIEW,
         payload: {
           ...BASE_PAYLOAD,
-        }
+        },
       });
 
-      expect(fetchSpy).toBeCalled();
-      expect(consoleErrorSpy).not.toBeCalled()
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
 
     it('with a page view event that has a bad payload', async () => {
@@ -86,12 +91,14 @@ describe('analytics', () => {
         payload: {
           ...BASE_PAYLOAD,
           shopId: 'NaN',
-        }
+        },
       });
 
-      expect(fetchSpy).toBeCalled();
-      expect(consoleErrorSpy).toBeCalled();
-      expect(consoleErrorSpy.mock.calls[0][0]).toBe('sendShopifyAnalytics request is unsuccessful');
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy.mock.calls[0][0]).toBe(
+        'sendShopifyAnalytics request is unsuccessful'
+      );
     });
 
     it('with a product page view event', async () => {
@@ -102,12 +109,12 @@ describe('analytics', () => {
         eventName: AnalyticsEventName.PAGE_VIEW,
         payload: {
           ...BASE_PAYLOAD,
-          pageType: 'product'
-        }
+          pageType: 'product',
+        },
       });
 
-      expect(fetchSpy).toBeCalled();
-      expect(consoleErrorSpy).not.toBeCalled()
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
 
     it('with an add to cart event', async () => {
@@ -119,11 +126,11 @@ describe('analytics', () => {
         payload: {
           ...BASE_PAYLOAD,
           cartId: 'gid://shopify/Cart/abc123',
-        }
+        },
       });
 
-      expect(fetchSpy).toBeCalled();
-      expect(consoleErrorSpy).not.toBeCalled()
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
   });
 });
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index a9d94b02..e99066a2 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -47,27 +47,30 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
   };
 
   try {
-    return fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
-      method: 'post',
-      headers: {
-        'content-type': 'text/plain',
-      },
-      body: JSON.stringify(eventsToBeSent),
-    })
-    .then((response) => response.text())
-    .then((data) => {
-      if (data) {
-        const jsonResponse = JSON.parse(data);
-        jsonResponse.result.forEach((eventResponse: MonorailResponse) => {
-          if (eventResponse.status !== 200) {
-            console.error(ERROR_MESSAGE, '\n\n', eventResponse.message);
-          }
-        });
+    return fetch(
+      'https://monorail-edge.shopifysvc.com/unstable/produce_batch',
+      {
+        method: 'post',
+        headers: {
+          'content-type': 'text/plain',
+        },
+        body: JSON.stringify(eventsToBeSent),
       }
-    })
-    .catch((err) => {
-      console.error(ERROR_MESSAGE, err);
-    });
+    )
+      .then((response) => response.text())
+      .then((data) => {
+        if (data) {
+          const jsonResponse = JSON.parse(data);
+          jsonResponse.result.forEach((eventResponse: MonorailResponse) => {
+            if (eventResponse.status !== 200) {
+              console.error(ERROR_MESSAGE, '\n\n', eventResponse.message);
+            }
+          });
+        }
+      })
+      .catch((err) => {
+        console.error(ERROR_MESSAGE, err);
+      });
   } catch (error) {
     // Do nothing
   }

From 4d59c5d92be892b804cf7096fffcb2f673bd3b02 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 10:44:34 -0800
Subject: [PATCH 22/58] some PR feedbacks

---
 packages/react/src/analytics-utils.ts | 2 +-
 packages/react/src/analytics.ts       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index f9b48cff..4b3a750f 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -90,7 +90,7 @@ export function addDataIf(
  * @returns A boolean
  **/
 export function errorIfServer(fnName: string): boolean {
-  if (!window) {
+  if (typeof document !== "undefined") {
     console.error(
       `${fnName} should only be used within the useEffect callback or event handlers`
     );
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index e99066a2..405eb8fb 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -100,14 +100,14 @@ export function getClientBrowserParameters():
   };
 }
 
-function getNavigationTypeExperimental() {
+function getNavigationTypeExperimental(): string | undefined {
   try {
     const navigationEntries =
       performance?.getEntriesByType &&
       performance?.getEntriesByType('navigation');
 
     if (navigationEntries && navigationEntries[0]) {
-      //  https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
+      // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
       const rawType = (
         window.performance.getEntriesByType(
           'navigation'
@@ -123,7 +123,7 @@ function getNavigationTypeExperimental() {
   return undefined;
 }
 
-function getNavigationTypeLegacy() {
+function getNavigationTypeLegacy(): string | undefined {
   try {
     if (
       PerformanceNavigation &&
@@ -152,7 +152,7 @@ function getNavigationTypeLegacy() {
   return undefined;
 }
 
-function getNavigationType() {
+function getNavigationType(): [string, string] {
   try {
     let navApi = 'PerformanceNavigationTiming';
     let navType = getNavigationTypeExperimental();

From de592d6bb6ad95b6657041cbea82792737206ac6 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 11:49:16 -0800
Subject: [PATCH 23/58] more PR feedbacks

---
 packages/react/src/analytics-constants.ts     | 58 ++++++------
 ...ema-custom-storefront-customer-tracking.ts | 88 +++++++++----------
 packages/react/src/analytics.ts               | 15 ++--
 3 files changed, 81 insertions(+), 80 deletions(-)

diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index 42453bd6..ebdeec51 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -1,36 +1,36 @@
-export enum AnalyticsEventName {
-  PAGE_VIEW = 'PAGE_VIEW',
-  ADD_TO_CART = 'ADD_TO_CART',
+export const AnalyticsEventName = {
+  PAGE_VIEW: 'PAGE_VIEW',
+  ADD_TO_CART: 'ADD_TO_CART',
 }
 
-export enum AnalyticsPageType {
-  article = 'article',
-  blog = 'blog',
-  captcha = 'captcha',
-  cart = 'cart',
-  collection = 'collection',
-  customersAccount = 'customers/account',
-  customersActivateAccount = 'customers/activate_account',
-  customersAddresses = 'customers/addresses',
-  customersLogin = 'customers/login',
-  customersOrder = 'customers/order',
-  customersRegister = 'customers/register',
-  customersResetPassword = 'customers/reset_password',
-  giftCard = 'gift_card',
-  home = 'index',
-  listCollections = 'list-collections',
-  forbidden = '403',
-  notFound = '404',
-  page = 'page',
-  password = 'password',
-  product = 'product',
-  policy = 'policy',
-  search = 'search',
+export const AnalyticsPageType = {
+  article: 'article',
+  blog: 'blog',
+  captcha: 'captcha',
+  cart: 'cart',
+  collection: 'collection',
+  customersAccount: 'customers/account',
+  customersActivateAccount: 'customers/activate_account',
+  customersAddresses: 'customers/addresses',
+  customersLogin: 'customers/login',
+  customersOrder: 'customers/order',
+  customersRegister: 'customers/register',
+  customersResetPassword: 'customers/reset_password',
+  giftCard: 'gift_card',
+  home: 'index',
+  listCollections: 'list-collections',
+  forbidden: '403',
+  notFound: '404',
+  page: 'page',
+  password: 'password',
+  product: 'product',
+  policy: 'policy',
+  search: 'search',
 }
 
-export enum ShopifyAppSource {
-  hydrogen = 'hydrogen',
-  headless = 'headless',
+export const ShopifyAppSource = {
+  hydrogen: 'hydrogen',
+  headless: 'headless',
 }
 
 export const ShopifyAppId = {
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 3d5166e0..f296bec4 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -40,53 +40,53 @@ export function pageView(
     )
   );
 
-  if (pageType === AnalyticsPageType.collection) {
-    pageViewEvents.push(
-      schemaWrapper(
-        SCHEMA_ID,
-        addDataIf(
-          {
-            event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
-            ...additionalPayload,
-            collection_name: pageViewPayload.collectionHandle,
-          },
-          formatPayload(pageViewPayload)
+  switch(pageType) {
+    case AnalyticsPageType.collection:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: COLLECTION_PAGE_RENDERED_EVENT_NAME,
+              ...additionalPayload,
+              collection_name: pageViewPayload.collectionHandle,
+            },
+            formatPayload(pageViewPayload)
+          )
         )
-      )
-    );
-  }
-
-  if (pageType === AnalyticsPageType.product) {
-    pageViewEvents.push(
-      schemaWrapper(
-        SCHEMA_ID,
-        addDataIf(
-          {
-            event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
-            ...additionalPayload,
-            products: formatProductPayload(pageViewPayload.products),
-            total_value: pageViewPayload.totalValue,
-          },
-          formatPayload(pageViewPayload)
+      );
+      break;
+    case AnalyticsPageType.product:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: PRODUCT_PAGE_RENDERED_EVENT_NAME,
+              ...additionalPayload,
+              products: formatProductPayload(pageViewPayload.products),
+              total_value: pageViewPayload.totalValue,
+            },
+            formatPayload(pageViewPayload)
+          )
         )
-      )
-    );
-  }
-
-  if (pageType === AnalyticsPageType.search) {
-    pageViewEvents.push(
-      schemaWrapper(
-        SCHEMA_ID,
-        addDataIf(
-          {
-            event_name: SEARCH_SUBMITTED_EVENT_NAME,
-            ...additionalPayload,
-            search_string: pageViewPayload.searchString,
-          },
-          formatPayload(pageViewPayload)
+      );
+      break;
+    case AnalyticsPageType.search:
+      pageViewEvents.push(
+        schemaWrapper(
+          SCHEMA_ID,
+          addDataIf(
+            {
+              event_name: SEARCH_SUBMITTED_EVENT_NAME,
+              ...additionalPayload,
+              search_string: pageViewPayload.searchString,
+            },
+            formatPayload(pageViewPayload)
+          )
         )
-      )
-    );
+      );
+      break;
   }
 
   return pageViewEvents;
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 405eb8fb..9462edb4 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -8,23 +8,24 @@ import {AnalyticsEventName} from './analytics-constants.js';
 import {errorIfServer} from './analytics-utils.js';
 import {getShopifyCookies} from './cookies-utils.js';
 
-import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
-import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
+import {pageView as trekkiePageView} from './analytics-schema-trekkie-storefront-page-view.js';
+import {
+  pageView as customerPageView,
+  addToCart as customerAddToCart,
+} from './analytics-schema-custom-storefront-customer-tracking.js';
 
 export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
   let events: ShopifyMonorailPayload[] = [];
 
   switch (eventName) {
     case AnalyticsEventName.PAGE_VIEW:
-      events = events.concat(TrekkieStorefrontPageView.pageView(payload));
       events = events.concat(
-        CustomStorefrontCustomerTracking.pageView(payload)
+        trekkiePageView(payload),
+        customerPageView(payload)
       );
       break;
     case AnalyticsEventName.ADD_TO_CART:
-      events = events.concat(
-        CustomStorefrontCustomerTracking.addToCart(payload)
-      );
+      events = events.concat(customerAddToCart(payload));
       break;
   }
 

From 6e3e07e897aab491fe3f4b8d2ddee754f2d362cb Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 11:52:30 -0800
Subject: [PATCH 24/58] lint

---
 packages/react/src/analytics-constants.ts                   | 6 +++---
 .../analytics-schema-custom-storefront-customer-tracking.ts | 2 +-
 packages/react/src/analytics-utils.ts                       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index ebdeec51..99d6e47c 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -1,7 +1,7 @@
 export const AnalyticsEventName = {
   PAGE_VIEW: 'PAGE_VIEW',
   ADD_TO_CART: 'ADD_TO_CART',
-}
+};
 
 export const AnalyticsPageType = {
   article: 'article',
@@ -26,12 +26,12 @@ export const AnalyticsPageType = {
   product: 'product',
   policy: 'policy',
   search: 'search',
-}
+};
 
 export const ShopifyAppSource = {
   hydrogen: 'hydrogen',
   headless: 'headless',
-}
+};
 
 export const ShopifyAppId = {
   hydrogen: '6167201',
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index f296bec4..826b7abc 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -40,7 +40,7 @@ export function pageView(
     )
   );
 
-  switch(pageType) {
+  switch (pageType) {
     case AnalyticsPageType.collection:
       pageViewEvents.push(
         schemaWrapper(
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 4b3a750f..ebaad653 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -90,7 +90,7 @@ export function addDataIf(
  * @returns A boolean
  **/
 export function errorIfServer(fnName: string): boolean {
-  if (typeof document !== "undefined") {
+  if (typeof document !== 'undefined') {
     console.error(
       `${fnName} should only be used within the useEffect callback or event handlers`
     );

From 9aa91183852e77eccafbb1c69d33861585ddbdbe Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 13:47:08 -0800
Subject: [PATCH 25/58] more test

---
 packages/react/src/analytics.test.ts | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index e874c3eb..30b9296c 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -1,7 +1,7 @@
 import {vi, afterEach} from 'vitest';
 import {AnalyticsEventName} from './analytics-constants.js';
 import {BASE_PAYLOAD} from './analytics-schema.test.helpers.js';
-import {sendShopifyAnalytics} from './analytics.js';
+import {getClientBrowserParameters, sendShopifyAnalytics} from './analytics.js';
 
 const MONORAIL_ENDPOINT =
   'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
@@ -133,4 +133,29 @@ describe('analytics', () => {
       expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
   });
+
+  describe('getClientBrowserParameters', () => {
+    it('errors and returns empty object when executed on server side', () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const browserParams = getClientBrowserParameters();
+
+      expect(browserParams).toEqual({});
+      expect(consoleErrorSpy.mock.calls[0][0]).toBe(
+        'getClientBrowserParameters should only be used within the useEffect callback or event handlers'
+      );
+    });
+
+    // it('returns browser parameters when executed on client side', () => {
+    //   global.document = {
+    //     referrer: new URL('test').toString(),
+    //   };
+    //   const consoleErrorSpy = createConsoleErrorSpy();
+    //   const browserParams = getClientBrowserParameters();
+
+    //   expect(browserParams).toEqual({});
+    //   expect(consoleErrorSpy.mock.calls[0][0]).toBe(
+    //     'getClientBrowserParameters should only be used within the useEffect callback or event handlers'
+    //   );
+    // });
+  });
 });

From 0bd868191229aa15d556408d31505329d00c0ccb Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 15:41:04 -0800
Subject: [PATCH 26/58] more test

---
 packages/react/src/analytics-utils.ts |   2 +-
 packages/react/src/analytics.test.ts  | 118 +++++++++++++++++++++++---
 packages/react/src/analytics.ts       |   1 +
 packages/react/src/cookies-utils.tsx  |   4 +-
 4 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index ebaad653..229c7a2e 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -90,7 +90,7 @@ export function addDataIf(
  * @returns A boolean
  **/
 export function errorIfServer(fnName: string): boolean {
-  if (typeof document !== 'undefined') {
+  if (typeof document === 'undefined') {
     console.error(
       `${fnName} should only be used within the useEffect callback or event handlers`
     );
diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 30b9296c..d2d75bb8 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -60,10 +60,16 @@ const createConsoleErrorSpy = () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   return vi.spyOn(console, 'error').mockImplementation(() => {});
 };
+const originalDocument = document;
+const originalPerformance = performance;
+const originalPerformanceNavigation = global.PerformanceNavigation;
 
 describe('analytics', () => {
   afterEach(() => {
     vi.restoreAllMocks();
+    document = originalDocument;
+    performance = originalPerformance;
+    global.PerformanceNavigation =originalPerformanceNavigation;
   });
 
   describe('sendShopifyAnalytics', () => {
@@ -136,6 +142,8 @@ describe('analytics', () => {
 
   describe('getClientBrowserParameters', () => {
     it('errors and returns empty object when executed on server side', () => {
+      // @ts-ignore
+      document = undefined;
       const consoleErrorSpy = createConsoleErrorSpy();
       const browserParams = getClientBrowserParameters();
 
@@ -145,17 +153,103 @@ describe('analytics', () => {
       );
     });
 
-    // it('returns browser parameters when executed on client side', () => {
-    //   global.document = {
-    //     referrer: new URL('test').toString(),
-    //   };
-    //   const consoleErrorSpy = createConsoleErrorSpy();
-    //   const browserParams = getClientBrowserParameters();
-
-    //   expect(browserParams).toEqual({});
-    //   expect(consoleErrorSpy.mock.calls[0][0]).toBe(
-    //     'getClientBrowserParameters should only be used within the useEffect callback or event handlers'
-    //   );
-    // });
+    it('returns browser parameters when executed on client side', () => {
+      // @ts-ignore
+      document = {
+        title: 'test',
+        referrer: 'https://www.example.com',
+        cookie: '_shopify_y=abc123; _shopify_s=def456'
+      };
+
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const browserParams = getClientBrowserParameters();
+
+      expect(browserParams).toEqual({
+        uniqueToken: 'abc123',
+        visitToken: 'def456',
+        url: expect.any(String),
+        path: '',
+        search: '',
+        referrer: 'https://www.example.com',
+        title: 'test',
+        userAgent: expect.any(String),
+        navigationType: 'unknown',
+        navigationApi: 'unknown',
+      });
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('returns PerformanceNavigationTiming reload navigation api types', () => {
+      // @ts-ignore
+      document = {
+        cookie: '',
+        title: '',
+        referrer: '',
+      };
+      // @ts-ignore
+      performance = {
+        // @ts-ignore
+        getEntriesByType: () => {
+          return [{
+            type: 'reload'
+          }];
+        }
+      }
+
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const browserParams = getClientBrowserParameters();
+
+      expect(browserParams.navigationType).toEqual('reload');
+      expect(browserParams.navigationApi).toEqual('PerformanceNavigationTiming');
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('returns PerformanceNavigationTiming navigation api types', () => {
+      // @ts-ignore
+      document = {
+        cookie: '',
+        title: '',
+        referrer: '',
+      };
+      // @ts-ignore
+      global.PerformanceNavigation = {
+        TYPE_NAVIGATE: 1,
+        TYPE_RELOAD: 2,
+        TYPE_BACK_FORWARD: 3,
+      }
+      // @ts-ignore
+      performance = {
+        // @ts-ignore
+        navigation: {
+          type: PerformanceNavigation.TYPE_NAVIGATE,
+        }
+      }
+
+      const consoleErrorSpy = createConsoleErrorSpy();
+      let browserParams = getClientBrowserParameters();
+
+      expect(browserParams.navigationType).toEqual('navigate');
+      expect(browserParams.navigationApi).toEqual('performance.navigation');
+
+      // @ts-ignore
+      performance.navigation.type = PerformanceNavigation.TYPE_RELOAD;
+      browserParams = getClientBrowserParameters();
+      expect(browserParams.navigationType).toEqual('reload');
+      expect(browserParams.navigationApi).toEqual('performance.navigation');
+
+      // @ts-ignore
+      performance.navigation.type = PerformanceNavigation.TYPE_BACK_FORWARD;
+      browserParams = getClientBrowserParameters();
+      expect(browserParams.navigationType).toEqual('back_forward');
+      expect(browserParams.navigationApi).toEqual('performance.navigation');
+
+      // @ts-ignore
+      performance.navigation.type = 4;
+      browserParams = getClientBrowserParameters();
+      expect(browserParams.navigationType).toEqual('unknown: 4');
+      expect(browserParams.navigationApi).toEqual('performance.navigation');
+
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 9462edb4..7b9b509a 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -80,6 +80,7 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
 export function getClientBrowserParameters():
   | ClientBrowserParameters
   | Record<string, never> {
+
   if (errorIfServer('getClientBrowserParameters')) {
     return {};
   }
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index 0ace0373..1a927654 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -65,7 +65,7 @@ export type ShopifyCookies = {
 export function getShopifyCookies(cookies: string): ShopifyCookies {
   const cookieData = parse(cookies);
   return {
-    [SHOPIFY_Y]: cookieData[SHOPIFY_Y],
-    [SHOPIFY_S]: cookieData[SHOPIFY_S],
+    [SHOPIFY_Y]: cookieData[SHOPIFY_Y] || '',
+    [SHOPIFY_S]: cookieData[SHOPIFY_S] || '',
   };
 }

From 1674eccc33a1ab0efe70b7977e75e7d8407e6763 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 15:44:42 -0800
Subject: [PATCH 27/58] better name test

---
 packages/react/src/analytics.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index d2d75bb8..5a66f2eb 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -204,7 +204,7 @@ describe('analytics', () => {
       expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
 
-    it('returns PerformanceNavigationTiming navigation api types', () => {
+    it('returns performance.navigation api types', () => {
       // @ts-ignore
       document = {
         cookie: '',

From 3d505a0821f95aa50d1f6c0d8ec70a0d12b5c7d1 Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <jp@calltheguys.co>
Date: Fri, 13 Jan 2023 15:53:36 -0800
Subject: [PATCH 28/58] @juanpprieto/cookie util test (#121)

---
 packages/react/src/ShopifyCookies.tsx   | 11 +++++++++
 packages/react/src/cookie-utils.test.ts | 31 +++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 packages/react/src/cookie-utils.test.ts

diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
index 3fd9c3f1..0a5764ab 100644
--- a/packages/react/src/ShopifyCookies.tsx
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -16,6 +16,17 @@ interface ShopifyCookiesProps {
   hasUserConsent?: boolean;
 }
 
+/**
+ * Set user and session cookies and refresh the expiry time
+ * @param domain - The domain scope of the cookie
+ * @param hasUserConsent - Defaults to false. If hasUserConsent is true, we can set Shopify unique user token cookie
+ * @example
+ * ```tsx
+ * import {ShopifyCookies} from '@shopify/hydrogen-react';
+ *
+ * <ShopifyCookies domain="" hasUserConsent={hasUserConsent} />
+ * ```
+ */
 export function ShopifyCookies(props: ShopifyCookiesProps) {
   const {domain = '', hasUserConsent = false} = props;
 
diff --git a/packages/react/src/cookie-utils.test.ts b/packages/react/src/cookie-utils.test.ts
new file mode 100644
index 00000000..e3a8b345
--- /dev/null
+++ b/packages/react/src/cookie-utils.test.ts
@@ -0,0 +1,31 @@
+import {
+  buildUUID,
+  hexTime,
+  getShopifyCookies,
+  ShopifyCookies,
+} from './cookies-utils.js';
+
+describe('cookies-utils', () => {
+  describe('buildUUID', () => {
+    it('returns a string', () => {
+      expect(typeof buildUUID()).toBe('string');
+    });
+  });
+
+  describe('hexTime', () => {
+    it('returns a string', () => {
+      expect(typeof hexTime()).toBe('string');
+    });
+  });
+
+  describe('getShopifyCookies', () => {
+    it('returns object with SHOPIFY_Y and SHOPIFY_X', () => {
+      const cookie =
+        '_shopify_m=persistent; _y=44c60bb0-577c-4901-874c-92cb323fccf1; _shopify_y=44c60bb0-577c-4901-874c-92cb323fccf1; _shopify_y=44c60bb0-577c-4901-874c-92cb323fccf1; _tracking_consent={"lim":["GDPR"],"v":"2.0","con":{"GDPR":""},"reg":"CCPA"}; _shopify_s=a797b9ef-C0E7-4536-18BA-2828BA504882';
+      expect(getShopifyCookies(cookie)).toMatchObject<ShopifyCookies>({
+        _shopify_y: '44c60bb0-577c-4901-874c-92cb323fccf1',
+        _shopify_s: 'a797b9ef-C0E7-4536-18BA-2828BA504882',
+      });
+    });
+  });
+});

From 73b7f86d22052597f79b1756af3d8f332abcfab0 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 16:19:22 -0800
Subject: [PATCH 29/58] fix lint complains

---
 packages/react/src/analytics.test.ts | 52 +++++++++++++++++++---------
 packages/react/src/analytics.ts      |  1 -
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 5a66f2eb..e368d7af 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -67,9 +67,11 @@ const originalPerformanceNavigation = global.PerformanceNavigation;
 describe('analytics', () => {
   afterEach(() => {
     vi.restoreAllMocks();
+    /* eslint-disable no-global-assign */
     document = originalDocument;
     performance = originalPerformance;
-    global.PerformanceNavigation =originalPerformanceNavigation;
+    global.PerformanceNavigation = originalPerformanceNavigation;
+    /* eslint-enable no-global-assign */
   });
 
   describe('sendShopifyAnalytics', () => {
@@ -142,8 +144,10 @@ describe('analytics', () => {
 
   describe('getClientBrowserParameters', () => {
     it('errors and returns empty object when executed on server side', () => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
       // @ts-ignore
       document = undefined;
+      /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
       const consoleErrorSpy = createConsoleErrorSpy();
       const browserParams = getClientBrowserParameters();
 
@@ -154,12 +158,14 @@ describe('analytics', () => {
     });
 
     it('returns browser parameters when executed on client side', () => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
       // @ts-ignore
       document = {
         title: 'test',
         referrer: 'https://www.example.com',
-        cookie: '_shopify_y=abc123; _shopify_s=def456'
+        cookie: '_shopify_y=abc123; _shopify_s=def456',
       };
+      /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
       const consoleErrorSpy = createConsoleErrorSpy();
       const browserParams = getClientBrowserParameters();
@@ -180,6 +186,7 @@ describe('analytics', () => {
     });
 
     it('returns PerformanceNavigationTiming reload navigation api types', () => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
       // @ts-ignore
       document = {
         cookie: '',
@@ -190,21 +197,27 @@ describe('analytics', () => {
       performance = {
         // @ts-ignore
         getEntriesByType: () => {
-          return [{
-            type: 'reload'
-          }];
-        }
-      }
+          return [
+            {
+              type: 'reload',
+            },
+          ];
+        },
+      };
+      /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
       const consoleErrorSpy = createConsoleErrorSpy();
       const browserParams = getClientBrowserParameters();
 
       expect(browserParams.navigationType).toEqual('reload');
-      expect(browserParams.navigationApi).toEqual('PerformanceNavigationTiming');
+      expect(browserParams.navigationApi).toEqual(
+        'PerformanceNavigationTiming'
+      );
       expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
 
     it('returns performance.navigation api types', () => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
       // @ts-ignore
       document = {
         cookie: '',
@@ -216,14 +229,15 @@ describe('analytics', () => {
         TYPE_NAVIGATE: 1,
         TYPE_RELOAD: 2,
         TYPE_BACK_FORWARD: 3,
-      }
+      };
       // @ts-ignore
       performance = {
         // @ts-ignore
         navigation: {
           type: PerformanceNavigation.TYPE_NAVIGATE,
-        }
-      }
+        },
+      };
+      /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
       const consoleErrorSpy = createConsoleErrorSpy();
       let browserParams = getClientBrowserParameters();
@@ -231,20 +245,17 @@ describe('analytics', () => {
       expect(browserParams.navigationType).toEqual('navigate');
       expect(browserParams.navigationApi).toEqual('performance.navigation');
 
-      // @ts-ignore
-      performance.navigation.type = PerformanceNavigation.TYPE_RELOAD;
+      updateNavigationType(PerformanceNavigation.TYPE_RELOAD);
       browserParams = getClientBrowserParameters();
       expect(browserParams.navigationType).toEqual('reload');
       expect(browserParams.navigationApi).toEqual('performance.navigation');
 
-      // @ts-ignore
-      performance.navigation.type = PerformanceNavigation.TYPE_BACK_FORWARD;
+      updateNavigationType(PerformanceNavigation.TYPE_BACK_FORWARD);
       browserParams = getClientBrowserParameters();
       expect(browserParams.navigationType).toEqual('back_forward');
       expect(browserParams.navigationApi).toEqual('performance.navigation');
 
-      // @ts-ignore
-      performance.navigation.type = 4;
+      updateNavigationType(4);
       browserParams = getClientBrowserParameters();
       expect(browserParams.navigationType).toEqual('unknown: 4');
       expect(browserParams.navigationApi).toEqual('performance.navigation');
@@ -253,3 +264,10 @@ describe('analytics', () => {
     });
   });
 });
+
+function updateNavigationType(apiType: number) {
+  /* eslint-disable @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  performance.navigation.type = apiType;
+  /* eslint-enable @typescript-eslint/ban-ts-comment */
+}
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 7b9b509a..9462edb4 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -80,7 +80,6 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
 export function getClientBrowserParameters():
   | ClientBrowserParameters
   | Record<string, never> {
-
   if (errorIfServer('getClientBrowserParameters')) {
     return {};
   }

From 667c971b27312b9dd69ed28678e3f52504e69269 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 17:00:26 -0800
Subject: [PATCH 30/58] fix weird ts complain

---
 packages/react/src/analytics-constants.ts | 6 +++---
 packages/react/src/analytics-types.ts     | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index 99d6e47c..ebdeec51 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -1,7 +1,7 @@
 export const AnalyticsEventName = {
   PAGE_VIEW: 'PAGE_VIEW',
   ADD_TO_CART: 'ADD_TO_CART',
-};
+}
 
 export const AnalyticsPageType = {
   article: 'article',
@@ -26,12 +26,12 @@ export const AnalyticsPageType = {
   product: 'product',
   policy: 'policy',
   search: 'search',
-};
+}
 
 export const ShopifyAppSource = {
   hydrogen: 'hydrogen',
   headless: 'headless',
-};
+}
 
 export const ShopifyAppId = {
   hydrogen: '6167201',
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index e2a50b5a..fafa90dd 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -48,8 +48,10 @@ export type ShopifyPageViewPayload = ShopifyCommonPayload & {
   searchString?: string;
 };
 
+export type AnalyticsEventNames = keyof typeof AnalyticsEventName;
+
 export type ShopifyPageView = {
-  eventName: AnalyticsEventName.PAGE_VIEW;
+  eventName: string;
   payload: ShopifyPageViewPayload;
 };
 
@@ -59,7 +61,7 @@ export type ShopifyAddToCartPayload = ShopifyCommonPayload & {
 };
 
 export type ShopifyAddToCart = {
-  eventName: AnalyticsEventName.ADD_TO_CART;
+  eventName: string;
   payload: ShopifyAddToCartPayload;
 };
 

From 46e8c1fe348d38346deb796939e6f873e96eb9d1 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Fri, 13 Jan 2023 17:05:08 -0800
Subject: [PATCH 31/58] fix format

---
 packages/react/src/analytics-constants.ts | 6 +++---
 packages/react/src/parse-metafield.ts     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index ebdeec51..99d6e47c 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -1,7 +1,7 @@
 export const AnalyticsEventName = {
   PAGE_VIEW: 'PAGE_VIEW',
   ADD_TO_CART: 'ADD_TO_CART',
-}
+};
 
 export const AnalyticsPageType = {
   article: 'article',
@@ -26,12 +26,12 @@ export const AnalyticsPageType = {
   product: 'product',
   policy: 'policy',
   search: 'search',
-}
+};
 
 export const ShopifyAppSource = {
   hydrogen: 'hydrogen',
   headless: 'headless',
-}
+};
 
 export const ShopifyAppId = {
   hydrogen: '6167201',
diff --git a/packages/react/src/parse-metafield.ts b/packages/react/src/parse-metafield.ts
index 27a13205..27f22dee 100644
--- a/packages/react/src/parse-metafield.ts
+++ b/packages/react/src/parse-metafield.ts
@@ -201,7 +201,7 @@ export const allMetafieldTypesArray = [
 ] as const;
 
 /** A union of all the supported `metafield.type`s */
-export type MetafieldTypeTypes = (typeof allMetafieldTypesArray)[number];
+export type MetafieldTypeTypes = typeof allMetafieldTypesArray[number];
 
 /**
  * A mapping of a Metafield's `type` to the TypeScript type that is returned from `parseMetafield()`

From 7c1921cb597b85141d8f34f8aff814424efb9977 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 09:15:44 -0800
Subject: [PATCH 32/58] clean up constants

---
 packages/react/src/ShopifyCookies.tsx  |  2 +-
 packages/react/src/analytics-types.ts  |  6 ++++++
 packages/react/src/analytics.ts        |  2 +-
 packages/react/src/cart-constants.ts   |  2 --
 packages/react/src/cart-hooks.tsx      | 14 +++++++-------
 packages/react/src/cookies-utils.tsx   | 11 +++--------
 packages/react/src/shared-constants.ts |  2 ++
 7 files changed, 20 insertions(+), 19 deletions(-)
 create mode 100644 packages/react/src/shared-constants.ts

diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
index 0a5764ab..58e5b0b5 100644
--- a/packages/react/src/ShopifyCookies.tsx
+++ b/packages/react/src/ShopifyCookies.tsx
@@ -1,6 +1,6 @@
 import {useEffect} from 'react';
 import {stringify} from 'worktop/cookie';
-import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
 import {buildUUID, getShopifyCookies} from './cookies-utils.js';
 
 const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index fafa90dd..79ce7728 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -1,5 +1,6 @@
 import type {Product, ProductVariant} from './storefront-api-types.js';
 import {AnalyticsEventName, ShopifyAppSource} from './analytics-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
 
 export type ClientBrowserParameters = {
   uniqueToken: string;
@@ -73,3 +74,8 @@ export type ShopifyAnalyticsPayload =
   | ShopifyPageViewPayload
   | ShopifyAddToCartPayload;
 export type ShopifyAnalytics = ShopifyPageView | ShopifyAddToCart;
+
+export type ShopifyCookies = {
+  [SHOPIFY_Y]: string;
+  [SHOPIFY_S]: string;
+};
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 9462edb4..a521597a 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -1,4 +1,4 @@
-import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants.js';
+import {SHOPIFY_S, SHOPIFY_Y} from './shared-constants.js';
 import type {
   ClientBrowserParameters,
   ShopifyAnalytics,
diff --git a/packages/react/src/cart-constants.ts b/packages/react/src/cart-constants.ts
index 0d02d749..9374bf60 100644
--- a/packages/react/src/cart-constants.ts
+++ b/packages/react/src/cart-constants.ts
@@ -5,5 +5,3 @@ export const CART_COOKIE_TTL_DAYS = 14;
 export const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';
 export const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';
 export const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';
-export const SHOPIFY_Y = '_shopify_y';
-export const SHOPIFY_S = '_shopify_s';
diff --git a/packages/react/src/cart-hooks.tsx b/packages/react/src/cart-hooks.tsx
index 43022ebd..a9945f06 100644
--- a/packages/react/src/cart-hooks.tsx
+++ b/packages/react/src/cart-hooks.tsx
@@ -8,11 +8,13 @@ import {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
+} from './cart-constants.js';
+import {
   SHOPIFY_Y,
   SHOPIFY_S,
-} from './cart-constants.js';
-import {parse} from 'worktop/cookie';
+} from './shared-constants.js';
 import type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';
+import { getShopifyCookies } from './cookies-utils.js';
 
 export function useCartFetch() {
   const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();
@@ -32,11 +34,9 @@ export function useCartFetch() {
       }
 
       // Find Shopify cookies
-      const cookieData = parse(document.cookie);
-      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {
-        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
-        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
-      }
+      const cookieData = getShopifyCookies(document.cookie);
+      headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];
+      headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];
 
       return fetch(getStorefrontApiUrl(), {
         method: 'POST',
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index 1a927654..c007158e 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -1,7 +1,7 @@
 import {parse} from 'worktop/cookie';
-import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
+import {ShopifyCookies} from './analytics-types.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
 
-const zeros = '00000000';
 const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
 
 export function buildUUID(): string {
@@ -54,14 +54,9 @@ export function hexTime(): string {
     .toString(16)
     .toLowerCase();
 
-  return zeros.substr(0, 8 - output.length) + output;
+  return output.padStart(8 - output.length, '0');
 }
 
-export type ShopifyCookies = {
-  [SHOPIFY_Y]: string;
-  [SHOPIFY_S]: string;
-};
-
 export function getShopifyCookies(cookies: string): ShopifyCookies {
   const cookieData = parse(cookies);
   return {
diff --git a/packages/react/src/shared-constants.ts b/packages/react/src/shared-constants.ts
new file mode 100644
index 00000000..a18cbe01
--- /dev/null
+++ b/packages/react/src/shared-constants.ts
@@ -0,0 +1,2 @@
+export const SHOPIFY_Y = '_shopify_y';
+export const SHOPIFY_S = '_shopify_s';

From d46734f7f98726a88c342b0e3d9ee511d5918c02 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 10:27:29 -0800
Subject: [PATCH 33/58] convert ShopifyCookie to a hook

---
 apps/nextjs/pages/_app.tsx                    |  4 +-
 packages/react/src/ShopifyCookies.tsx         | 54 ------------
 packages/react/src/cookie-utils.test.ts       |  2 +-
 packages/react/src/index.ts                   |  1 +
 packages/react/src/useShopifyCookie.tsx       | 50 +++++++++++
 packages/react/src/useShopifyCookies.test.tsx | 88 +++++++++++++++++++
 6 files changed, 142 insertions(+), 57 deletions(-)
 delete mode 100644 packages/react/src/ShopifyCookies.tsx
 create mode 100644 packages/react/src/useShopifyCookie.tsx
 create mode 100644 packages/react/src/useShopifyCookies.test.tsx

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 197f8b86..0462bc55 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -3,11 +3,11 @@ import type {AppProps} from 'next/app';
 import {
   ShopifyProvider,
   CartProvider,
-  ShopifyCookies,
   sendShopifyAnalytics,
   getClientBrowserParameters,
   AnalyticsEventName,
   type ShopifyPageViewPayload,
+  useShopifyCookies,
 } from '@shopify/hydrogen-react';
 import {useRouter} from 'next/router';
 import {useEffect} from 'react';
@@ -51,6 +51,7 @@ export default function App({Component, pageProps}: AppProps) {
       router.events.off('routeChangeComplete', handleRouteChange);
     };
   }, [analytics, router.events]);
+  useShopifyCookies();
 
   return (
     <ShopifyProvider
@@ -64,7 +65,6 @@ export default function App({Component, pageProps}: AppProps) {
       <CartProvider>
         <Component {...pagePropsWithAppAnalytics} />
       </CartProvider>
-      <ShopifyCookies domain="" hasUserConsent={hasUserConsent} />
     </ShopifyProvider>
   );
 }
diff --git a/packages/react/src/ShopifyCookies.tsx b/packages/react/src/ShopifyCookies.tsx
deleted file mode 100644
index 58e5b0b5..00000000
--- a/packages/react/src/ShopifyCookies.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {useEffect} from 'react';
-import {stringify} from 'worktop/cookie';
-import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
-import {buildUUID, getShopifyCookies} from './cookies-utils.js';
-
-const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
-const shortTermLength = 60 * 30; // 30 mins
-
-interface ShopifyCookiesProps {
-  /** The domain scope of the cookie */
-  domain: string;
-  /**
-   * Defaults to false. If hasUserConsent is true, we can set Shopify unique user token cookie
-   * lifetime to 1 year
-   */
-  hasUserConsent?: boolean;
-}
-
-/**
- * Set user and session cookies and refresh the expiry time
- * @param domain - The domain scope of the cookie
- * @param hasUserConsent - Defaults to false. If hasUserConsent is true, we can set Shopify unique user token cookie
- * @example
- * ```tsx
- * import {ShopifyCookies} from '@shopify/hydrogen-react';
- *
- * <ShopifyCookies domain="" hasUserConsent={hasUserConsent} />
- * ```
- */
-export function ShopifyCookies(props: ShopifyCookiesProps) {
-  const {domain = '', hasUserConsent = false} = props;
-
-  useEffect(() => {
-    const cookies = getShopifyCookies(document.cookie);
-
-    /**
-     * Set user and session cookies and refresh the expiry time
-     */
-    document.cookie = stringify(SHOPIFY_Y, cookies[SHOPIFY_Y] || buildUUID(), {
-      maxage: hasUserConsent ? longTermLength : shortTermLength,
-      domain,
-      samesite: 'Lax',
-      path: '/',
-    });
-    document.cookie = stringify(SHOPIFY_S, cookies[SHOPIFY_S] || buildUUID(), {
-      maxage: shortTermLength,
-      domain,
-      samesite: 'Lax',
-      path: '/',
-    });
-  });
-
-  return null;
-}
diff --git a/packages/react/src/cookie-utils.test.ts b/packages/react/src/cookie-utils.test.ts
index e3a8b345..bb860834 100644
--- a/packages/react/src/cookie-utils.test.ts
+++ b/packages/react/src/cookie-utils.test.ts
@@ -2,8 +2,8 @@ import {
   buildUUID,
   hexTime,
   getShopifyCookies,
-  ShopifyCookies,
 } from './cookies-utils.js';
+import {ShopifyCookies} from './analytics-types.js';
 
 describe('cookies-utils', () => {
   describe('buildUUID', () => {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 94797793..1ca2c254 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -43,4 +43,5 @@ export type {
   ShopifyAnalyticsProduct,
 } from './analytics-types.js';
 export {ShopifyCookies} from './ShopifyCookies.js';
+export {useShopifyCookies} from './useShopifyCookie.js';
 export {sendShopifyAnalytics, getClientBrowserParameters} from './analytics.js';
diff --git a/packages/react/src/useShopifyCookie.tsx b/packages/react/src/useShopifyCookie.tsx
new file mode 100644
index 00000000..72653c45
--- /dev/null
+++ b/packages/react/src/useShopifyCookie.tsx
@@ -0,0 +1,50 @@
+import {useEffect} from 'react';
+import {stringify} from 'worktop/cookie';
+import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
+import {buildUUID, getShopifyCookies} from './cookies-utils.js';
+
+const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry
+const shortTermLength = 60 * 30; // 30 mins
+
+/**
+ * Set user and session cookies and refresh the expiry time
+ * @param hasUserConsent - Defaults to false. If hasUserConsent is true, we can set Shopify unique user
+ * token cookie from expiry of 30 mins to 1 year
+ * @param domain - The domain scope of the cookie
+ * @example
+ * ```tsx
+ * import {useShopifyCookies} from '@shopify/hydrogen-react';
+ *
+ * useShopifyCookies(true, 'my-shop.com')
+ * ```
+ */
+export function useShopifyCookies(hasUserConsent = false, domain = ''): void {
+  useEffect(() => {
+    const cookies = getShopifyCookies(document.cookie);
+
+    /**
+     * Set user and session cookies and refresh the expiry time
+     */
+    setCookie(
+      SHOPIFY_Y,
+      cookies[SHOPIFY_Y] || buildUUID(),
+      hasUserConsent ? longTermLength : shortTermLength,
+      domain
+    );
+    setCookie(
+      SHOPIFY_S,
+      cookies[SHOPIFY_S] || buildUUID(),
+      shortTermLength,
+      domain
+    );
+  });
+}
+
+function setCookie(name: string, value: string, maxage: number, domain: string): void {
+  document.cookie = stringify(name, value, {
+    maxage,
+    domain,
+    samesite: 'Lax',
+    path: '/',
+  });
+}
diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
new file mode 100644
index 00000000..804207b5
--- /dev/null
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -0,0 +1,88 @@
+import {afterEach} from 'vitest';
+import {renderHook} from '@testing-library/react';
+import {getShopifyCookies} from './cookies-utils.js';
+import {useShopifyCookies} from './useShopifyCookie.js';
+
+describe(`useShopifyCookies`, () => {
+  afterEach(() => {
+    /* eslint-disable no-global-assign */
+    // clear the cookies
+    document.cookie = '_shopify_y=1; expires=1 Jan 1970 00:00:00 GMT;';
+    document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
+    /* eslint-enable no-global-assign */
+  });
+
+  it('sets _shopify_s and _shopify_y cookies when not found', () => {
+    let cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      '_shopify_s': '',
+      '_shopify_y': '',
+    })
+
+    renderHook(() =>
+      useShopifyCookies()
+    );
+
+    cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      '_shopify_s': expect.any(String),
+      '_shopify_y': expect.any(String),
+    })
+  });
+
+  it('does not override cookies when it already exists', () => {
+    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
+    // @ts-ignore
+    document.cookie = '_shopify_s=abc123';
+    document.cookie = '_shopify_y=def456';
+    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
+
+    renderHook(() =>
+      useShopifyCookies()
+    );
+
+    const cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      '_shopify_s': 'abc123',
+      '_shopify_y': 'def456',
+    })
+  });
+
+  it('sets new cookie if either cookie is missing', () => {
+    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
+    // @ts-ignore
+    document.cookie = '_shopify_s=abc123';
+    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
+
+    renderHook(() =>
+      useShopifyCookies()
+    );
+
+    let cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      '_shopify_s': 'abc123',
+      '_shopify_y': expect.any(String),
+    })
+
+    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
+    // @ts-ignore
+    document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
+    document.cookie = '_shopify_y=def456';
+    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
+
+    renderHook(() =>
+      useShopifyCookies()
+    );
+
+    cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      '_shopify_s': expect.any(String),
+      '_shopify_y': 'def456',
+    })
+  });
+});

From 6df87ee11175794c5018033fec9e9e862656935a Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 11:34:12 -0800
Subject: [PATCH 34/58] ts clean up

---
 packages/react/src/analytics-constants.ts            |  8 ++++----
 ...ics-schema-custom-storefront-customer-tracking.ts | 12 ++++++------
 .../analytics-schema-trekkie-storefront-page-view.ts |  7 +++----
 packages/react/src/analytics-types.ts                |  4 ++--
 packages/react/src/index.ts                          |  3 +--
 5 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/analytics-constants.ts b/packages/react/src/analytics-constants.ts
index 99d6e47c..2f7b64db 100644
--- a/packages/react/src/analytics-constants.ts
+++ b/packages/react/src/analytics-constants.ts
@@ -1,7 +1,7 @@
 export const AnalyticsEventName = {
   PAGE_VIEW: 'PAGE_VIEW',
   ADD_TO_CART: 'ADD_TO_CART',
-};
+} as const;
 
 export const AnalyticsPageType = {
   article: 'article',
@@ -26,14 +26,14 @@ export const AnalyticsPageType = {
   product: 'product',
   policy: 'policy',
   search: 'search',
-};
+} as const;
 
 export const ShopifyAppSource = {
   hydrogen: 'hydrogen',
   headless: 'headless',
-};
+} as const;
 
 export const ShopifyAppId = {
   hydrogen: '6167201',
   headless: '12875497473',
-};
+} as const;
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 826b7abc..66be9c92 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -17,9 +17,9 @@ const PRODUCT_ADDED_TO_CART_EVENT_NAME = 'product_added_to_cart';
 const SEARCH_SUBMITTED_EVENT_NAME = 'search_submitted';
 
 export function pageView(
-  payload: ShopifyAnalyticsPayload
+  payload: ShopifyPageViewPayload
 ): ShopifyMonorailPayload[] {
-  const pageViewPayload = payload as ShopifyPageViewPayload;
+  const pageViewPayload = payload;
   const additionalPayload = {
     canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
     customer_id: pageViewPayload.customerId,
@@ -93,9 +93,9 @@ export function pageView(
 }
 
 export function addToCart(
-  payload: ShopifyAnalyticsPayload
+  payload: ShopifyAddToCartPayload
 ): ShopifyMonorailPayload[] {
-  const addToCartPayload = payload as ShopifyAddToCartPayload;
+  const addToCartPayload = payload;
   const cartToken = parseGid(addToCartPayload.cartId);
   const cart_token = cartToken?.id ? `${cartToken.id}` : null;
   return [
@@ -144,7 +144,7 @@ function formatPayload(
   };
 }
 
-function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
+function formatProductPayload(products?: ShopifyAnalyticsProduct[]): string[] {
   return products
     ? products.map((p: ShopifyAnalyticsProduct) => {
         const product = addDataIf(
@@ -164,7 +164,7 @@ function formatProductPayload(products?: ShopifyAnalyticsProduct[]) {
             quantity: Number(p.quantity || 0),
           }
         );
-        return JSON.stringify(product as ShopifyAnalyticsProduct);
+        return JSON.stringify(product);
       })
     : [];
 }
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index 4787776c..72737722 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -1,5 +1,4 @@
 import {
-  ShopifyAnalyticsPayload,
   ShopifyPageViewPayload,
   ShopifyMonorailPayload,
 } from './analytics-types.js';
@@ -11,9 +10,9 @@ const SCHEMA_ID = 'trekkie_storefront_page_view/1.4';
 const OXYGEN_DOMAIN = 'myshopify.dev';
 
 export function pageView(
-  payload: ShopifyAnalyticsPayload
+  payload: ShopifyPageViewPayload
 ): ShopifyMonorailPayload[] {
-  const pageViewPayload = payload as ShopifyPageViewPayload;
+  const pageViewPayload = payload;
   const {id, resource} = parseGid(pageViewPayload.resourceId);
   const resourceType = resource ? resource.toLowerCase() : undefined;
   return [
@@ -33,7 +32,7 @@ export function pageView(
 }
 
 function formatPayload(
-  payload: ShopifyAnalyticsPayload
+  payload: ShopifyPageViewPayload
 ): ShopifyMonorailPayload {
   const shopId =
     typeof payload.shopId === 'string'
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index 79ce7728..929afdc5 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -28,6 +28,7 @@ export type ShopifyAnalyticsProduct = {
 };
 
 export type ShopifyAppSources = keyof typeof ShopifyAppSource;
+export type AnalyticsEventNames = keyof typeof AnalyticsEventName;
 
 export type ShopifyCommonPayload = ClientBrowserParameters & {
   shopifyAppSource?: ShopifyAppSources;
@@ -49,8 +50,6 @@ export type ShopifyPageViewPayload = ShopifyCommonPayload & {
   searchString?: string;
 };
 
-export type AnalyticsEventNames = keyof typeof AnalyticsEventName;
-
 export type ShopifyPageView = {
   eventName: string;
   payload: ShopifyPageViewPayload;
@@ -70,6 +69,7 @@ export type ShopifyMonorailPayload = {
   products?: string[];
   [key: string]: unknown;
 };
+
 export type ShopifyAnalyticsPayload =
   | ShopifyPageViewPayload
   | ShopifyAddToCartPayload;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1ca2c254..1aef1e9c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -31,7 +31,7 @@ export type {
 export {createStorefrontClient} from './storefront-client.js';
 export {useMoney} from './useMoney.js';
 export {Video} from './Video.js';
-export {AnalyticsEventName, AnalyticsPageType} from './analytics-constants.js';
+export {AnalyticsEventName, AnalyticsPageType, ShopifyAppSource} from './analytics-constants.js';
 export type {
   ClientBrowserParameters,
   ShopifyPageViewPayload,
@@ -42,6 +42,5 @@ export type {
   ShopifyAnalytics,
   ShopifyAnalyticsProduct,
 } from './analytics-types.js';
-export {ShopifyCookies} from './ShopifyCookies.js';
 export {useShopifyCookies} from './useShopifyCookie.js';
 export {sendShopifyAnalytics, getClientBrowserParameters} from './analytics.js';

From 286319409a70c00a7348f3789384b7d06e1aca6a Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 11:41:01 -0800
Subject: [PATCH 35/58] ts clean up

---
 ...ustom-storefront-customer-tracking.test.ts | 24 +++++++------------
 ...chema-trekkie-storefront-page-view.test.ts |  8 +++----
 packages/react/src/parse-metafield.ts         |  2 +-
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index ef931123..311e8291 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -1,6 +1,6 @@
 import {expectType} from 'ts-expect';
 import {ShopifyAppSource} from './analytics-constants.js';
-import * as CustomStorefrontCustomerTracking from './analytics-schema-custom-storefront-customer-tracking.js';
+import {pageView, addToCart} from './analytics-schema-custom-storefront-customer-tracking.js';
 import {
   BASE_PAYLOAD,
   BASE_PRODUCT_PAYLOAD,
@@ -14,7 +14,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
   describe('page view', () => {
     it(`base payload with default values`, () => {
       const pageViewPayload = BASE_PAYLOAD;
-      const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+      const events = pageView(pageViewPayload);
 
       expectType<ShopifyMonorailPayload[]>(events);
       expect(events.length).toBe(1);
@@ -40,7 +40,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         resourceId: 'gid://shopify/Product/1',
         canonicalUrl: 'https://example.com',
       };
-      const events = CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+      const events = pageView(pageViewPayload);
 
       expectType<ShopifyMonorailPayload[]>(events);
       expect(events.length).toBe(1);
@@ -64,8 +64,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'collection',
           collectionHandle: 'test',
         };
-        const events =
-          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events = pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -92,8 +91,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'product',
           totalValue: 100,
         };
-        const events =
-          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events = pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -121,8 +119,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           products: [productPayload],
           totalValue: 100,
         };
-        const events =
-          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events = pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -167,8 +164,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           products: [productPayload],
           totalValue: 100,
         };
-        const events =
-          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events = pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -211,8 +207,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
           pageType: 'search',
           searchString: 'test',
         };
-        const events =
-          CustomStorefrontCustomerTracking.pageView(pageViewPayload);
+        const events = pageView(pageViewPayload);
 
         expectType<ShopifyMonorailPayload[]>(events);
         expect(events.length).toBe(2);
@@ -242,8 +237,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
         products: [productPayload],
         totalValue: 100,
       };
-      const events =
-        CustomStorefrontCustomerTracking.addToCart(addToCartPayload);
+      const events = addToCart(addToCartPayload);
 
       expectType<ShopifyMonorailPayload[]>(events);
       expect(events.length).toBe(1);
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
index 05bc0516..09c09711 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -1,13 +1,13 @@
 import {expectType} from 'ts-expect';
 import {ShopifyAppSource} from './analytics-constants.js';
-import * as TrekkieStorefrontPageView from './analytics-schema-trekkie-storefront-page-view.js';
+import {pageView} from './analytics-schema-trekkie-storefront-page-view.js';
 import {BASE_PAYLOAD} from './analytics-schema.test.helpers.js';
 import type {ShopifyMonorailPayload} from './analytics-types.js';
 
 describe(`analytics schema - trekkie storefront page view`, () => {
   it(`base payload with default values`, () => {
     const pageViewPayload = BASE_PAYLOAD;
-    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+    const events = pageView(pageViewPayload);
 
     expectType<ShopifyMonorailPayload[]>(events);
     expect(events.length).toBe(1);
@@ -40,7 +40,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       pageType: 'product',
       resourceId: 'gid://shopify/Product/1',
     };
-    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+    const events = pageView(pageViewPayload);
 
     expectType<ShopifyMonorailPayload[]>(events);
     expect(events.length).toBe(1);
@@ -70,7 +70,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       ...BASE_PAYLOAD,
       url: 'https://my-shop.myshopify.dev',
     };
-    const events = TrekkieStorefrontPageView.pageView(pageViewPayload);
+    const events = pageView(pageViewPayload);
 
     expectType<ShopifyMonorailPayload[]>(events);
     expect(events.length).toBe(1);
diff --git a/packages/react/src/parse-metafield.ts b/packages/react/src/parse-metafield.ts
index 27f22dee..27a13205 100644
--- a/packages/react/src/parse-metafield.ts
+++ b/packages/react/src/parse-metafield.ts
@@ -201,7 +201,7 @@ export const allMetafieldTypesArray = [
 ] as const;
 
 /** A union of all the supported `metafield.type`s */
-export type MetafieldTypeTypes = typeof allMetafieldTypesArray[number];
+export type MetafieldTypeTypes = (typeof allMetafieldTypesArray)[number];
 
 /**
  * A mapping of a Metafield's `type` to the TypeScript type that is returned from `parseMetafield()`

From 6ae58f0b91aa7c31df9fbbb3569ac94006f06671 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 11:58:50 -0800
Subject: [PATCH 36/58] more ts clean up

---
 apps/nextjs/pages/_app.tsx      | 13 +++++++------
 apps/nextjs/pages/product.tsx   | 20 +++++++++-----------
 packages/react/src/analytics.ts |  9 ++++++---
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index 0462bc55..ec6a76d3 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -24,7 +24,7 @@ export default function App({Component, pageProps}: AppProps) {
   const hasUserConsent = true;
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const analytics = {
+  const analytics: ShopifyPageViewPayload = {
     hasUserConsent,
     ...analyticsShopData,
     ...pageProps.analytics,
@@ -69,12 +69,13 @@ export default function App({Component, pageProps}: AppProps) {
   );
 }
 
-function sendPageView(analyticsPageData: Partial<ShopifyPageViewPayload>) {
+function sendPageView(analyticsPageData: ShopifyPageViewPayload) {
+  const payload: ShopifyPageViewPayload = {
+    ...getClientBrowserParameters(),
+    ...analyticsPageData,
+  };
   sendShopifyAnalytics({
     eventName: AnalyticsEventName.PAGE_VIEW,
-    payload: {
-      ...getClientBrowserParameters(),
-      ...analyticsPageData,
-    } as ShopifyPageViewPayload,
+    payload,
   });
 }
diff --git a/apps/nextjs/pages/product.tsx b/apps/nextjs/pages/product.tsx
index 36b39bb9..c9b46cd3 100644
--- a/apps/nextjs/pages/product.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -93,19 +93,17 @@ export default function Product({
         <button
           onClick={() => {
             if (analytics.products) {
-              const product = analytics.products[0];
+              const payload: ShopifyAddToCartPayload = {
+                ...getClientBrowserParameters(),
+                ...analytics,
+                products: [{
+                  ...analytics.products[0],
+                  quantity: 1,
+                }],
+              };
               sendShopifyAnalytics({
                 eventName: AnalyticsEventName.ADD_TO_CART,
-                payload: {
-                  ...getClientBrowserParameters(),
-                  ...analytics,
-                  products: [
-                    {
-                      ...product,
-                      quantity: 1,
-                    },
-                  ],
-                } as ShopifyAddToCartPayload,
+                payload,
               });
             }
           }}
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index a521597a..b15bd0fb 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -1,8 +1,10 @@
 import {SHOPIFY_S, SHOPIFY_Y} from './shared-constants.js';
 import type {
   ClientBrowserParameters,
+  ShopifyAddToCartPayload,
   ShopifyAnalytics,
   ShopifyMonorailPayload,
+  ShopifyPageViewPayload,
 } from './analytics-types.js';
 import {AnalyticsEventName} from './analytics-constants.js';
 import {errorIfServer} from './analytics-utils.js';
@@ -19,13 +21,14 @@ export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
 
   switch (eventName) {
     case AnalyticsEventName.PAGE_VIEW:
+      const pageViewPayload = payload as ShopifyPageViewPayload;
       events = events.concat(
-        trekkiePageView(payload),
-        customerPageView(payload)
+        trekkiePageView(pageViewPayload),
+        customerPageView(pageViewPayload)
       );
       break;
     case AnalyticsEventName.ADD_TO_CART:
-      events = events.concat(customerAddToCart(payload));
+      events = events.concat(customerAddToCart(payload as ShopifyAddToCartPayload));
       break;
   }
 

From 0b937f9b3522835f52e17fb5b7aed69c7d070ddc Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 14:02:21 -0800
Subject: [PATCH 37/58] more feedback

---
 apps/nextjs/pages/_app.tsx                    |  2 +-
 apps/nextjs/pages/product.tsx                 | 11 ++--
 ...ustom-storefront-customer-tracking.test.ts | 11 ++--
 ...ema-custom-storefront-customer-tracking.ts | 15 ++---
 ...chema-trekkie-storefront-page-view.test.ts |  6 +-
 ...ics-schema-trekkie-storefront-page-view.ts | 11 ++--
 .../src/analytics-schema.test.helpers.ts      |  2 +-
 packages/react/src/analytics-types.ts         | 10 +++-
 packages/react/src/analytics-utils.test.ts    | 40 ++++---------
 packages/react/src/analytics-utils.ts         | 29 +++++-----
 packages/react/src/analytics.ts               | 30 +++++-----
 packages/react/src/cart-hooks.tsx             |  7 +--
 packages/react/src/cookie-utils.test.ts       |  6 +-
 packages/react/src/index.ts                   |  6 +-
 packages/react/src/useShopifyCookie.tsx       |  7 ++-
 packages/react/src/useShopifyCookies.test.tsx | 58 ++++++-------------
 16 files changed, 109 insertions(+), 142 deletions(-)

diff --git a/apps/nextjs/pages/_app.tsx b/apps/nextjs/pages/_app.tsx
index ec6a76d3..5ff25a6d 100644
--- a/apps/nextjs/pages/_app.tsx
+++ b/apps/nextjs/pages/_app.tsx
@@ -13,7 +13,7 @@ import {useRouter} from 'next/router';
 import {useEffect} from 'react';
 
 const analyticsShopData = {
-  shopId: 55145660472,
+  shopId: 'gid://shopify/Shop/55145660472',
   currency: 'USD',
   acceptedLanguage: 'en',
 };
diff --git a/apps/nextjs/pages/product.tsx b/apps/nextjs/pages/product.tsx
index c9b46cd3..40b151fd 100644
--- a/apps/nextjs/pages/product.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -96,10 +96,13 @@ export default function Product({
               const payload: ShopifyAddToCartPayload = {
                 ...getClientBrowserParameters(),
                 ...analytics,
-                products: [{
-                  ...analytics.products[0],
-                  quantity: 1,
-                }],
+                cartId: 'abc123',
+                products: [
+                  {
+                    ...analytics.products[0],
+                    quantity: 1,
+                  },
+                ],
               };
               sendShopifyAnalytics({
                 eventName: AnalyticsEventName.ADD_TO_CART,
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
index 311e8291..530df0bc 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.test.ts
@@ -1,6 +1,9 @@
 import {expectType} from 'ts-expect';
 import {ShopifyAppSource} from './analytics-constants.js';
-import {pageView, addToCart} from './analytics-schema-custom-storefront-customer-tracking.js';
+import {
+  pageView,
+  addToCart,
+} from './analytics-schema-custom-storefront-customer-tracking.js';
 import {
   BASE_PAYLOAD,
   BASE_PRODUCT_PAYLOAD,
@@ -29,7 +32,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
     it(`base payload with non-default values`, () => {
       const pageViewPayload = {
         ...BASE_PAYLOAD,
-        shopId: 'gid://shopify/Shop/1',
+        shopId: 'gid://shopify/Shop/2',
         hasUserConsent: false,
         url: 'https://example.com/fr',
         shopifyAppSource: ShopifyAppSource.hydrogen,
@@ -47,7 +50,7 @@ describe(`analytics schema - custom storefront customer tracking`, () => {
       expect(events[0]).toEqual(
         getExpectedPayload(pageViewPayload, {
           source: 'hydrogen',
-          shop_id: 1,
+          shop_id: 2,
           event_name: 'page_rendered',
           hydrogenSubchannelId: '1',
           is_persistent_cookie: false,
@@ -282,6 +285,7 @@ function getExpectedPayload(
 
 function getForwardedPayload(initPayload: ShopifyAnalyticsPayload) {
   return {
+    shop_id: 1,
     source: 'headless',
     hydrogenSubchannelId: '0',
     is_persistent_cookie: true,
@@ -291,7 +295,6 @@ function getForwardedPayload(initPayload: ShopifyAnalyticsPayload) {
     event_time: expect.any(Number),
     event_source_url: initPayload.url,
     referrer: initPayload.referrer,
-    shop_id: initPayload.shopId,
     currency: initPayload.currency,
     ccpa_enforced: false,
     gdpr_enforced: false,
diff --git a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
index 66be9c92..5c356c0a 100644
--- a/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
+++ b/packages/react/src/analytics-schema-custom-storefront-customer-tracking.ts
@@ -4,6 +4,7 @@ import {
   ShopifyAddToCartPayload,
   ShopifyMonorailPayload,
   ShopifyAnalyticsProduct,
+  ShopifyMonorailEvent,
 } from './analytics-types.js';
 import {AnalyticsPageType, ShopifyAppSource} from './analytics-constants.js';
 import {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';
@@ -18,7 +19,7 @@ const SEARCH_SUBMITTED_EVENT_NAME = 'search_submitted';
 
 export function pageView(
   payload: ShopifyPageViewPayload
-): ShopifyMonorailPayload[] {
+): ShopifyMonorailEvent[] {
   const pageViewPayload = payload;
   const additionalPayload = {
     canonical_url: pageViewPayload.canonicalUrl || pageViewPayload.url,
@@ -94,7 +95,7 @@ export function pageView(
 
 export function addToCart(
   payload: ShopifyAddToCartPayload
-): ShopifyMonorailPayload[] {
+): ShopifyMonorailEvent[] {
   const addToCartPayload = payload;
   const cartToken = parseGid(addToCartPayload.cartId);
   const cart_token = cartToken?.id ? `${cartToken.id}` : null;
@@ -118,10 +119,6 @@ export function addToCart(
 function formatPayload(
   payload: ShopifyAnalyticsPayload
 ): ShopifyMonorailPayload {
-  const shop_id =
-    typeof payload.shopId === 'string'
-      ? parseGid(payload.shopId).id
-      : payload.shopId;
   return {
     source: payload.shopifyAppSource || ShopifyAppSource.headless,
     hydrogenSubchannelId: payload.storefrontId || '0',
@@ -139,7 +136,7 @@ function formatPayload(
     navigation_type: payload.navigationType,
     navigation_api: payload.navigationApi,
 
-    shop_id,
+    shop_id: parseInt(parseGid(payload.shopId).id),
     currency: payload.currency,
   };
 }
@@ -152,8 +149,8 @@ function formatProductPayload(products?: ShopifyAnalyticsProduct[]): string[] {
             variant_gid: p.variantGid,
             category: p.category,
             sku: p.sku,
-            product_id: parseGid(p.productGid).id,
-            variant_id: parseGid(p.variantGid).id,
+            product_id: parseInt(parseGid(p.productGid).id),
+            variant_id: parseInt(parseGid(p.variantGid).id),
           },
           {
             product_gid: p.productGid,
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
index 09c09711..0a5d15ee 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.test.ts
@@ -31,7 +31,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
     const pageViewPayload = {
       ...BASE_PAYLOAD,
       hasUserConsent: false,
-      shopId: 'gid://shopify/Shop/1',
+      shopId: 'gid://shopify/Shop/2',
       url: 'https://example.com',
       shopifyAppSource: ShopifyAppSource.hydrogen,
       storefrontId: '1',
@@ -48,7 +48,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
       schema_id: 'trekkie_storefront_page_view/1.4',
       payload: {
         ...getForwardedPayload(pageViewPayload),
-        shopId: 1,
+        shopId: 2,
         appClientId: '6167201',
         isMerchantRequest: false,
         hydrogenSubchannelId: '1',
@@ -93,6 +93,7 @@ describe(`analytics schema - trekkie storefront page view`, () => {
 
 export function getForwardedPayload(initPayload: ShopifyMonorailPayload) {
   return {
+    shopId: 1,
     uniqToken: initPayload.uniqueToken,
     visitToken: initPayload.visitToken,
     microSessionId: expect.any(String),
@@ -102,7 +103,6 @@ export function getForwardedPayload(initPayload: ShopifyMonorailPayload) {
     search: initPayload.search,
     referrer: initPayload.referrer,
     title: initPayload.title,
-    shopId: initPayload.shopId,
     currency: initPayload.currency,
   };
 }
diff --git a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
index 72737722..8ff67c97 100644
--- a/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
+++ b/packages/react/src/analytics-schema-trekkie-storefront-page-view.ts
@@ -1,6 +1,7 @@
 import {
   ShopifyPageViewPayload,
   ShopifyMonorailPayload,
+  ShopifyMonorailEvent,
 } from './analytics-types.js';
 import {ShopifyAppId} from './analytics-constants.js';
 import {addDataIf, schemaWrapper, parseGid} from './analytics-utils.js';
@@ -11,7 +12,7 @@ const OXYGEN_DOMAIN = 'myshopify.dev';
 
 export function pageView(
   payload: ShopifyPageViewPayload
-): ShopifyMonorailPayload[] {
+): ShopifyMonorailEvent[] {
   const pageViewPayload = payload;
   const {id, resource} = parseGid(pageViewPayload.resourceId);
   const resourceType = resource ? resource.toLowerCase() : undefined;
@@ -23,7 +24,7 @@ export function pageView(
           pageType: pageViewPayload.pageType,
           customerId: pageViewPayload.customerId,
           resourceType,
-          resourceId: id,
+          resourceId: parseInt(id),
         },
         formatPayload(pageViewPayload)
       )
@@ -34,10 +35,6 @@ export function pageView(
 function formatPayload(
   payload: ShopifyPageViewPayload
 ): ShopifyMonorailPayload {
-  const shopId =
-    typeof payload.shopId === 'string'
-      ? parseGid(payload.shopId).id
-      : payload.shopId;
   return {
     appClientId: payload.shopifyAppSource
       ? ShopifyAppId[payload.shopifyAppSource]
@@ -57,7 +54,7 @@ function formatPayload(
     referrer: payload.referrer,
     title: payload.title,
 
-    shopId,
+    shopId: parseInt(parseGid(payload.shopId).id),
     currency: payload.currency,
     contentLanguage: payload.acceptedLanguage || 'en',
   };
diff --git a/packages/react/src/analytics-schema.test.helpers.ts b/packages/react/src/analytics-schema.test.helpers.ts
index bcd352bf..0d937a45 100644
--- a/packages/react/src/analytics-schema.test.helpers.ts
+++ b/packages/react/src/analytics-schema.test.helpers.ts
@@ -2,7 +2,7 @@ import {faker} from '@faker-js/faker';
 
 export const BASE_PAYLOAD = {
   hasUserConsent: true,
-  shopId: 1,
+  shopId: 'gid://shopify/Shop/1',
   currency: 'USD',
   uniqueToken: faker.datatype.string(),
   visitToken: faker.datatype.string(),
diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index 929afdc5..ac6ef5d5 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -33,7 +33,7 @@ export type AnalyticsEventNames = keyof typeof AnalyticsEventName;
 export type ShopifyCommonPayload = ClientBrowserParameters & {
   shopifyAppSource?: ShopifyAppSources;
   hasUserConsent: boolean;
-  shopId: string | number;
+  shopId: string;
   currency: string;
   storefrontId?: string;
   acceptedLanguage?: string;
@@ -70,6 +70,14 @@ export type ShopifyMonorailPayload = {
   [key: string]: unknown;
 };
 
+export type ShopifyMonorailEvent = {
+  schema_id: string;
+  payload: ShopifyMonorailPayload;
+  metadata: {
+    event_created_at_ms: number;
+  };
+};
+
 export type ShopifyAnalyticsPayload =
   | ShopifyPageViewPayload
   | ShopifyAddToCartPayload;
diff --git a/packages/react/src/analytics-utils.test.ts b/packages/react/src/analytics-utils.test.ts
index c05f2d2e..0aaeb348 100644
--- a/packages/react/src/analytics-utils.test.ts
+++ b/packages/react/src/analytics-utils.test.ts
@@ -4,26 +4,26 @@ describe('analytic-utils', () => {
   describe('parseGid', () => {
     it('returns the id and resource type from a gid', () => {
       const {id, resource} = parseGid('gid://shopify/Order/123');
-      expect(id).toBe(123);
+      expect(id).toBe('123');
       expect(resource).toBe('Order');
     });
 
-    it('returns null if the gid is not a string', () => {
+    it('returns empty string if the gid is not a string', () => {
       //@ts-expect-error - testing invalid input
       const {id, resource} = parseGid(123);
-      expect(id).toBe(null);
+      expect(id).toBe('');
       expect(resource).toBe(null);
     });
 
-    it('returns null if the gid is not a valid gid', () => {
+    it('returns empty string if the gid is not a valid gid', () => {
       const {id, resource} = parseGid('gid://shopify/Order');
-      expect(id).toBe(null);
+      expect(id).toBe('');
       expect(resource).toBe(null);
     });
 
     it('returns the id and resource type from a gid with a query string', () => {
       const {id, resource} = parseGid('gid://shopify/Order/123?namespace=123');
-      expect(id).toBe(123);
+      expect(id).toBe('123');
       expect(resource).toBe('Order');
     });
 
@@ -31,13 +31,13 @@ describe('analytic-utils', () => {
       const {id, resource} = parseGid(
         'gid://shopify/Order/123?namespace=123#fragment'
       );
-      expect(id).toBe(123);
+      expect(id).toBe('123');
       expect(resource).toBe('Order');
     });
 
-    it('returns null if the resource is missing', () => {
+    it('returns empty string if the resource is missing', () => {
       const {id, resource} = parseGid('gid://shopify//123');
-      expect(id).toBe(null);
+      expect(id).toBe('');
       expect(resource).toBe(null);
     });
   });
@@ -74,7 +74,7 @@ describe('analytic-utils', () => {
   });
 
   describe('schemaWrapper', () => {
-    it('returns a Shopify Monorail payload from a Shopify Analytics payload and a schema ID', () => {
+    it('returns a Shopify Monorail event from a Shopify Monorail payload and a schema ID', () => {
       const payload = {foo: 'bar'};
       const schemaId = '123';
 
@@ -84,25 +84,5 @@ describe('analytic-utils', () => {
         metadata: {event_created_at_ms: expect.any(Number)},
       });
     });
-
-    it('throws an error if the schema ID is not a string', () => {
-      const payload = {foo: 'bar'};
-      const schemaId = 123;
-
-      //@ts-expect-error passing-and-invalid-type-for-testing
-      expect(() => schemaWrapper(schemaId, payload)).toThrow(
-        '`schemaId` must be a string'
-      );
-    });
-
-    it('throws an error if the payload is not an object', () => {
-      const payload = 'foo';
-      const schemaId = '123';
-
-      //@ts-expect-error passing-and-invalid-type-for-testing
-      expect(() => schemaWrapper(schemaId, payload)).toThrow(
-        '`payload` must be an object'
-      );
-    });
   });
 });
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 229c7a2e..22704280 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,18 +1,18 @@
-import type {ShopifyMonorailPayload} from './analytics-types.js';
+import type {
+  ShopifyMonorailPayload,
+  ShopifyMonorailEvent,
+} from './analytics-types.js';
 
 /**
- * Builds a Shopify Monorail payload from a Shopify Analytics payload and a schema ID.
- * @param payload - The payload to format
+ * Builds a Shopify Monorail event from a Shopify Monorail payload and a schema ID.
+ * @param payload - The Monorail payload
  * @param schemaId - The schema ID to use
  * @returns The formatted payload
  **/
-export function schemaWrapper(schemaId: string, payload: object) {
-  if (typeof schemaId !== 'string') {
-    throw new Error('`schemaId` must be a string');
-  }
-  if (typeof payload !== 'object' || payload === null) {
-    throw new Error('`payload` must be an object');
-  }
+export function schemaWrapper(
+  schemaId: string,
+  payload: ShopifyMonorailPayload
+): ShopifyMonorailEvent {
   return {
     schema_id: schemaId,
     payload,
@@ -38,16 +38,17 @@ export function schemaWrapper(schemaId: string, payload: object) {
  * ```
  **/
 export function parseGid(gid: string | undefined): {
-  id: string | number | null;
+  id: string;
   resource: string | null;
 } {
-  const defaultReturn = {id: null, resource: null};
+  const defaultReturn = {id: '', resource: null};
 
   if (typeof gid !== 'string') {
     return defaultReturn;
   }
 
   // TODO: add support for parsing query parameters on complex gids
+  // Reference: https://shopify.dev/api/usage/gids
   const matches = gid.match(/^gid:\/\/.hopify\/(\w+)\/([a-z0-9]+)/);
 
   if (!matches || matches.length === 1) {
@@ -56,10 +57,6 @@ export function parseGid(gid: string | undefined): {
   const id = matches[2] ?? null;
   const resource = matches[1] ?? null;
 
-  // if id is of only numbers, return as an integer
-  if (id && /^\d+$/.test(id)) {
-    return {id: parseInt(id, 10), resource};
-  }
   return {id, resource};
 }
 
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index b15bd0fb..944d62fb 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -3,8 +3,8 @@ import type {
   ClientBrowserParameters,
   ShopifyAddToCartPayload,
   ShopifyAnalytics,
-  ShopifyMonorailPayload,
   ShopifyPageViewPayload,
+  ShopifyMonorailEvent,
 } from './analytics-types.js';
 import {AnalyticsEventName} from './analytics-constants.js';
 import {errorIfServer} from './analytics-utils.js';
@@ -17,19 +17,18 @@ import {
 } from './analytics-schema-custom-storefront-customer-tracking.js';
 
 export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
-  let events: ShopifyMonorailPayload[] = [];
-
-  switch (eventName) {
-    case AnalyticsEventName.PAGE_VIEW:
-      const pageViewPayload = payload as ShopifyPageViewPayload;
-      events = events.concat(
-        trekkiePageView(pageViewPayload),
-        customerPageView(pageViewPayload)
-      );
-      break;
-    case AnalyticsEventName.ADD_TO_CART:
-      events = events.concat(customerAddToCart(payload as ShopifyAddToCartPayload));
-      break;
+  let events: ShopifyMonorailEvent[] = [];
+
+  if (eventName === AnalyticsEventName.PAGE_VIEW) {
+    const pageViewPayload = payload as ShopifyPageViewPayload;
+    events = events.concat(
+      trekkiePageView(pageViewPayload),
+      customerPageView(pageViewPayload)
+    );
+  } else if (eventName === AnalyticsEventName.ADD_TO_CART) {
+    events = events.concat(
+      customerAddToCart(payload as ShopifyAddToCartPayload)
+    );
   }
 
   return sendToShopify(events);
@@ -42,7 +41,7 @@ type MonorailResponse = {
 
 const ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';
 
-function sendToShopify(events: ShopifyMonorailPayload[]) {
+function sendToShopify(events: ShopifyMonorailEvent[]): Promise<void> {
   const eventsToBeSent = {
     events,
     metadata: {
@@ -77,6 +76,7 @@ function sendToShopify(events: ShopifyMonorailPayload[]) {
       });
   } catch (error) {
     // Do nothing
+    return Promise.resolve();
   }
 }
 
diff --git a/packages/react/src/cart-hooks.tsx b/packages/react/src/cart-hooks.tsx
index a9945f06..9a50c346 100644
--- a/packages/react/src/cart-hooks.tsx
+++ b/packages/react/src/cart-hooks.tsx
@@ -9,12 +9,9 @@ import {
   SHOPIFY_STOREFRONT_Y_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
 } from './cart-constants.js';
-import {
-  SHOPIFY_Y,
-  SHOPIFY_S,
-} from './shared-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
 import type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';
-import { getShopifyCookies } from './cookies-utils.js';
+import {getShopifyCookies} from './cookies-utils.js';
 
 export function useCartFetch() {
   const {storefrontId, getPublicTokenHeaders, getStorefrontApiUrl} = useShop();
diff --git a/packages/react/src/cookie-utils.test.ts b/packages/react/src/cookie-utils.test.ts
index bb860834..ab8fc30f 100644
--- a/packages/react/src/cookie-utils.test.ts
+++ b/packages/react/src/cookie-utils.test.ts
@@ -1,8 +1,4 @@
-import {
-  buildUUID,
-  hexTime,
-  getShopifyCookies,
-} from './cookies-utils.js';
+import {buildUUID, hexTime, getShopifyCookies} from './cookies-utils.js';
 import {ShopifyCookies} from './analytics-types.js';
 
 describe('cookies-utils', () => {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1aef1e9c..263a14e6 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -31,7 +31,11 @@ export type {
 export {createStorefrontClient} from './storefront-client.js';
 export {useMoney} from './useMoney.js';
 export {Video} from './Video.js';
-export {AnalyticsEventName, AnalyticsPageType, ShopifyAppSource} from './analytics-constants.js';
+export {
+  AnalyticsEventName,
+  AnalyticsPageType,
+  ShopifyAppSource,
+} from './analytics-constants.js';
 export type {
   ClientBrowserParameters,
   ShopifyPageViewPayload,
diff --git a/packages/react/src/useShopifyCookie.tsx b/packages/react/src/useShopifyCookie.tsx
index 72653c45..c0e3267a 100644
--- a/packages/react/src/useShopifyCookie.tsx
+++ b/packages/react/src/useShopifyCookie.tsx
@@ -40,7 +40,12 @@ export function useShopifyCookies(hasUserConsent = false, domain = ''): void {
   });
 }
 
-function setCookie(name: string, value: string, maxage: number, domain: string): void {
+function setCookie(
+  name: string,
+  value: string,
+  maxage: number,
+  domain: string
+): void {
   document.cookie = stringify(name, value, {
     maxage,
     domain,
diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
index 804207b5..45aef213 100644
--- a/packages/react/src/useShopifyCookies.test.tsx
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -5,84 +5,64 @@ import {useShopifyCookies} from './useShopifyCookie.js';
 
 describe(`useShopifyCookies`, () => {
   afterEach(() => {
-    /* eslint-disable no-global-assign */
-    // clear the cookies
     document.cookie = '_shopify_y=1; expires=1 Jan 1970 00:00:00 GMT;';
     document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
-    /* eslint-enable no-global-assign */
   });
 
   it('sets _shopify_s and _shopify_y cookies when not found', () => {
     let cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
-      '_shopify_s': '',
-      '_shopify_y': '',
-    })
+      _shopify_s: '',
+      _shopify_y: '',
+    });
 
-    renderHook(() =>
-      useShopifyCookies()
-    );
+    renderHook(() => useShopifyCookies());
 
     cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
-      '_shopify_s': expect.any(String),
-      '_shopify_y': expect.any(String),
-    })
+      _shopify_s: expect.any(String),
+      _shopify_y: expect.any(String),
+    });
   });
 
   it('does not override cookies when it already exists', () => {
-    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
-    // @ts-ignore
     document.cookie = '_shopify_s=abc123';
     document.cookie = '_shopify_y=def456';
-    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
-    renderHook(() =>
-      useShopifyCookies()
-    );
+    renderHook(() => useShopifyCookies());
 
     const cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
-      '_shopify_s': 'abc123',
-      '_shopify_y': 'def456',
-    })
+      _shopify_s: 'abc123',
+      _shopify_y: 'def456',
+    });
   });
 
   it('sets new cookie if either cookie is missing', () => {
-    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
-    // @ts-ignore
     document.cookie = '_shopify_s=abc123';
-    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
-    renderHook(() =>
-      useShopifyCookies()
-    );
+    renderHook(() => useShopifyCookies());
 
     let cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
-      '_shopify_s': 'abc123',
-      '_shopify_y': expect.any(String),
-    })
+      _shopify_s: 'abc123',
+      _shopify_y: expect.any(String),
+    });
 
-    /* eslint-disable @typescript-eslint/ban-ts-comment, no-global-assign */
-    // @ts-ignore
     document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
     document.cookie = '_shopify_y=def456';
-    /* eslint-enable @typescript-eslint/ban-ts-comment, no-global-assign */
 
-    renderHook(() =>
-      useShopifyCookies()
-    );
+    renderHook(() => useShopifyCookies());
 
     cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
-      '_shopify_s': expect.any(String),
-      '_shopify_y': 'def456',
-    })
+      _shopify_s: expect.any(String),
+      _shopify_y: 'def456',
+    });
   });
 });

From d63cc4fc93357a1b7c1b7444841ea67644aabf41 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 14:24:37 -0800
Subject: [PATCH 38/58] update ShopPayButton

---
 packages/react/src/ShopPayButton.test.tsx | 23 +++++++++++++++--------
 packages/react/src/ShopPayButton.tsx      | 21 ++++++++++-----------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/ShopPayButton.test.tsx b/packages/react/src/ShopPayButton.test.tsx
index 29afc804..ae0d3aa3 100644
--- a/packages/react/src/ShopPayButton.test.tsx
+++ b/packages/react/src/ShopPayButton.test.tsx
@@ -3,9 +3,9 @@ import {render} from '@testing-library/react';
 import {ShopifyProvider} from './ShopifyProvider.js';
 import {
   ShopPayButton,
-  getIdFromGid,
   DoublePropsErrorMessage,
   MissingPropsErrorMessage,
+  InvalidPropsErrorMessage,
 } from './ShopPayButton.js';
 import {getShopifyConfig} from './ShopifyProvider.test.js';
 
@@ -48,7 +48,7 @@ describe(`<ShopPayButton />`, () => {
   });
 
   it(`creates the correct attribute when using 'variantIds'`, () => {
-    const fakeId = '123';
+    const fakeId = 'gid://shopify/ProductVariant/123';
     const {container} = render(<ShopPayButton variantIds={[fakeId]} />, {
       wrapper: ({children}) => (
         <ShopifyProvider shopifyConfig={getShopifyConfig()}>
@@ -67,7 +67,7 @@ describe(`<ShopPayButton />`, () => {
   });
 
   it(`creates the correct attribute when using 'variantIdsAndQuantities'`, () => {
-    const fakeId = '123';
+    const fakeId = 'gid://shopify/ProductVariant/123';
     const fakeQuantity = 2;
     const {container} = render(
       <ShopPayButton
@@ -95,7 +95,7 @@ describe(`<ShopPayButton />`, () => {
     const {container} = render(
       <ShopPayButton
         width="100%"
-        variantIdsAndQuantities={[{id: '123', quantity: 2}]}
+        variantIdsAndQuantities={[{id: 'gid://shopify/ProductVariant/123', quantity: 2}]}
       />,
       {
         wrapper: ({children}) => (
@@ -112,9 +112,16 @@ describe(`<ShopPayButton />`, () => {
     );
   });
 
-  describe(`getIdFromGid`, () => {
-    it(`should handle undefined`, () => {
-      expect(getIdFromGid()).toBe(undefined);
-    });
+  it(`throws error if invalid 'variantIds' is supplied`, () => {
+    const fakeId = '123';
+    expect(() =>
+      render(<ShopPayButton variantIds={[fakeId]} />, {
+        wrapper: ({children}) => (
+          <ShopifyProvider shopifyConfig={getShopifyConfig()}>
+            {children}
+          </ShopifyProvider>
+        ),
+      })
+    ).toThrow(InvalidPropsErrorMessage);
   });
 });
diff --git a/packages/react/src/ShopPayButton.tsx b/packages/react/src/ShopPayButton.tsx
index 203badfa..a9f029af 100644
--- a/packages/react/src/ShopPayButton.tsx
+++ b/packages/react/src/ShopPayButton.tsx
@@ -1,5 +1,6 @@
 import {useShop} from './ShopifyProvider.js';
 import {useLoadScript} from './load-script.js';
+import {parseGid} from './analytics-utils.js';
 
 // By using 'never' in the "or" cases below, it makes these props "exclusive" and means that you cannot pass both of them; you must pass either one OR the other.
 type ShopPayButtonProps = {
@@ -54,7 +55,7 @@ export function ShopPayButton({
   const {storeDomain} = useShop();
   const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
 
-  let ids: string[];
+  let ids: string[] = [];
 
   if (variantIds && variantIdsAndQuantities) {
     throw new Error(DoublePropsErrorMessage);
@@ -62,7 +63,8 @@ export function ShopPayButton({
 
   if (variantIds) {
     ids = variantIds.reduce<string[]>((prev, curr) => {
-      const bareId = getIdFromGid(curr);
+      const bareId = parseGid(curr).id;
+      console.log(bareId);
       if (bareId) {
         prev.push(bareId);
       }
@@ -70,7 +72,7 @@ export function ShopPayButton({
     }, []);
   } else if (variantIdsAndQuantities) {
     ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {
-      const bareId = getIdFromGid(curr?.id);
+      const bareId = parseGid(curr?.id).id;
       if (bareId) {
         prev.push(`${bareId}:${curr?.quantity ?? 1}`);
       }
@@ -80,6 +82,10 @@ export function ShopPayButton({
     throw new Error(MissingPropsErrorMessage);
   }
 
+  if (ids.length === 0) {
+    throw new Error(InvalidPropsErrorMessage);
+  }
+
   const style = width
     ? ({
         '--shop-pay-button-width': width,
@@ -95,13 +101,6 @@ export function ShopPayButton({
   );
 }
 
-/**
- * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
- */
-export function getIdFromGid(id?: string) {
-  if (!id) return;
-  return id.split('/').pop();
-}
-
+export const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
 export const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
 export const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;

From 53ba30350fadb54b0f1c9cefa7c6856a1c054413 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 14:59:04 -0800
Subject: [PATCH 39/58] make sure monorail endpoint can be updated to the shop
 domain alternative

---
 packages/react/src/analytics.test.ts | 30 ++++++++++++++++++++++++++--
 packages/react/src/analytics.ts      | 13 ++++++++----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index e368d7af..81a908f6 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -5,13 +5,20 @@ import {getClientBrowserParameters, sendShopifyAnalytics} from './analytics.js';
 
 const MONORAIL_ENDPOINT =
   'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
-const createFetchSpy = ({expectEventCounts}: {expectEventCounts: number}) => {
+const getShopDomainMonorailEndpoint = (shopDomain = '') => {
+  return `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
+}
+const createFetchSpy = ({expectEventCounts, shopDomain}: {
+  expectEventCounts: number;
+  shopDomain?: string
+}) => {
   const mockFetch = async (
     input: RequestInfo | URL,
     init?: RequestInit
   ): Promise<Response> => {
     // Mock Monorail endpoint
-    if (input === MONORAIL_ENDPOINT) {
+    const shopDomainMonorailEndpoint = getShopDomainMonorailEndpoint(shopDomain);
+    if (input === MONORAIL_ENDPOINT || input === shopDomainMonorailEndpoint) {
       if (init?.body) {
         const reqData = await init.body.toString();
         const data = JSON.parse(reqData || '{}');
@@ -140,6 +147,25 @@ describe('analytics', () => {
       expect(fetchSpy).toHaveBeenCalled();
       expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
+
+    it('with a page view event to a shop monorail endpoint', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const shopDomain = 'my-shop.myshopify.com';
+      const fetchSpy = createFetchSpy({
+        expectEventCounts: 2,
+        shopDomain,
+      });
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.PAGE_VIEW,
+        payload: {
+          ...BASE_PAYLOAD,
+        }
+      }, shopDomain);
+
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe('getClientBrowserParameters', () => {
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 944d62fb..ce72122a 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -16,7 +16,7 @@ import {
   addToCart as customerAddToCart,
 } from './analytics-schema-custom-storefront-customer-tracking.js';
 
-export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
+export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics, shopDomain?: string) {
   let events: ShopifyMonorailEvent[] = [];
 
   if (eventName === AnalyticsEventName.PAGE_VIEW) {
@@ -31,7 +31,7 @@ export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics) {
     );
   }
 
-  return sendToShopify(events);
+  return sendToShopify(events, shopDomain);
 }
 
 type MonorailResponse = {
@@ -41,7 +41,10 @@ type MonorailResponse = {
 
 const ERROR_MESSAGE = 'sendShopifyAnalytics request is unsuccessful';
 
-function sendToShopify(events: ShopifyMonorailEvent[]): Promise<void> {
+function sendToShopify(
+  events: ShopifyMonorailEvent[],
+  shopDomain?: string
+): Promise<void> {
   const eventsToBeSent = {
     events,
     metadata: {
@@ -51,7 +54,9 @@ function sendToShopify(events: ShopifyMonorailEvent[]): Promise<void> {
 
   try {
     return fetch(
-      'https://monorail-edge.shopifysvc.com/unstable/produce_batch',
+      shopDomain
+      ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
+      : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',
       {
         method: 'post',
         headers: {

From 6dc00b2e79791fe051b55315631e03e9ce7f1201 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 15:19:07 -0800
Subject: [PATCH 40/58] mock failed response

---
 packages/react/src/analytics.test.ts | 38 ++++++++++++++++++++++++++--
 packages/react/src/analytics.ts      |  7 ++++-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 81a908f6..5406b0a8 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -8,9 +8,10 @@ const MONORAIL_ENDPOINT =
 const getShopDomainMonorailEndpoint = (shopDomain = '') => {
   return `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
 }
-const createFetchSpy = ({expectEventCounts, shopDomain}: {
+const createFetchSpy = ({expectEventCounts, shopDomain, failResponse}: {
   expectEventCounts: number;
-  shopDomain?: string
+  shopDomain?: string;
+  failResponse?: boolean;
 }) => {
   const mockFetch = async (
     input: RequestInfo | URL,
@@ -27,6 +28,16 @@ const createFetchSpy = ({expectEventCounts, shopDomain}: {
         // spy function on console.error
         expect(data.events.length).toEqual(expectEventCounts);
 
+        if(failResponse) {
+          return new Promise((resolve) => {
+            resolve(
+              new Response('', {
+                status: 400,
+              })
+            );
+          });
+        }
+
         // Mock Monorail returning a multi-status response
         if (!data.events[0].payload.shopId && !data.events[0].payload.shop_id) {
           return new Promise((resolve) => {
@@ -166,6 +177,29 @@ describe('analytics', () => {
       expect(fetchSpy).toHaveBeenCalled();
       expect(consoleErrorSpy).not.toHaveBeenCalled();
     });
+
+    it('with a failed response', async () => {
+      const consoleErrorSpy = createConsoleErrorSpy();
+      const fetchSpy = createFetchSpy({
+        expectEventCounts: 2,
+        failResponse: true,
+      });
+
+      await sendShopifyAnalytics({
+        eventName: AnalyticsEventName.PAGE_VIEW,
+        payload: {
+          ...BASE_PAYLOAD,
+        }
+      });
+
+      expect(fetchSpy).toHaveBeenCalled();
+      expect(consoleErrorSpy.mock.calls[0][0]).toBe(
+        'sendShopifyAnalytics request is unsuccessful'
+      );
+      expect(consoleErrorSpy.mock.calls[0][1].toString()).toContain(
+        'Error: Response failed'
+      );
+    });
   });
 
   describe('getClientBrowserParameters', () => {
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index ce72122a..ace0e4c2 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -65,7 +65,12 @@ function sendToShopify(
         body: JSON.stringify(eventsToBeSent),
       }
     )
-      .then((response) => response.text())
+      .then((response) => {
+        if(!response.ok) {
+          throw new Error('Response failed');
+        }
+        return response.text();
+      })
       .then((data) => {
         if (data) {
           const jsonResponse = JSON.parse(data);

From 352e7e0822b1f205f47931d92bb8dae476d0addd Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 15:46:52 -0800
Subject: [PATCH 41/58] add doc

---
 packages/react/src/analytics.ts | 36 +++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index ace0e4c2..421250a3 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -16,6 +16,28 @@ import {
   addToCart as customerAddToCart,
 } from './analytics-schema-custom-storefront-customer-tracking.js';
 
+/**
+ * Sends analytics to Shopify
+ * @param eventName - Type of analytics event
+ * @param payload - The payload of the analytics event
+ * @param shopDomain - Defaults to Shopify's analytics endpoint.
+ * Supply the Online Store domain so that Shopify analytics can be sent under
+ * the same top level domain. (You don't need to set this if you are sending
+ * from the server side)
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   sendShopifyAnalytics,
+ *   AnalyticsEventName,
+ * } from '@shopify/hydrogen-react';
+ *
+ * sendShopifyAnalytics({
+ *   eventName: AnalyticsEventName.PAGE_VIEW,
+ *   payload,
+ * }, 'my-shop.myshopify.com');
+ * ```
+ **/
 export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics, shopDomain?: string) {
   let events: ShopifyMonorailEvent[] = [];
 
@@ -90,6 +112,20 @@ function sendToShopify(
   }
 }
 
+/**
+ * Gathers client browser values commonly used for analytics
+ * @returns Empty object if executed on server
+ * Otherwise:
+ *   - uniqueToken: Shopify unique user token
+ *   - visitToken: Shopify session token
+ *   - url: location.href
+ *   - path: location.pathname
+ *   - search: location.search
+ *   - referrer: document.referrer
+ *   - userAgent: navigator.userAgent
+ *   - navigationType: 'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown <number>'
+ *   - navigationApi: 'PerformanceNavigationTiming' | 'performance.navigation'
+ **/
 export function getClientBrowserParameters():
   | ClientBrowserParameters
   | Record<string, never> {

From d7c0fd1104b708779e63ed03f93d6da36b5d53e5 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 16:09:29 -0800
Subject: [PATCH 42/58] prettier

---
 packages/react/src/ShopPayButton.test.tsx |  4 ++-
 packages/react/src/analytics.test.ts      | 32 ++++++++++++++---------
 packages/react/src/analytics.ts           | 11 +++++---
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/ShopPayButton.test.tsx b/packages/react/src/ShopPayButton.test.tsx
index ae0d3aa3..4643fae3 100644
--- a/packages/react/src/ShopPayButton.test.tsx
+++ b/packages/react/src/ShopPayButton.test.tsx
@@ -95,7 +95,9 @@ describe(`<ShopPayButton />`, () => {
     const {container} = render(
       <ShopPayButton
         width="100%"
-        variantIdsAndQuantities={[{id: 'gid://shopify/ProductVariant/123', quantity: 2}]}
+        variantIdsAndQuantities={[
+          {id: 'gid://shopify/ProductVariant/123', quantity: 2},
+        ]}
       />,
       {
         wrapper: ({children}) => (
diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index 5406b0a8..e4206395 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -6,9 +6,13 @@ import {getClientBrowserParameters, sendShopifyAnalytics} from './analytics.js';
 const MONORAIL_ENDPOINT =
   'https://monorail-edge.shopifysvc.com/unstable/produce_batch';
 const getShopDomainMonorailEndpoint = (shopDomain = '') => {
-  return `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
-}
-const createFetchSpy = ({expectEventCounts, shopDomain, failResponse}: {
+  return `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`;
+};
+const createFetchSpy = ({
+  expectEventCounts,
+  shopDomain,
+  failResponse,
+}: {
   expectEventCounts: number;
   shopDomain?: string;
   failResponse?: boolean;
@@ -18,7 +22,8 @@ const createFetchSpy = ({expectEventCounts, shopDomain, failResponse}: {
     init?: RequestInit
   ): Promise<Response> => {
     // Mock Monorail endpoint
-    const shopDomainMonorailEndpoint = getShopDomainMonorailEndpoint(shopDomain);
+    const shopDomainMonorailEndpoint =
+      getShopDomainMonorailEndpoint(shopDomain);
     if (input === MONORAIL_ENDPOINT || input === shopDomainMonorailEndpoint) {
       if (init?.body) {
         const reqData = await init.body.toString();
@@ -28,7 +33,7 @@ const createFetchSpy = ({expectEventCounts, shopDomain, failResponse}: {
         // spy function on console.error
         expect(data.events.length).toEqual(expectEventCounts);
 
-        if(failResponse) {
+        if (failResponse) {
           return new Promise((resolve) => {
             resolve(
               new Response('', {
@@ -167,12 +172,15 @@ describe('analytics', () => {
         shopDomain,
       });
 
-      await sendShopifyAnalytics({
-        eventName: AnalyticsEventName.PAGE_VIEW,
-        payload: {
-          ...BASE_PAYLOAD,
-        }
-      }, shopDomain);
+      await sendShopifyAnalytics(
+        {
+          eventName: AnalyticsEventName.PAGE_VIEW,
+          payload: {
+            ...BASE_PAYLOAD,
+          },
+        },
+        shopDomain
+      );
 
       expect(fetchSpy).toHaveBeenCalled();
       expect(consoleErrorSpy).not.toHaveBeenCalled();
@@ -189,7 +197,7 @@ describe('analytics', () => {
         eventName: AnalyticsEventName.PAGE_VIEW,
         payload: {
           ...BASE_PAYLOAD,
-        }
+        },
       });
 
       expect(fetchSpy).toHaveBeenCalled();
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 421250a3..12f64a4a 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -38,7 +38,10 @@ import {
  * }, 'my-shop.myshopify.com');
  * ```
  **/
-export function sendShopifyAnalytics({eventName, payload}: ShopifyAnalytics, shopDomain?: string) {
+export function sendShopifyAnalytics(
+  {eventName, payload}: ShopifyAnalytics,
+  shopDomain?: string
+) {
   let events: ShopifyMonorailEvent[] = [];
 
   if (eventName === AnalyticsEventName.PAGE_VIEW) {
@@ -77,8 +80,8 @@ function sendToShopify(
   try {
     return fetch(
       shopDomain
-      ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
-      : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',
+        ? `https://${shopDomain}/.well-known/shopify/monorail/unstable/produce_batch`
+        : 'https://monorail-edge.shopifysvc.com/unstable/produce_batch',
       {
         method: 'post',
         headers: {
@@ -88,7 +91,7 @@ function sendToShopify(
       }
     )
       .then((response) => {
-        if(!response.ok) {
+        if (!response.ok) {
           throw new Error('Response failed');
         }
         return response.text();

From 21f398c65e5131842e1dd4d85274d7ec1c88dc5c Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Mon, 16 Jan 2023 16:29:33 -0800
Subject: [PATCH 43/58] ci browser different?

---
 packages/react/src/analytics.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index e4206395..e9a9f500 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -242,7 +242,7 @@ describe('analytics', () => {
         uniqueToken: 'abc123',
         visitToken: 'def456',
         url: expect.any(String),
-        path: '',
+        path: expect.any(String),
         search: '',
         referrer: 'https://www.example.com',
         title: 'test',

From 5f053f59aeac021f62a60d597499478f1579972e Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 10:01:38 -0800
Subject: [PATCH 44/58] return explicit type

---
 packages/react/src/analytics-types.ts | 5 +++++
 packages/react/src/analytics-utils.ts | 9 +++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index ac6ef5d5..c4d7cdb5 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -87,3 +87,8 @@ export type ShopifyCookies = {
   [SHOPIFY_Y]: string;
   [SHOPIFY_S]: string;
 };
+
+export type ShopifyGId = {
+  id: string;
+  resource: string | null;
+}
diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index 22704280..b3b1c0a8 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -1,6 +1,7 @@
 import type {
   ShopifyMonorailPayload,
   ShopifyMonorailEvent,
+  ShopifyGId,
 } from './analytics-types.js';
 
 /**
@@ -26,21 +27,17 @@ export function schemaWrapper(
  * Parses global id (gid) and returns the resource type and id.
  * @see https://shopify.dev/api/usage/gids
  * @param gid - A shopify GID (string)
- * @returns \{ id: string | number | null, resource: string| null \}
  *
  * @example
  * ```ts
  * const {id, resource} = parseGid('gid://shopify/Order/123')
- * // => id = 123, resource = 'Order'
+ * // => id = "123", resource = 'Order'
  *
  *  * const {id, resource} = parseGid('gid://shopify/Cart/abc123')
  * // => id = "abc123", resource = 'Cart'
  * ```
  **/
-export function parseGid(gid: string | undefined): {
-  id: string;
-  resource: string | null;
-} {
+export function parseGid(gid: string | undefined): ShopifyGId {
   const defaultReturn = {id: '', resource: null};
 
   if (typeof gid !== 'string') {

From 2881f28c3e961cb7117cce43b4a6a126f39fe280 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 10:16:45 -0800
Subject: [PATCH 45/58] see if this works

---
 packages/react/src/useShopifyCookies.test.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
index 45aef213..5068fae3 100644
--- a/packages/react/src/useShopifyCookies.test.tsx
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -3,10 +3,13 @@ import {renderHook} from '@testing-library/react';
 import {getShopifyCookies} from './cookies-utils.js';
 import {useShopifyCookies} from './useShopifyCookie.js';
 
+const originalDocument = document;
+
 describe(`useShopifyCookies`, () => {
   afterEach(() => {
-    document.cookie = '_shopify_y=1; expires=1 Jan 1970 00:00:00 GMT;';
-    document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
+    /* eslint-disable no-global-assign */
+    document = originalDocument;
+    /* eslint-enable no-global-assign */
   });
 
   it('sets _shopify_s and _shopify_y cookies when not found', () => {
@@ -28,10 +31,12 @@ describe(`useShopifyCookies`, () => {
   });
 
   it('does not override cookies when it already exists', () => {
-    document.cookie = '_shopify_s=abc123';
-    document.cookie = '_shopify_y=def456';
+    renderHook(() => {
+      document.cookie = '_shopify_s=abc123';
+      document.cookie = '_shopify_y=def456';
 
-    renderHook(() => useShopifyCookies());
+      useShopifyCookies();
+    });
 
     const cookies = getShopifyCookies(document.cookie);
 

From b44ae425736abb3d1685d9704166ec3598dd47a2 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 10:22:58 -0800
Subject: [PATCH 46/58] fix type prettier

---
 packages/react/src/analytics-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index c4d7cdb5..1aefc709 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -91,4 +91,4 @@ export type ShopifyCookies = {
 export type ShopifyGId = {
   id: string;
   resource: string | null;
-}
+};

From 137394359b2d7fb93d73f267a2d8994f43ac7282 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 10:28:23 -0800
Subject: [PATCH 47/58] fix package path

---
 apps/nextjs/pages/collection.tsx | 2 +-
 apps/nextjs/pages/product.tsx    | 2 +-
 apps/nextjs/pages/search.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/pages/collection.tsx b/apps/nextjs/pages/collection.tsx
index 0e86bd13..ac4d1304 100644
--- a/apps/nextjs/pages/collection.tsx
+++ b/apps/nextjs/pages/collection.tsx
@@ -10,7 +10,7 @@ import {
   type StorefrontApiResponseOk,
   useShop,
   AnalyticsPageType,
-} from '@shopify/hydrogen-react';
+} from '@shopify/storefront-kit-react';
 import Link from 'next/link';
 
 export const getServerSideProps: GetServerSideProps = async () => {
diff --git a/apps/nextjs/pages/product.tsx b/apps/nextjs/pages/product.tsx
index 40b151fd..159fae26 100644
--- a/apps/nextjs/pages/product.tsx
+++ b/apps/nextjs/pages/product.tsx
@@ -16,7 +16,7 @@ import {
   type ShopifyAddToCartPayload,
   ShopifyAnalyticsProduct,
   ShopifyAnalyticsPayload,
-} from '@shopify/hydrogen-react';
+} from '@shopify/storefront-kit-react';
 import Link from 'next/link';
 
 export const getServerSideProps: GetServerSideProps = async () => {
diff --git a/apps/nextjs/pages/search.tsx b/apps/nextjs/pages/search.tsx
index 15a4a6d9..c4fb5980 100644
--- a/apps/nextjs/pages/search.tsx
+++ b/apps/nextjs/pages/search.tsx
@@ -10,7 +10,7 @@ import {
   type StorefrontApiResponseOk,
   useShop,
   AnalyticsPageType,
-} from '@shopify/hydrogen-react';
+} from '@shopify/storefront-kit-react';
 import Link from 'next/link';
 
 export const getServerSideProps: GetServerSideProps = async () => {

From 1240e4f8a050d9148be8426dee23fda3fd753bb5 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 12:30:30 -0800
Subject: [PATCH 48/58] full cookie test

---
 packages/react/src/useShopifyCookies.test.tsx | 114 ++++++++++++++++--
 1 file changed, 104 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
index 5068fae3..1f6948ab 100644
--- a/packages/react/src/useShopifyCookies.test.tsx
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -2,17 +2,53 @@ import {afterEach} from 'vitest';
 import {renderHook} from '@testing-library/react';
 import {getShopifyCookies} from './cookies-utils.js';
 import {useShopifyCookies} from './useShopifyCookie.js';
-
-const originalDocument = document;
+import {parse} from 'worktop/cookie';
+
+type MockCookieJar = Record<string, {
+  maxage: number | undefined;
+  samesite: string | undefined;
+  path: string | undefined;
+  domain: string | undefined;
+  value: string;
+}>;
+
+function mockCookie(): MockCookieJar {
+  const cookieJar: MockCookieJar = {};
+
+  vi.spyOn(document, 'cookie', 'get').mockImplementation(() => {
+    let docCookie = '';
+    Object.keys(cookieJar).forEach((key: string) => {
+      docCookie += `${key}=${cookieJar[key].value};`;
+    });
+    return docCookie;
+  })
+
+  vi.spyOn(document, 'cookie', 'set').mockImplementation((cookieString: string) => {
+    const {domain, maxage, path, samesite, ...cookieKeyValuePair} = parse(cookieString);
+    const cookieName = Object.keys(cookieKeyValuePair)[0];
+
+    if(maxage) {
+      cookieJar[cookieName] = {
+        value: cookieKeyValuePair[cookieName],
+        maxage,
+        path,
+        samesite,
+        domain,
+      };
+    } else {
+      delete cookieJar[cookieName];
+    }
+  })
+  return cookieJar;
+}
 
 describe(`useShopifyCookies`, () => {
   afterEach(() => {
-    /* eslint-disable no-global-assign */
-    document = originalDocument;
-    /* eslint-enable no-global-assign */
+    vi.restoreAllMocks();
   });
 
   it('sets _shopify_s and _shopify_y cookies when not found', () => {
+    const cookieJar: MockCookieJar = mockCookie();
     let cookies = getShopifyCookies(document.cookie);
 
     expect(cookies).toEqual({
@@ -28,13 +64,20 @@ describe(`useShopifyCookies`, () => {
       _shopify_s: expect.any(String),
       _shopify_y: expect.any(String),
     });
+    expect(cookies['_shopify_s']).not.toBe('');
+    expect(cookies['_shopify_y']).not.toBe('');
+
+    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s'].maxage).toBe(1800);
+    expect(cookieJar['_shopify_y'].maxage).toBe(1800);
   });
 
   it('does not override cookies when it already exists', () => {
-    renderHook(() => {
-      document.cookie = '_shopify_s=abc123';
-      document.cookie = '_shopify_y=def456';
+    const cookieJar: MockCookieJar = mockCookie();
+    document.cookie = '_shopify_s=abc123; Max-Age=1800;';
+    document.cookie = '_shopify_y=def456; Max-Age=1800;';
 
+    renderHook(() => {
       useShopifyCookies();
     });
 
@@ -44,10 +87,12 @@ describe(`useShopifyCookies`, () => {
       _shopify_s: 'abc123',
       _shopify_y: 'def456',
     });
+    expect(Object.keys(cookieJar).length).toBe(2);
   });
 
   it('sets new cookie if either cookie is missing', () => {
-    document.cookie = '_shopify_s=abc123';
+    const cookieJar: MockCookieJar = mockCookie();
+    document.cookie = '_shopify_s=abc123; Max-Age=1800;';
 
     renderHook(() => useShopifyCookies());
 
@@ -57,9 +102,11 @@ describe(`useShopifyCookies`, () => {
       _shopify_s: 'abc123',
       _shopify_y: expect.any(String),
     });
+    expect(cookies['_shopify_y']).not.toBe('');
+    expect(Object.keys(cookieJar).length).toBe(2);
 
     document.cookie = '_shopify_s=1; expires=1 Jan 1970 00:00:00 GMT;';
-    document.cookie = '_shopify_y=def456';
+    document.cookie = '_shopify_y=def456; Max-Age=1800;';
 
     renderHook(() => useShopifyCookies());
 
@@ -69,5 +116,52 @@ describe(`useShopifyCookies`, () => {
       _shopify_s: expect.any(String),
       _shopify_y: 'def456',
     });
+    expect(cookies['_shopify_s']).not.toBe('');
+    expect(Object.keys(cookieJar).length).toBe(2);
+  });
+
+  it('sets _shopify_y cookie expiry to 1 year when hasUserConsent is set to true', () => {
+    const cookieJar: MockCookieJar = mockCookie();
+
+    renderHook(() => useShopifyCookies(true));
+
+    const cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      _shopify_s: expect.any(String),
+      _shopify_y: expect.any(String),
+    });
+    expect(cookies['_shopify_s']).not.toBe('');
+    expect(cookies['_shopify_y']).not.toBe('');
+
+    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s'].maxage).toBe(1800);
+    expect(cookieJar['_shopify_y'].maxage).toBe(31104000);
+  });
+
+  it('sets domain when provided', () => {
+    const cookieJar: MockCookieJar = mockCookie();
+    const cookieDomain = 'myshop.com';
+
+    renderHook(() => useShopifyCookies(true, cookieDomain));
+
+    const cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      _shopify_s: expect.any(String),
+      _shopify_y: expect.any(String),
+    });
+    expect(cookies['_shopify_s']).not.toBe('');
+    expect(cookies['_shopify_y']).not.toBe('');
+
+    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s']).toContain({
+      domain: cookieDomain,
+      maxage: 1800
+    });
+    expect(cookieJar['_shopify_y']).toContain({
+      domain: cookieDomain,
+      maxage: 31104000
+    });
   });
 });

From 4633b203d21893d671c6013d6bde4fe834092b3c Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 12:35:11 -0800
Subject: [PATCH 49/58] prettier

---
 packages/react/src/useShopifyCookies.test.tsx | 70 +++++++++++--------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
index 1f6948ab..dc8f934a 100644
--- a/packages/react/src/useShopifyCookies.test.tsx
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -4,13 +4,16 @@ import {getShopifyCookies} from './cookies-utils.js';
 import {useShopifyCookies} from './useShopifyCookie.js';
 import {parse} from 'worktop/cookie';
 
-type MockCookieJar = Record<string, {
-  maxage: number | undefined;
-  samesite: string | undefined;
-  path: string | undefined;
-  domain: string | undefined;
-  value: string;
-}>;
+type MockCookieJar = Record<
+  string,
+  {
+    maxage: number | undefined;
+    samesite: string | undefined;
+    path: string | undefined;
+    domain: string | undefined;
+    value: string;
+  }
+>;
 
 function mockCookie(): MockCookieJar {
   const cookieJar: MockCookieJar = {};
@@ -21,24 +24,27 @@ function mockCookie(): MockCookieJar {
       docCookie += `${key}=${cookieJar[key].value};`;
     });
     return docCookie;
-  })
-
-  vi.spyOn(document, 'cookie', 'set').mockImplementation((cookieString: string) => {
-    const {domain, maxage, path, samesite, ...cookieKeyValuePair} = parse(cookieString);
-    const cookieName = Object.keys(cookieKeyValuePair)[0];
-
-    if(maxage) {
-      cookieJar[cookieName] = {
-        value: cookieKeyValuePair[cookieName],
-        maxage,
-        path,
-        samesite,
-        domain,
-      };
-    } else {
-      delete cookieJar[cookieName];
+  });
+
+  vi.spyOn(document, 'cookie', 'set').mockImplementation(
+    (cookieString: string) => {
+      const {domain, maxage, path, samesite, ...cookieKeyValuePair} =
+        parse(cookieString);
+      const cookieName = Object.keys(cookieKeyValuePair)[0];
+
+      if (maxage) {
+        cookieJar[cookieName] = {
+          value: cookieKeyValuePair[cookieName],
+          maxage,
+          path,
+          samesite,
+          domain,
+        };
+      } else {
+        delete cookieJar[cookieName];
+      }
     }
-  })
+  );
   return cookieJar;
 }
 
@@ -67,7 +73,9 @@ describe(`useShopifyCookies`, () => {
     expect(cookies['_shopify_s']).not.toBe('');
     expect(cookies['_shopify_y']).not.toBe('');
 
-    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s'].value).not.toBe(
+      cookieJar['_shopify_y'].value
+    );
     expect(cookieJar['_shopify_s'].maxage).toBe(1800);
     expect(cookieJar['_shopify_y'].maxage).toBe(1800);
   });
@@ -134,7 +142,9 @@ describe(`useShopifyCookies`, () => {
     expect(cookies['_shopify_s']).not.toBe('');
     expect(cookies['_shopify_y']).not.toBe('');
 
-    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s'].value).not.toBe(
+      cookieJar['_shopify_y'].value
+    );
     expect(cookieJar['_shopify_s'].maxage).toBe(1800);
     expect(cookieJar['_shopify_y'].maxage).toBe(31104000);
   });
@@ -154,14 +164,16 @@ describe(`useShopifyCookies`, () => {
     expect(cookies['_shopify_s']).not.toBe('');
     expect(cookies['_shopify_y']).not.toBe('');
 
-    expect(cookieJar['_shopify_s'].value).not.toBe(cookieJar['_shopify_y'].value);
+    expect(cookieJar['_shopify_s'].value).not.toBe(
+      cookieJar['_shopify_y'].value
+    );
     expect(cookieJar['_shopify_s']).toContain({
       domain: cookieDomain,
-      maxage: 1800
+      maxage: 1800,
     });
     expect(cookieJar['_shopify_y']).toContain({
       domain: cookieDomain,
-      maxage: 31104000
+      maxage: 31104000,
     });
   });
 });

From 4d9c85965ebb89f09b3bdfc67d72ff2ccdffd781 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 12:40:31 -0800
Subject: [PATCH 50/58] move shopify cookie constants back into cart constant

---
 packages/react/src/analytics-types.ts   | 2 +-
 packages/react/src/analytics.ts         | 2 +-
 packages/react/src/cart-constants.ts    | 2 ++
 packages/react/src/cart-hooks.tsx       | 3 ++-
 packages/react/src/cookies-utils.tsx    | 2 +-
 packages/react/src/shared-constants.ts  | 2 --
 packages/react/src/useShopifyCookie.tsx | 2 +-
 7 files changed, 8 insertions(+), 7 deletions(-)
 delete mode 100644 packages/react/src/shared-constants.ts

diff --git a/packages/react/src/analytics-types.ts b/packages/react/src/analytics-types.ts
index 1aefc709..7363593a 100644
--- a/packages/react/src/analytics-types.ts
+++ b/packages/react/src/analytics-types.ts
@@ -1,6 +1,6 @@
 import type {Product, ProductVariant} from './storefront-api-types.js';
 import {AnalyticsEventName, ShopifyAppSource} from './analytics-constants.js';
-import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
 
 export type ClientBrowserParameters = {
   uniqueToken: string;
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 12f64a4a..6133edfc 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -1,4 +1,4 @@
-import {SHOPIFY_S, SHOPIFY_Y} from './shared-constants.js';
+import {SHOPIFY_S, SHOPIFY_Y} from './cart-constants.js';
 import type {
   ClientBrowserParameters,
   ShopifyAddToCartPayload,
diff --git a/packages/react/src/cart-constants.ts b/packages/react/src/cart-constants.ts
index 9374bf60..0d02d749 100644
--- a/packages/react/src/cart-constants.ts
+++ b/packages/react/src/cart-constants.ts
@@ -5,3 +5,5 @@ export const CART_COOKIE_TTL_DAYS = 14;
 export const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';
 export const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';
 export const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';
+export const SHOPIFY_Y = '_shopify_y';
+export const SHOPIFY_S = '_shopify_s';
diff --git a/packages/react/src/cart-hooks.tsx b/packages/react/src/cart-hooks.tsx
index 9a50c346..a9f16290 100644
--- a/packages/react/src/cart-hooks.tsx
+++ b/packages/react/src/cart-hooks.tsx
@@ -8,8 +8,9 @@ import {
   SHOPIFY_STOREFRONT_ID_HEADER,
   SHOPIFY_STOREFRONT_Y_HEADER,
   SHOPIFY_STOREFRONT_S_HEADER,
+  SHOPIFY_Y,
+  SHOPIFY_S,
 } from './cart-constants.js';
-import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
 import type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';
 import {getShopifyCookies} from './cookies-utils.js';
 
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index c007158e..72453b62 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -1,6 +1,6 @@
 import {parse} from 'worktop/cookie';
 import {ShopifyCookies} from './analytics-types.js';
-import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
 
 const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
 
diff --git a/packages/react/src/shared-constants.ts b/packages/react/src/shared-constants.ts
deleted file mode 100644
index a18cbe01..00000000
--- a/packages/react/src/shared-constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const SHOPIFY_Y = '_shopify_y';
-export const SHOPIFY_S = '_shopify_s';
diff --git a/packages/react/src/useShopifyCookie.tsx b/packages/react/src/useShopifyCookie.tsx
index c0e3267a..a4b5a677 100644
--- a/packages/react/src/useShopifyCookie.tsx
+++ b/packages/react/src/useShopifyCookie.tsx
@@ -1,6 +1,6 @@
 import {useEffect} from 'react';
 import {stringify} from 'worktop/cookie';
-import {SHOPIFY_Y, SHOPIFY_S} from './shared-constants.js';
+import {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';
 import {buildUUID, getShopifyCookies} from './cookies-utils.js';
 
 const longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry

From 29760a473ca718d758ada0a8521662961a007261 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 12:51:32 -0800
Subject: [PATCH 51/58] missed a return type

---
 packages/react/src/analytics.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 6133edfc..6a65e035 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -41,7 +41,7 @@ import {
 export function sendShopifyAnalytics(
   {eventName, payload}: ShopifyAnalytics,
   shopDomain?: string
-) {
+): Promise<void> {
   let events: ShopifyMonorailEvent[] = [];
 
   if (eventName === AnalyticsEventName.PAGE_VIEW) {

From 6ff782d96ab027261276997ebecfcb353d4e0a7b Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 14:01:06 -0800
Subject: [PATCH 52/58] Update .changeset/plenty-moles-listen.md

Co-authored-by: Anthony Frehner <frehner@users.noreply.github.com>
---
 .changeset/plenty-moles-listen.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
index d5b5ec06..04ca7813 100644
--- a/.changeset/plenty-moles-listen.md
+++ b/.changeset/plenty-moles-listen.md
@@ -1,5 +1,5 @@
 ---
-'@shopify/hydrogen-react': patch
+'@shopify/storefront-kit-react': patch
 ---
 
 Shopify Analytics methods and components

From 30a7d7ce7b6ddc02aa99bbd24125b035513efe2b Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 14:02:06 -0800
Subject: [PATCH 53/58] remove console log

---
 packages/react/src/ShopPayButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/ShopPayButton.tsx b/packages/react/src/ShopPayButton.tsx
index 711ffe4c..742dead1 100644
--- a/packages/react/src/ShopPayButton.tsx
+++ b/packages/react/src/ShopPayButton.tsx
@@ -68,7 +68,6 @@ export function ShopPayButton({
   if (variantIds) {
     ids = variantIds.reduce<string[]>((prev, curr) => {
       const bareId = parseGid(curr).id;
-      console.log(bareId);
       if (bareId) {
         prev.push(bareId);
       }

From 0694583d2b393e14be4afa508a5a42faa256d6a1 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 14:20:30 -0800
Subject: [PATCH 54/58] update exposed methods, constants, and types

---
 .changeset/plenty-moles-listen.md    | 24 +++++++++++++++++++++++-
 packages/react/src/cookies-utils.tsx |  9 +++++++++
 packages/react/src/index.ts          |  2 ++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
index 04ca7813..a07402c8 100644
--- a/.changeset/plenty-moles-listen.md
+++ b/.changeset/plenty-moles-listen.md
@@ -2,4 +2,26 @@
 '@shopify/storefront-kit-react': patch
 ---
 
-Shopify Analytics methods and components
+Shopify Analytics
+
+Methods:
+* `useShopifyCookies(hasUserConsent = true, domain = ''): void` - sets and refreshes Shopify cookies
+* `getShopifyCookie(cookieString: string): ShopifyCookie` - returns Shopify cookies
+* `sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void>` - sends Shopify analytics
+* `getClientBrowserParameters(): ClientBrowserParameters` - returns commonly tracked client browser values
+
+Constants:
+* `AnalyticsEventName` - list of Shopify accepted analytics events
+* `AnalyticsPageType` - list of Shopify accepted page type names
+* `ShopifyAppSource` - list of Shopify accepted application source
+
+Types:
+* `ShopifyCookies`
+* `ClientBrowserParameters`
+* `ShopifyAnalytics` - generic type for `ShopifyPageView` and `ShopifyAddToCart`
+* `ShopifyAnalyticsPayload` - generic type for `ShopifyPageViewPayload` and `ShopifyAddToCartPayload`
+* `ShopifyPageView`
+* `ShopifyPageViewPayload`
+* `ShopifyAddToCart`
+* `ShopifyAddToCartPayload`
+* `ShopifyAnalyticsProduct`
diff --git a/packages/react/src/cookies-utils.tsx b/packages/react/src/cookies-utils.tsx
index 72453b62..84b803a7 100644
--- a/packages/react/src/cookies-utils.tsx
+++ b/packages/react/src/cookies-utils.tsx
@@ -57,6 +57,15 @@ export function hexTime(): string {
   return output.padStart(8 - output.length, '0');
 }
 
+/**
+ * Returns Shopify cookies
+ * @returns Empty string if cookie not found
+ *
+ * @example
+ * ```tsx
+ *   getShopifyCookies(document.cookie);
+ * ```
+ **/
 export function getShopifyCookies(cookies: string): ShopifyCookies {
   const cookieData = parse(cookies);
   return {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 263a14e6..8e788211 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -45,6 +45,8 @@ export type {
   ShopifyAnalyticsPayload,
   ShopifyAnalytics,
   ShopifyAnalyticsProduct,
+  ShopifyCookies,
 } from './analytics-types.js';
 export {useShopifyCookies} from './useShopifyCookie.js';
+export {getShopifyCookies} from './cookies-utils.js';
 export {sendShopifyAnalytics, getClientBrowserParameters} from './analytics.js';

From 34a21588d11ee057e7413f62c7189b3a21a9d8d9 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 14:25:54 -0800
Subject: [PATCH 55/58] prettier

---
 .changeset/plenty-moles-listen.md | 35 +++++++++++++++++--------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
index a07402c8..d8298015 100644
--- a/.changeset/plenty-moles-listen.md
+++ b/.changeset/plenty-moles-listen.md
@@ -5,23 +5,26 @@
 Shopify Analytics
 
 Methods:
-* `useShopifyCookies(hasUserConsent = true, domain = ''): void` - sets and refreshes Shopify cookies
-* `getShopifyCookie(cookieString: string): ShopifyCookie` - returns Shopify cookies
-* `sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void>` - sends Shopify analytics
-* `getClientBrowserParameters(): ClientBrowserParameters` - returns commonly tracked client browser values
+
+- `useShopifyCookies(hasUserConsent = true, domain = ''): void` - sets and refreshes Shopify cookies
+- `getShopifyCookie(cookieString: string): ShopifyCookie` - returns Shopify cookies
+- `sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void>` - sends Shopify analytics
+- `getClientBrowserParameters(): ClientBrowserParameters` - returns commonly tracked client browser values
 
 Constants:
-* `AnalyticsEventName` - list of Shopify accepted analytics events
-* `AnalyticsPageType` - list of Shopify accepted page type names
-* `ShopifyAppSource` - list of Shopify accepted application source
+
+- `AnalyticsEventName` - list of Shopify accepted analytics events
+- `AnalyticsPageType` - list of Shopify accepted page type names
+- `ShopifyAppSource` - list of Shopify accepted application source
 
 Types:
-* `ShopifyCookies`
-* `ClientBrowserParameters`
-* `ShopifyAnalytics` - generic type for `ShopifyPageView` and `ShopifyAddToCart`
-* `ShopifyAnalyticsPayload` - generic type for `ShopifyPageViewPayload` and `ShopifyAddToCartPayload`
-* `ShopifyPageView`
-* `ShopifyPageViewPayload`
-* `ShopifyAddToCart`
-* `ShopifyAddToCartPayload`
-* `ShopifyAnalyticsProduct`
+
+- `ShopifyCookies`
+- `ClientBrowserParameters`
+- `ShopifyAnalytics` - generic type for `ShopifyPageView` and `ShopifyAddToCart`
+- `ShopifyAnalyticsPayload` - generic type for `ShopifyPageViewPayload` and `ShopifyAddToCartPayload`
+- `ShopifyPageView`
+- `ShopifyPageViewPayload`
+- `ShopifyAddToCart`
+- `ShopifyAddToCartPayload`
+- `ShopifyAnalyticsProduct`

From eee8018a9b48ded517e1fc13a045c3993e25ff8f Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 14:36:53 -0800
Subject: [PATCH 56/58] fix file name

---
 .../react/src/{cookie-utils.test.ts => cookies-utils.test.ts}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/react/src/{cookie-utils.test.ts => cookies-utils.test.ts} (100%)

diff --git a/packages/react/src/cookie-utils.test.ts b/packages/react/src/cookies-utils.test.ts
similarity index 100%
rename from packages/react/src/cookie-utils.test.ts
rename to packages/react/src/cookies-utils.test.ts

From 60ae2158b9ae158bbc611a0a6597228b5a369189 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@shopify.com>
Date: Tue, 17 Jan 2023 15:00:21 -0800
Subject: [PATCH 57/58] fix file name again

---
 packages/react/src/index.ts                                     | 2 +-
 packages/react/src/useShopifyCookies.test.tsx                   | 2 +-
 .../react/src/{useShopifyCookie.tsx => useShopifyCookies.tsx}   | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/react/src/{useShopifyCookie.tsx => useShopifyCookies.tsx} (100%)

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 8e788211..7483c276 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -47,6 +47,6 @@ export type {
   ShopifyAnalyticsProduct,
   ShopifyCookies,
 } from './analytics-types.js';
-export {useShopifyCookies} from './useShopifyCookie.js';
+export {useShopifyCookies} from './useShopifyCookies.js';
 export {getShopifyCookies} from './cookies-utils.js';
 export {sendShopifyAnalytics, getClientBrowserParameters} from './analytics.js';
diff --git a/packages/react/src/useShopifyCookies.test.tsx b/packages/react/src/useShopifyCookies.test.tsx
index dc8f934a..9a6607e0 100644
--- a/packages/react/src/useShopifyCookies.test.tsx
+++ b/packages/react/src/useShopifyCookies.test.tsx
@@ -1,7 +1,7 @@
 import {afterEach} from 'vitest';
 import {renderHook} from '@testing-library/react';
 import {getShopifyCookies} from './cookies-utils.js';
-import {useShopifyCookies} from './useShopifyCookie.js';
+import {useShopifyCookies} from './useShopifyCookies.js';
 import {parse} from 'worktop/cookie';
 
 type MockCookieJar = Record<
diff --git a/packages/react/src/useShopifyCookie.tsx b/packages/react/src/useShopifyCookies.tsx
similarity index 100%
rename from packages/react/src/useShopifyCookie.tsx
rename to packages/react/src/useShopifyCookies.tsx

From a40c1c400269154da33ad70af37fa5abe3d8307a Mon Sep 17 00:00:00 2001
From: Anthony Frehner <frehner@users.noreply.github.com>
Date: Tue, 17 Jan 2023 17:11:47 -0700
Subject: [PATCH 58/58] Small updates

---
 packages/react/src/analytics-utils.ts |  2 +-
 packages/react/src/analytics.test.ts  | 16 +++++++++-------
 packages/react/src/analytics.ts       |  3 +++
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/analytics-utils.ts b/packages/react/src/analytics-utils.ts
index b3b1c0a8..a654dc5f 100644
--- a/packages/react/src/analytics-utils.ts
+++ b/packages/react/src/analytics-utils.ts
@@ -46,7 +46,7 @@ export function parseGid(gid: string | undefined): ShopifyGId {
 
   // TODO: add support for parsing query parameters on complex gids
   // Reference: https://shopify.dev/api/usage/gids
-  const matches = gid.match(/^gid:\/\/.hopify\/(\w+)\/([a-z0-9]+)/);
+  const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([a-z0-9]+)/);
 
   if (!matches || matches.length === 1) {
     return defaultReturn;
diff --git a/packages/react/src/analytics.test.ts b/packages/react/src/analytics.test.ts
index e9a9f500..15a32a35 100644
--- a/packages/react/src/analytics.test.ts
+++ b/packages/react/src/analytics.test.ts
@@ -193,13 +193,15 @@ describe('analytics', () => {
         failResponse: true,
       });
 
-      await sendShopifyAnalytics({
-        eventName: AnalyticsEventName.PAGE_VIEW,
-        payload: {
-          ...BASE_PAYLOAD,
-        },
-      });
-
+      await expect(
+        async () =>
+          await sendShopifyAnalytics({
+            eventName: AnalyticsEventName.PAGE_VIEW,
+            payload: {
+              ...BASE_PAYLOAD,
+            },
+          })
+      ).rejects.toThrow();
       expect(fetchSpy).toHaveBeenCalled();
       expect(consoleErrorSpy.mock.calls[0][0]).toBe(
         'sendShopifyAnalytics request is unsuccessful'
diff --git a/packages/react/src/analytics.ts b/packages/react/src/analytics.ts
index 6a65e035..131ea8b0 100644
--- a/packages/react/src/analytics.ts
+++ b/packages/react/src/analytics.ts
@@ -108,6 +108,9 @@ function sendToShopify(
       })
       .catch((err) => {
         console.error(ERROR_MESSAGE, err);
+        if (__HYDROGEN_DEV__) {
+          throw new Error(ERROR_MESSAGE);
+        }
       });
   } catch (error) {
     // Do nothing