@economist/web-apple-pay 1.2.0 → 1.4.0

package/dist/src/index.js

@@ -881,6 +881,7 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   #offer = null;
   #country = "";
   #rendering = false;
+  #readyPromise = null;
   get offer() {
     return this.#offer;
   }
@@ -894,11 +895,34 @@ var ApplePayButton = class _ApplePayButton extends HTMLElement {
   set country(value) {
     this.#country = value;
   }
+  /**
+   * Awaitable contract for the component's current render lifecycle.
+   *
+   * - If called **after** the element has been appended to the DOM, resolves
+   *   once `connectedCallback` finishes — whether Apple Pay rendered
+   *   successfully or was hidden (unavailable / suppressed by session).
+   * - If called **before** the element is appended (or if it has never been
+   *   connected), resolves immediately to `undefined`. It does **not** wait
+   *   for a future connection, so always `await whenReady()` after `appendChild`:
+   *
+   * ```ts
+   * container.appendChild(btn);  // browser fires connectedCallback
+   * await btn.whenReady();       // waits for render to finish
+   * if (btn.style.display !== 'none') { /* available *\/ }
+   * ```
+   */
+  whenReady() {
+    return this.#readyPromise ?? Promise.resolve();
+  }
   async connectedCallback() {
     if (this.#rendering || this.querySelector(".apple-pay-container")) {
       return;
     }
     this.#rendering = true;
+    this.#readyPromise = this.#run();
+    await this.#readyPromise;
+  }
+  async #run() {
     try {
       const available = await isApplePayAvailable();
       if (!available) {

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@economist/web-apple-pay",
   "description": "Web component package for Apple Pay checkout UI",
-  "version": "1.2.0",
+  "version": "1.4.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",