@wapitee/typhoonx-hydrogen 0.1.0 → 0.2.0

package/README.md

@@ -30,6 +30,18 @@ export function App() {
 
 The component renders `null`.
 
+Also update `app/entry.server.tsx` to allow TyphoonX in the content security policy:
+
+```javascript
+const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+  shop: {
+    checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
+    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+  },
+  connectSrc: ['https://spell.typhoonx.io'], // add this line
+});
+```
+
 ### Props
 
 | Prop           | Type     | Required | Description                                                                                                 |
@@ -42,18 +54,6 @@ The component renders `null`.
 import type {TyphoonXProps} from '@wapitee/typhoonx-hydrogen';
 ```
 
-### Events
-
-| Hydrogen                | TyphoonX      |
-| ----------------------- | ------------- |
-| `page_viewed`           | `page_view`   |
-| `product_viewed`        | `view_item`   |
-| `product_added_to_cart` | `add_to_cart` |
-
-Beacons go to `https://spell.typhoonx.io/api/v1/receive`. Checkout and purchase are out of scope.
-
-Sends are gated by Hydrogen `canTrack()` (Customer Privacy). The anonymous visitor id lives in `__typhoon_client_id` (one year, `SameSite=Lax`, `Secure` on HTTPS).
-
 ## License
 
 [MIT](./LICENSE) © Wapitee Interactive

package/dist/TyphoonX.js

@@ -90,6 +90,28 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
                 value: currentLine.cost.totalAmount.amount,
             });
         });
+        subscribe('product_removed_from_cart', (data) => {
+            const { currentLine, prevLine } = data;
+            const quantity = (prevLine?.quantity ?? 0) - (currentLine?.quantity ?? 0);
+            if (prevLine === undefined || quantity <= 0) {
+                return;
+            }
+            send({
+                ...shared(window.location.href, data.shop?.currency),
+                event: 'remove_from_cart',
+                items: [
+                    {
+                        item_brand: prevLine.merchandise.product.vendor,
+                        item_id: parseGid(prevLine.merchandise.product.id).id,
+                        item_name: prevLine.merchandise.product.title,
+                        price: prevLine.merchandise.price.amount,
+                        quantity,
+                    },
+                ],
+                value: String(Number(prevLine.cost.totalAmount.amount)
+                    - Number(currentLine?.cost.totalAmount.amount ?? 0)),
+            });
+        });
         ready();
         return () => {
             cancelled = true;

package/dist/client-id.d.ts

@@ -1,2 +1,18 @@
+/**
+ * Returns the TyphoonX client id from the `__typhoon_client_id` cookie, or
+ * creates a new UUID and writes it when the cookie is missing.
+ *
+ * The cookie is scoped to `Path=/`, uses `SameSite=Lax`, and expires after
+ * one year. When `cookieDomain` is set, that value is used as the cookie
+ * `Domain` so the id can be shared across subdomains. The `Secure` flag is
+ * added automatically on HTTPS pages.
+ *
+ * @remarks
+ * This helper must run in the browser. It reads and writes `document.cookie`.
+ *
+ * @param cookieDomain - Optional cookie `Domain` attribute, typically the
+ * storefront apex domain.
+ * @returns The existing or newly created client id.
+ */
 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":"AAGA,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CA8BjE"}
+{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CA8BjE"}

package/dist/client-id.js

@@ -1,5 +1,23 @@
+/** Cookie name that stores the anonymous TyphoonX client identifier. */
 const COOKIE = '__typhoon_client_id';
+/** Cookie lifetime in seconds (365 days). */
 const MAX_AGE = 31_536_000;
+/**
+ * Returns the TyphoonX client id from the `__typhoon_client_id` cookie, or
+ * creates a new UUID and writes it when the cookie is missing.
+ *
+ * The cookie is scoped to `Path=/`, uses `SameSite=Lax`, and expires after
+ * one year. When `cookieDomain` is set, that value is used as the cookie
+ * `Domain` so the id can be shared across subdomains. The `Secure` flag is
+ * added automatically on HTTPS pages.
+ *
+ * @remarks
+ * This helper must run in the browser. It reads and writes `document.cookie`.
+ *
+ * @param cookieDomain - Optional cookie `Domain` attribute, typically the
+ * storefront apex domain.
+ * @returns The existing or newly created client id.
+ */
 export function getOrCreateClientId(cookieDomain) {
     const prefix = `${COOKIE}=`;
     const existing = document.cookie

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wapitee/typhoonx-hydrogen",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
   "bugs": {