@code-collective/booking-widget 1.0.13 → 1.0.14

package/src/lib/PaymentPage.svelte

@@ -2,11 +2,12 @@
   import { onMount, onDestroy } from 'svelte';
   import { loadPeachSdk, loadedPeachSdkUrl } from './peach-sdk';
   import CountdownTimer from './CountdownTimer.svelte';
+  import type { PaymentSdkResult } from './client-types';
 
   interface Props {
     checkoutId: string;
     entityId: string;
-    onPaymentComplete: (result: { status: string }) => void;
+    onPaymentComplete: (result: PaymentSdkResult) => void;
     // The cart's remaining life, shown in this dialog's own header so the shopper can see it over Peach's
     // form - CheckoutModal's own cart timer is behind this overlay. Optional so callers that predate it need
     // not pass one. CartExpiryGuard.svelte is what actually warns and acts as this counts down to zero - it
@@ -15,6 +16,18 @@
   }
   let { checkoutId, entityId, onPaymentComplete, expiresAt }: Props = $props();
 
+  // Peach does not document a stable shape for what its eventHandlers receive, and it differs between the
+  // callbacks. Anything we cannot find is simply omitted - the failure is still worth reporting without a
+  // code, and guessing one would be worse than sending none.
+  function resultOf(status: PaymentSdkResult['status'], payload: any): PaymentSdkResult {
+    const result = payload?.result ?? payload;
+    return {
+      status,
+      resultCode: result?.code ?? result?.resultCode ?? payload?.errorCode ?? undefined,
+      description: result?.description ?? payload?.message ?? undefined,
+    };
+  }
+
   let failed = $state(false);
   let errorMessage = $state('');
 
@@ -46,10 +59,14 @@
             // exactly one way out per screen instead of ours and Peach's competing for the same job.
           },
           eventHandlers: {
-            onCompleted: () => { cleanup(); onPaymentComplete({ status: 'completed' }); },
-            onCancelled: () => { cleanup(); onPaymentComplete({ status: 'cancelled' }); },
-            onExpired: () => { cleanup(); onPaymentComplete({ status: 'expired' }); },
-            onError: () => { reportPeachFailure('Peach reported an error rendering the card form'); cleanup(); onPaymentComplete({ status: 'error' }); },
+            onCompleted: (e: any) => { cleanup(); onPaymentComplete(resultOf('completed', e)); },
+            onCancelled: (e: any) => { cleanup(); onPaymentComplete(resultOf('cancelled', e)); },
+            onExpired: (e: any) => { cleanup(); onPaymentComplete(resultOf('expired', e)); },
+            onError: (e: any) => {
+              reportPeachFailure('Peach reported an error rendering the card form');
+              cleanup();
+              onPaymentComplete(resultOf('error', e));
+            },
           },
         });
 

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/checkout-item-view.ts

@@ -0,0 +1,63 @@
+// Pure view-model helpers for rendering a CheckoutCartDetailDto's items - split out of CheckoutModal.svelte
+// because none of these hold or need reactive state of their own; they are plain functions of the item (and,
+// for the ones that need titles/units, the already-loaded product catalog), called straight from the
+// template on every render.
+
+import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
+
+export function cartTotal(cart: CheckoutCartDetailDto): number {
+  return cart.items.reduce((s, i) => s + i.amount, 0);
+}
+
+// Every item in one cart shares a currency (PayCheckoutCartCommandHandler refuses to mix them), so the first
+// item's is the cart's - defaulting to ZAR only for the moment before the first item exists.
+export function cartCurrency(cart: CheckoutCartDetailDto): string {
+  return cart.items[0]?.currencyCode ?? 'ZAR';
+}
+
+export function productTitle(item: CheckoutCartItemDetailDto, productsById: Map<string, CheckoutProductDto>): string {
+  return productsById.get(item.productId)?.title ?? item.productId;
+}
+
+export function optionTitle(item: CheckoutCartItemDetailDto, productsById: Map<string, CheckoutProductDto>): string {
+  const product = productsById.get(item.productId);
+  return product?.options.find((o) => o.id === item.optionId)?.title ?? item.optionId;
+}
+
+export interface GroupedUnit {
+  unitId: string;
+  title: string;
+  quantity: number;
+  linePrice: number;
+}
+
+export function groupUnits(
+  item: CheckoutCartItemDetailDto,
+  productsById: Map<string, CheckoutProductDto>,
+): GroupedUnit[] {
+  const product = productsById.get(item.productId);
+  const option = product?.options.find((o) => o.id === item.optionId);
+  const counts = new Map<string, number>();
+  for (const u of item.unitItems) {
+    counts.set(u.unitId, (counts.get(u.unitId) ?? 0) + 1);
+  }
+  return [...counts.entries()].map(([unitId, quantity]) => {
+    const unit = option?.units.find((u) => u.id === unitId);
+    const unitPrice = unit?.pricing?.[0]?.retail ?? 0;
+    return {
+      unitId,
+      title: unit?.title ?? unitId,
+      quantity,
+      linePrice: unitPrice * quantity,
+    };
+  });
+}
+
+export function itemDateLabel(item: CheckoutCartItemDetailDto): string | null {
+  if (!item.availabilityId) return null;
+  const match = item.availabilityId.match(/(\d{4})-(\d{2})-(\d{2})/);
+  if (!match) return null;
+  const d = new Date(+match[1], +match[2] - 1, +match[3]);
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
+}