@blocklet/payment-react-headless 1.26.0

package/lib/shared/validation.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFieldValidation = getFieldValidation;
+exports.postalCodePatterns = void 0;
+exports.validateEmail = validateEmail;
+exports.validateForm = validateForm;
+exports.validatePhone = validatePhone;
+exports.validatePostalCode = validatePostalCode;
+var _isEmail = _interopRequireDefault(require("validator/lib/isEmail"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const fourDigit = /^\d{4}$/;
+const fiveDigit = /^\d{5}$/;
+const sixDigit = /^\d{6}$/;
+const postalCodePatterns = exports.postalCodePatterns = {
+  GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
+  JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  US: /^\d{5}([ -]\d{4})?$/,
+  CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+  DE: fiveDigit,
+  JP: /^\d{3}-?\d{4}$/,
+  FR: /^\d{2}[ ]?\d{3}$/,
+  AU: fourDigit,
+  IT: fiveDigit,
+  CH: fourDigit,
+  AT: fourDigit,
+  ES: fiveDigit,
+  NL: /^\d{4}[ ]?[A-Z]{2}$/i,
+  BE: fourDigit,
+  DK: fourDigit,
+  SE: /^\d{3}[ ]?\d{2}$/,
+  NO: fourDigit,
+  BR: /^\d{5}-?\d{3}$/,
+  PT: /^\d{4}(-\d{3})?$/,
+  FI: fiveDigit,
+  KR: fiveDigit,
+  CN: sixDigit,
+  TW: /^\d{3}(\d{2})?$/,
+  SG: sixDigit,
+  IN: /^[1-9]\d{5}$/,
+  RU: sixDigit,
+  PL: /^\d{2}-\d{3}$/,
+  CZ: /^\d{3}[ ]?\d{2}$/,
+  HU: fourDigit,
+  RO: sixDigit,
+  BG: fourDigit,
+  HR: fiveDigit,
+  SK: /^\d{3}[ ]?\d{2}$/,
+  SI: fourDigit,
+  TR: fiveDigit,
+  IL: fiveDigit,
+  ZA: fourDigit,
+  MX: fiveDigit,
+  AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
+  CL: /^\d{7}$/,
+  CO: sixDigit,
+  NZ: fourDigit,
+  MY: fiveDigit,
+  TH: fiveDigit,
+  PH: fourDigit,
+  ID: fiveDigit,
+  VN: sixDigit
+};
+function validatePostalCode(postalCode, country) {
+  if (!postalCode) return true;
+  try {
+    const countryUpper = country?.toUpperCase();
+    if (!countryUpper) return false;
+    const pattern = postalCodePatterns[countryUpper];
+    return !pattern || pattern.test(postalCode);
+  } catch {
+    return false;
+  }
+}
+function getFieldValidation(fieldName, validations, locale = "en") {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || "Invalid format"
+    };
+  }
+  return rules;
+}
+let phoneUtil = null;
+async function getPhoneUtil() {
+  if (!phoneUtil) {
+    const result = await Promise.resolve().then(() => require("google-libphonenumber"));
+    const PhoneNumberUtil = (result.default || result)?.PhoneNumberUtil;
+    if (!PhoneNumberUtil) {
+      throw new Error("PhoneNumberUtil not found");
+    }
+    phoneUtil = PhoneNumberUtil.getInstance();
+  }
+  return phoneUtil;
+}
+const PHONE_REGEX_FALLBACK = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/im;
+async function validatePhone(phone) {
+  if (!phone || phone.trim() === "") return false;
+  try {
+    const util = await getPhoneUtil();
+    const parsed = util.parseAndKeepRawInput(phone);
+    return util.isValidNumber(parsed);
+  } catch {
+    return PHONE_REGEX_FALLBACK.test(phone);
+  }
+}
+function validateEmail(email) {
+  if (!email || email.trim() === "") return false;
+  return (0, _isEmail.default)(email);
+}
+async function validateForm(values, options) {
+  const errors = {};
+  const {
+    phoneEnabled,
+    addressMode,
+    fieldValidation,
+    locale = "en"
+  } = options;
+  if (!values) {
+    return {
+      valid: false,
+      errors: {
+        customer_name: "Required"
+      }
+    };
+  }
+  const customerName = values.customer_name;
+  if (!customerName || customerName.trim() === "") {
+    errors.customer_name = "Required";
+  } else {
+    const nameRule = getFieldValidation("customer_name", fieldValidation, locale);
+    if (nameRule.pattern && !nameRule.pattern.value.test(customerName)) {
+      errors.customer_name = nameRule.pattern.message;
+    }
+  }
+  const customerEmail = values.customer_email;
+  if (!customerEmail || !validateEmail(customerEmail)) {
+    errors.customer_email = !customerEmail ? "Required" : "Invalid email";
+  } else {
+    const emailRule = getFieldValidation("customer_email", fieldValidation, locale);
+    if (emailRule.pattern && !emailRule.pattern.value.test(customerEmail)) {
+      errors.customer_email = emailRule.pattern.message;
+    }
+  }
+  if (phoneEnabled) {
+    const customerPhone = values.customer_phone;
+    if (!customerPhone || customerPhone.trim() === "") {
+      errors.customer_phone = "Required";
+    } else if (!(await validatePhone(customerPhone))) {
+      errors.customer_phone = "Invalid phone number";
+    } else {
+      const phoneRule = getFieldValidation("customer_phone", fieldValidation, locale);
+      if (phoneRule.pattern && !phoneRule.pattern.value.test(customerPhone)) {
+        errors.customer_phone = phoneRule.pattern.message;
+      }
+    }
+  }
+  const billingAddress = values.billing_address;
+  const postalCode = billingAddress?.postal_code;
+  const country = billingAddress?.country;
+  const state = billingAddress?.state;
+  const line1 = billingAddress?.line1;
+  const city = billingAddress?.city;
+  if (!postalCode) {
+    errors["billing_address.postal_code"] = "Required";
+  } else if (!validatePostalCode(postalCode, country)) {
+    errors["billing_address.postal_code"] = "Invalid postal code";
+  } else {
+    const postalRule = getFieldValidation("billing_address.postal_code", fieldValidation, locale);
+    if (postalRule.pattern && !postalRule.pattern.value.test(postalCode)) {
+      errors["billing_address.postal_code"] = postalRule.pattern.message;
+    }
+  }
+  if (!state) {
+    errors["billing_address.state"] = "Required";
+  } else {
+    const stateRule = getFieldValidation("billing_address.state", fieldValidation, locale);
+    if (stateRule.pattern && !stateRule.pattern.value.test(state)) {
+      errors["billing_address.state"] = stateRule.pattern.message;
+    }
+  }
+  if (addressMode === "required") {
+    if (!country) errors["billing_address.country"] = "Required";
+    if (!line1) {
+      errors["billing_address.line1"] = "Required";
+    } else {
+      const line1Rule = getFieldValidation("billing_address.line1", fieldValidation, locale);
+      if (line1Rule.pattern && !line1Rule.pattern.value.test(line1)) {
+        errors["billing_address.line1"] = line1Rule.pattern.message;
+      }
+    }
+    if (!city) {
+      errors["billing_address.city"] = "Required";
+    } else {
+      const cityRule = getFieldValidation("billing_address.city", fieldValidation, locale);
+      if (cityRule.pattern && !cityRule.pattern.value.test(city)) {
+        errors["billing_address.city"] = cityRule.pattern.message;
+      }
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors
+  };
+}

package/lib/types/checkout-augmented.d.ts

@@ -0,0 +1,42 @@
+import type { TCheckoutSessionExpanded, TPrice, TPriceExpanded } from '@blocklet/payment-types';
+export interface CheckoutSessionUser {
+    did?: string;
+    sourceAppPid?: string;
+    connectedAccounts?: Array<{
+        provider: string;
+    }>;
+    extraConfigs?: {
+        connectedAccounts?: Array<{
+            provider: string;
+        }>;
+    };
+}
+export type CheckoutSessionRuntime = TCheckoutSessionExpanded & {
+    user?: CheckoutSessionUser;
+    quote_locked_at?: number;
+};
+export type PriceWithCrossSell = TPriceExpanded & {
+    cross_sell?: {
+        cross_sells_to?: TPrice;
+        cross_sells_to_id?: string;
+    };
+};
+export interface UpsellExpanded {
+    upsells_to_id?: string;
+    upsells_to?: TPrice;
+}
+/**
+ * Get human-readable message from unknown error.
+ * Works for standard Error, AxiosError, and string errors.
+ */
+export declare function getErrorMessage(err: unknown): string;
+/**
+ * Extract API error details from an unknown axios-like error.
+ * Returns message, error code, and raw response data.
+ */
+export declare function getAxiosErrorDetails(err: unknown): {
+    message: string;
+    code: string | undefined;
+    data: Record<string, unknown> | undefined;
+    isCancelled: boolean;
+};

package/lib/types/checkout-augmented.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxiosErrorDetails = getAxiosErrorDetails;
+exports.getErrorMessage = getErrorMessage;
+function getErrorMessage(err) {
+  const axErr = err;
+  if (axErr?.response?.data?.error) return axErr.response.data.error;
+  if (err instanceof Error) return err.message;
+  if (typeof err === "string") return err;
+  return axErr?.message || "Unknown error";
+}
+function getAxiosErrorDetails(err) {
+  const axErr = err;
+  const data = axErr?.response?.data;
+  return {
+    message: data?.error || axErr?.message || "Unknown error",
+    code: data?.code,
+    data,
+    isCancelled: axErr?.name === "CanceledError" || axErr?.name === "AbortError"
+  };
+}

package/lib/types/external.d.ts

@@ -0,0 +1,18 @@
+declare module 'google-libphonenumber' {
+  export class PhoneNumberUtil {
+    static getInstance(): PhoneNumberUtil;
+    parseAndKeepRawInput(numberToParse: string, defaultRegion?: string): any;
+    isValidNumber(number: any): boolean;
+  }
+}
+
+declare module '@arcblock/ws' {
+  export class WsClient {
+    constructor(url: string, options?: Record<string, any>);
+    connect(): void;
+    disconnect(): void;
+    isConnected(): boolean;
+    subscribe(channel: string): any;
+    unsubscribe(channel: string): void;
+  }
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@blocklet/payment-react-headless",
+  "version": "1.26.0",
+  "description": "Headless React hooks for payment-kit checkout",
+  "keywords": [
+    "react",
+    "payment",
+    "headless",
+    "hooks"
+  ],
+  "author": "ArcBlock",
+  "homepage": "https://github.com/blocklet/payment-kit",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blocklet/payment-kit.git"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf es lib",
+    "build": "pnpm run clean && tsc --noEmit && unbuild",
+    "test": "node tools/jest.js --passWithNoTests",
+    "prepublish": "pnpm run build"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    }
+  },
+  "dependencies": {
+    "@arcblock/ws": "^1.28.5",
+    "@blocklet/js-sdk": "workspace:*",
+    "@blocklet/payment-types": "1.26.0",
+    "@ocap/util": "^1.28.5",
+    "ahooks": "^3.8.5",
+    "google-libphonenumber": "^3.2.42",
+    "lodash": "^4.17.21",
+    "p-wait-for": "^3.2.0",
+    "validator": "^13.15.15"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@blocklet/payment-types": "workspace:*",
+    "@types/lodash": "^4.17.16",
+    "@types/react": "^18.3.23",
+    "@types/validator": "^13.12.2",
+    "jest": "^29.7.0",
+    "react": "^19.1.0",
+    "ts-jest": "^29.4.0",
+    "typescript": "5.5.4",
+    "unbuild": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9585ec8bc077fc5f8a8c5946d05436b10576e145"
+}

package/src/checkout/context/CheckoutProvider.tsx

@@ -0,0 +1,269 @@
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import type { TLineItemExpanded } from '@blocklet/payment-types';
+
+import { useCheckoutSession } from '../hooks/useCheckoutSession';
+import { usePaymentMethod as usePaymentMethodHook } from '../hooks/usePaymentMethod';
+import { useCustomerForm as useCustomerFormHook } from '../hooks/useCustomerForm';
+import { useSubmit as useSubmitHook } from '../hooks/useSubmit';
+import { checkHasDynamicPricing, fetchExchangeRate, BASE_INTERVAL } from '../core/exchangeRate';
+import { recalculatePromotionIfNeeded } from '../core/lineItems';
+
+import { SessionContext, type SessionContextValue } from './SessionContext';
+import { PaymentMethodContext, type PaymentMethodContextValue } from './PaymentMethodContext';
+import { ExchangeRateContext, type ExchangeRateContextValue } from './ExchangeRateContext';
+import { CustomerFormContext } from './CustomerFormContext';
+import { SubmitReactContext } from './SubmitContext';
+
+export interface CheckoutProviderProps {
+  sessionId: string;
+  children: React.ReactNode;
+}
+
+export function CheckoutProvider({ sessionId, children }: CheckoutProviderProps) {
+  // 1. Session layer
+  const {
+    isLoading,
+    error,
+    errorCode,
+    refresh,
+    setSessionData,
+    sessionData,
+    resolvedSessionId,
+    vendorCount,
+    product,
+    subscription,
+    pageInfo,
+  } = useCheckoutSession(sessionId);
+
+  const session = sessionData?.checkoutSession;
+  const effectiveSessionId = resolvedSessionId || sessionId;
+  const items = (session?.line_items || []) as TLineItemExpanded[];
+  const isDonation = session?.submit_type === 'donate';
+
+  const sessionValue = useMemo<SessionContextValue>(
+    () => ({
+      sessionData,
+      sessionId,
+      effectiveSessionId,
+      isLoading,
+      error,
+      errorCode,
+      refresh,
+      items,
+      session: session || null,
+      isDonation,
+      vendorCount,
+      product,
+      subscription,
+      pageInfo,
+    }),
+    [
+      sessionData,
+      sessionId,
+      effectiveSessionId,
+      isLoading,
+      error,
+      errorCode,
+      refresh,
+      items,
+      session,
+      isDonation,
+      vendorCount,
+      product,
+      subscription,
+      pageInfo,
+    ]
+  );
+
+  // 2. Payment method layer
+  const paymentMethodHook = usePaymentMethodHook(sessionData, effectiveSessionId, refresh);
+
+  // Recalculate promotion when currency changes
+  const prevCurrencyRef = useRef<string | null>(null);
+  useEffect(() => {
+    const currId = paymentMethodHook.currency?.id || null;
+    if (!currId || !session || session.status === 'complete') return;
+    if (prevCurrencyRef.current === null || currId !== prevCurrencyRef.current) {
+      prevCurrencyRef.current = currId;
+      recalculatePromotionIfNeeded(session, effectiveSessionId, currId).then(() => refresh(true));
+    }
+  }, [paymentMethodHook.currency?.id, session?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const paymentMethodValue = useMemo<PaymentMethodContextValue>(
+    () => ({
+      current: paymentMethodHook.current,
+      currency: paymentMethodHook.currency,
+      available: paymentMethodHook.available,
+      currencies: paymentMethodHook.currencies,
+      isStripe: paymentMethodHook.isStripe,
+      isCrypto: paymentMethodHook.isCrypto,
+      isCredit: paymentMethodHook.isCredit,
+      switching: paymentMethodHook.switching,
+      setType: paymentMethodHook.setType,
+      types: paymentMethodHook.types,
+      setCurrency: paymentMethodHook.setCurrency,
+      stripe: paymentMethodHook.stripe,
+    }),
+    [
+      paymentMethodHook.current,
+      paymentMethodHook.currency,
+      paymentMethodHook.available,
+      paymentMethodHook.currencies,
+      paymentMethodHook.isStripe,
+      paymentMethodHook.isCrypto,
+      paymentMethodHook.isCredit,
+      paymentMethodHook.switching,
+      paymentMethodHook.setType,
+      paymentMethodHook.types,
+      paymentMethodHook.setCurrency,
+      paymentMethodHook.stripe,
+    ]
+  );
+
+  // 3. Exchange rate layer
+  const [exchangeRate, setExchangeRate] = useState<string | null>(null);
+  const [rateProvider, setRateProvider] = useState<string | null>(null);
+  const [rateProviderDisplay, setRateProviderDisplay] = useState<string | null>(null);
+  const [rateFetchedAt, setRateFetchedAt] = useState<number | null>(null);
+  const [rateStatus, setRateStatus] = useState<'loading' | 'available' | 'unavailable'>('loading');
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const fetchingRef = useRef(false);
+  const mountedRef = useRef(true);
+
+  const hasDynamicPricing = useMemo(() => checkHasDynamicPricing(items), [items]);
+
+  const fetchRate = useMemoizedFn(async () => {
+    if (!effectiveSessionId || !hasDynamicPricing || paymentMethodHook.isStripe) {
+      setRateStatus(hasDynamicPricing ? 'unavailable' : 'available');
+      if (paymentMethodHook.isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+      }
+      return;
+    }
+
+    // Guard against concurrent fetches (setInterval keeps firing regardless)
+    if (fetchingRef.current) return;
+    fetchingRef.current = true;
+
+    try {
+      setRateStatus('loading');
+      const result = await fetchExchangeRate(effectiveSessionId, paymentMethodHook.currency?.id);
+
+      if (!mountedRef.current) return;
+
+      if (result.rate) {
+        setExchangeRate(result.rate);
+        setRateProvider(result.provider);
+        setRateProviderDisplay(result.providerDisplay);
+        setRateFetchedAt(result.fetchedAt);
+        setRateStatus('available');
+      } else {
+        setRateStatus('unavailable');
+      }
+    } catch {
+      if (!mountedRef.current) return;
+      setRateStatus('unavailable');
+    } finally {
+      fetchingRef.current = false;
+    }
+  });
+
+  useEffect(() => {
+    mountedRef.current = true;
+
+    if (!hasDynamicPricing || paymentMethodHook.isStripe || !effectiveSessionId || session?.status === 'complete') {
+      // Clear stale rate when switching to Stripe
+      if (paymentMethodHook.isStripe) {
+        setExchangeRate(null);
+        setRateProvider(null);
+        setRateProviderDisplay(null);
+        setRateFetchedAt(null);
+      }
+      // When session is complete and we already have a rate, keep it as 'available'
+      // (the rate used at payment time is still valid for display).
+      // Otherwise set appropriate status:
+      // - non-dynamic → 'available' (no rate needed)
+      // - dynamic but Stripe or no session → 'unavailable'
+      if (session?.status === 'complete') {
+        // Completed session: rate is irrelevant, suppress unavailable warnings
+        setRateStatus('available');
+      } else {
+        setRateStatus(hasDynamicPricing ? 'unavailable' : 'available');
+      }
+      return undefined;
+    }
+
+    // Initial fetch
+    fetchRate();
+
+    // Use setInterval (like V1) — more robust than chained setTimeout.
+    // setInterval keeps firing regardless of whether the previous fetch completed;
+    // the fetchingRef guard prevents concurrent fetches.
+    intervalRef.current = setInterval(fetchRate, BASE_INTERVAL);
+
+    const handleVisibility = () => {
+      if (!document.hidden) {
+        // Fetch immediately when tab becomes visible
+        fetchRate();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    return () => {
+      mountedRef.current = false;
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      document.removeEventListener('visibilitychange', handleVisibility);
+    };
+  }, [hasDynamicPricing, paymentMethodHook.isStripe, effectiveSessionId, paymentMethodHook.currency?.id, session?.status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const exchangeRateValue = useMemo<ExchangeRateContextValue>(
+    () => ({
+      rate: exchangeRate,
+      provider: rateProvider,
+      providerDisplay: rateProviderDisplay,
+      fetchedAt: rateFetchedAt,
+      status: rateStatus,
+      hasDynamicPricing,
+      refresh: fetchRate,
+    }),
+    [exchangeRate, rateProvider, rateProviderDisplay, rateFetchedAt, rateStatus, hasDynamicPricing, fetchRate]
+  );
+
+  // 4. Customer form layer
+  const customerForm = useCustomerFormHook(
+    sessionData,
+    paymentMethodHook.currency?.id || null,
+    paymentMethodHook.current?.id || null
+  );
+
+  // 5. Submit layer (depends on customer form)
+  const submit = useSubmitHook(
+    sessionData,
+    effectiveSessionId,
+    paymentMethodHook.currency?.id || null,
+    paymentMethodHook.isStripe,
+    paymentMethodHook.isCredit,
+    isDonation,
+    customerForm.values,
+    customerForm.validate,
+    refresh,
+    setSessionData
+  );
+
+  return (
+    <SessionContext.Provider value={sessionValue}>
+      <PaymentMethodContext.Provider value={paymentMethodValue}>
+        <ExchangeRateContext.Provider value={exchangeRateValue}>
+          <CustomerFormContext.Provider value={customerForm}>
+            <SubmitReactContext.Provider value={submit}>{children}</SubmitReactContext.Provider>
+          </CustomerFormContext.Provider>
+        </ExchangeRateContext.Provider>
+      </PaymentMethodContext.Provider>
+    </SessionContext.Provider>
+  );
+}

package/src/checkout/context/CustomerFormContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { UseCustomerFormReturn } from '../hooks/useCustomerForm';
+
+export type CustomerFormContextValue = UseCustomerFormReturn;
+
+export const CustomerFormContext = createContext<CustomerFormContextValue | null>(null);
+
+export function useCustomerFormContext(): CustomerFormContextValue {
+  const ctx = useContext(CustomerFormContext);
+  if (!ctx) {
+    throw new Error('useCustomerFormContext must be used within <CheckoutProvider>');
+  }
+  return ctx;
+}

package/src/checkout/context/ExchangeRateContext.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+export interface ExchangeRateContextValue {
+  rate: string | null;
+  provider: string | null;
+  providerDisplay: string | null;
+  fetchedAt: number | null;
+  status: 'loading' | 'available' | 'unavailable';
+  hasDynamicPricing: boolean;
+  refresh: () => Promise<void>;
+}
+
+export const ExchangeRateContext = createContext<ExchangeRateContextValue | null>(null);
+
+export function useExchangeRateContext(): ExchangeRateContextValue {
+  const ctx = useContext(ExchangeRateContext);
+  if (!ctx) {
+    throw new Error('useExchangeRateContext must be used within <CheckoutProvider>');
+  }
+  return ctx;
+}