@shopify/hydrogen 1.0.0-alpha.21 → 1.0.1

package/dist/esnext/foundation/Analytics/Analytics.client.d.ts

@@ -0,0 +1,3 @@
+export declare function Analytics({ analyticsDataFromServer, }: {
+    analyticsDataFromServer: any;
+}): null;

package/dist/esnext/foundation/Analytics/Analytics.client.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { ClientAnalytics } from './ClientAnalytics';
+export function Analytics({ analyticsDataFromServer, }) {
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        addUTMData(urlParams, 'id');
+        addUTMData(urlParams, 'source');
+        addUTMData(urlParams, 'campaign');
+        addUTMData(urlParams, 'medium');
+        addUTMData(urlParams, 'content');
+        addUTMData(urlParams, 'term');
+        ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
+        ClientAnalytics.publish(ClientAnalytics.eventNames.PAGE_VIEW, true);
+        if (analyticsDataFromServer.publishEventsOnNavigate) {
+            analyticsDataFromServer.publishEventsOnNavigate.forEach((eventName) => {
+                ClientAnalytics.publish(eventName, true);
+            });
+        }
+    }, [analyticsDataFromServer]);
+    return null;
+}
+function addUTMData(urlParams, key) {
+    if (urlParams.has(`utm_${key}`)) {
+        ClientAnalytics.pushToPageAnalyticsData({
+            utm: {
+                [key]: urlParams.get(`utm_${key}`),
+            },
+        });
+    }
+}

package/dist/esnext/foundation/Analytics/Analytics.server.d.ts

@@ -0,0 +1 @@
+export declare function Analytics(): JSX.Element;

package/dist/esnext/foundation/Analytics/Analytics.server.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useServerAnalytics } from './hook';
+import { Analytics as AnalyticsClient } from './Analytics.client';
+import { useServerRequest } from '../ServerRequestProvider';
+import AnalyticsErrorBoundary from '../AnalyticsErrorBoundary.client';
+import { wrapPromise } from '../../utilities';
+const DELAY_KEY_1 = 'analytics-delay-1';
+const DELAY_KEY_2 = 'analytics-delay-2';
+export function Analytics() {
+    const cache = useServerRequest().ctx.cache;
+    // If render cache is empty, create a 50 ms delay so that React doesn't resolve this
+    // component too early and potentially cause a mismatch in hydration
+    if (cache.size === 0 && !cache.has(DELAY_KEY_1)) {
+        analyticsDelay(cache, DELAY_KEY_1, 50);
+    }
+    // If this delay is created, execute it
+    cache.has(DELAY_KEY_1) && cache.get(DELAY_KEY_1).read();
+    // clean up this key so that it won't be saved to the preload cache
+    cache.delete(DELAY_KEY_1);
+    // Make sure all queries have returned before rendering the Analytics server component
+    cache.forEach((cacheFn) => {
+        if (cacheFn && typeof cacheFn === 'function') {
+            const result = cacheFn.call();
+            if (result instanceof Promise)
+                throw result;
+        }
+    });
+    // If all queries has returned (could be from cached queries),
+    // delay Analytic component by another 1ms (put this component
+    // to the end of the render queue) so that other scheduled
+    // render work can be processed by React's concurrent render first
+    if (cache.size > 1 && !cache.has(DELAY_KEY_2)) {
+        analyticsDelay(cache, DELAY_KEY_2, 1);
+    }
+    cache.has(DELAY_KEY_2) && cache.get(DELAY_KEY_2).read();
+    cache.delete(DELAY_KEY_2);
+    return (React.createElement(AnalyticsErrorBoundary, null,
+        React.createElement(AnalyticsClient, { analyticsDataFromServer: useServerAnalytics() })));
+}
+function analyticsDelay(cache, delayKey, delay) {
+    const delayPromise = wrapPromise(new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true);
+        }, delay);
+    }));
+    cache.set(delayKey, delayPromise);
+}

package/dist/esnext/foundation/Analytics/ClientAnalytics.d.ts

@@ -0,0 +1,27 @@
+import type { Subscriber, SubscriberFunction } from './types';
+declare function pushToPageAnalyticsData(data: any): void;
+declare function getPageAnalyticsData(): any;
+declare function resetPageAnalyticsData(): void;
+declare function publish(eventname: string, guardDup?: boolean, payload?: {}): void;
+declare function subscribe(eventname: string, callbackFunction: SubscriberFunction): Subscriber;
+declare function pushToServer(init?: RequestInit, searchParam?: string): Promise<Response>;
+declare function hasSentFirstPageView(): Boolean;
+export declare const ClientAnalytics: {
+    pushToPageAnalyticsData: typeof pushToPageAnalyticsData;
+    getPageAnalyticsData: typeof getPageAnalyticsData;
+    resetPageAnalyticsData: typeof resetPageAnalyticsData;
+    publish: typeof publish;
+    subscribe: typeof subscribe;
+    pushToServer: typeof pushToServer;
+    eventNames: {
+        PAGE_VIEW: string;
+        VIEWED_PRODUCT: string;
+        ADD_TO_CART: string;
+        REMOVE_FROM_CART: string;
+        UPDATE_CART: string;
+        DISCOUNT_CODE_UPDATED: string;
+        PERFORMANCE: string;
+    };
+    hasSentFirstPageView: typeof hasSentFirstPageView;
+};
+export {};

package/dist/esnext/foundation/Analytics/ClientAnalytics.js

@@ -0,0 +1,99 @@
+import { getNamedspacedEventname, mergeDeep } from './utils';
+import { eventNames } from './const';
+import { EVENT_PATHNAME } from '../../constants';
+import { META_ENV_SSR } from '../ssr-interop';
+const subscribers = {};
+let pageAnalyticsData = {};
+let isFirstPageViewSent = false;
+const guardDupEvents = {};
+const USAGE_ERROR = 'ClientAnalytics should only be used within the useEffect callback or event handlers';
+function isInvokedFromServer() {
+    if (META_ENV_SSR) {
+        console.warn(USAGE_ERROR);
+        return true;
+    }
+    return false;
+}
+function pushToPageAnalyticsData(data) {
+    if (isInvokedFromServer())
+        return;
+    pageAnalyticsData = mergeDeep(pageAnalyticsData, data);
+}
+function getPageAnalyticsData() {
+    if (isInvokedFromServer())
+        return;
+    return pageAnalyticsData;
+}
+function resetPageAnalyticsData() {
+    if (isInvokedFromServer())
+        return;
+    pageAnalyticsData = {};
+}
+function publish(eventname, guardDup = false, payload = {}) {
+    if (isInvokedFromServer())
+        return;
+    const namedspacedEventname = getNamedspacedEventname(eventname);
+    // De-dup events due to re-renders
+    if (guardDup) {
+        const eventGuardTimeout = guardDupEvents[namedspacedEventname];
+        if (eventGuardTimeout) {
+            clearTimeout(eventGuardTimeout);
+        }
+        const namespacedTimeout = setTimeout(() => {
+            publishEvent(namedspacedEventname, mergeDeep(pageAnalyticsData, payload));
+        }, 100);
+        guardDupEvents[namedspacedEventname] = namespacedTimeout;
+    }
+    else {
+        publishEvent(namedspacedEventname, mergeDeep(pageAnalyticsData, payload));
+    }
+}
+function publishEvent(eventname, payload) {
+    const subs = subscribers[eventname];
+    if (!isFirstPageViewSent && eventname === eventNames.PAGE_VIEW) {
+        isFirstPageViewSent = true;
+    }
+    if (subs) {
+        Object.keys(subs).forEach((key) => {
+            subs[key](payload);
+        });
+    }
+}
+function subscribe(eventname, callbackFunction) {
+    if (isInvokedFromServer())
+        return { unsubscribe: () => { } };
+    const namedspacedEventname = getNamedspacedEventname(eventname);
+    const subs = subscribers[namedspacedEventname];
+    if (!subs) {
+        subscribers[namedspacedEventname] = {};
+    }
+    const subscriberId = Date.now().toString();
+    subscribers[namedspacedEventname][subscriberId] = callbackFunction;
+    return {
+        unsubscribe: () => {
+            delete subscribers[namedspacedEventname][subscriberId];
+        },
+    };
+}
+function pushToServer(init, searchParam) {
+    return fetch(`${EVENT_PATHNAME}${searchParam ? `?${searchParam}` : ''}`, Object.assign({
+        method: 'post',
+        headers: {
+            'cache-control': 'no-cache',
+            'Content-Type': 'application/json',
+        },
+    }, init));
+}
+function hasSentFirstPageView() {
+    return isFirstPageViewSent;
+}
+export const ClientAnalytics = {
+    pushToPageAnalyticsData,
+    getPageAnalyticsData,
+    resetPageAnalyticsData,
+    publish,
+    subscribe,
+    pushToServer,
+    eventNames,
+    hasSentFirstPageView,
+};

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.d.ts

@@ -0,0 +1,4 @@
+import type { ResolvedHydrogenConfig } from '../../types';
+export declare function ServerAnalyticsRoute(request: Request, { hydrogenConfig }: {
+    hydrogenConfig: ResolvedHydrogenConfig;
+}): Promise<Response>;

package/dist/esnext/foundation/Analytics/ServerAnalyticsRoute.js

@@ -0,0 +1,51 @@
+import { log } from '../../utilities/log';
+const analyticsDefaultResponse = new Response(null, {
+    status: 200,
+});
+export async function ServerAnalyticsRoute(request, { hydrogenConfig }) {
+    const serverAnalyticsConnectors = hydrogenConfig.serverAnalyticsConnectors;
+    if (!serverAnalyticsConnectors) {
+        return analyticsDefaultResponse;
+    }
+    const requestHeader = request.headers;
+    const requestUrl = request.url;
+    let analyticsPromise;
+    if (requestHeader.get('Content-Length') === '0') {
+        analyticsPromise = Promise.resolve(true)
+            .then(async () => {
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader);
+            }));
+        })
+            .catch((error) => {
+            log.warn('Failed to resolve server analytics (no content length): ', error);
+        });
+    }
+    else if (requestHeader.get('Content-Type') === 'application/json') {
+        analyticsPromise = Promise.resolve(request.json())
+            .then((data) => {
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader, data, 'json');
+            }));
+        })
+            .catch((error) => {
+            log.warn('Fail to resolve server analytics (json): ', error);
+        });
+    }
+    else {
+        analyticsPromise = Promise.resolve(request.text())
+            .then(async (data) => {
+            await serverAnalyticsConnectors.forEach(async (connector) => {
+                await connector.request(requestUrl, requestHeader, data, 'text');
+            });
+            return Promise.all(serverAnalyticsConnectors.map(async (connector) => {
+                return await connector.request(requestUrl, requestHeader, data, 'text');
+            }));
+        })
+            .catch((error) => {
+            log.warn('Failed to resolve server analytics (text): ', error);
+        });
+    }
+    await analyticsPromise;
+    return analyticsDefaultResponse;
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        BOOMR: any;
+        BOOMR_onload: any;
+    }
+}
+export declare function PerformanceMetrics(): null;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import { loadScript } from '../../../../utilities/load_script';
+import { ClientAnalytics } from '../../ClientAnalytics';
+import { useShop } from '../../../useShop';
+const URL = 'https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-hydrogen.min.js';
+export function PerformanceMetrics() {
+    const { storeDomain } = useShop();
+    useEffect(() => {
+        try {
+            (function () {
+                if (window.BOOMR &&
+                    (window.BOOMR.version || window.BOOMR.snippetExecuted)) {
+                    return;
+                }
+                // Executes only on first mount
+                window.BOOMR = window.BOOMR || {};
+                window.BOOMR.hydrogenPerformanceEvent = (data) => {
+                    const initTime = new Date().getTime();
+                    ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
+                    const pageData = ClientAnalytics.getPageAnalyticsData();
+                    const shopId = pageData.shopify.shopId || '';
+                    fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
+                        method: 'post',
+                        headers: {
+                            'content-type': 'text/plain',
+                        },
+                        body: JSON.stringify({
+                            schema_id: 'hydrogen_buyer_performance/2.0',
+                            payload: {
+                                ...data,
+                                shop_id: shopId.substring(shopId.lastIndexOf('/') + 1) || '',
+                            },
+                            metadata: {
+                                event_created_at_ms: initTime,
+                                event_sent_at_ms: new Date().getTime(),
+                            },
+                        }),
+                    });
+                };
+                window.BOOMR.storeDomain = storeDomain;
+                function boomerangSaveLoadTime(e) {
+                    window.BOOMR_onload = (e && e.timeStamp) || Date.now();
+                }
+                // @ts-ignore
+                function boomerangInit(e) {
+                    e.detail.BOOMR.init();
+                    e.detail.BOOMR.t_end = Date.now();
+                }
+                if (window.addEventListener) {
+                    window.addEventListener('load', boomerangSaveLoadTime, false);
+                    // @ts-ignore
+                }
+                else if (window.attachEvent) {
+                    // @ts-ignore
+                    window.attachEvent('onload', boomerangSaveLoadTime);
+                }
+                if (document.addEventListener) {
+                    document.addEventListener('onBoomerangLoaded', boomerangInit);
+                    // @ts-ignore
+                }
+                else if (document.attachEvent) {
+                    // @ts-ignore
+                    document.attachEvent('onpropertychange', function (e) {
+                        if (!e)
+                            e = event;
+                        if (e.propertyName === 'onBoomerangLoaded')
+                            boomerangInit(e);
+                    });
+                }
+            })();
+            loadScript(URL).catch(() => {
+                // ignore if boomerang doesn't load
+                // most likely because of an ad blocker
+            });
+        }
+        catch (err) {
+            // Do nothing
+        }
+    }, [storeDomain]);
+    return null;
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.d.ts

@@ -0,0 +1 @@
+export declare function PerformanceMetricsDebug(): null;

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetricsDebug.client.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { ClientAnalytics } from '../../ClientAnalytics';
+const PAD = 10;
+let isInit = false;
+export function PerformanceMetricsDebug() {
+    useEffect(() => {
+        if (!isInit) {
+            isInit = true;
+            ClientAnalytics.subscribe(ClientAnalytics.eventNames.PERFORMANCE, (data) => {
+                console.group(`Performance - ${data.page_load_type} load`);
+                logMetricIf('TTFB:', data.response_start - data.navigation_start);
+                logMetricIf('FCP:', data.first_contentful_paint);
+                logMetricIf('LCP:', data.largest_contentful_paint);
+                logMetricIf('Duration:', data.response_end - data.navigation_start);
+                console.groupEnd();
+            });
+        }
+    });
+    return null;
+}
+function logMetricIf(lable, data) {
+    data && console.log(`${lable.padEnd(PAD)}${Math.round(data)} ms`);
+}

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.d.ts

@@ -0,0 +1,3 @@
+export declare const PerformanceMetricsServerAnalyticsConnector: {
+    request(): Promise<any>;
+};

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/ServerAnalyticsConnector.js

@@ -0,0 +1,7 @@
+import { log } from '../../../../utilities/log';
+export const PerformanceMetricsServerAnalyticsConnector = {
+    request() {
+        log.warn('PerformanceMetricsServerAnalyticsConnector has been removed - please remove its reference from hydrogen.config.js');
+        return Promise.resolve();
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.d.ts

@@ -0,0 +1,3 @@
+export declare const ShopifyServerAnalyticsConnector: {
+    request(): Promise<any>;
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ServerAnalyticsConnector.js

@@ -0,0 +1,7 @@
+import { log } from '../../../../utilities/log';
+export const ShopifyServerAnalyticsConnector = {
+    request() {
+        log.warn('ShopifyServerAnalyticsConnector has been removed - please remove its reference from hydrogen.config.js');
+        return Promise.resolve();
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.d.ts

@@ -0,0 +1,3 @@
+export declare function ShopifyAnalyticsClient({ cookieDomain }: {
+    cookieDomain: string;
+}): null;

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -0,0 +1,182 @@
+import { useEffect } from 'react';
+import { parse, stringify } from 'worktop/cookie';
+import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants';
+import { ClientAnalytics } from '../../ClientAnalytics';
+import { buildUUID, addDataIf } from './utils';
+const longTermLength = 60 * 60 * 24 * 360 * 2; // ~2 year expiry
+const shortTermLength = 60 * 30; // 30 mins
+const myShopifyDomain = 'myshopify.com';
+const oxygenDomain = 'myshopify.dev';
+let isInit = false;
+let microSessionCount = 0;
+export function ShopifyAnalyticsClient({ cookieDomain }) {
+    useEffect(() => {
+        try {
+            // Find Shopify cookies
+            const cookieData = parse(document.cookie);
+            const shopifyYCookie = cookieData[SHOPIFY_Y] || buildUUID();
+            const shopifySCookie = cookieData[SHOPIFY_S] || buildUUID();
+            /**
+             * Set user and session cookies and refresh the expiry time
+             */
+            updateCookie(SHOPIFY_Y, shopifyYCookie, longTermLength, cookieDomain);
+            updateCookie(SHOPIFY_S, shopifySCookie, shortTermLength, cookieDomain);
+            ClientAnalytics.pushToPageAnalyticsData({
+                shopify: {
+                    pageId: buildUUID(),
+                    userId: shopifyYCookie,
+                    sessionId: shopifySCookie,
+                },
+            });
+            microSessionCount = 0;
+            // TODO: Fix with useEvent when ready
+            // RFC: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+            if (!isInit) {
+                isInit = true;
+                const eventNames = ClientAnalytics.eventNames;
+                ClientAnalytics.subscribe(eventNames.PAGE_VIEW, trackPageView);
+                // On a slow network, the pageview event could be already fired before
+                // we subscribed to the pageview event
+                if (ClientAnalytics.hasSentFirstPageView()) {
+                    trackPageView(ClientAnalytics.getPageAnalyticsData());
+                }
+            }
+        }
+        catch (err) {
+            // Do nothing
+        }
+    });
+    return null;
+}
+function updateCookie(cookieName, value, maxage, cookieDomain) {
+    const cookieString = stringify(cookieName, value, {
+        maxage,
+        domain: getCookieDomain(cookieDomain),
+        secure: process.env.NODE_ENV === 'production',
+        samesite: 'Lax',
+        path: '/',
+    });
+    document.cookie = cookieString;
+    return cookieString;
+}
+function getCookieDomain(cookieDomain) {
+    const hostname = location.hostname;
+    if (hostname.indexOf(myShopifyDomain) !== -1) {
+        return `.${hostname.split('.').slice(-3).join('.')}`;
+    }
+    else if (hostname.indexOf(cookieDomain) !== -1) {
+        return `.${cookieDomain}`;
+    }
+    else {
+        return '';
+    }
+}
+function trackPageView(payload) {
+    microSessionCount += 1;
+    try {
+        sendToServer(storefrontPageViewSchema(payload));
+    }
+    catch (error) {
+        console.error(`Error Shopify analytics: ${ClientAnalytics.eventNames.PAGE_VIEW}`, error);
+    }
+}
+function storefrontPageViewSchema(payload) {
+    return {
+        schema_id: 'trekkie_storefront_page_view/1.4',
+        payload: buildStorefrontPageViewPayload(payload),
+        metadata: {
+            event_created_at_ms: Date.now(),
+        },
+    };
+}
+function buildStorefrontPageViewPayload(payload) {
+    const location = document.location;
+    const shopify = payload.shopify;
+    let formattedData = {
+        appClientId: '6167201',
+        hydrogenSubchannelId: shopify.storefrontId,
+        isPersistentCookie: shopify.isPersistentCookie,
+        uniqToken: shopify.userId,
+        visitToken: shopify.sessionId,
+        microSessionId: shopify.pageId,
+        microSessionCount,
+        url: location.href,
+        path: location.pathname,
+        search: location.search,
+        referrer: document.referrer,
+        title: document.title,
+        shopId: stripGId(shopify.shopId),
+        currency: shopify.currency,
+        contentLanguage: shopify.acceptedLanguage,
+    };
+    formattedData = addDataIf({
+        isMerchantRequest: isMerchantRequest(),
+    }, formattedData);
+    formattedData = addDataIf({
+        pageType: shopify.pageType,
+    }, formattedData);
+    if (shopify.resourceId) {
+        try {
+            formattedData = addDataIf({
+                resourceType: getResourceType(shopify.resourceId),
+                resourceId: stripGId(shopify.resourceId),
+            }, formattedData);
+        }
+        catch (err) {
+            // do nothing
+        }
+    }
+    formattedData = addDataIf({
+        customerId: shopify.customerId,
+    }, formattedData);
+    return formattedData;
+}
+function isMerchantRequest() {
+    const hostname = location.hostname;
+    if (hostname.indexOf(oxygenDomain) !== -1 || hostname === 'localhost') {
+        return true;
+    }
+    return false;
+}
+function stripGId(text) {
+    return parseInt(text.substring(text.lastIndexOf('/') + 1));
+}
+function getResourceType(text) {
+    return text
+        .substring(0, text.lastIndexOf('/'))
+        .replace(/.*shopify\//, '')
+        .toLowerCase();
+}
+const BATCH_SENT_TIMEOUT = 500;
+let batchedData = [];
+let batchedTimeout;
+function sendToServer(data) {
+    batchedData.push(data);
+    if (batchedTimeout) {
+        clearTimeout(batchedTimeout);
+        batchedTimeout = null;
+    }
+    batchedTimeout = setTimeout(() => {
+        const batchedDataToBeSent = {
+            events: batchedData,
+            metadata: {
+                event_sent_at_ms: Date.now(),
+            },
+        };
+        batchedData = [];
+        batchedTimeout = null;
+        // Send to Shopify
+        try {
+            fetch('https://monorail-edge.shopifysvc.com/unstable/produce_batch', {
+                method: 'post',
+                headers: {
+                    'content-type': 'text/plain',
+                },
+                body: JSON.stringify(batchedDataToBeSent),
+            });
+        }
+        catch (error) {
+            // Do nothing
+        }
+    }, BATCH_SENT_TIMEOUT);
+}

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.d.ts

@@ -0,0 +1,3 @@
+export declare function ShopifyAnalytics({ cookieDomain }: {
+    cookieDomain?: string;
+}): JSX.Element;

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { parse } from 'worktop/cookie';
+import AnalyticsErrorBoundary from '../../../AnalyticsErrorBoundary.client';
+import { useServerRequest } from '../../../ServerRequestProvider';
+import { useServerAnalytics } from '../../hook';
+import { useShop } from '../../../useShop';
+import { ShopifyAnalyticsClient } from './ShopifyAnalytics.client';
+import { useShopQuery } from '../../../../hooks/useShopQuery';
+import { CacheLong } from '../../../Cache/strategies';
+import { gql } from '../../../../utilities/graphql-tag';
+import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants';
+export function ShopifyAnalytics({ cookieDomain }) {
+    const { storeDomain } = useShop();
+    const request = useServerRequest();
+    const cookies = parse(request.headers.get('Cookie') || '');
+    const domain = cookieDomain || storeDomain;
+    const { data: { shop: { id, paymentSettings: { currencyCode }, }, }, } = useShopQuery({
+        query: SHOP_QUERY,
+        cache: CacheLong(),
+        preload: '*',
+    });
+    useServerAnalytics({
+        shopify: {
+            shopId: id,
+            currency: currencyCode,
+            storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
+            acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
+            isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
+        },
+    });
+    return (React.createElement(AnalyticsErrorBoundary, null,
+        React.createElement(ShopifyAnalyticsClient, { cookieDomain: domain })));
+}
+const SHOP_QUERY = gql `
+  query shopAnalyticsInfo {
+    shop {
+      id
+      paymentSettings {
+        currencyCode
+      }
+    }
+  }
+`;