@economist/web-apple-pay 1.1.0 → 1.3.0

package/dist/src/clients/payment-checkout/config.d.ts

@@ -1,6 +1,7 @@
 export interface ApplePayRuntimeConfig {
     merchantId: string;
     debugBypassEnabled?: boolean;
+    walletApiBaseUrl: string;
 }
 export declare const configureApplePay: (config: ApplePayRuntimeConfig) => void;
 export declare const getApplePayConfig: () => ApplePayRuntimeConfig | null;

package/dist/src/clients/payment-checkout/detects.js

@@ -29,6 +29,9 @@ var isApplePayAvailable = async () => {
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
       return false;
     }
     return await applePaySession.canMakePaymentsWithActiveCard(merchantId);

package/dist/src/clients/payment-checkout/index.d.ts

@@ -0,0 +1 @@
+export declare const apiFetch: <T>(path: string, options?: RequestInit) => Promise<T>;

package/dist/src/clients/payment-checkout/index.js

@@ -0,0 +1,59 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+export {
+  apiFetch
+};

package/dist/src/clients/payment-checkout/session.d.ts

@@ -0,0 +1,2 @@
+import type { SessionResponse } from './types';
+export declare const getExpressCheckoutSession: () => Promise<SessionResponse>;

package/dist/src/clients/payment-checkout/session.js

@@ -0,0 +1,67 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var getApplePayConfig = () => runtimeConfig;
+
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+export {
+  getExpressCheckoutSession
+};

package/dist/src/clients/payment-checkout/types.d.ts

@@ -0,0 +1,14 @@
+export type SessionResponse = {
+    loggedIn: false;
+    userType: 'new-eligible-user';
+} | {
+    loggedIn: true;
+    emailAddress: string;
+    contactId: string;
+    userType: 'active-subscription' | 'b2b-user' | 'new-eligible-user';
+};
+export declare class ApiError extends Error {
+    readonly status: number;
+    readonly body: unknown;
+    constructor(status: number, body: unknown);
+}

package/dist/src/clients/payment-checkout/types.js

@@ -0,0 +1,14 @@
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+export {
+  ApiError
+};

package/dist/src/index.js

@@ -775,6 +775,9 @@ var isApplePayAvailable = async () => {
     }
     const merchantId = getApplePayConfig()?.merchantId;
     if (!merchantId) {
+      console.warn(
+        "[web-apple-pay] Missing merchantId. Call configureApplePay({ merchantId, ... }) before rendering Apple Pay components."
+      );
       return false;
     }
     return await applePaySession.canMakePaymentsWithActiveCard(merchantId);
@@ -784,6 +787,67 @@ var isApplePayAvailable = async () => {
   }
 };
 
+// src/clients/payment-checkout/types.ts
+var ApiError = class extends Error {
+  status;
+  body;
+  constructor(status, body) {
+    super(`API request failed with status ${status}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.body = body;
+  }
+};
+
+// src/clients/payment-checkout/index.ts
+var getWalletApiBaseUrl = () => {
+  const config = getApplePayConfig();
+  if (!config?.walletApiBaseUrl) {
+    throw new Error(
+      "[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
+    );
+  }
+  return config.walletApiBaseUrl;
+};
+var apiFetch = async (path, options = {}) => {
+  const baseUrl = getWalletApiBaseUrl();
+  const method = (options.method ?? "GET").toUpperCase();
+  const hasBody = options.body !== void 0 && options.body !== null;
+  const headers = new Headers(options.headers);
+  if (!headers.has("Accept")) {
+    headers.set("Accept", "application/json");
+  }
+  if (!headers.has("Content-Type")) {
+    if (hasBody || method !== "GET" && method !== "HEAD") {
+      headers.set("Content-Type", "application/json");
+    }
+  }
+  const response = await fetch(`${baseUrl}${path}`, {
+    ...options,
+    headers
+  });
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const errorBody = await response.json();
+      throw new ApiError(response.status, errorBody);
+    }
+    const errorText = await response.text();
+    throw new Error(
+      `API request failed: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+  return response.json();
+};
+
+// src/clients/payment-checkout/session.ts
+var getExpressCheckoutSession = () => {
+  return apiFetch("/v1/wallet/session", {
+    method: "GET",
+    credentials: "include"
+  });
+};
+
 // src/apple-pay-button.ts
 var FEATURE_APPLE_PAY_EXPRESS_CHECKOUT = "FEATURE_APPLE_PAY_EXPRESS_CHECKOUT";
 var APPLE_PAY_EXCLUDED_VARIANTS = ["bundle", "insider_print"];
@@ -841,6 +905,11 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
         this.style.display = "none";
         return;
       }
+      const sessionData = await this.#fetchSession();
+      if (sessionData?.loggedIn && (sessionData.userType === "active-subscription" || sessionData.userType === "b2b-user")) {
+        this.style.display = "none";
+        return;
+      }
       this.style.removeProperty("display");
       ensureApplePayLogoSymbol();
       const template = document.createElement("template");
@@ -883,6 +952,13 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
     button.setAttribute("disabled", "");
     button.setAttribute("aria-disabled", "true");
   }
+  async #fetchSession() {
+    try {
+      return await getExpressCheckoutSession();
+    } catch {
+      return null;
+    }
+  }
 };
 
 // src/index.ts

package/dist/src/stories/fixtures/offer.d.ts

@@ -0,0 +1,2 @@
+import type { Offer } from '../../types/offer.types';
+export declare const STORYBOOK_SAMPLE_OFFER: Offer;

package/dist/src/stories/fixtures/offer.js

@@ -0,0 +1,28 @@
+// src/stories/fixtures/offer.ts
+var STORYBOOK_SAMPLE_OFFER = {
+  sku_id: "TEG-APPLEPAY-STORY-001",
+  display_name: "Economist Digital",
+  price: {
+    purchase: 12,
+    pre_discount: 24,
+    currency_code: "USD",
+    discounted: true,
+    tax: { inclusive: false }
+  },
+  product: {
+    type: "subscription",
+    variant: "digital",
+    offer_type: "standard"
+  },
+  subscription_options: {
+    free_trial: false,
+    renewal_interval: { duration: 1, unit: "month" },
+    renewal_price: 12,
+    auto_renewal: true,
+    variable_term: false,
+    display_name: "Monthly"
+  }
+};
+export {
+  STORYBOOK_SAMPLE_OFFER
+};

package/dist/src/stories/utils/story-env.d.ts

@@ -0,0 +1,11 @@
+import type { SessionResponse } from '../../clients/payment-checkout/types';
+export type ApplePayStoryEnvironmentOptions = {
+    applePaySupported: boolean;
+    sessionResponse?: SessionResponse;
+    sessionStatus?: number;
+    debugBypassEnabled?: boolean;
+    bypassApplePayChecks?: boolean;
+};
+export declare const applyApplePayStoryEnvironment: ({ applePaySupported, sessionResponse, sessionStatus, debugBypassEnabled, bypassApplePayChecks, }: ApplePayStoryEnvironmentOptions) => void;
+export declare const withApplePayStoryEnvironment: <TArgs>(options: ApplePayStoryEnvironmentOptions, renderFn: (args: TArgs) => HTMLElement) => (args: TArgs) => HTMLElement;
+export declare const clickWhenElementReady: (root: ParentNode, selector: string, maxAttempts?: number) => void;

package/dist/src/stories/utils/story-env.js

@@ -0,0 +1,141 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  runtimeConfig = {
+    ...config
+  };
+};
+var resetApplePayConfig = () => {
+  runtimeConfig = null;
+};
+
+// src/stories/utils/story-env.ts
+var STORYBOOK_WALLET_BASE_URL = "https://storybook-wallet.economist.com";
+var STORYBOOK_SAFARI_UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15";
+var defaultSessionResponse = {
+  loggedIn: false,
+  userType: "new-eligible-user"
+};
+var resetStoryEnvironment = null;
+var createFetchMock = (sessionResponse, sessionStatus = 200) => {
+  return async (input) => {
+    const requestUrl = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (requestUrl.endsWith("/v1/wallet/session")) {
+      if (sessionStatus >= 400) {
+        return new Response("Session initialization failed", {
+          status: sessionStatus,
+          statusText: "Session Init Error"
+        });
+      }
+      return new Response(JSON.stringify(sessionResponse), {
+        status: 200,
+        headers: { "content-type": "application/json" }
+      });
+    }
+    return new Response("Not Found", {
+      status: 404,
+      statusText: "Not Found"
+    });
+  };
+};
+var applyApplePayStoryEnvironment = ({
+  applePaySupported,
+  sessionResponse = defaultSessionResponse,
+  sessionStatus = 200,
+  debugBypassEnabled = false,
+  bypassApplePayChecks = false
+}) => {
+  if (resetStoryEnvironment) {
+    resetStoryEnvironment();
+    resetStoryEnvironment = null;
+  }
+  const originalFetch = globalThis.fetch;
+  const originalHref = window.location.href;
+  const originalUserAgent = navigator.userAgent;
+  const originalMaxTouchPoints = navigator.maxTouchPoints;
+  const originalApplePaySessionDescriptor = Object.getOwnPropertyDescriptor(
+    window,
+    "ApplePaySession"
+  );
+  const mockApplePaySession = {
+    canMakePayments: () => applePaySupported,
+    canMakePaymentsWithActiveCard: async () => applePaySupported
+  };
+  Object.defineProperty(window, "ApplePaySession", {
+    configurable: true,
+    writable: true,
+    value: mockApplePaySession
+  });
+  Object.defineProperty(navigator, "userAgent", {
+    configurable: true,
+    writable: true,
+    value: STORYBOOK_SAFARI_UA
+  });
+  Object.defineProperty(navigator, "maxTouchPoints", {
+    configurable: true,
+    writable: true,
+    value: 0
+  });
+  globalThis.fetch = createFetchMock(sessionResponse, sessionStatus);
+  const nextUrl = new URL(window.location.href);
+  if (bypassApplePayChecks) {
+    nextUrl.searchParams.set("BYPASS_APPLE_PAY_CHECKS", "1");
+  } else {
+    nextUrl.searchParams.delete("BYPASS_APPLE_PAY_CHECKS");
+  }
+  window.history.replaceState({}, "", nextUrl.toString());
+  configureApplePay({
+    merchantId: "merchant.com.economist.storybook",
+    walletApiBaseUrl: STORYBOOK_WALLET_BASE_URL,
+    debugBypassEnabled
+  });
+  resetStoryEnvironment = () => {
+    resetApplePayConfig();
+    globalThis.fetch = originalFetch;
+    window.history.replaceState({}, "", originalHref);
+    Object.defineProperty(navigator, "userAgent", {
+      configurable: true,
+      writable: true,
+      value: originalUserAgent
+    });
+    Object.defineProperty(navigator, "maxTouchPoints", {
+      configurable: true,
+      writable: true,
+      value: originalMaxTouchPoints
+    });
+    if (originalApplePaySessionDescriptor) {
+      Object.defineProperty(
+        window,
+        "ApplePaySession",
+        originalApplePaySessionDescriptor
+      );
+      return;
+    }
+    delete window.ApplePaySession;
+  };
+};
+var withApplePayStoryEnvironment = (options, renderFn) => (args) => {
+  applyApplePayStoryEnvironment(options);
+  return renderFn(args);
+};
+var clickWhenElementReady = (root, selector, maxAttempts = 5) => {
+  let attempts = 0;
+  const tryClick = () => {
+    const element = root.querySelector(selector);
+    if (element) {
+      element.click();
+      return;
+    }
+    if (attempts >= maxAttempts) {
+      return;
+    }
+    attempts += 1;
+    requestAnimationFrame(tryClick);
+  };
+  requestAnimationFrame(tryClick);
+};
+export {
+  applyApplePayStoryEnvironment,
+  clickWhenElementReady,
+  withApplePayStoryEnvironment
+};

package/dist/src/types/offer.types.d.ts

@@ -71,13 +71,3 @@ export type Offer = {
     content?: Content;
     meta_data?: MetaData;
 };
-/** Total number of items matching the relevant lookup. */
-export type ResponseModelMetaTotal = {
-    total: number;
-};
-export type ResponsePostPricedSkuOffer = {
-    /** Offer list. */
-    data: Offer[] | null;
-    /** Set of key value pairs. */
-    meta: ResponseModelMetaTotal | null;
-};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,6 +22,8 @@
   "scripts": {
     "test": "jest",
     "test:coverage": "npm run test -- --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
     "tsc": "tsc --project tsconfig.json",
@@ -32,6 +34,10 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/test": "^8.6.18",
+    "@storybook/web-components-vite": "^8.6.18",
     "@types/jest": "29.5.3",
     "esbuild": "^0.25.3",
     "eslint": "^9.25.1",
@@ -39,6 +45,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.0.1",
+    "storybook": "^8.6.18",
     "ts-jest": "29.2.5",
     "ts-node": "10.9.1",
     "typescript": "^5.8.2",