@code-collective/booking-widget 1.0.12 → 1.0.14

package/src/lib/TicketConfigurator.svelte

@@ -1,166 +1,166 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import { ApiError, isPriceMismatch } from './api';
-  import type { WizardPages } from './config';
-  import { DEFAULT_WIZARD_PAGES } from './config';
-  import type { CartItem, CheckoutProductDto } from './client-types';
-  import { CartManager } from './cart-manager';
-  import { postMessage } from './messages';
-  import { expandUnitItems } from './utils';
-  import { formatCurrency } from './currency';
-  import WizardPage from './WizardPage.svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-
-  interface Props {
-    // Optional when a BookingProvider is above this component - it supplies both from its host.
-    api?: BookingApi;
-    cartManager?: CartManager;
-    productId: string;
-    wizardPages?: WizardPages;
-    autoSelectSingleTimeSlot?: boolean;
-    // Whether an add from this configurator asks to be carried on into checkout. Stated on the cart:change
-    // message rather than acted on here, so the host decides how to honour it - and so bw-configurator's
-    // no-auto-checkout attribute and a host's own autoOpenCheckout: false meet in the same branch (see
-    // host.svelte.ts) instead of each build having its own way to suppress it.
-    autoOpenCheckout?: boolean;
-    onCancel?: () => void;
-  }
-  let { api: apiProp, cartManager: cartManagerProp, productId, wizardPages = DEFAULT_WIZARD_PAGES,
-    autoSelectSingleTimeSlot = false, autoOpenCheckout = true, onCancel }: Props = $props();
-
-  const bookingHost = getBookingHostContext();
-  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'TicketConfigurator', 'api'));
-  let cartManager = $derived(
-    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'TicketConfigurator', 'cartManager'),
-  );
-
-  let product = $state<CheckoutProductDto | null>(null);
-  let isLoading = $state(true);
-  let isAddingToCart = $state(false);
-  let addToCartError = $state<string | null>(null);
-
-  async function load() {
-    product = await api.getProduct(productId);
-    isLoading = false;
-  }
-
-  load();
-
-  async function addItemToCart(item: CartItem): Promise<void> {
-    await cartManager.ensureCart();
-
-    const unitItems = expandUnitItems(item.units);
-    const added = await api.addCartItem({
-      productId: item.productId,
-      optionId: item.optionId,
-      unitItems,
-      availabilityId: item.availabilityId,
-      localDate: item.localDate,
-      pickupPointId: item.pickupPointId,
-      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
-      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
-      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
-      // published, and returns PRICE_MISMATCH otherwise.
-      amount: item.totalPrice,
-    });
-
-    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
-    postMessage({
-      type: 'cart:change',
-      itemCount: unitItems.length,
-      cartItemId: added.id ?? '',
-      totalFormatted: total,
-      openCheckout: autoOpenCheckout,
-    });
-    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
-    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
-    // use it to update their own state without each independently re-fetching, and it's forwarded to
-    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
-    // in CheckoutModal (the other place it's posted from, after an edit/remove).
-    const cart = await api.getCart().catch(() => null);
-    postMessage({ type: 'cart:updated', cart });
-  }
-
-  async function onAddToCart(item: CartItem) {
-    isAddingToCart = true;
-    addToCartError = null;
-
-    try {
-      await addItemToCart(item);
-    } catch (e) {
-      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
-      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
-      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
-      // the customer see the new price, which is what the message asks them to do.
-      if (isPriceMismatch(e)) {
-        await reloadAfterPriceChange();
-        return;
-      }
-
-      // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
-      // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
-      // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
-      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
-      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
-      if (isStaleCart) {
-        cartManager.reset();
-        try {
-          await addItemToCart(item);
-        } catch {
-          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
-        }
-      } else {
-        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
-      }
-    } finally {
-      isAddingToCart = false;
-    }
-  }
-
-  async function reloadAfterPriceChange() {
-    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
-    try {
-      await load();
-    } catch {
-      // The reload is what makes the message actionable; if even that fails the customer needs to start over
-      // rather than be left looking at prices we already know are wrong.
-      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
-    }
-  }
-</script>
-
-<div class="bw-widget">
-  {#if isLoading || isAddingToCart}
-    <div class="loading-center" style="height:100vh">
-      <div class="spinner"></div>
-    </div>
-  {:else if product}
-    {#if addToCartError}
-      <p class="add-to-cart-error">{addToCartError}</p>
-    {/if}
-    <WizardPage
-      {product}
-      {api}
-      {wizardPages}
-      {autoSelectSingleTimeSlot}
-      {onCancel}
-      onComplete={onAddToCart}
-    />
-  {/if}
-</div>
-
-<style>
-  /* display: contents - a plain box here would break WizardPage's own .wizard{height:100%}, which needs
-     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
-  .bw-widget {
-    display: contents;
-  }
-
-  .add-to-cart-error {
-    margin: 0;
-    padding: 12px 16px;
-    background: #fdecea;
-    color: #b3261e;
-    font-size: 14px;
-  }
-</style>
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import { ApiError, isPriceMismatch } from './api';
+  import type { WizardPages } from './config';
+  import { DEFAULT_WIZARD_PAGES } from './config';
+  import type { CartItem, CheckoutProductDto } from './client-types';
+  import { CartManager } from './cart-manager';
+  import { postMessage } from './messages';
+  import { expandUnitItems } from './utils';
+  import { formatCurrency } from './currency';
+  import WizardPage from './WizardPage.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    // Optional when a BookingProvider is above this component - it supplies both from its host.
+    api?: BookingApi;
+    cartManager?: CartManager;
+    productId: string;
+    wizardPages?: WizardPages;
+    autoSelectSingleTimeSlot?: boolean;
+    // Whether an add from this configurator asks to be carried on into checkout. Stated on the cart:change
+    // message rather than acted on here, so the host decides how to honour it - and so bw-configurator's
+    // no-auto-checkout attribute and a host's own autoOpenCheckout: false meet in the same branch (see
+    // host.svelte.ts) instead of each build having its own way to suppress it.
+    autoOpenCheckout?: boolean;
+    onCancel?: () => void;
+  }
+  let { api: apiProp, cartManager: cartManagerProp, productId, wizardPages = DEFAULT_WIZARD_PAGES,
+    autoSelectSingleTimeSlot = false, autoOpenCheckout = true, onCancel }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  let api = $derived(requireBookingService(apiProp ?? bookingHost?.api, 'TicketConfigurator', 'api'));
+  let cartManager = $derived(
+    requireBookingService(cartManagerProp ?? bookingHost?.cartManager, 'TicketConfigurator', 'cartManager'),
+  );
+
+  let product = $state<CheckoutProductDto | null>(null);
+  let isLoading = $state(true);
+  let isAddingToCart = $state(false);
+  let addToCartError = $state<string | null>(null);
+
+  async function load() {
+    product = await api.getProduct(productId);
+    isLoading = false;
+  }
+
+  load();
+
+  async function addItemToCart(item: CartItem): Promise<void> {
+    await cartManager.ensureCart();
+
+    const unitItems = expandUnitItems(item.units);
+    const added = await api.addCartItem({
+      productId: item.productId,
+      optionId: item.optionId,
+      unitItems,
+      availabilityId: item.availabilityId,
+      localDate: item.localDate,
+      pickupPointId: item.pickupPointId,
+      // Currency and precision are the supplier's to state, not ours - the API resolves both server-side and
+      // ignores anything sent here. Amount stays, but only as a claim about the price the customer was shown:
+      // the server accepts it solely when it matches what the supplier is asking or a price the server itself
+      // published, and returns PRICE_MISMATCH otherwise.
+      amount: item.totalPrice,
+    });
+
+    const total = formatCurrency(item.totalPrice, item.currency, item.currencyPrecision, 2);
+    postMessage({
+      type: 'cart:change',
+      itemCount: unitItems.length,
+      cartItemId: added.id ?? '',
+      totalFormatted: total,
+      openCheckout: autoOpenCheckout,
+    });
+    // Separate from cart:change above - that one is per-item-added detail forwarded to consumers as the
+    // public bw:cart-change event. This one carries the fresh cart itself: CartBar/CartOverviewButton/Checkout
+    // use it to update their own state without each independently re-fetching, and it's forwarded to
+    // consumers as the public bw:cart-updated event/onCartUpdated callback - see this event's own doc comment
+    // in CheckoutModal (the other place it's posted from, after an edit/remove).
+    const cart = await api.getCart().catch(() => null);
+    postMessage({ type: 'cart:updated', cart });
+  }
+
+  async function onAddToCart(item: CartItem) {
+    isAddingToCart = true;
+    addToCartError = null;
+
+    try {
+      await addItemToCart(item);
+    } catch (e) {
+      // The supplier moved the price while the customer was configuring, and the amount they agreed to is no
+      // longer one the server accepts. Retrying is useless - the wizard still holds the old prices, so it
+      // would resubmit exactly the same amount and fail identically. The only way out is to re-fetch and let
+      // the customer see the new price, which is what the message asks them to do.
+      if (isPriceMismatch(e)) {
+        await reloadAfterPriceChange();
+        return;
+      }
+
+      // CartManager only knows a cart is expired from timestamps it saw at creation - it can't see the
+      // server's idle window sliding forward, so a cart that looks valid locally can still be rejected
+      // server-side. A 401/404 here means exactly that: drop the stale cart and retry once with a fresh one
+      // before giving up, rather than leaving the user stuck with no feedback and no way to proceed.
+      const isStaleCart = e instanceof ApiError && (e.status === 401 || e.status === 404);
+      if (isStaleCart) {
+        cartManager.reset();
+        try {
+          await addItemToCart(item);
+        } catch {
+          addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+        }
+      } else {
+        addToCartError = 'Something went wrong adding this to your cart. Please try again.';
+      }
+    } finally {
+      isAddingToCart = false;
+    }
+  }
+
+  async function reloadAfterPriceChange() {
+    addToCartError = "This ticket's price has changed since you started. Please check the updated price and try again.";
+    try {
+      await load();
+    } catch {
+      // The reload is what makes the message actionable; if even that fails the customer needs to start over
+      // rather than be left looking at prices we already know are wrong.
+      addToCartError = "This ticket's price has changed and we could not load the new one. Please reload the page.";
+    }
+  }
+</script>
+
+<div class="bw-widget">
+  {#if isLoading || isAddingToCart}
+    <div class="loading-center" style="height:100vh">
+      <div class="spinner"></div>
+    </div>
+  {:else if product}
+    {#if addToCartError}
+      <p class="add-to-cart-error">{addToCartError}</p>
+    {/if}
+    <WizardPage
+      {product}
+      {api}
+      {wizardPages}
+      {autoSelectSingleTimeSlot}
+      {onCancel}
+      onComplete={onAddToCart}
+    />
+  {/if}
+</div>
+
+<style>
+  /* display: contents - a plain box here would break WizardPage's own .wizard{height:100%}, which needs
+     to resolve against this component's real parent, not an unsized wrapper inserted in between. */
+  .bw-widget {
+    display: contents;
+  }
+
+  .add-to-cart-error {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+  }
+</style>

package/src/lib/api.ts

@@ -11,6 +11,7 @@ import type {
   CheckoutCartItemAddedDto,
   CheckoutCartPaymentInitiationDto,
   CheckoutCartConfirmResultDto,
+  CheckoutCartStatusDto,
   OctoContact,
 } from './client-types';
 import { dateKey } from './utils';
@@ -111,7 +112,16 @@ export interface BookingApi {
   updateCartItem(itemId: string, request: CheckoutAddCartItemDto): Promise<CheckoutCartItemAddedDto>;
   removeCartItem(itemId: string): Promise<void>;
   payCart(contact: OctoContact): Promise<CheckoutCartPaymentInitiationDto>;
-  confirmCart(): Promise<CheckoutCartConfirmResultDto>;
+  // Where the payment actually stands, as decided server-side off Peach's webhook. There is deliberately no
+  // confirmCart here: confirmation that depends on this tab staying open strands every shopper who closes it
+  // after paying, so the widget only ever reads the outcome, it never produces one.
+  getCartStatus(): Promise<CheckoutCartStatusDto>;
+
+  // Asks the server to find out what actually happened to the current attempt. Called once when Peach's form
+  // reports the checkout complete - "complete" covers a declined card as much as a charged one, and Peach
+  // sends no webhook for a decline - and then getCartStatus is polled for the answer. Best effort: the server
+  // answers 204 whatever it found, and the sweep reconciles anything it could not.
+  resolvePayment(): Promise<void>;
   // Slides the cart's idle window out to a full window from now, clamped at its absolute ceiling, and
   // re-extends the OCTO holds behind it. There is no refusal to handle: a cart already at its ceiling comes
   // back with the deadline it already had (see isAtExpiryCeiling). Returns the cart with its new expiry so the
@@ -121,6 +131,11 @@ export interface BookingApi {
   // used by CheckoutModal itself, which knows the checkoutId Peach's own callback fired for. See
   // isPaymentSettled for the one refusal that changes what the caller does next.
   abandonPayment(checkoutId: string): Promise<void>;
+
+  // The SDK-failure counterpart to abandonPayment, carrying whatever reason Peach gave. Same guard and same
+  // refusals server-side - the difference is that the attempt is recorded as failed with its code rather than
+  // simply abandoned, which for a card declined inside the checkout is the only place that code ever exists.
+  reportPaymentFailure(checkoutId: string, resultCode?: string, description?: string): Promise<void>;
 }
 
 export class ApiClient implements BookingApi {
@@ -275,10 +290,15 @@ export class ApiClient implements BookingApi {
     );
   }
 
-  async confirmCart(): Promise<CheckoutCartConfirmResultDto> {
-    return this.unwrap(
-      await this.client.POST('/v1/checkout/cart/confirm'),
-    );
+  async getCartStatus(): Promise<CheckoutCartStatusDto> {
+    return this.unwrap(await this.client.GET('/v1/checkout/cart/status'));
+  }
+
+  async resolvePayment(): Promise<void> {
+    const result = await this.client.POST('/v1/checkout/cart/resolve-payment');
+    if (result.response.status >= 400) {
+      throw new ApiError(result.response.status, result.error);
+    }
   }
 
   async extendCart(): Promise<CheckoutCartDetailDto> {
@@ -287,6 +307,17 @@ export class ApiClient implements BookingApi {
     );
   }
 
+  async reportPaymentFailure(checkoutId: string, resultCode?: string, description?: string): Promise<void> {
+    const result = await this.client.POST('/v1/checkout/cart/payment-failure', {
+      body: { checkoutId, resultCode, description },
+    });
+    // Same shape as abandonPayment below, including keeping the error body: the 409s carry a code the caller
+    // branches on (see isPaymentSettled).
+    if (result.response.status >= 400) {
+      throw new ApiError(result.response.status, result.error);
+    }
+  }
+
   async abandonPayment(checkoutId: string): Promise<void> {
     const result = await this.client.POST('/v1/checkout/cart/abandon-payment', {
       body: { checkoutId },

package/src/lib/booking-context.ts

@@ -1,33 +1,33 @@
-// How a BookingProvider hands the host down to the components beneath it, so a consumer writes
-// <TicketConfigurator {productId} /> rather than restating host.api and host.cartManager on every tag. The
-// props are still there and still win - the custom-element wrappers pass them explicitly, because each
-// bw-* element is the root of its own Svelte tree and context does not cross that boundary.
-
-import { getContext, setContext } from 'svelte';
-import type { BookingHost } from './host.svelte';
-
-const BOOKING_HOST = Symbol('booking-host');
-
-/** Call during component initialisation - BookingProvider is the only thing that should need this. */
-export function setBookingHostContext(host: BookingHost): void {
-  setContext(BOOKING_HOST, host);
-}
-
-/** The host from the nearest BookingProvider, or undefined when there is none. */
-export function getBookingHostContext(): BookingHost | undefined {
-  return getContext<BookingHost | undefined>(BOOKING_HOST);
-}
-
-/**
- * Resolves a service a component cannot render without, and says plainly what to do when it is missing.
- * Without this the failure is a `Cannot read properties of undefined` from somewhere deep in a load().
- */
-export function requireBookingService<T>(value: T | undefined, component: string, prop: string): T {
-  if (value === undefined || value === null) {
-    throw new Error(
-      `<${component}> has no ${prop}. Pass ${prop}={...}, or wrap it in ` +
-        `<BookingProvider host={createBookingHost(...)}>.`,
-    );
-  }
-  return value;
-}
+// How a BookingProvider hands the host down to the components beneath it, so a consumer writes
+// <TicketConfigurator {productId} /> rather than restating host.api and host.cartManager on every tag. The
+// props are still there and still win - the custom-element wrappers pass them explicitly, because each
+// bw-* element is the root of its own Svelte tree and context does not cross that boundary.
+
+import { getContext, setContext } from 'svelte';
+import type { BookingHost } from './host.svelte';
+
+const BOOKING_HOST = Symbol('booking-host');
+
+/** Call during component initialisation - BookingProvider is the only thing that should need this. */
+export function setBookingHostContext(host: BookingHost): void {
+  setContext(BOOKING_HOST, host);
+}
+
+/** The host from the nearest BookingProvider, or undefined when there is none. */
+export function getBookingHostContext(): BookingHost | undefined {
+  return getContext<BookingHost | undefined>(BOOKING_HOST);
+}
+
+/**
+ * Resolves a service a component cannot render without, and says plainly what to do when it is missing.
+ * Without this the failure is a `Cannot read properties of undefined` from somewhere deep in a load().
+ */
+export function requireBookingService<T>(value: T | undefined, component: string, prop: string): T {
+  if (value === undefined || value === null) {
+    throw new Error(
+      `<${component}> has no ${prop}. Pass ${prop}={...}, or wrap it in ` +
+        `<BookingProvider host={createBookingHost(...)}>.`,
+    );
+  }
+  return value;
+}