@wapitee/typhoonx-hydrogen 0.4.6 → 0.6.0

package/dist/TyphoonX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0BD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAYpD"}
+{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmCD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAqBpD"}

package/dist/TyphoonX.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { flattenConnection, parseGid, useAnalytics } from '@shopify/hydrogen';
 import { useEffect, useRef, useState } from 'react';
-import { getOrCreateClientId } from './client-id.js';
+import { getOrCreateClientId, hasClientId } from './client-id.js';
 const COLLECT_ENDPOINT = 'https://spell.typhoonx.io/api/v1/receive';
 export default function TyphoonX(props) {
+    const { subscribe } = useAnalytics();
+    const isInsideProvider = subscribe.length > 0;
     const [isClient, setIsClient] = useState(false);
     useEffect(() => {
         setIsClient(true);
     }, []);
-    if (!isClient) {
+    useEffect(() => {
+        if (!isInsideProvider) {
+            console.error('[TyphoonX] <TyphoonX> must be rendered inside <Analytics.Provider>.');
+        }
+    }, [isInsideProvider]);
+    if (!isClient || !isInsideProvider) {
         return null;
     }
     return _jsx(TyphoonXClient, { ...props });
@@ -18,6 +25,17 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
     const { ready } = register('TyphoonX');
     const currentUrlRef = useRef(null);
     const previousUrlRef = useRef(null);
+    useEffect(() => {
+        try {
+            if (!hasClientId()) {
+                window.localStorage.setItem('__typhoon_first_visit_time', new Date().toISOString());
+                window.localStorage.setItem('__typhoon_first_visit_url', window.location.href);
+            }
+        }
+        catch {
+            // Do nothing
+        }
+    }, [hasClientId()]);
     useEffect(() => {
         const clientId = getOrCreateClientId(cookieDomain);
         const referrerFor = (url) => {
@@ -44,9 +62,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
         });
         subscribe('cart_viewed', (data) => {
             const { cart } = data;
-            if (!cart?.lines) {
+            if (!cart?.lines)
                 return;
-            }
             const cartLines = flattenConnection(cart.lines);
             send({
                 ...shared(data.url, data.shop?.currency),
@@ -63,9 +80,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
         });
         subscribe('collection_viewed', (data) => {
             const { collection } = data;
-            if (!collection.id) {
+            if (!collection.id)
                 return;
-            }
             send({
                 ...shared(data.url, data.shop?.currency),
                 event: 'view_item_list',
@@ -74,16 +90,33 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             });
         });
         subscribe('page_viewed', (data) => {
+            const payload = shared(data.url);
             send({
-                ...shared(data.url),
+                ...payload,
                 event: 'page_view',
             });
+            try {
+                const visitTime = window.localStorage.getItem('__typhoon_first_visit_time');
+                const visitUrl = window.localStorage.getItem('__typhoon_first_visit_url');
+                if (!visitTime || !visitUrl)
+                    return;
+                send({
+                    ...payload,
+                    request_page_url: visitUrl,
+                    timestamp: visitTime,
+                    event: 'first_visit',
+                });
+                window.localStorage.removeItem('__typhoon_first_visit_time');
+                window.localStorage.removeItem('__typhoon_first_visit_url');
+            }
+            catch {
+                // Do nothing
+            }
         });
         subscribe('product_added_to_cart', (data) => {
             const { currentLine } = data;
-            if (currentLine === undefined) {
+            if (currentLine === undefined)
                 return;
-            }
             send({
                 ...shared(window.location.href, data.shop?.currency),
                 event: 'add_to_cart',
@@ -102,9 +135,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
         subscribe('product_removed_from_cart', (data) => {
             const { currentLine, prevLine } = data;
             const quantity = (prevLine?.quantity ?? 0) - (currentLine?.quantity ?? 0);
-            if (prevLine === undefined || quantity <= 0) {
+            if (prevLine === undefined || quantity <= 0)
                 return;
-            }
             send({
                 ...shared(window.location.href, data.shop?.currency),
                 event: 'remove_from_cart',
@@ -123,9 +155,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
         });
         subscribe('product_viewed', (data) => {
             const product = data.products[0];
-            if (product === undefined) {
+            if (product === undefined)
                 return;
-            }
             send({
                 ...shared(data.url, data.shop?.currency),
                 event: 'view_item',
@@ -141,6 +172,16 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
                 value: product.price,
             });
         });
+        subscribe('search_viewed', (data) => {
+            const { searchTerm } = data;
+            if (!searchTerm)
+                return;
+            send({
+                ...shared(data.url, data.shop?.currency),
+                event: 'search',
+                search_term: searchTerm,
+            });
+        });
         ready();
     }, [cookieDomain, merchantId, shopId, canTrack, ready, subscribe]);
     return null;

package/dist/client-id.d.ts

@@ -1,3 +1,5 @@
+/** Whether `__typhoon_client_id` is already set. */
+export declare function hasClientId(): boolean;
 /** Existing `__typhoon_client_id`, or a new UUID cookie on the apex domain. */
 export declare function getOrCreateClientId(cookieDomain?: string): string;
 //# sourceMappingURL=client-id.d.ts.map

package/dist/client-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAwBA,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE"}
+{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAwBA,oDAAoD;AACpD,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE"}

package/dist/client-id.js

@@ -8,6 +8,10 @@ const cookies = new Cookies(null, {
     sameSite: 'lax',
     maxAge: MAX_AGE,
 });
+/** Whether `__typhoon_client_id` is already set. */
+export function hasClientId() {
+    return cookies.get(COOKIE, { doNotParse: true }) !== undefined;
+}
 /** Existing `__typhoon_client_id`, or a new UUID cookie on the apex domain. */
 export function getOrCreateClientId(cookieDomain) {
     const existing = cookies.get(COOKIE, { doNotParse: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wapitee/typhoonx-hydrogen",
-  "version": "0.4.6",
+  "version": "0.6.0",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "keywords": [
     "typhoonx",