@gem-sdk/pages 1.1.0 → 1.5.0-canary-4fb10428

package/dist/cjs/index.js

@@ -12,6 +12,8 @@ var getStaticPagePropsPreview = require('./libs/api/get-static-page-props-previe
 var fetcher = require('./libs/fetcher.js');
 var getLayout = require('./libs/get-layout.js');
 var genCss = require('./libs/helpers/gen-css.js');
+var useTrackingView = require('./libs/hooks/use-tracking-view.js');
+var userAgent = require('./libs/helpers/user-agent.js');
 var collectionDetail = require('./pages/collection-detail.js');
 var preview = require('./pages/preview.js');
 var productDetail = require('./pages/product-detail.js');
@@ -44,6 +46,8 @@ exports.createFetcher = fetcher.createFetcher;
 exports.createShopifyFetcher = fetcher.createShopifyFetcher;
 exports.getLayout = getLayout.getLayout;
 exports.genCSS = genCss.genCSS;
+exports.useTrackingView = useTrackingView.useTrackingView;
+exports.isBot = userAgent.isBot;
 exports.CollectionDetailPage = collectionDetail.default;
 exports.PreviewPage = preview.PreviewPage;
 exports.ProductDetailPage = productDetail.default;

package/dist/cjs/libs/api/get-home-page-props-v2.js

@@ -116,6 +116,7 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher) => async () => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            pageHandle: dataBuilder.handle ?? null,
         });
     }
     catch (err) {

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -121,6 +121,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher) => async (slug) => {
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
             customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
             customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
+            pageHandle: dataBuilder.handle ?? null,
         });
     }
     catch (err) {

package/dist/cjs/libs/helpers/user-agent.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function isBot(input) {
+    return /Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(input);
+}
+
+exports.isBot = isBot;

package/dist/cjs/libs/hooks/use-tracking-view.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var react = require('react');
+var userAgent = require('../helpers/user-agent.js');
+
+const useTrackingView = (token, handle, isFallback) => {
+    const shopToken = token || process.env.NEXT_PUBLIC_SHOP_TOKEN;
+    const apiURL = process.env.NEXT_PUBLIC_API_URL;
+    const sendTracking = react.useCallback((handle) => {
+        if (!apiURL || !shopToken)
+            return;
+        const bot = userAgent.isBot(navigator.userAgent);
+        const variables = {
+            pageHandle: handle,
+            userAgent: bot ? 'BOT' : 'BROWSER',
+        };
+        const headers = {
+            'Content-Type': 'application/json',
+            'X-GemX-Shop-Token': shopToken,
+        };
+        fetch(apiURL, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                query: core.PageViewUpDocument,
+                variables,
+            }),
+        }).finally(() => {
+            //
+        });
+    }, [apiURL, shopToken]);
+    react.useEffect(() => {
+        if (!handle || isFallback)
+            return;
+        sendTracking(handle);
+    }, [handle, sendTracking, isFallback]);
+};
+
+exports.useTrackingView = useTrackingView;

package/dist/cjs/pages/static-v2.js

@@ -5,10 +5,12 @@ var core = require('@gem-sdk/core');
 var nextSeo = require('next-seo');
 var Head = require('next/head');
 var router = require('next/router');
+var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, }) => {
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, shopToken, pageHandle, }) => {
     const router$1 = router.useRouter();
+    useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
     if (router$1.isFallback) {
         return (jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsxRuntime.jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
     }

package/dist/esm/index.js

@@ -10,6 +10,8 @@ export { getStaticPagePropsPreview } from './libs/api/get-static-page-props-prev
 export { createFetcher, createShopifyFetcher } from './libs/fetcher.js';
 export { getLayout } from './libs/get-layout.js';
 export { genCSS } from './libs/helpers/gen-css.js';
+export { useTrackingView } from './libs/hooks/use-tracking-view.js';
+export { isBot } from './libs/helpers/user-agent.js';
 export { default as CollectionDetailPage } from './pages/collection-detail.js';
 export { PreviewPage } from './pages/preview.js';
 export { default as ProductDetailPage } from './pages/product-detail.js';

package/dist/esm/libs/api/get-home-page-props-v2.js

@@ -114,6 +114,7 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher) => async () => {
             gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
             facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+            pageHandle: dataBuilder.handle ?? null,
         });
     }
     catch (err) {

package/dist/esm/libs/api/get-static-page-props-v2.js

@@ -119,6 +119,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher) => async (slug) => {
             tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
             customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
             customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
+            pageHandle: dataBuilder.handle ?? null,
         });
     }
     catch (err) {

package/dist/esm/libs/helpers/user-agent.js

@@ -0,0 +1,5 @@
+function isBot(input) {
+    return /Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(input);
+}
+
+export { isBot };

package/dist/esm/libs/hooks/use-tracking-view.js

@@ -0,0 +1,38 @@
+import { PageViewUpDocument } from '@gem-sdk/core';
+import { useCallback, useEffect } from 'react';
+import { isBot } from '../helpers/user-agent.js';
+
+const useTrackingView = (token, handle, isFallback) => {
+    const shopToken = token || process.env.NEXT_PUBLIC_SHOP_TOKEN;
+    const apiURL = process.env.NEXT_PUBLIC_API_URL;
+    const sendTracking = useCallback((handle) => {
+        if (!apiURL || !shopToken)
+            return;
+        const bot = isBot(navigator.userAgent);
+        const variables = {
+            pageHandle: handle,
+            userAgent: bot ? 'BOT' : 'BROWSER',
+        };
+        const headers = {
+            'Content-Type': 'application/json',
+            'X-GemX-Shop-Token': shopToken,
+        };
+        fetch(apiURL, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                query: PageViewUpDocument,
+                variables,
+            }),
+        }).finally(() => {
+            //
+        });
+    }, [apiURL, shopToken]);
+    useEffect(() => {
+        if (!handle || isFallback)
+            return;
+        sendTracking(handle);
+    }, [handle, sendTracking, isFallback]);
+};
+
+export { useTrackingView };

package/dist/esm/pages/static-v2.js

@@ -3,10 +3,12 @@ import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } fr
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { useTrackingView } from '../libs/hooks/use-tracking-view.js';
 import { parseHtml } from '../libs/parse-html.js';
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, }) => {
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, customCodeHeader, shopToken, pageHandle, }) => {
     const router = useRouter();
+    useTrackingView(shopToken, pageHandle, router.isFallback);
     if (router.isFallback) {
         return (jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "flex gap-2", children: [jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800" }), jsx("span", { className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800" })] }) }));
     }

package/dist/types/index.d.ts

@@ -6,51 +6,52 @@ import { SWRConfig } from 'swr';
 import * as react from 'react';
 import { Component } from 'react';
 
-type PageBuilderProps = {
-    seo?: NextSeoProps;
-    builderData?: BuilderState;
-    sectionData?: Record<string, SectionData>;
-    themeStyle?: string | null;
-    fontStyle?: string | null;
-    swr?: React.ComponentProps<typeof SWRConfig>['value'];
-    plugins?: string[];
-    pageType?: ShopType.PublishedThemePageType;
-    storefrontToken?: string | null;
-    storefrontHandle?: string | null;
-    shopToken?: string | null;
-    currency?: string | null;
-    locale?: string | null;
-    favicon?: string | null;
-    mobileOnly?: boolean | null;
-    swatches?: any[] | null;
-    mode?: RenderMode;
-    gaTrackingId?: string | null;
-    tiktokPixelId?: string | null;
-    facebookPixelId?: string | null;
-    customCodeHeader?: string | null;
-    customCodeBody?: string | null;
-};
-type PageBuilderPropsV2 = {
-    builderData?: {
-        uid: string;
-        lazy?: boolean;
-        priority?: boolean;
-        data: BuilderState;
-    }[];
-} & Omit<PageBuilderProps, 'builderData'>;
-type AdditionalPageBuilderProps = {
-    components: Record<string, React.ComponentType<any>>;
-};
-type NextPageWithLayout<P = PageBuilderProps, IP = P> = NextPage<P, IP> & {
-    getLayout?: (page: React.ReactElement, pageProps?: any) => React.ReactNode;
-};
-type AppPropsWithLayout<P = PageBuilderProps> = AppProps<P> & {
-    Component: NextPageWithLayout;
-};
-
-type CollectionPageProps = PageBuilderProps & {
-    collection?: CollectionQueryResponse['collection'];
-};
+type PageBuilderProps = {
+    seo?: NextSeoProps;
+    builderData?: BuilderState;
+    sectionData?: Record<string, SectionData>;
+    themeStyle?: string | null;
+    fontStyle?: string | null;
+    swr?: React.ComponentProps<typeof SWRConfig>['value'];
+    plugins?: string[];
+    pageType?: ShopType.PublishedThemePageType;
+    storefrontToken?: string | null;
+    storefrontHandle?: string | null;
+    shopToken?: string | null;
+    pageHandle?: string | null;
+    currency?: string | null;
+    locale?: string | null;
+    favicon?: string | null;
+    mobileOnly?: boolean | null;
+    swatches?: any[] | null;
+    mode?: RenderMode;
+    gaTrackingId?: string | null;
+    tiktokPixelId?: string | null;
+    facebookPixelId?: string | null;
+    customCodeHeader?: string | null;
+    customCodeBody?: string | null;
+};
+type PageBuilderPropsV2 = {
+    builderData?: {
+        uid: string;
+        lazy?: boolean;
+        priority?: boolean;
+        data: BuilderState;
+    }[];
+} & Omit<PageBuilderProps, 'builderData'>;
+type AdditionalPageBuilderProps = {
+    components: Record<string, React.ComponentType<any>>;
+};
+type NextPageWithLayout<P = PageBuilderProps, IP = P> = NextPage<P, IP> & {
+    getLayout?: (page: React.ReactElement, pageProps?: any) => React.ReactNode;
+};
+type AppPropsWithLayout<P = PageBuilderProps> = AppProps<P> & {
+    Component: NextPageWithLayout;
+};
+
+type CollectionPageProps = PageBuilderProps & {
+    collection?: CollectionQueryResponse['collection'];
+};
 declare const CollectionDetailPage: React.FC<CollectionPageProps & AdditionalPageBuilderProps>;
 
 declare const getCollectionProps: (fetcher: FetchFunc) => (handle?: string) => Promise<CollectionPageProps>;
@@ -61,12 +62,12 @@ declare const getHomePagePropsV2: (fetcher: FetchFunc, shopifyFetcher: FetchFunc
 
 declare const getPreviewProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (pageType: ShopType.PublishedThemePageType, slug?: string) => Promise<PageBuilderProps>;
 
-type Props$4 = Pick<PageBuilderProps, 'swr' | 'themeStyle' | 'seo' | 'currency' | 'locale' | 'swatches'>;
+type Props$4 = Pick<PageBuilderProps, 'swr' | 'themeStyle' | 'seo' | 'currency' | 'locale' | 'swatches'>;
 declare const getBuilderProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => Promise<Props$4>;
 
-type ProductPageProps = PageBuilderProps & {
-    product?: ProductSelectFragment;
-};
+type ProductPageProps = PageBuilderProps & {
+    product?: ProductSelectFragment;
+};
 declare const ProductDetailPage: React.FC<ProductPageProps & AdditionalPageBuilderProps>;
 
 declare const getProductProps: (fetcher: FetchFunc) => (handle?: string) => Promise<ProductPageProps>;
@@ -77,99 +78,103 @@ declare const getStaticPagePropsV2: (fetcher: FetchFunc, shopifyFetcher: FetchFu
 
 declare const getStaticPagePropsPreview: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
 
-declare const createFetcher: (token?: string | null) => FetchFunc;
+declare const createFetcher: (token?: string | null) => FetchFunc;
 declare const createShopifyFetcher: (storefrontToken?: string, handle?: string) => FetchFunc;
 
 declare const getLayout: (page: React.ReactElement, pageProps?: any) => JSX.Element;
 
 declare const genCSS: (input?: string | Record<string, any>, mobileOnly?: boolean) => string;
 
-type PreviewPageProps = {
-    components: Record<string, React.ComponentType<any>>;
-    pageType: ShopType.PublishedThemePageType;
-};
+declare const useTrackingView: (token?: string | null, handle?: string | null, isFallback?: boolean) => void;
+
+declare function isBot(input: string): boolean;
+
+type PreviewPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    pageType: ShopType.PublishedThemePageType;
+};
 declare const PreviewPage: React.FC<PreviewPageProps>;
 
-type StaticPageProps = PageBuilderProps;
+type StaticPageProps = PageBuilderProps;
 declare const StaticPage: React.FC<StaticPageProps & AdditionalPageBuilderProps>;
 
-type BuilderPageProps = {
-    components: Record<string, React.ComponentType<any>>;
-    seo?: NextSeoProps;
-    themeStyle?: string | null;
-    fontStyle?: string | null;
-    header?: BuilderState;
-    footer?: BuilderState;
-    sectionData?: Record<string, SectionData>;
-    storefrontToken?: string | null;
-    storefrontHandle?: string | null;
-    shopToken?: string | null;
-    mode?: RenderMode;
-};
+type BuilderPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    seo?: NextSeoProps;
+    themeStyle?: string | null;
+    fontStyle?: string | null;
+    header?: BuilderState;
+    footer?: BuilderState;
+    sectionData?: Record<string, SectionData>;
+    storefrontToken?: string | null;
+    storefrontHandle?: string | null;
+    shopToken?: string | null;
+    mode?: RenderMode;
+};
 declare const BuilderPage: React.FC<BuilderPageProps>;
 
-type StaticPagePropsV2 = PageBuilderPropsV2;
+type StaticPagePropsV2 = PageBuilderPropsV2;
 declare const StaticPageV2: React.FC<StaticPagePropsV2 & AdditionalPageBuilderProps>;
 
 declare const getStaticPaths: GetStaticPaths;
 
-type FontItem = {
-    family: string;
-    variants: string[];
-    subsets: string[];
-};
-type FontOption = {
-    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
-    subset?: string;
-    effect?: string;
-};
+type FontItem = {
+    family: string;
+    variants: string[];
+    subsets: string[];
+};
+type FontOption = {
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    subset?: string;
+    effect?: string;
+};
 declare function getFonts(fonts: FontItem[], option?: FontOption): Promise<string>;
 
 declare const getStorefrontApi: (handle: string, provider?: 'BIGCOMMERCE' | 'SHOPIFY') => string;
 
-type ErrorBoundaryProps = {
-    children?: React.ReactNode;
-    FallbackComponent: React.ComponentType<{
-        error?: Error;
-        resetErrorBoundary: () => void;
-    }>;
-    onError?: (error: Error, info: React.ErrorInfo) => void;
-};
-type ErrorBoundaryState = {
-    hasError?: boolean;
-    error?: Error;
-};
-declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    reset: () => void;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): string | number | boolean | react.ReactFragment | JSX.Element | null | undefined;
+type ErrorBoundaryProps = {
+    children?: React.ReactNode;
+    FallbackComponent: React.ComponentType<{
+        error?: Error;
+        resetErrorBoundary: () => void;
+    }>;
+    onError?: (error: Error, info: React.ErrorInfo) => void;
+};
+type ErrorBoundaryState = {
+    hasError?: boolean;
+    error?: Error;
+};
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    reset: () => void;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | react.ReactFragment | JSX.Element | null | undefined;
 }
 
-type Props$3 = {
-    error?: Error;
-    resetErrorBoundary: () => void;
-};
+type Props$3 = {
+    error?: Error;
+    resetErrorBoundary: () => void;
+};
 declare const ErrorFallback: ({ error, resetErrorBoundary }: Props$3) => JSX.Element;
 
 declare const Page404: () => JSX.Element;
 
 declare const Page500: () => JSX.Element;
 
-type Props$2 = {
-    trackingId?: string | null;
-};
+type Props$2 = {
+    trackingId?: string | null;
+};
 declare const GoogleAnalytic: ({ trackingId }: Props$2) => JSX.Element | null;
 
-type Props$1 = {
-    pixelId?: string | null;
-};
+type Props$1 = {
+    pixelId?: string | null;
+};
 declare const FacebookPixel: ({ pixelId }: Props$1) => JSX.Element | null;
 
-type Props = {
-    pixelId?: string | null;
-};
+type Props = {
+    pixelId?: string | null;
+};
 declare const TikTokPixel: ({ pixelId }: Props) => JSX.Element | null;
 
-export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi };
+export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, useTrackingView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.1.0",
+  "version": "1.5.0-canary-4fb10428",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
     "next-seo": "^5.15.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "*",
+    "@gem-sdk/core": "1.5.0-canary-4fb10428",
     "@gem-sdk/plugin-cookie-bar": "*",
     "@gem-sdk/plugin-quick-view": "*",
     "@gem-sdk/plugin-sticky-add-to-cart": "*"