@economist/web-apple-pay 0.1.1-beta.0

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,148 @@
+// src/clients/payment-checkout/config.ts
+var runtimeConfig = null;
+var configureApplePay = (config) => {
+  console.log("[web-apple-pay] configureApplePay called", {
+    merchantId: config.merchantId,
+    walletApiBaseUrl: config.walletApiBaseUrl,
+    debugBypassEnabled: config.debugBypassEnabled,
+    recaptchaSiteKey: config.recaptchaSiteKey ? "***" : void 0
+  });
+  runtimeConfig = {
+    ...config
+  };
+};
+var resetApplePayConfig = () => {
+  console.log("[web-apple-pay] resetApplePayConfig called");
+  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

@@ -0,0 +1,73 @@
+export type ProductVariant = 'bundle' | 'digital' | 'espresso' | 'espressopod' | 'podcast' | 'insider_digital' | 'insider_print';
+export type PeriodUnit = 'week' | 'month' | 'year';
+export type Period = {
+    duration: number;
+    unit: PeriodUnit;
+};
+export type Tax = {
+    inclusive: boolean;
+};
+export type Price = {
+    purchase: number;
+    pre_discount?: number;
+    currency_code: string;
+    discounted: boolean;
+    tax?: Tax;
+};
+export type Product = {
+    type: string;
+    variant: ProductVariant;
+    offer_type: string;
+};
+export type TrialPeriod = {
+    duration: number;
+    unit: PeriodUnit;
+};
+export type RenewalInterval = {
+    duration: number;
+    unit: PeriodUnit;
+};
+export type SubscriptionOptions = {
+    free_trial: boolean;
+    trial_period?: TrialPeriod;
+    renewal_interval: RenewalInterval;
+    renewal_price?: number;
+    auto_renewal: boolean;
+    variable_term: boolean;
+    display_name: string;
+    introductory?: boolean;
+    sale_offer?: boolean;
+    bau_price?: string;
+    min_term_contract?: boolean;
+    min_term_contract_length?: string;
+};
+export type Restrictions = {
+    countries?: string[];
+};
+export type UnstructuredContent = {
+    features_html?: string;
+    custom_display_price?: string;
+};
+export type StructuredContent = {
+    custom_subscription_display_name?: string;
+    discount_percentages?: string[];
+    custom_detailed_display_price?: string;
+};
+export type Content = {
+    unstructured?: UnstructuredContent;
+    structured?: StructuredContent;
+};
+export type MetaData = {
+    can_checkout?: boolean;
+    product_path?: string;
+};
+export type Offer = {
+    sku_id: string;
+    price: Price;
+    display_name: string;
+    product: Product;
+    subscription_options: SubscriptionOptions;
+    restrictions?: Restrictions;
+    content?: Content;
+    meta_data?: MetaData;
+};

package/dist/src/utils/billing-countries.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns the list of country codes that are valid billing countries for an offer.
+ *
+ * Mirrors sma-checkout `billingCountryOptions()` logic (options.ts:21):
+ *   - `bundle` / `insider_print` offers → unrestricted (all countries)
+ *   - EEA offer country               → price-zone countries ∪ all EEA countries
+ *   - Otherwise                        → price-zone countries only
+ *
+ * **Intentional deviation from sma-checkout:**
+ * The source (`get-zone-by-country.ts`) throws `Error('No price zone found for country …')`
+ * when the offer country is not in any price zone. This function returns all countries instead.
+ * Rationale: Web Components have no React error boundary — an uncaught throw would crash
+ * the host page silently. Returning all countries is the safe degradation: the Apple Pay
+ * session itself validates the billing address, so no invalid payment can succeed.
+ *
+ * @param offerCountry - ISO 3166-1 alpha-2 country code of the offer (e.g. `'GB'`)
+ * @param offerVariant - Product variant string (e.g. `'digital'`, `'bundle'`)
+ */
+export declare const getSupportedBillingCountries: (offerCountry: string, offerVariant: string) => string[];

package/dist/src/utils/billing-countries.js

@@ -0,0 +1,263 @@
+// src/data/price-zones.json
+var price_zones_default = {
+  "AS-AS": [
+    "BD",
+    "BT",
+    "CK",
+    "FJ",
+    "ID",
+    "KH",
+    "KI",
+    "LA",
+    "LK",
+    "MH",
+    "MM",
+    "MN",
+    "MV",
+    "NC",
+    "NF",
+    "NP",
+    "NR",
+    "PF",
+    "PG",
+    "PK",
+    "PW",
+    "SB",
+    "TH",
+    "TL",
+    "TO",
+    "TV",
+    "VN",
+    "VU",
+    "WS"
+  ],
+  "AS-AU": ["AU"],
+  "AS-CN": ["CN"],
+  "AS-HK": ["HK", "MO"],
+  "AS-IN": ["IN"],
+  "AS-JP": ["JP"],
+  "AS-KR": ["KR"],
+  "AS-MY": ["MY"],
+  "AS-NZ": ["NZ"],
+  "AS-PH": ["PH"],
+  "AS-SG": ["BN", "SG"],
+  "AS-TW": ["TW"],
+  "CE-AF": [
+    "DZ",
+    "AO",
+    "BJ",
+    "BW",
+    "BF",
+    "BI",
+    "CM",
+    "CV",
+    "CF",
+    "TD",
+    "CG",
+    "CD",
+    "CI",
+    "DJ",
+    "EG",
+    "GQ",
+    "ER",
+    "ET",
+    "GA",
+    "GM",
+    "GH",
+    "GN",
+    "GW",
+    "IL",
+    "JO",
+    "KE",
+    "LB",
+    "LS",
+    "LR",
+    "LY",
+    "MG",
+    "MW",
+    "ML",
+    "MR",
+    "MU",
+    "MA",
+    "MZ",
+    "NA",
+    "NE",
+    "NG",
+    "PS",
+    "RE",
+    "RW",
+    "ST",
+    "SN",
+    "SC",
+    "SL",
+    "ZA",
+    "SZ",
+    "TZ",
+    "TG",
+    "TN",
+    "UG",
+    "ZM",
+    "ZW"
+  ],
+  "CE-CH": ["LI", "CH"],
+  "CE-DK": ["FO", "GL", "DK"],
+  "CE-EU": [
+    "AL",
+    "AD",
+    "AM",
+    "AT",
+    "AZ",
+    "BY",
+    "BE",
+    "BA",
+    "BG",
+    "HR",
+    "CY",
+    "CZ",
+    "EE",
+    "FI",
+    "FR",
+    "GE",
+    "DE",
+    "GI",
+    "GR",
+    "HU",
+    "IS",
+    "IE",
+    "IT",
+    "KZ",
+    "XK",
+    "KG",
+    "LV",
+    "LT",
+    "LU",
+    "MT",
+    "MD",
+    "MC",
+    "ME",
+    "NL",
+    "PL",
+    "PT",
+    "MK",
+    "RO",
+    "RS",
+    "SK",
+    "SI",
+    "ES",
+    "TJ",
+    "TR",
+    "TM",
+    "UA",
+    "UZ"
+  ],
+  "CE-ME": ["AE", "BH", "KW", "OM", "QA", "SA"],
+  "CE-NO": ["NO"],
+  "CE-SE": ["SE"],
+  "LA-LA": [
+    "AI",
+    "AG",
+    "AR",
+    "AW",
+    "BS",
+    "BB",
+    "BZ",
+    "BM",
+    "BO",
+    "BR",
+    "KY",
+    "CL",
+    "CO",
+    "CR",
+    "DM",
+    "DO",
+    "EC",
+    "SV",
+    "FK",
+    "GF",
+    "GD",
+    "GT",
+    "GY",
+    "HT",
+    "HN",
+    "JM",
+    "MQ",
+    "MX",
+    "MS",
+    "NI",
+    "MP",
+    "PA",
+    "PY",
+    "PE",
+    "KN",
+    "LC",
+    "VC",
+    "SR",
+    "TT",
+    "TC",
+    "UY",
+    "VG",
+    "VI"
+  ],
+  "NA-CA": ["CA"],
+  "NA-US": ["AS", "GU", "FM", "PR", "US"],
+  "UK-UK": ["GB"]
+};
+
+// src/data/eea-countries.json
+var eea_countries_default = [
+  "AT",
+  "BE",
+  "BG",
+  "HR",
+  "CY",
+  "CZ",
+  "DK",
+  "EE",
+  "FO",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "GL",
+  "HU",
+  "IS",
+  "IE",
+  "IT",
+  "LV",
+  "LI",
+  "LT",
+  "LU",
+  "MT",
+  "NL",
+  "NO",
+  "PL",
+  "PT",
+  "RO",
+  "SK",
+  "SI",
+  "ES",
+  "SE"
+];
+
+// src/utils/billing-countries.ts
+var priceZones = price_zones_default;
+var eeaCountries = eea_countries_default;
+var ALL_COUNTRY_CODES = Object.values(priceZones).flat();
+var getZoneByCountry = (country) => Object.keys(priceZones).find((key) => priceZones[key].includes(country)) ?? null;
+var getSupportedBillingCountries = (offerCountry, offerVariant) => {
+  if (offerVariant === "bundle" || offerVariant === "insider_print") {
+    return [...ALL_COUNTRY_CODES];
+  }
+  const zone = getZoneByCountry(offerCountry);
+  if (!zone) {
+    return [...ALL_COUNTRY_CODES];
+  }
+  const zoneCountries = priceZones[zone];
+  if (eeaCountries.includes(offerCountry)) {
+    return Array.from(/* @__PURE__ */ new Set([...zoneCountries, ...eeaCountries]));
+  }
+  return [...zoneCountries];
+};
+export {
+  getSupportedBillingCountries
+};

package/dist/src/utils/define.d.ts

@@ -0,0 +1 @@
+export declare const define: (component: string, instance: CustomElementConstructor) => void;

package/dist/src/utils/define.js

@@ -0,0 +1,9 @@
+// src/utils/define.ts
+var define = (component, instance) => {
+  if (!window.customElements.get(component)) {
+    window.customElements.define(component, instance);
+  }
+};
+export {
+  define
+};

package/dist/src/utils/expressCheckoutRedirect.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Centralized redirect URL builders for the Express Checkout payment handler.
+ *
+ * All redirects include a `returnUrl` parameter so downstream pages
+ * (/checkout/complete, onboarding) can return the user to the original article.
+ *
+ * Matches sma-checkout: src/lib/navigate-to-checkout/index.tsx
+ */
+/**
+ * Captures the current page URL (the article the user is reading).
+ * Must be called before any redirect occurs.
+ */
+export declare const captureOriginUrl: () => string;
+/**
+ * Extracts only the `country` query param from the current page URL for
+ * forwarding to /checkout/complete. All other params are intentionally excluded.
+ *
+ * Matches sma-checkout: src/hooks/use-query-string/useCountryCodeQueryString
+ * Only `country` is forwarded — feature flags, UTM tags, and all other host-page
+ * params must NOT be propagated to /checkout/complete.
+ */
+export declare const buildQueryString: () => string;
+/**
+ * Decodes a Commerce Services encoded SKU to the raw offer path.
+ * e.g. LO-L29mZmVyczIvTkEt... → /offers2/NA-US.DIGITAL.MAAR...
+ *
+ * Matches sma-checkout: src/lib/commerce-services/decode-sku.ts
+ */
+export declare const decodeSku: (sku: string) => string;
+/**
+ * Builds the success redirect URL.
+ * /checkout/complete?basketId={id}&lmo_offer={sku}&status={userStatus}&redirectToCheckout=true&returnUrl=...
+ */
+export declare const redirectToCheckoutComplete: (params: {
+    basketId: string;
+    status: "nex" | "lex";
+    skuId: string;
+    returnUrl: string;
+    queryString?: string;
+}) => string;
+/**
+ * Builds the fallback redirect URL for error scenarios.
+ * /checkout?lmo_offer={sku}&inlineError=...&returnUrl=...
+ *
+ * Builds on top of the current page URL (window.location.href) so that any
+ * existing query params (UTM tags, campaign flags) are preserved — matching
+ * sma-checkout: src/lib/navigate-to-checkout/index.tsx
+ */
+export declare const redirectToCheckoutFallback: (params: {
+    skuId: string;
+    returnUrl: string;
+    inlineError?: string;
+    emailError?: string;
+    email?: string;
+}) => string;

package/dist/src/utils/expressCheckoutRedirect.js

@@ -0,0 +1,46 @@
+// src/utils/expressCheckoutRedirect.ts
+var captureOriginUrl = () => window.location.href;
+var buildQueryString = () => {
+  const countryCode = new URLSearchParams(window.location.search).get(
+    "country"
+  );
+  return countryCode ? `&country=${encodeURIComponent(countryCode)}` : "";
+};
+var decodeSku = (sku) => {
+  try {
+    return atob(sku.substring(sku.indexOf("-") + 1));
+  } catch {
+    return sku;
+  }
+};
+var redirectToCheckoutComplete = (params) => {
+  const url = new URL("/checkout/complete", window.location.origin);
+  url.searchParams.set("basketId", params.basketId);
+  if (params.queryString) {
+    const qs = params.queryString.startsWith("?") ? params.queryString.slice(1) : params.queryString;
+    new URLSearchParams(qs).forEach((v, k) => url.searchParams.set(k, v));
+  }
+  url.searchParams.set("lmo_offer", params.skuId);
+  url.searchParams.set("status", params.status);
+  url.searchParams.set("redirectToCheckout", "true");
+  url.searchParams.set("returnUrl", params.returnUrl);
+  return url.pathname + url.search;
+};
+var redirectToCheckoutFallback = (params) => {
+  const url = new URL(window.location.href);
+  url.pathname = "/checkout";
+  url.searchParams.set("lmo_offer", params.skuId);
+  if (params.inlineError)
+    url.searchParams.set("inlineError", params.inlineError);
+  if (params.email) url.searchParams.set("email", params.email);
+  if (params.emailError) url.searchParams.set("emailError", params.emailError);
+  url.searchParams.set("returnUrl", params.returnUrl);
+  return url.pathname + url.search;
+};
+export {
+  buildQueryString,
+  captureOriginUrl,
+  decodeSku,
+  redirectToCheckoutComplete,
+  redirectToCheckoutFallback
+};