fontdue-js 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.5.0
+
+- Adding to the cart now sends the buyer's analytics context (cookie consent, anonymous ID, Meta's `_fbp`/`_fbc`) with the request, the same way opening the cart already did. Fontdue records a "Product Added" event for each add and a "Checkout Started" event the first time the buyer submits their contact details in checkout.
+- `createFontdueFetch` from `fontdue-js/server` now sends the `fontdue-client-version` header, so server-rendered requests report the package version to Fontdue the way browser requests already did.
+
 ## 3.4.1
 
 - Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.

package/dist/__generated__/PrecartAddToCartMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fa9a3fe0cf1077d643c7e9bbcf053058>>
+ * @generated SignedSource<<74cae87a2fa5e1e7b1ee3b6482faabae>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@ export type CreateOrderItemsInput = {
     licenseeIsBillingIdentity?: boolean | null;
     orderVariableSelections?: ReadonlyArray<OrderVariableSelectionInput> | null;
     skuIds: ReadonlyArray<string | null>;
+    tracking?: OrderTrackingInput | null;
 };
 export type LicenseSelectionInput = {
     id?: string | null;
@@ -23,6 +24,13 @@ export type OrderVariableSelectionInput = {
     orderVariableId: string;
     orderVariableOptionId?: string | null;
 };
+export type OrderTrackingInput = {
+    analyticsConsent?: boolean | null;
+    anonymousId?: string | null;
+    fbc?: string | null;
+    fbp?: string | null;
+    url?: string | null;
+};
 export type PrecartAddToCartMutation$variables = {
     input: CreateOrderItemsInput;
 };

package/dist/__generated__/PrecartAddToCartMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fa9a3fe0cf1077d643c7e9bbcf053058>>
+ * @generated SignedSource<<74cae87a2fa5e1e7b1ee3b6482faabae>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<bdbd57be989b0c0a5ac24293c9e1a97b>>
+ * @generated SignedSource<<fef9b63617978230edc13ef9b3412c2e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@ export type CreateOrderItemsInput = {
     licenseeIsBillingIdentity?: boolean | null;
     orderVariableSelections?: ReadonlyArray<OrderVariableSelectionInput> | null;
     skuIds: ReadonlyArray<string | null>;
+    tracking?: OrderTrackingInput | null;
 };
 export type LicenseSelectionInput = {
     id?: string | null;
@@ -23,6 +24,13 @@ export type OrderVariableSelectionInput = {
     orderVariableId: string;
     orderVariableOptionId?: string | null;
 };
+export type OrderTrackingInput = {
+    analyticsConsent?: boolean | null;
+    anonymousId?: string | null;
+    fbc?: string | null;
+    fbp?: string | null;
+    url?: string | null;
+};
 export type StoreModalProductSummaryAddToCartMutation$variables = {
     input: CreateOrderItemsInput;
 };

package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<bdbd57be989b0c0a5ac24293c9e1a97b>>
+ * @generated SignedSource<<fef9b63617978230edc13ef9b3412c2e>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__tests__/createFontdueFetch.test.js

@@ -245,6 +245,22 @@ describe('createFontdueFetch', () => {
       expect(init.next).toBeUndefined();
     });
   });
+  describe('fontdue-client-version header', () => {
+    it('sends the package version, like the Relay layer does', async () => {
+      const fetchMock = mockFetch(() => ({
+        status: 200,
+        json: async () => ({
+          data: {}
+        })
+      }));
+      const fetchGraphql = createFontdueFetch({
+        url: 'https://acme.fontdue.com'
+      });
+      await fetchGraphql('Q', 'query Q { __typename }');
+      const init = fetchMock.mock.calls[0][1];
+      expect(init.headers['fontdue-client-version']).toBe('0.0.0-test');
+    });
+  });
   describe('fontdue-preview header', () => {
     it('sends "false" by default so a public/session-only request never reveals hidden fonts', async () => {
       const fetchMock = mockFetch(() => ({

package/dist/__tests__/networkFetch.test.js

@@ -111,6 +111,44 @@ describe('createNetworkFetch (server)', () => {
 function headersOf(fetchMock) {
   return fetchMock.mock.calls[0][1].headers;
 }
+describe('createNetworkFetch (fontdue-client-version header)', () => {
+  // The server records this per tenant (Fontage.ClientVersions) to find sites
+  // that must upgrade before a client-dependent feature works for them.
+  it('sends the package version on every request', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch,
+      version
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(version).toBe('0.0.0-test');
+    expect(headersOf(fetchMock)['fontdue-client-version']).toBe('0.0.0-test');
+  });
+  it('cannot be overridden by per-call headers', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch({
+      headers: {
+        'fontdue-client-version': '9.9.9'
+      }
+    })(request, {});
+    expect(headersOf(fetchMock)['fontdue-client-version']).toBe('0.0.0-test');
+  });
+});
 describe('createNetworkFetch (fontdue-preview header)', () => {
   it('sends fontdue-preview: false on a public server fetch (no token)', async () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');

package/dist/components/Cart/orderTracking.d.ts

@@ -1,10 +1,27 @@
 import { Environment } from 'relay-runtime';
+export type OrderTrackingInput = {
+    analyticsConsent: boolean;
+    anonymousId?: string;
+    fbp?: string;
+    fbc?: string;
+    url: string;
+};
 /**
- * Stores the buyer's analytics context (cookie consent, Meta browser IDs,
- * checkout page URL) on the current order. The server emits the purchase
- * event from a Stripe webhook — outside the browser — so this is how that
- * event respects the consent banner and carries attribution.
+ * The buyer's analytics context as the order mutations take it: cookie
+ * consent, the anonymous ID, Meta's browser IDs (`_fbp`/`_fbc`) and the page.
+ * Sent with add-to-cart (`createOrderItems`) and cart/checkout open
+ * (`updateOrderTracking`) alike, so the server captures the same identifiers
+ * on every event it emits for the order — "Product Added", "Checkout Started"
+ * (which the server emits when the buyer submits their contact details, not
+ * from these calls) and the purchase, which fires from a Stripe webhook with
+ * no browser at all.
  *
- * Fire-and-forget: tracking must never break checkout.
+ * Returns undefined outside a browser or if anything throws: tracking must
+ * never break the cart.
+ */
+export declare function orderTrackingInput(): OrderTrackingInput | undefined;
+/**
+ * Stores the buyer's analytics context on the current order as the cart or
+ * checkout opens. Fire-and-forget: tracking must never break checkout.
  */
 export declare function sendOrderTracking(environment: Environment): void;

package/dist/components/Cart/orderTracking.js

@@ -5,27 +5,46 @@ function readCookie(name) {
   const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
   return match ? decodeURIComponent(match[1]) : undefined;
 }
-
 /**
- * Stores the buyer's analytics context (cookie consent, Meta browser IDs,
- * checkout page URL) on the current order. The server emits the purchase
- * event from a Stripe webhook — outside the browser — so this is how that
- * event respects the consent banner and carries attribution.
+ * The buyer's analytics context as the order mutations take it: cookie
+ * consent, the anonymous ID, Meta's browser IDs (`_fbp`/`_fbc`) and the page.
+ * Sent with add-to-cart (`createOrderItems`) and cart/checkout open
+ * (`updateOrderTracking`) alike, so the server captures the same identifiers
+ * on every event it emits for the order — "Product Added", "Checkout Started"
+ * (which the server emits when the buyer submits their contact details, not
+ * from these calls) and the purchase, which fires from a Stripe webhook with
+ * no browser at all.
  *
- * Fire-and-forget: tracking must never break checkout.
+ * Returns undefined outside a browser or if anything throws: tracking must
+ * never break the cart.
+ */
+export function orderTrackingInput() {
+  try {
+    if (typeof window === 'undefined') return undefined;
+    return {
+      analyticsConsent: hasConsent('analytics'),
+      anonymousId: getClientAnonymousId(),
+      fbp: readCookie('_fbp'),
+      fbc: readCookie('_fbc'),
+      url: window.location.href
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Stores the buyer's analytics context on the current order as the cart or
+ * checkout opens. Fire-and-forget: tracking must never break checkout.
  */
 export function sendOrderTracking(environment) {
+  const input = orderTrackingInput();
+  if (!input) return;
   try {
     commitMutation(environment, {
       mutation: (_orderTrackingUpdateOrderTrackingMutation.hash && _orderTrackingUpdateOrderTrackingMutation.hash !== "d59a127a7f140424f507ae549731bac7" && console.error("The definition of 'orderTrackingUpdateOrderTrackingMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _orderTrackingUpdateOrderTrackingMutation),
       variables: {
-        input: {
-          analyticsConsent: hasConsent('analytics'),
-          anonymousId: getClientAnonymousId(),
-          fbp: readCookie('_fbp'),
-          fbc: readCookie('_fbc'),
-          url: window.location.href
-        }
+        input
       },
       onCompleted: () => undefined,
       onError: () => undefined

package/dist/components/Precart/index.js

@@ -12,6 +12,7 @@ import License from './License.js';
 import { Price } from '../Price/index.js';
 import { pluralize } from '../../utils.js';
 import ComponentsContext from '../ComponentsContext.js';
+import { orderTrackingInput } from '../Cart/orderTracking.js';
 function skuName(sku) {
   if (sku.product && 'name' in sku.product) return sku.product.name;
   return null;
@@ -153,7 +154,8 @@ function Precart(_ref3) {
     const variables = {
       input: {
         skuIds: selectedItemsArray(),
-        licenseSelections: licenseSelectionsArray()
+        licenseSelections: licenseSelectionsArray(),
+        tracking: orderTrackingInput()
       }
     };
     const mutation = (_PrecartAddToCartMutation.hash && _PrecartAddToCartMutation.hash !== "c5ead46ecc07099bee68d4f4f1ecb5bf" && console.error("The definition of 'PrecartAddToCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartAddToCartMutation);

package/dist/components/StoreModalProductSummary/index.js

@@ -11,6 +11,7 @@ import { pluralize } from '../../utils.js';
 import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
 import { useRefetchOnLicenseChanges } from '../../hooks/useRefetchOnLicenseChanges.js';
 import ConfigContext from '../ConfigContext.js';
+import { orderTrackingInput } from '../Cart/orderTracking.js';
 const addToCartMutation = (_StoreModalProductSummaryAddToCartMutation.hash && _StoreModalProductSummaryAddToCartMutation.hash !== "91ea762e3842af2919da3a4c710a48cc" && console.error("The definition of 'StoreModalProductSummaryAddToCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummaryAddToCartMutation);
 const clearCartMutation = (_StoreModalProductSummaryClearCartMutation.hash && _StoreModalProductSummaryClearCartMutation.hash !== "b5c37f74432030a297c1bcf2be63b6f7" && console.error("The definition of 'StoreModalProductSummaryClearCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalProductSummaryClearCartMutation);
 const countStyles = viewer => {
@@ -105,7 +106,8 @@ const StoreModalProductSummary = _ref => {
           });
         }, []),
         orderVariableSelections,
-        licenseeIsBillingIdentity
+        licenseeIsBillingIdentity,
+        tracking: orderTrackingInput()
       }
     };
     commitAddToCart({

package/dist/relay/environment.d.ts

@@ -1,5 +1,6 @@
 import { Environment, RequestParameters, QueryResponseCache, Variables, GraphQLResponse } from 'relay-runtime';
-export declare const version: string;
+import { version } from '../version.js';
+export { version };
 export declare function fontdueBaseUrl(): string | undefined;
 export declare function createNetworkFetch(options?: CreateRelayEnvironmentOptions): (request: RequestParameters, variables: Variables) => Promise<GraphQLResponse>;
 export declare const networkFetch: (request: RequestParameters, variables: Variables) => Promise<GraphQLResponse>;
@@ -16,4 +17,3 @@ interface CreateRelayEnvironmentOptions {
 }
 export declare function createEnvironment(options: CreateRelayEnvironmentOptions): Environment;
 export declare function useCurrentEnvironment(options: CreateRelayEnvironmentOptions): Environment;
-export {};

package/dist/relay/environment.js

@@ -3,12 +3,11 @@ import { handlePossibleCorsError } from '../corsError.js';
 import { resolveFontdueServerConfig } from './serverConfig.js';
 import { PREVIEW_HEADER, hasPreviewMarkerCookie } from '../preview/constants.js';
 import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
+import { CLIENT_VERSION_HEADER, version } from '../version.js';
 
-// `__FONTDUE_JS_VERSION__` is replaced by an inline babel plugin
-// (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
-// Exported so UI (the admin toolbar) can surface it without re-reading the
-// build-time global in a 'use client' module.
-export const version = "3.4.1";
+// Re-exported so UI (the admin toolbar) can surface the package version
+// without re-reading the build-time global in a 'use client' module.
+export { version };
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays
@@ -78,7 +77,7 @@ export function createNetworkFetch(options) {
       Accept: 'application/json',
       'Content-Type': 'application/json',
       'fontdue-stripe-integration': (options === null || options === void 0 ? void 0 : options.stripeIntegration) ?? STRIPE_INTEGRATION ?? 'dynamic',
-      'fontdue-client-version': version
+      [CLIENT_VERSION_HEADER]: version
     };
 
     // Whether this request is an admin *preview*. On the server that's a

package/dist/server/index.js

@@ -47,6 +47,7 @@
 
 import { resolveFontdueServerConfig, setFontdueServerConfig, resolveNodeAccessRecovery } from '../relay/serverConfig.js';
 import { PREVIEW_HEADER } from '../preview/constants.js';
+import { CLIENT_VERSION_HEADER, version } from '../version.js';
 function readEnv(name) {
   if (typeof process !== 'undefined' && process.env) {
     const v = process.env[name];
@@ -146,7 +147,11 @@ export function createFontdueFetch() {
     const headers = {
       'content-type': 'application/json',
       ...(config === null || config === void 0 ? void 0 : config.headers),
-      ...options.headers
+      ...options.headers,
+      // Which fontdue-js this site runs – the server records it per tenant so
+      // sites that need to upgrade for a feature can be found and warned.
+      // Set last so a caller's headers can't misreport it.
+      [CLIENT_VERSION_HEADER]: version
     };
 
     // Declare preview intent explicitly: a forwarded admin token means this is a

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const CLIENT_VERSION_HEADER = "fontdue-client-version";
+export declare const version: string;

package/dist/version.js

@@ -0,0 +1,11 @@
+// `__FONTDUE_JS_VERSION__` is replaced by an inline babel plugin
+// (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version;
+// the CDN bundle gets the same literal from vite.config.ts `define`.
+//
+// Every GraphQL request sends it as the `fontdue-client-version` header
+// (relay/environment.ts, server/index.ts, and the script-tag bootstrap in
+// assets/fontdue/index.tsx). The server records the version per tenant
+// (Fontage.ClientVersions) to spot sites that need to upgrade before a
+// feature that depends on a newer client can work for them.
+export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
+export const version = "3.5.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",