@wapitee/typhoonx-hydrogen 0.2.0 → 0.4.0

package/README.md

@@ -1,20 +1,20 @@
-# @wapitee/typhoonx-hydrogen
+# TyphoonX for Shopify Hydrogen
 
-Hydrogen `useAnalytics` subscriber that sends TyphoonX storefront events.
+[![npm package](https://img.shields.io/npm/v/@wapitee/typhoonx-hydrogen?style=flat-square)](https://www.npmjs.com/package/@wapitee/typhoonx-hydrogen)
+[![MIT License](https://img.shields.io/badge/License-MIT-red.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 
-This is not a Shopify Web Pixel. Place it in a Hydrogen storefront, inside `Analytics.Provider`.
+Hydrogen `useAnalytics` subscriber that sends TyphoonX storefront events.
 
 ## Install
 
 ```bash
-pnpm add @wapitee/typhoonx-hydrogen
+npm install --save @wapitee/typhoonx-hydrogen
 ```
 
-Peer dependencies: `react` ^18.3.1 and `@shopify/hydrogen` >=2025.5.1. Node.js 20 or later.
-
 ## Usage
 
 ```tsx
+// app/root.tsx
 import {Analytics} from '@shopify/hydrogen';
 import TyphoonX from '@wapitee/typhoonx-hydrogen';
 
@@ -28,9 +28,7 @@ export function App() {
 }
 ```
 
-The component renders `null`.
-
-Also update `app/entry.server.tsx` to allow TyphoonX in the content security policy:
+If your Shopify Hydrogen project sets a Content-Security-Policy, add `https://spell.typhoonx.io` to `connect-src` so event collection is not blocked.
 
 ```javascript
 const {nonce, header, NonceProvider} = createContentSecurityPolicy({
@@ -44,15 +42,11 @@ const {nonce, header, NonceProvider} = createContentSecurityPolicy({
 
 ### Props
 
-| Prop           | Type     | Required | Description                                                                                                 |
-| -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `merchantId`   | `string` | yes      | TyphoonX account key (`TPX-…`)                                                                              |
-| `shopId`       | `string` | yes      | Shopify shop numeric id                                                                                     |
-| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Omit for a host-only cookie (recommended on `*.myshopify.com`) |
-
-```ts
-import type {TyphoonXProps} from '@wapitee/typhoonx-hydrogen';
-```
+| Prop           | Type     | Required | Description                                                              |
+| -------------- | -------- | -------- | ------------------------------------------------------------------------ |
+| `merchantId`   | `string` | yes      | TyphoonX merchant ID (`TPX-…`)                                           |
+| `shopId`       | `string` | yes      | Shopify store ID                                                         |
+| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Omit for a host-only cookie |
 
 ## License
 

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;AAwBD,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;AA0BD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAYpD"}

package/dist/TyphoonX.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { parseGid, useAnalytics } from '@shopify/hydrogen';
+import { flattenConnection, parseGid, useAnalytics } from '@shopify/hydrogen';
 import { useEffect, useRef, useState } from 'react';
 import { getOrCreateClientId } from './client-id.js';
 const COLLECT_ENDPOINT = 'https://spell.typhoonx.io/api/v1/receive';
@@ -44,30 +44,41 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             user_agent: window.navigator.userAgent,
             ...(currency === undefined ? {} : { currency }),
         });
-        subscribe('page_viewed', (data) => {
+        subscribe('cart_viewed', (data) => {
+            const { cart } = data;
+            if (!cart?.lines) {
+                return;
+            }
+            const cartLines = flattenConnection(cart.lines);
             send({
-                ...shared(data.url),
-                event: 'page_view',
+                ...shared(data.url, data.shop?.currency),
+                event: 'view_cart',
+                items: cartLines.map((line) => ({
+                    item_brand: line.merchandise.product.vendor,
+                    item_id: parseGid(line.merchandise.product.id).id,
+                    item_name: line.merchandise.product.title,
+                    price: line.merchandise.price.amount,
+                    quantity: line.quantity,
+                })),
+                value: cart.cost.totalAmount.amount,
             });
         });
-        subscribe('product_viewed', (data) => {
-            const product = data.products[0];
-            if (product === undefined) {
+        subscribe('collection_viewed', (data) => {
+            const { collection } = data;
+            if (!collection.id) {
                 return;
             }
             send({
                 ...shared(data.url, data.shop?.currency),
-                event: 'view_item',
-                items: [
-                    {
-                        item_brand: product.vendor,
-                        item_id: parseGid(product.id).id,
-                        item_name: product.title,
-                        price: product.price,
-                        quantity: 1,
-                    },
-                ],
-                value: product.price,
+                event: 'view_item_list',
+                item_list_id: parseGid(collection.id).id,
+                item_list_name: collection.handle,
+            });
+        });
+        subscribe('page_viewed', (data) => {
+            send({
+                ...shared(data.url),
+                event: 'page_view',
             });
         });
         subscribe('product_added_to_cart', (data) => {
@@ -112,6 +123,26 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
                     - Number(currentLine?.cost.totalAmount.amount ?? 0)),
             });
         });
+        subscribe('product_viewed', (data) => {
+            const product = data.products[0];
+            if (product === undefined) {
+                return;
+            }
+            send({
+                ...shared(data.url, data.shop?.currency),
+                event: 'view_item',
+                items: [
+                    {
+                        item_brand: product.vendor,
+                        item_id: parseGid(product.id).id,
+                        item_name: product.title,
+                        price: product.price,
+                        quantity: 1,
+                    },
+                ],
+                value: product.price,
+            });
+        });
         ready();
         return () => {
             cancelled = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wapitee/typhoonx-hydrogen",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
   "bugs": {
@@ -39,7 +39,7 @@
     "react": "^18.3.1"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "publishConfig": {
     "access": "public",