@merchi/cart 1.4.4 → 1.4.6

package/src/stripe/actions.ts

@@ -7,6 +7,47 @@ export async function stripeInitPromise(apiUrl: string) {
   ).then((response: any) => response.key);
 }
 
+export async function fetchTestPublishableKey(apiUrl: string) {
+  const response: any = await fetch(
+    `${apiUrl}stripe/test_publishable_key/`,
+    { method: 'GET', mode: 'cors' }
+  );
+  if (response && typeof response.json === 'function') {
+    if (!response.ok) {
+      throw new Error('Stripe test keys are not configured');
+    }
+    const data = await response.json();
+    if (!data || !data.key) {
+      throw new Error('Stripe test keys are not configured');
+    }
+    return data.key;
+  }
+  if (!response || !response.key) {
+    throw new Error('Stripe test keys are not configured');
+  }
+  return response.key;
+}
+
+export async function completeTestPayment(apiUrl: string, cart: any) {
+  const query = new URLSearchParams({ cart_token: cart.token }).toString();
+  const response = await fetch(
+    `${apiUrl}carts/${cart.id}/complete_test_payment/?${query}`,
+    { method: 'POST', mode: 'cors' }
+  );
+  if (!response.ok) {
+    let message = 'Unable to complete the test order.';
+    try {
+      const data = await response.json();
+      message = data.message || data.errorMessage || message;
+    } catch {
+      // keep default
+    }
+    throw new Error(message);
+  }
+  const data = await response.json();
+  return data.invoice;
+}
+
 async function createPaymentIntent(apiUrl: string, cart: any, paymentMethodType?: string) {
   const { id, token } = cart;
   const fetchOptions: any = {

package/src/utilities/cookie.ts

@@ -1,4 +1,5 @@
 import { isBrowser } from "browser-or-node";
+import { cartCookieName, readTestCheckoutFlag } from "./test_checkout";
 
 export async function getCookie(name: string, defaultValue: any) {
   if (!isBrowser) {
@@ -22,13 +23,14 @@ export async function getCookie(name: string, defaultValue: any) {
   }
 }
 
-export async function getCartCookie(domainId: number | string) {
-  const idAndToken: string = await getCookie(`cart-${domainId}`, null);
+export async function getCartCookie(domainId: number | string, isTest?: boolean) {
+  const test = isTest ?? readTestCheckoutFlag();
+  const idAndToken: string = await getCookie(cartCookieName(domainId, test), null);
   return idAndToken ? idAndToken.split(',') : null;
 }
 
-export async function getCartCookieToken(domainId: number | string) {
-  const cartIdAndToken = domainId ? await getCartCookie(Number(domainId)) : undefined;
+export async function getCartCookieToken(domainId: number | string, isTest?: boolean) {
+  const cartIdAndToken = domainId ? await getCartCookie(Number(domainId), isTest) : undefined;
   return cartIdAndToken && cartIdAndToken[1] || undefined;
 }
 
@@ -52,7 +54,8 @@ async function setSessionCookie(name: string, value: any, domain?: any) {
   document.cookie = cookie;
 }
 
-export const setCartCookie = async (storeId: number, cart: any, domain?: any) => {
+export const setCartCookie = async (storeId: number, cart: any, domain?: any, isTest?: boolean) => {
+  const test = isTest ?? (cart ? Boolean(cart.isTest) : readTestCheckoutFlag());
   const cookieValue = cart ? cart.id + ',' + cart.token : '';
-  await setSessionCookie('cart-' + String(storeId), cookieValue, domain);
+  await setSessionCookie(cartCookieName(storeId, test), cookieValue, domain);
 };

package/src/utilities/index.ts

@@ -6,9 +6,11 @@ export * from './currency';
 export * from './helpers';
 export * from './invoice';
 export * from './job';
+export * from './job_source';
 export * from './local_storage';
 export * from './product';
 export * from './shipment';
 export * from './tabs';
+export * from './test_checkout';
 export * from './user';
 export * from './variations';

package/src/utilities/job_source.test.ts

@@ -0,0 +1,86 @@
+import {
+  JOB_SOURCE_STORAGE_KEY,
+  captureAndReadJobSource,
+  cartNeedsSourceUpdate,
+  hasPaidClick,
+} from './job_source';
+
+describe('job source capture', () => {
+  const originalLocation = window.location;
+  const originalReferrer = document.referrer;
+
+  beforeEach(() => {
+    window.localStorage.clear();
+    delete (window as any).location;
+    (window as any).location = {
+      search: '',
+      pathname: '/tyvek-wristbands',
+    };
+    Object.defineProperty(document, 'referrer', {
+      configurable: true,
+      value: '',
+    });
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+    Object.defineProperty(document, 'referrer', {
+      configurable: true,
+      value: originalReferrer,
+    });
+    window.localStorage.clear();
+  });
+
+  it('captures google ads click ids and landing path', () => {
+    (window as any).location = {
+      search: '?utm_source=google&utm_medium=cpc&gclid=EAIa&utm_campaign=bands',
+      pathname: '/tyvek-wristbands',
+    };
+    const source = captureAndReadJobSource();
+    expect(source.utmSource).toBe('google');
+    expect(source.utmMedium).toBe('cpc');
+    expect(source.utmCampaign).toBe('bands');
+    expect(source.sourceClickId).toBe('EAIa');
+    expect(source.sourceLanding).toBe(
+      '/tyvek-wristbands?utm_source=google&utm_medium=cpc&gclid=EAIa&utm_campaign=bands'
+    );
+    expect(hasPaidClick(source)).toBe(true);
+  });
+
+  it('keeps first-touch UTMs unless a paid click arrives later', () => {
+    (window as any).location = {
+      search: '?utm_source=newsletter&utm_medium=email',
+      pathname: '/',
+    };
+    captureAndReadJobSource();
+    (window as any).location = {
+      search: '?utm_source=google&utm_medium=cpc',
+      pathname: '/product',
+    };
+    expect(captureAndReadJobSource().utmSource).toBe('newsletter');
+    (window as any).location = {
+      search: '?gclid=NEWCLICK&utm_source=google',
+      pathname: '/product',
+    };
+    expect(captureAndReadJobSource().sourceClickId).toBe('NEWCLICK');
+    expect(window.localStorage.getItem(JOB_SOURCE_STORAGE_KEY)).toContain('NEWCLICK');
+  });
+
+  it('knows when an existing cart still needs source fields', () => {
+    expect(
+      cartNeedsSourceUpdate({}, { utmSource: 'google', sourceClickId: 'x' })
+    ).toBe(true);
+    expect(
+      cartNeedsSourceUpdate(
+        { utmSource: 'google' },
+        { utmSource: 'google', sourceClickId: 'x' }
+      )
+    ).toBe(true);
+    expect(
+      cartNeedsSourceUpdate(
+        { utmSource: 'google', sourceClickId: 'x' },
+        { utmSource: 'google', sourceClickId: 'x' }
+      )
+    ).toBe(false);
+  });
+});

package/src/utilities/job_source.ts

@@ -0,0 +1,165 @@
+export const JOB_SOURCE_STORAGE_KEY = 'merchi_job_source';
+
+const CLICK_ID_PARAMS = ['gclid', 'gbraid', 'wbraid', 'fbclid', 'msclkid'] as const;
+const UTM_PARAMS = [
+  'utm_source',
+  'utm_medium',
+  'utm_campaign',
+  'utm_content',
+  'utm_term',
+] as const;
+
+export interface JobSourceFields {
+  utmSource?: string;
+  utmMedium?: string;
+  utmCampaign?: string;
+  utmContent?: string;
+  utmTerm?: string;
+  sourceClickId?: string;
+  sourceLanding?: string;
+  sourceReferrer?: string;
+}
+
+function trimTo(value: string | null | undefined, limit: number): string | undefined {
+  if (!value) return undefined;
+  const text = value.trim().slice(0, limit);
+  return text || undefined;
+}
+
+function readSearchParams(): URLSearchParams {
+  if (typeof window === 'undefined') return new URLSearchParams();
+  try {
+    return new URLSearchParams(window.location.search);
+  } catch {
+    return new URLSearchParams();
+  }
+}
+
+function readStoredSource(): JobSourceFields | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(JOB_SOURCE_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return null;
+    return parsed as JobSourceFields;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredSource(source: JobSourceFields) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(JOB_SOURCE_STORAGE_KEY, JSON.stringify(source));
+  } catch {
+    // Ignore quota / private-mode failures.
+  }
+}
+
+function currentLanding(): string | undefined {
+  if (typeof window === 'undefined') return undefined;
+  try {
+    const path = `${window.location.pathname || '/'}${window.location.search || ''}`;
+    return trimTo(path, 512);
+  } catch {
+    return undefined;
+  }
+}
+
+function currentReferrer(): string | undefined {
+  if (typeof document === 'undefined') return undefined;
+  try {
+    return trimTo(document.referrer, 512);
+  } catch {
+    return undefined;
+  }
+}
+
+export function sourceFromLocation(): JobSourceFields {
+  const params = readSearchParams();
+  const source: JobSourceFields = {
+    utmSource: trimTo(params.get('utm_source'), 256),
+    utmMedium: trimTo(params.get('utm_medium'), 256),
+    utmCampaign: trimTo(params.get('utm_campaign'), 256),
+    utmContent: trimTo(params.get('utm_content'), 256),
+    utmTerm: trimTo(params.get('utm_term'), 256),
+    sourceLanding: currentLanding(),
+    sourceReferrer: currentReferrer(),
+  };
+  for (const key of CLICK_ID_PARAMS) {
+    const value = trimTo(params.get(key), 256);
+    if (value) {
+      source.sourceClickId = value;
+      break;
+    }
+  }
+  return source;
+}
+
+export function hasPaidClick(source: JobSourceFields | null | undefined): boolean {
+  return Boolean(source?.sourceClickId);
+}
+
+export function hasSourceData(source: JobSourceFields | null | undefined): boolean {
+  if (!source) return false;
+  return Boolean(
+    source.utmSource ||
+      source.utmMedium ||
+      source.utmCampaign ||
+      source.utmContent ||
+      source.utmTerm ||
+      source.sourceClickId ||
+      source.sourceLanding ||
+      source.sourceReferrer
+  );
+}
+
+export function captureAndReadJobSource(): JobSourceFields {
+  const incoming = sourceFromLocation();
+  const stored = readStoredSource();
+  if (hasPaidClick(incoming) || !hasSourceData(stored)) {
+    const next = {
+      ...(stored || {}),
+      ...Object.fromEntries(
+        Object.entries(incoming).filter(([, value]) => Boolean(value))
+      ),
+    } as JobSourceFields;
+    if (hasSourceData(next)) writeStoredSource(next);
+    return next;
+  }
+  return stored || incoming;
+}
+
+export function jobSourceFieldsForApi(source?: JobSourceFields | null): JobSourceFields {
+  const resolved = source || captureAndReadJobSource();
+  const out: JobSourceFields = {};
+  (Object.keys(resolved) as Array<keyof JobSourceFields>).forEach((key) => {
+    const value = resolved[key];
+    if (value) out[key] = value;
+  });
+  return out;
+}
+
+export function cartNeedsSourceUpdate(
+  cart: { utmSource?: string; sourceClickId?: string; sourceChannel?: string } | null | undefined,
+  source: JobSourceFields
+): boolean {
+  if (!hasSourceData(source)) return false;
+  if (!cart?.utmSource && !cart?.sourceClickId && !cart?.sourceChannel) return true;
+  return Boolean(source.sourceClickId && !cart?.sourceClickId);
+}
+
+export const JOB_SOURCE_URL_KEYS = [...UTM_PARAMS, ...CLICK_ID_PARAMS];
+
+export function appendJobSourceToFormData(
+  data: FormData,
+  source?: JobSourceFields | null
+): FormData {
+  const fields = jobSourceFieldsForApi(source);
+  (Object.keys(fields) as Array<keyof JobSourceFields>).forEach((key) => {
+    const value = fields[key];
+    if (value) data.append(key, value);
+  });
+  return data;
+}

package/src/utilities/shipment.test.ts

@@ -0,0 +1,68 @@
+import {
+  checkoutShipmentHydrationAction,
+  shipmentGroupsHaveQuotes,
+} from './shipment';
+
+const savedAddress = {
+  lineOne: '32 Bridge St',
+  city: 'Brighton',
+  state: 'VIC',
+  postcode: '3186',
+  country: 'AU',
+};
+
+describe('shipmentGroupsHaveQuotes', () => {
+  it('is false when groups are missing or empty', () => {
+    expect(shipmentGroupsHaveQuotes(undefined)).toBe(false);
+    expect(shipmentGroupsHaveQuotes([])).toBe(false);
+    expect(shipmentGroupsHaveQuotes([{ quotes: [] }])).toBe(false);
+  });
+
+  it('is true when any group has quotes', () => {
+    expect(
+      shipmentGroupsHaveQuotes([{ quotes: [] }, { quotes: [{ id: 1 }] }])
+    ).toBe(true);
+  });
+});
+
+describe('checkoutShipmentHydrationAction', () => {
+  it('applies a localStorage address when the cart has none', () => {
+    expect(
+      checkoutShipmentHydrationAction({
+        cartAddress: {},
+        savedAddress,
+        shipmentGroups: [],
+      })
+    ).toBe('apply-saved-address');
+  });
+
+  it('refreshes quotes when the cart already has an address but no options', () => {
+    expect(
+      checkoutShipmentHydrationAction({
+        cartAddress: savedAddress,
+        savedAddress,
+        shipmentGroups: [],
+      })
+    ).toBe('refresh-quotes');
+  });
+
+  it('does nothing when quotes are already available', () => {
+    expect(
+      checkoutShipmentHydrationAction({
+        cartAddress: savedAddress,
+        savedAddress,
+        shipmentGroups: [{ quotes: [{ id: 9 }] }],
+      })
+    ).toBe(null);
+  });
+
+  it('does nothing when neither cart nor localStorage has an address', () => {
+    expect(
+      checkoutShipmentHydrationAction({
+        cartAddress: {},
+        savedAddress: {},
+        shipmentGroups: [],
+      })
+    ).toBe(null);
+  });
+});

package/src/utilities/shipment.ts

@@ -1,3 +1,5 @@
+import { addressHasContent, SavedCheckoutAddress } from './local_storage';
+
 export const shipmentFormId = '_shipment-address-form-id';
 
 export function cartItemsNeedShipment(cart: any) {
@@ -9,3 +11,35 @@ export function cartItemsNeedShipment(cart: any) {
   }
   return false;
 }
+
+export function shipmentGroupsHaveQuotes(groups?: any[] | null) {
+  if (!groups?.length) return false;
+  return groups.some(
+    (group) => Array.isArray(group?.quotes) && group.quotes.length > 0
+  );
+}
+
+export type CheckoutShipmentHydrationAction =
+  | 'apply-saved-address'
+  | 'refresh-quotes'
+  | null;
+
+/**
+ * When checkout hydrates a saved address (localStorage) the form shows it,
+ * but quotes are only fetched after the user edits the field. Returning
+ * `apply-saved-address` means the cart still needs that address applied so
+ * quotes can be generated; `refresh-quotes` means the cart already has an
+ * address but no usable shipment options.
+ */
+export function checkoutShipmentHydrationAction(options: {
+  cartAddress?: SavedCheckoutAddress | null;
+  savedAddress?: SavedCheckoutAddress | null;
+  shipmentGroups?: any[] | null;
+}): CheckoutShipmentHydrationAction {
+  const hasCartAddress = addressHasContent(options.cartAddress);
+  const hasSavedAddress = addressHasContent(options.savedAddress);
+  const hasQuotes = shipmentGroupsHaveQuotes(options.shipmentGroups);
+  if (!hasCartAddress && hasSavedAddress) return 'apply-saved-address';
+  if (hasCartAddress && !hasQuotes) return 'refresh-quotes';
+  return null;
+}

package/src/utilities/test_checkout.test.ts

@@ -0,0 +1,39 @@
+import {
+  TEST_CARD_NUMBER,
+  TEST_CHECKOUT_QUERY,
+  TEST_CHECKOUT_STORAGE_KEY,
+  cartCookieName,
+  readTestCheckoutFlag,
+} from './test_checkout';
+
+describe('test checkout helpers', () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    window.localStorage.clear();
+    delete (window as any).location;
+    (window as any).location = { search: '' };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+    window.localStorage.clear();
+  });
+
+  it('builds a separate cookie name for test carts', () => {
+    expect(cartCookieName(12)).toBe('cart-12');
+    expect(cartCookieName(12, true)).toBe('cart-12-test');
+  });
+
+  it('persists the query flag and exposes the test card number', () => {
+    (window as any).location = { search: `?${TEST_CHECKOUT_QUERY}=1` };
+    expect(readTestCheckoutFlag()).toBe(true);
+    expect(window.localStorage.getItem(TEST_CHECKOUT_STORAGE_KEY)).toBe('1');
+    expect(TEST_CARD_NUMBER).toBe('4242 4242 4242 4242');
+  });
+
+  it('reads the stored flag when the query is absent', () => {
+    window.localStorage.setItem(TEST_CHECKOUT_STORAGE_KEY, '1');
+    expect(readTestCheckoutFlag()).toBe(true);
+  });
+});

package/src/utilities/test_checkout.ts

@@ -0,0 +1,27 @@
+export const TEST_CHECKOUT_QUERY = 'merchi_test_checkout';
+export const TEST_CHECKOUT_STORAGE_KEY = 'merchi_test_checkout';
+export const TEST_CARD_NUMBER = '4242 4242 4242 4242';
+
+export function readTestCheckoutFlag(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(TEST_CHECKOUT_QUERY) === '1') {
+      window.localStorage.setItem(TEST_CHECKOUT_STORAGE_KEY, '1');
+      return true;
+    }
+    return window.localStorage.getItem(TEST_CHECKOUT_STORAGE_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function persistTestCheckoutFlag(): boolean {
+  return readTestCheckoutFlag();
+}
+
+export function cartCookieName(domainId: number | string, isTest = false): string {
+  return isTest ? `cart-${domainId}-test` : `cart-${domainId}`;
+}