@code-collective/booking-widget 1.0.6 → 1.0.8

package/src/lib/CartOverviewButton.svelte

@@ -2,8 +2,7 @@
   import type { CheckoutCartDetailDto } from './client-types';
   import type { BookingApi } from './api';
   import { CartManager } from './cart-manager';
-  import { formatCurrency } from './currency';
-  import { postMessage } from './messages';
+  import { onWidgetMessage, postMessage } from './messages';
   import { onDestroy } from 'svelte';
 
   interface Props {
@@ -28,17 +27,11 @@
 
   // load() above only runs once on mount - without this, adding/editing/removing an item elsewhere on the
   // page (the configurator, or the checkout modal's own edit/remove) leaves this button showing a stale total.
-  function handleMessage(e: MessageEvent) {
-    let d: Record<string, unknown>;
-    try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
-    catch { return; }
-    if (d?.type === 'cart:updated') load();
-  }
-
-  $effect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  });
+  // The event already carries the fresh cart (see TicketConfigurator/CheckoutModal's own posting sites), so
+  // this applies it directly rather than triggering a second, redundant getCart() call.
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
+  }));
 
   function updateTimer() {
     if (!cart) { remaining = '0:00'; return; }
@@ -53,13 +46,6 @@
   onDestroy(() => clearInterval(interval));
 
   let itemCount = $derived(cart?.items.length ?? 0);
-
-  let totalLabel = $derived(() => {
-    if (!cart || cart.items.length === 0) return '';
-    const currency = cart.items[0].currencyCode;
-    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
-    return formatCurrency(total, currency, 2, 0);
-  });
 </script>
 
 {#if cart && cart.items.length > 0}
@@ -69,8 +55,6 @@
       <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
     </svg>
     <span class="cart-badge">{itemCount}</span>
-    <span class="cart-total">{totalLabel()}</span>
-    <span class="cart-sep"></span>
     <span class="cart-timer">{remaining}</span>
   </button>
 {/if}
@@ -79,15 +63,14 @@
   .cart-overview-btn {
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center;
+    gap: 14px;
     width: 100%;
-    padding: 12px 20px;
+    padding: 14px 24px;
     background: var(--bw-color-primary);
     color: white;
     border: none;
     border-radius: 999px;
-    font-size: 14px;
-    font-weight: 700;
     cursor: pointer;
     transition: background 0.15s;
   }
@@ -95,40 +78,27 @@
     background: var(--bw-color-primary-dark);
   }
   .cart-icon {
-    width: 18px;
-    height: 18px;
+    width: 22px;
+    height: 22px;
     flex-shrink: 0;
   }
   .cart-badge {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 22px;
-    height: 22px;
-    padding: 0 5px;
+    width: 26px;
+    height: 26px;
     background: white;
     color: var(--bw-color-primary);
-    border-radius: 5px;
-    font-size: 12px;
-    font-weight: 800;
-    flex-shrink: 0;
-  }
-  .cart-total {
-    flex: 1;
-    text-align: left;
+    border-radius: 50%;
     font-size: 14px;
-    font-weight: 700;
-  }
-  .cart-sep {
-    width: 1px;
-    height: 16px;
-    background: rgba(255,255,255,0.35);
+    font-weight: 800;
     flex-shrink: 0;
   }
   .cart-timer {
     font-variant-numeric: tabular-nums;
-    font-size: 13px;
-    opacity: 0.85;
+    font-size: 20px;
+    font-weight: 700;
     flex-shrink: 0;
   }
 </style>

package/src/lib/Checkout.svelte

@@ -3,16 +3,19 @@
   import type { WizardPages } from './config';
   import { DEFAULT_WIZARD_PAGES } from './config';
   import type { CheckoutCartDetailDto } from './client-types';
-  import { postMessage } from './messages';
+  import { onWidgetMessage, postMessage } from './messages';
+  import type { CartManager } from './cart-manager';
   import CheckoutModal from './CheckoutModal.svelte';
 
   interface Props {
     api: BookingApi;
+    cartManager?: CartManager;
     wizardPages?: WizardPages;
     editPages?: WizardPages;
     autoSelectSingleTimeSlot?: boolean;
   }
-  let { api, wizardPages = DEFAULT_WIZARD_PAGES, editPages: editPagesProp, autoSelectSingleTimeSlot = false }: Props = $props();
+  let { api, cartManager, wizardPages = DEFAULT_WIZARD_PAGES, editPages: editPagesProp,
+    autoSelectSingleTimeSlot = false }: Props = $props();
   let editPages = $derived(editPagesProp ?? wizardPages);
 
   let cart = $state<CheckoutCartDetailDto | null>(null);
@@ -28,6 +31,15 @@
   }
 
   load();
+
+  // In modal mode this is redundant - bw-checkout.svelte only mounts this component fresh each time the
+  // modal opens, so it already gets a current cart. Rendered permanently in-page instead (no is-modal), it
+  // would otherwise only ever see the cart as it was on first mount. The event already carries the fresh
+  // cart (see TicketConfigurator/CheckoutModal's own posting sites), so this applies it directly rather than
+  // triggering a second, redundant getCart() call or flashing the spinner over an already-visible cart.
+  $effect(() => onWidgetMessage((d) => {
+    if (d.type === 'cart:updated' && 'cart' in d) cart = d.cart as CheckoutCartDetailDto | null;
+  }));
 </script>
 
 <div class="bw-widget">
@@ -52,6 +64,10 @@
           value: total,
           currency,
         });
+        // The cart is paid and confirmed, so its token has done its job. Nothing used to clear it, so it sat
+        // in localStorage on the merchant's origin until absoluteExpiresAt - readable by every third-party
+        // script they load, and picked up by the next person to use a shared or kiosk browser.
+        cartManager?.reset();
       }}
     />
   {:else}

package/src/lib/CheckoutModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { CheckoutCartDetailDto, CheckoutCartItemDetailDto, CheckoutCartPaymentInitiationDto, CheckoutCartConfirmResultDto, CheckoutProductDto } from './client-types';
   import type { BookingApi } from './api';
+  import { ApiError } from './api';
   import type { WizardPages } from './config';
   import { formatCurrency } from './currency';
   import { postMessage } from './messages';
@@ -23,17 +24,40 @@
   }
   let { cart, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onClose, onOrderConfirmed }: Props = $props();
 
+  // Peach's webhook is typically near-instant, but is a genuinely separate async delivery from the card
+  // charge itself - 10 attempts 1.5s apart (~15s) comfortably covers ordinary delivery latency without
+  // making a shopper whose payment already succeeded wait an unreasonable time to see it confirmed.
+  const ConfirmMaxAttempts = 10;
+  const ConfirmRetryDelayMs = 1500;
+
   type View = 'cart' | 'contact' | 'edit' | 'payment' | 'result';
   let currentView = $state<View>('cart');
   let editingItem = $state<CheckoutCartItemDetailDto | null>(null);
   let paymentResult = $state<CheckoutCartPaymentInitiationDto | null>(null);
   let confirmResult = $state<CheckoutCartConfirmResultDto | null>(null);
-  let confirmFailed = $state(false);
+  // What the confirm attempt actually produced, once it's settled - not a plain success/failure boolean,
+  // because "payment succeeded but this gateway couldn't confirm it in time" and "payment itself never went
+  // through" need different copy and different actions (see the ResultView status computed below and
+  // runConfirmLoop's own remarks). null while still in flight.
+  let confirmOutcome = $state<'success' | 'pending' | 'partial' | 'notCharged' | null>(null);
   let isLoading = $state(true);
   let isConfirming = $state(false);
   let privacyAccepted = $state(false);
   let marketingOptIn = $state(false);
   let hasAttemptedSubmit = $state(false);
+  let payError = $state<string | null>(null);
+  // Deliberately separate from isLoading above - that one gates the entire view switch below (spinner vs.
+  // cart/contact/payment/result), so reusing it here would unmount ContactForm for the duration of the
+  // payCart call and, on failure, remount it with its own $state reset to blank, forcing the shopper to
+  // retype everything before retrying. This only ever disables the Pay Now button itself.
+  let isPaying = $state(false);
+
+  // Owned here, not inside ContactForm, so the shopper's typed details survive navigating back to the cart
+  // and returning to checkout - see ContactForm's own doc comment on its bindable props for why.
+  let contactFirstName = $state('');
+  let contactLastName = $state('');
+  let contactEmail = $state('');
+  let contactPhone = $state('');
 
   let contactForm = $state<ContactForm | null>(null);
 
@@ -126,37 +150,60 @@
     const updated = await api.getCart();
     cart = updated;
     currentView = 'cart';
-    notifyCartUpdated();
+    notifyCartUpdated(updated);
   }
 
   async function removeItem(item: CheckoutCartItemDetailDto) {
     await api.removeCartItem(item.id);
     const updated = await api.getCart();
     cart = updated;
-    notifyCartUpdated();
+    notifyCartUpdated(updated);
     if (cart.items.length === 0) close();
   }
 
-  // A standalone postMessage - not the itemCount/cartItemId-shaped cart:change TicketConfigurator posts on
-  // add (which bw-configurator.svelte re-dispatches as the public bw:cart-change event and auto-opens
-  // checkout for). This is purely internal: CartBar/CartOverviewButton listen for it to refetch their own
-  // total after an edit or remove, which otherwise only ever fetch once on mount.
-  function notifyCartUpdated(): void {
-    postMessage({ type: 'cart:updated' });
+  // Not the itemCount/cartItemId-shaped cart:change TicketConfigurator posts on add (which
+  // bw-configurator.svelte re-dispatches as the public bw:cart-change event and auto-opens checkout for).
+  // This carries the cart itself: CartBar/CartOverviewButton/Checkout use it to update their own state after
+  // an edit or remove without a second independent fetch, and it's forwarded to consumers as the public
+  // bw:cart-updated event/onCartUpdated callback, so a consumer can build their own cart summary UI from
+  // item count/remaining time/item details without calling the API directly.
+  function notifyCartUpdated(updatedCart: CheckoutCartDetailDto): void {
+    postMessage({ type: 'cart:updated', cart: updatedCart });
   }
 
   async function onPayNow() {
     hasAttemptedSubmit = true;
     if (!contactForm?.isValid() || !privacyAccepted) return;
 
+    // A cart only ever gets one Peach checkout - RecordPaymentInitiatedAsync's own concurrency lock rejects
+    // a second payCart call on the same cart with a 409 ("already has a payment initiated"), even though
+    // nothing has actually been charged yet. Cancelling out of PaymentPage (onPaymentComplete's 'cancelled'
+    // case below) never clears paymentResult, so re-entering here just resumes that same still-open attempt
+    // instead of re-initiating.
+    if (paymentResult) {
+      currentView = 'payment';
+      return;
+    }
+
     const contact = contactForm.getContact();
 
-    isLoading = true;
+    isPaying = true;
+    payError = null;
     try {
       paymentResult = await api.payCart(contact);
       currentView = 'payment';
+    } catch (e) {
+      // PayCheckoutCartCommandHandler's own error-mapping switch: 502 means Peach itself (or the network
+      // path to it) failed before a checkout could even be created - no charge was attempted, so this is
+      // always safe to retry. Every other status (400/409) reflects a cart/contact state the shopper can't
+      // fix by only retrying the same request, but there is no more specific action to suggest here either -
+      // either way, without this catch the rejection was previously unhandled and the shopper saw no
+      // indication anything had gone wrong at all.
+      payError = e instanceof ApiError && e.status === 502
+        ? 'Unable to start payment right now. Please try again.'
+        : 'Something went wrong starting your payment. Please try again.';
     } finally {
-      isLoading = false;
+      isPaying = false;
     }
   }
 
@@ -166,29 +213,115 @@
       return;
     }
 
-    if (result.status === 'expired') {
-      confirmFailed = true;
+    // Neither of these ever reached a real charge - Peach's own SDK is reporting that the checkout itself
+    // didn't go through (session timeout, a declined card, a 3DS failure, a client-side error), not that a
+    // successful charge's confirmation is in question. That distinction matters: every path below this point
+    // is only reachable once onCompleted has already fired, meaning the card WAS charged, so "try again"
+    // there would risk a second charge rather than retrying a payment that never happened. Here, nothing was
+    // charged, so re-opening the card form is exactly correct.
+    if (result.status === 'expired' || result.status === 'error') {
+      confirmOutcome = 'notCharged';
       isConfirming = false;
       currentView = 'result';
       return;
     }
 
-    isConfirming = true;
     currentView = 'result';
+    await runConfirmLoop();
+  }
+
+  // One confirm attempt, interpreted: records the result and reports whether it settled (success or a
+  // supplier-side partial failure - either way, nothing left to retry) versus still needs another attempt
+  // (the two webhook races below). Shared by the automatic loop and the manual on-demand recheck so there is
+  // exactly one place that decides what a given confirmCart() outcome means.
+  async function attemptConfirm(): Promise<'settled' | 'awaitingWebhook'> {
     try {
       confirmResult = await api.confirmCart();
       const allOk = confirmResult.items.every((i) => i.statusCode >= 200 && i.statusCode < 300);
-      confirmFailed = !allOk;
-      isConfirming = false;
+      confirmOutcome = allOk ? 'success' : 'partial';
+      // Notifies the host (order value/currency for analytics, clearing the stored cart token) without
+      // closing the modal - the shopper still needs to see the success screen below, and only dismisses it
+      // themselves via ResultView's Done button, which is the one thing that posts modal:close.
       if (allOk) {
-        postMessage({ type: 'modal:close' });
         onOrderConfirmed();
       }
-    } catch {
-      confirmFailed = true;
-      isConfirming = false;
+      return 'settled';
+    } catch (e) {
+      // Two different races with the same webhook, neither a real failure:
+      //   402 - the charge succeeded (that's why PaymentPage's onCompleted fired) but the webhook hasn't
+      //         reached PeachWebhookEndpoints yet to move the cart to Paid.
+      //   409 - the webhook got there first and is confirming the cart right now, so there is no outcome to
+      //         read yet. Only one caller is allowed to run confirmation, and the loser is told to retry
+      //         rather than being handed a second, independently-produced answer.
+      // Both resolve on their own within a second or two, so both are worth retrying. Any other error settles
+      // as 'pending' rather than a failure state - the charge already succeeded by the time this can run at
+      // all, so there is no "payment failed" to report, only "not confirmed yet".
+      if (e instanceof ApiError && (e.status === 402 || e.status === 409)) {
+        return 'awaitingWebhook';
+      }
+      confirmOutcome = 'pending';
+      return 'settled';
+    }
+  }
+
+  async function runConfirmLoop() {
+    isConfirming = true;
+    confirmOutcome = null;
+
+    for (let attempt = 1; attempt <= ConfirmMaxAttempts; attempt++) {
+      if (await attemptConfirm() === 'settled') {
+        isConfirming = false;
+        return;
+      }
+
+      if (attempt === ConfirmMaxAttempts) {
+        confirmOutcome = 'pending';
+        isConfirming = false;
+        return;
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, ConfirmRetryDelayMs));
     }
   }
+
+  // A single on-demand recheck for the 'pending' screen's "Check Again" button - deliberately not another
+  // full runConfirmLoop, which would re-impose its own ~15s auto-retry wait on someone who is already
+  // actively engaged and can just click again. Confirming is idempotent (CheckoutCartConfirmer), so this
+  // costs nothing to repeat; still 'pending' either way if the webhook still hasn't landed.
+  async function checkConfirmationAgain() {
+    isConfirming = true;
+    if (await attemptConfirm() === 'awaitingWebhook') {
+      confirmOutcome = 'pending';
+    }
+    isConfirming = false;
+  }
+
+  // The one ResultView prop that isn't a straight readout of confirmOutcome: 'partial' means the payment
+  // succeeded but this gateway could not confirm every item, which is a real problem worth surfacing
+  // distinctly from 'pending' (which resolves on its own) - but from ResultView's own outcome union, that is
+  // still a kind of 'failed', just one retryPayment must gate off since the charge already happened.
+  let resultStatus = $derived(
+    isConfirming
+      ? null
+      : confirmOutcome === 'success'
+        ? { outcome: 'successful' as const }
+        : confirmOutcome === 'pending'
+          ? { outcome: 'pending' as const }
+          : confirmOutcome === 'partial'
+            ? {
+                outcome: 'failed' as const,
+                resultDescription:
+                  "Your payment succeeded, but we couldn't confirm every item in your booking. Please contact us with your order details.",
+                retryPayment: false,
+              }
+            : confirmOutcome === 'notCharged'
+              ? {
+                  outcome: 'failed' as const,
+                  resultDescription: 'Your payment could not be completed. Please try again.',
+                  retryPayment: true,
+                }
+              : null,
+  );
 </script>
 
 <div class="modal">
@@ -200,20 +333,23 @@
   {:else if currentView === 'payment' && paymentResult}
     <PaymentPage
       checkoutId={paymentResult.checkoutId}
-      totalFormatted={formattedTotal()}
-      onBack={() => { currentView = 'contact'; }}
-      onClose={close}
+      entityId={paymentResult.entityId}
       {onPaymentComplete}
     />
 
   {:else if currentView === 'result'}
     <ResultView
-      status={isConfirming ? null : confirmFailed
-        ? { outcome: 'failed', resultDescription: 'Something went wrong confirming your order. Please try again.' }
-        : { outcome: 'successful' }}
+      status={resultStatus}
       verifying={isConfirming}
-      onDone={() => { postMessage({ type: 'modal:close' }); onOrderConfirmed(); }}
+      onDone={() => {
+        // onOrderConfirmed only for the outcome that actually earns it - a 'pending'/'partial' Close is
+        // just dismissing the dialog on an order this gateway cannot yet (or fully) vouch for, not
+        // reporting it complete. The 'success' case already fired onOrderConfirmed the moment it was
+        // known, inside runConfirmLoop/checkConfirmationAgain - this simply closes what's still open.
+        postMessage({ type: 'modal:close' });
+      }}
       onRetry={() => { currentView = 'payment'; }}
+      onCheckAgain={confirmOutcome === 'pending' ? checkConfirmationAgain : undefined}
     />
 
   {:else if currentView === 'edit' && editingItem && productsById.get(editingItem.productId)}
@@ -227,6 +363,7 @@
       onBack={() => { currentView = 'cart'; }}
       onClose={close}
       onUpdated={onItemUpdated}
+      onPriceChanged={loadProducts}
     />
 
   {:else if currentView === 'contact'}
@@ -239,11 +376,21 @@
     </div>
 
     <div class="body">
+      {#if payError}
+        <p class="pay-error">{payError}</p>
+      {/if}
       <div class="contact-header">
         <span class="contact-title">Contact Details</span>
         <span class="required-hint">* Required Fields</span>
       </div>
-      <ContactForm bind:this={contactForm} {hasAttemptedSubmit} />
+      <ContactForm
+        bind:this={contactForm}
+        {hasAttemptedSubmit}
+        bind:firstName={contactFirstName}
+        bind:lastName={contactLastName}
+        bind:emailAddress={contactEmail}
+        bind:phoneNumber={contactPhone}
+      />
       <div style="margin-top:24px">
         <ConsentSection
           {privacyAccepted}
@@ -257,8 +404,8 @@
 
     <div class="pay-bar">
       <span class="pay-bar-total">{formattedTotal()}</span>
-      <button class="pay-bar-btn" onclick={onPayNow}>
-        Pay Now <span class="arrow">&rarr;</span>
+      <button class="pay-bar-btn" onclick={onPayNow} disabled={isPaying}>
+        {isPaying ? 'Paying…' : 'Pay Now'} <span class="arrow">&rarr;</span>
       </button>
     </div>
 
@@ -444,6 +591,14 @@
     font-weight: 800;
   }
   /* -- Contact view -- */
+  .pay-error {
+    margin: 0 0 16px;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+    border-radius: var(--bw-radius-md);
+  }
   .contact-header {
     display: flex;
     justify-content: space-between;
@@ -487,6 +642,10 @@
     font-size: 16px;
     font-weight: 700;
   }
+  .pay-bar-btn:disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
   .pay-bar-btn .arrow {
     font-size: 20px;
   }

package/src/lib/ContactForm.svelte

@@ -3,13 +3,22 @@
 
   interface Props {
     hasAttemptedSubmit: boolean;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+    phoneNumber: string;
   }
-  let { hasAttemptedSubmit }: Props = $props();
-
-  let firstName = $state('');
-  let lastName = $state('');
-  let emailAddress = $state('');
-  let phoneNumber = $state('');
+  // Bindable so the caller owns the actual values - CheckoutModal's own currentView switch unmounts this
+  // component entirely when navigating away from the contact view (a different arm of the same {#if/:else
+  // if} chain as the cart/edit/payment views), so state kept only here would reset to blank every time the
+  // shopper went back to the cart and returned. Binding lets it survive in the parent instead.
+  let {
+    hasAttemptedSubmit,
+    firstName = $bindable(''),
+    lastName = $bindable(''),
+    emailAddress = $bindable(''),
+    phoneNumber = $bindable(''),
+  }: Props = $props();
 
   export function isValid(): boolean {
     return firstName.trim() !== '' && emailAddress.trim() !== '' && phoneNumber.trim() !== '';

package/src/lib/EditBookingView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { CartItem, CheckoutCartItemDetailDto, CheckoutProductDto } from './client-types';
   import type { BookingApi } from './api';
+  import { ApiError, isPriceMismatch } from './api';
   import type { WizardPages } from './config';
   import { DEFAULT_WIZARD_PAGES } from './config';
   import { expandUnitItems } from './utils';
@@ -16,13 +17,18 @@
     onBack: () => void;
     onClose: () => void;
     onUpdated: () => void;
+    /// Re-fetches the products this view is handed, so a price that moved under the customer can be shown to
+    /// them. Owned by the parent because `product` is a prop here - this view cannot refresh it itself.
+    onPriceChanged?: () => Promise<void>;
   }
-  let { cartItem, product, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onBack, onClose, onUpdated }: Props = $props();
+  let { cartItem, product, api, wizardPages, editPages, autoSelectSingleTimeSlot = false, onBack, onClose, onUpdated, onPriceChanged }: Props = $props();
 
   let isSaving = $state(false);
+  let errorMessage = $state<string | null>(null);
 
   async function onComplete(item: CartItem) {
     isSaving = true;
+    errorMessage = null;
     try {
       await api.updateCartItem(cartItem.id, {
         productId: item.productId,
@@ -31,11 +37,27 @@
         availabilityId: item.availabilityId,
         localDate: item.localDate,
         pickupPointId: item.pickupPointId,
+        // Currency and precision are resolved server-side - see the same call in TicketConfigurator.
         amount: item.totalPrice,
-        currencyCode: item.currency,
-        currencyPrecision: item.currencyPrecision,
       });
       onUpdated();
+    } catch (e) {
+      // The supplier moved the price mid-edit, so the amount being submitted is no longer one the server will
+      // accept. Retrying resubmits the same stale figure and fails identically, so the prices this view is
+      // showing have to be refreshed before the customer can do anything useful.
+      if (isPriceMismatch(e)) {
+        errorMessage = "This item's price has changed. Please check the updated price and save again.";
+        await onPriceChanged?.();
+        return;
+      }
+
+      // 424 means the cart item itself was rolled back server-side (see CheckoutCartEndpoints.UpdateItemAsync) -
+      // the supplier rejected the change, so nothing was saved. Surface that instead of letting it vanish
+      // silently: WizardPage stays mounted (not swapped for a spinner) specifically so the user's in-progress
+      // selections aren't lost while they read this and decide what to try instead.
+      errorMessage = e instanceof ApiError && e.status === 424
+        ? 'This change could not be saved - the supplier rejected it. Please try different options.'
+        : 'Something went wrong saving your changes. Please try again.';
     } finally {
       isSaving = false;
     }
@@ -50,9 +72,11 @@
     <button class="icon-btn" onclick={onClose} aria-label="Close">&times;</button>
   </div>
 
-  {#if isSaving}
-    <div class="loading-center"><div class="spinner"></div></div>
-  {:else}
+  {#if errorMessage}
+    <p class="edit-error">{errorMessage}</p>
+  {/if}
+
+  <div class="edit-body" class:saving={isSaving}>
     <WizardPage
       {product}
       {api}
@@ -63,7 +87,10 @@
       {onComplete}
       onCancel={onBack}
     />
-  {/if}
+    {#if isSaving}
+      <div class="saving-overlay"><div class="spinner"></div></div>
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -74,4 +101,33 @@
     max-height: 100%;
     overflow: hidden;
   }
+
+  .edit-error {
+    margin: 0;
+    padding: 12px 16px;
+    background: #fdecea;
+    color: #b3261e;
+    font-size: 14px;
+  }
+
+  .edit-body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .edit-body.saving {
+    pointer-events: none;
+  }
+
+  .saving-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.7);
+  }
 </style>