@nuitee/booking-widget 1.0.1 → 1.0.3

package/dist/booking-widget.css

@@ -106,6 +106,145 @@
   font-weight: 500;
 }
 
+/* ===== Config Error State ===== */
+.booking-widget-config-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-error__icon-wrap {
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
+  border: 1.5px solid rgba(239, 68, 68, 0.22);
+  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f87171;
+  flex-shrink: 0;
+  margin-bottom: 0.25em;
+}
+
+.booking-widget-config-error__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  border-radius: 99em;
+  padding: 0.3em 0.85em;
+}
+
+.booking-widget-config-error__title {
+  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
+  font-size: 1.35em;
+  font-weight: 600;
+  color: var(--fg, #e8e0d5);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.booking-widget-config-error__desc {
+  font-size: 0.875em;
+  color: var(--secondary-fg, #a09080);
+  max-width: 25em;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.booking-widget-config-error__desc code {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--primary, #f59e0b);
+  padding: 0.12em 0.45em;
+  border-radius: 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.booking-widget-config-error__divider {
+  width: 2.5em;
+  height: 1.5px;
+  background: var(--border, rgba(255,255,255,0.1));
+  border-radius: 1px;
+}
+
+.booking-widget-config-error__hint {
+  font-size: 0.78em;
+  color: var(--muted, #6b5f50);
+  max-width: 21em;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.booking-widget-config-error__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  padding: 0.55em 1.4em;
+  background: transparent;
+  color: var(--secondary-fg, #a09080);
+  border: 1.5px solid var(--border, rgba(255,255,255,0.13));
+  border-radius: 99em;
+  font-size: 0.8em;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  margin-top: 0.25em;
+}
+
+.booking-widget-config-error__retry:hover {
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* ===== Config Loading State ===== */
+.booking-widget-config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-loading__spinner {
+  width: 2.75em;
+  height: 2.75em;
+  border: 2px solid var(--border, rgba(255,255,255,0.1));
+  border-top-color: var(--primary, hsl(38,60%,55%));
+  border-radius: 50%;
+  animation: bw-spin 0.75s linear infinite;
+}
+
+@keyframes bw-spin {
+  to { transform: rotate(360deg); }
+}
+
+.booking-widget-config-loading__text {
+  font-size: 0.875em;
+  color: var(--muted, #888);
+  letter-spacing: 0.01em;
+}
+
 /* ===== Step Indicator ===== */
 .booking-widget-step-indicator {
   display: flex;
@@ -448,7 +587,7 @@
 }
 
 .booking-widget-modal .date-trigger:hover {
-  border-color: hsl(38, 60%, 55%, 0.5);
+  border-color: var(--primary);
 }
 
 .booking-widget-modal .date-trigger .placeholder {
@@ -472,7 +611,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid, var(--card));
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/booking-widget.js

@@ -1,4 +1,4 @@
-(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';})();
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';window.__BOOKING_WIDGET_DEFAULT_COLORS__={"background":"#022c32","text":"#ffffff","primary":"#f59e0b","primaryText":"#ffffff","card":"#395b60"};})();
 // ===== Icons (Lucide/shadcn) =====
 const icons = {
   calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`,
@@ -51,6 +51,54 @@ function escapeHTML(value) {
     .replace(/'/g, '&#39;');
 }
 
+function deriveWidgetStyles(c) {
+  if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
+  var expandHex = function (hex) {
+    if (!hex || typeof hex !== 'string') return null;
+    var h = hex.replace(/^#/, '').trim();
+    if (h.length === 3) return '#' + h.split('').map(function (x) { return x + x; }).join('');
+    return h.length === 6 ? '#' + h : null;
+  };
+  var hexToRgb = function (hex) {
+    var x = expandHex(hex);
+    if (!x) return null;
+    return [parseInt(x.slice(1, 3), 16), parseInt(x.slice(3, 5), 16), parseInt(x.slice(5, 7), 16)];
+  };
+  var hexToHsl = function (hex) {
+    var x = expandHex(hex);
+    if (!x) return null;
+    var r = parseInt(x.slice(1, 3), 16) / 255, g = parseInt(x.slice(3, 5), 16) / 255, b = parseInt(x.slice(5, 7), 16) / 255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
+    if (max === min) h = s = 0;
+    else {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+      else if (max === g) h = ((b - r) / d + 2) / 6;
+      else h = ((r - g) / d + 4) / 6;
+    }
+    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+  };
+  var bg = c.background || '#1a1a1a', fg = c.text || '#e0e0e0', primary = c.primary || '#3b82f6', primaryFg = c.primaryText || '#ffffff';
+  var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
+  var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
+  if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
+  styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+  if (bgHsl) {
+    styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
+    styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
+    styles['--input-bg'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 6) + '%)';
+  }
+  if (fgHsl) {
+    styles['--secondary-fg'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(20, fgHsl[2] - 10) + '%)';
+    styles['--muted'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(30, fgHsl[2] - 25) + '%)';
+  }
+  styles['--font-serif'] = "'Playfair Display', Georgia, serif";
+  styles['--font-sans'] = "'Inter', system-ui, sans-serif";
+  styles['--radius'] = '0.75rem';
+  return styles;
+}
+
 function getDefaultRooms() {
   return [];
 }
@@ -59,14 +107,19 @@ function getDefaultRates() {
   return [];
 }
 
+// In-memory cache shared across all widget instances (keyed by propertyKey).
+var __bwConfigCache = {};
+
 // ===== Core Widget Class =====
 class BookingWidget {
   constructor(options = {}) {
     const apiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
     const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
+    const builtInMode = options.mode;
     const builtInCreatePaymentIntent = (apiBase && typeof window !== 'undefined')
       ? function (payload) {
-          return fetch(apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent', {
+          const url = apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (builtInMode === 'sandbox' ? '?sandbox=true' : '');
+          return fetch(url, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload),
@@ -99,19 +152,27 @@ class BookingWidget {
       apiSecret: options.apiSecret || null,
       propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
       propertyKey: options.propertyKey || null,
+      /** 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it. */
+      mode: options.mode || null,
       availabilityBaseUrl: options.availabilityBaseUrl || null,
       propertyBaseUrl: options.propertyBaseUrl || null,
       s3BaseUrl: options.s3BaseUrl || null,
       /** Base URL for confirmation status polling (same as API_BASE_URL). Default https://ai.thehotelplanet.com */
       confirmationBaseUrl: options.confirmationBaseUrl || 'https://ai.thehotelplanet.com',
-      // Color customization options
-      colors: {
-        background: options.colors?.background || null,
-        text: options.colors?.text || null,
-        primary: options.colors?.primary || null,
-        primaryText: options.colors?.primaryText || null,
-        ...options.colors
-      },
+      // Color customization: CONFIG defaults from load-config, installer colors override
+      colors: (function () {
+        const dc = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_DEFAULT_COLORS__) ? window.__BOOKING_WIDGET_DEFAULT_COLORS__ : {};
+        const inst = options.colors && typeof options.colors === 'object' ? options.colors : {};
+        return {
+          background: inst.background ?? dc.background ?? null,
+          text: inst.text ?? dc.text ?? null,
+          primary: inst.primary ?? dc.primary ?? null,
+          primaryText: inst.primaryText ?? dc.primaryText ?? null,
+          // When card omitted, use installer's background for consistency
+          card: inst.card ?? inst.background ?? dc.card ?? dc.background ?? null,
+          ...inst
+        };
+      })(),
       ...options
     };
 
@@ -125,6 +186,7 @@ class BookingWidget {
           s3BaseUrl: opts.s3BaseUrl || undefined,
           propertyId: opts.propertyId != null && opts.propertyId !== '' ? String(opts.propertyId) : undefined,
           propertyKey: opts.propertyKey || undefined,
+          mode: opts.mode === 'sandbox' ? 'sandbox' : undefined,
           headers: opts.apiSecret ? { 'X-API-Key': opts.apiSecret } : undefined,
         })
       : null);
@@ -161,6 +223,16 @@ class BookingWidget {
     this.stripeInstance = null;
     this.elementsInstance = null;
 
+    // Store raw installer colors so they can be re-merged with API-fetched colors.
+    this._rawInstallerColors = options.colors && typeof options.colors === 'object'
+      ? Object.assign({}, options.colors)
+      : {};
+
+    // Config fetch state: 'idle' | 'loading' | 'loaded' | 'error'
+    this._configState = 'idle';
+    this._configError = null;
+    this._configPromise = null;
+
     this.calendarMonth = null;
     this.calendarYear = null;
     this.pickState = 0;
@@ -224,8 +296,13 @@ class BookingWidget {
   // ===== Widget Open/Close =====
   open() {
     if (!this.container) this.init();
+    if (!this.overlay || !this.widget) return; // container element not found
     this.overlay.classList.add('active');
     this.widget.classList.add('active');
+    // Only fetch config when propertyKey is present; missing-key is rendered inside the modal.
+    if (this.options.propertyKey && String(this.options.propertyKey).trim() && this._configState === 'idle') {
+      this._fetchRuntimeConfig();
+    }
     this.render();
     if (this.options.onOpen) this.options.onOpen();
   }
@@ -261,6 +338,15 @@ class BookingWidget {
   }
 
   goToStep(step) {
+    // Block room/rate navigation until runtime config (colors + styles) has loaded.
+    if ((step === 'rooms' || step === 'rates') && this._configState !== 'loaded') {
+      if (this._configState === 'loading' && this._configPromise) {
+        this._configPromise.then(() => {
+          if (this._configState === 'loaded') this.goToStep(step);
+        });
+      }
+      return;
+    }
     const doRender = () => {
       if (step !== 'summary' && step !== 'payment') {
         this.checkoutShowPaymentForm = false;
@@ -321,14 +407,14 @@ class BookingWidget {
     }
 
     this.container = container;
-    
-    // Create overlay
+
+    // Always create the overlay and modal so the error is shown inside the dialog,
+    // consistent with the React and Vue behaviour.
     this.overlay = document.createElement('div');
     this.overlay.className = 'booking-widget-overlay';
     this.overlay.addEventListener('click', () => this.close());
     container.appendChild(this.overlay);
 
-    // Create widget modal
     this.widget = document.createElement('div');
     this.widget.className = 'booking-widget-modal';
     this.widget.innerHTML = `
@@ -343,35 +429,82 @@ class BookingWidget {
     });
     container.appendChild(this.widget);
 
-    // Apply custom colors
     this.applyColors();
-
-    // Inject CSS if not already present
     this.injectCSS();
   }
 
   applyColors() {
     if (!this.widget) return;
-    
     const colors = this.options.colors;
     if (!colors) return;
-    
-    const style = this.widget.style;
-    
-    if (colors.background) {
-      style.setProperty('--bg', colors.background);
-      style.setProperty('--card', colors.background);
-    }
-    if (colors.text) {
-      style.setProperty('--fg', colors.text);
-      style.setProperty('--card-fg', colors.text);
-    }
-    if (colors.primary) {
-      style.setProperty('--primary', colors.primary);
-    }
-    if (colors.primaryText) {
-      style.setProperty('--primary-fg', colors.primaryText);
+    const styles = deriveWidgetStyles(colors);
+    const el = this.widget.style;
+    for (var k in styles) if (styles[k] != null && styles[k] !== '') el.setProperty(k, styles[k]);
+  }
+
+  /**
+   * Merge API-fetched colors with installer-provided raw colors and update
+   * this.options.colors so applyColors() uses the runtime values.
+   */
+  _applyApiColors(apiColors) {
+    const inst = this._rawInstallerColors || {};
+    this.options.colors = {
+      background:  inst.background  != null ? inst.background  : (apiColors.background  || null),
+      text:        inst.text        != null ? inst.text        : (apiColors.text        || null),
+      primary:     inst.primary     != null ? inst.primary     : (apiColors.primary     || null),
+      primaryText: inst.primaryText != null ? inst.primaryText : (apiColors.primaryText || null),
+      card:        inst.card        != null ? inst.card        : (inst.background != null ? inst.background : (apiColors.card || null)),
+    };
+  }
+
+  /**
+   * Fetch runtime styling config from /load-config.
+   * Caches result in __bwConfigCache (module-level, shared across instances).
+   * On success: merges colors, applies them, and re-renders.
+   * On error: sets _configState to 'error' and re-renders to show the error banner.
+   */
+  _fetchRuntimeConfig() {
+    const self = this;
+    const propertyKey = this.options.propertyKey;
+    const key = String(propertyKey).trim();
+
+    if (__bwConfigCache[key]) {
+      this._applyApiColors(__bwConfigCache[key]);
+      this._configState = 'loaded';
+      this.applyColors();
+      return Promise.resolve(__bwConfigCache[key]);
     }
+
+    this._configState = 'loading';
+    this.render();
+
+    const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + '&mode=sandbox';
+    this._configPromise = fetch(url)
+      .then(function (res) {
+        if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
+        return res.json();
+      })
+      .then(function (data) {
+        const apiColors = {};
+        if (data.widgetBackground) apiColors.background  = data.widgetBackground;
+        if (data.widgetTextColor)  apiColors.text        = data.widgetTextColor;
+        if (data.primaryColor)     apiColors.primary     = data.primaryColor;
+        if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
+        if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+        __bwConfigCache[key] = apiColors;
+        self._applyApiColors(apiColors);
+        self._configState = 'loaded';
+        self.applyColors();
+        self.render();
+        return apiColors;
+      })
+      .catch(function (err) {
+        self._configError = err.message || 'Failed to load widget configuration.';
+        self._configState = 'error';
+        self.render();
+      });
+
+    return this._configPromise;
   }
 
   injectCSS() {
@@ -392,6 +525,7 @@ class BookingWidget {
     window.__bookingWidgetRendering = true;
     try {
       this.renderStepIndicator();
+      this.renderPropertyKeyMessage();
       this.renderStepContent();
     } finally {
       window.__bookingWidgetRendering = false;
@@ -402,7 +536,9 @@ class BookingWidget {
   renderStepIndicator() {
     const el = this.widget.querySelector('.booking-widget-step-indicator');
     if (!el) return;
-    if (this.state.step === 'confirmation') {
+    const key = this.options.propertyKey;
+    const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
+    if (!hasPropertyKey || this._configState !== 'loaded' || this.state.step === 'confirmation') {
       el.innerHTML = '';
       return;
     }
@@ -422,9 +558,79 @@ class BookingWidget {
     el.innerHTML = html;
   }
 
+  renderPropertyKeyMessage() {
+    const el = this.widget.querySelector('.booking-widget-property-key-message');
+    if (!el) return;
+    // Config errors are now rendered inside renderStepContent via the full error card.
+    el.style.display = 'none';
+  }
+
+  _retryConfigFetch() {
+    this._configState = 'idle';
+    this._configError = null;
+    this._configPromise = null;
+    this._fetchRuntimeConfig();
+  }
+
+  _configErrorHTML(type, title, body, hint) {
+    const lockIcon = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`;
+    const warnIcon = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
+    const retryIcon = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`;
+    const icon = type === 'missing' ? lockIcon : warnIcon;
+    const badgeLabel = type === 'missing'
+      ? `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Missing Configuration`
+      : 'Configuration Error';
+    const retryBtn = type === 'fetch'
+      ? `<button class="booking-widget-config-error__retry" onclick="window.bookingWidgetInstance && window.bookingWidgetInstance._retryConfigFetch()">${retryIcon} Try Again</button>`
+      : '';
+    return `<div class="booking-widget-config-error" role="alert">
+      <div class="booking-widget-config-error__icon-wrap">${icon}</div>
+      <span class="booking-widget-config-error__badge">${badgeLabel}</span>
+      <h3 class="booking-widget-config-error__title">${escapeHTML(title)}</h3>
+      <p class="booking-widget-config-error__desc">${body}</p>
+      <div class="booking-widget-config-error__divider"></div>
+      <p class="booking-widget-config-error__hint">${escapeHTML(hint)}</p>
+      ${retryBtn}
+    </div>`;
+  }
+
   // ===== Step Renderers =====
   renderStepContent() {
     const el = this.widget.querySelector('.booking-widget-step-content');
+    if (!el) return;
+
+    // Missing propertyKey — show error card inside the modal, same as React/Vue.
+    const key = this.options.propertyKey;
+    if (!key || !String(key).trim()) {
+      el.innerHTML = this._configErrorHTML(
+        'missing',
+        'Widget Not Configured',
+        'A <code>propertyKey</code> option is required to initialize this booking widget. Please provide it to load rooms and availability.',
+        'Contact the site administrator to configure this widget.'
+      );
+      return;
+    }
+
+    if (this._configState === 'loading') {
+      el.innerHTML = `<div class="booking-widget-config-loading">
+        <div class="booking-widget-config-loading__spinner"></div>
+        <span class="booking-widget-config-loading__text">Loading configuration\u2026</span>
+      </div>`;
+      return;
+    }
+    if (this._configState === 'error') {
+      el.innerHTML = this._configErrorHTML(
+        'fetch',
+        'Could Not Load Config',
+        escapeHTML(this._configError || 'An unexpected error occurred.'),
+        'Please try again or contact support.'
+      );
+      return;
+    }
+    if (this._configState !== 'loaded') {
+      el.innerHTML = '';
+      return;
+    }
     switch (this.state.step) {
       case 'dates':
         el.innerHTML = this.renderDatesStep();
@@ -949,9 +1155,10 @@ class BookingWidget {
     if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.options.stripePublishableKey || typeof this.options.createPaymentIntent !== 'function') return;
     const buildPaymentIntentPayload = typeof window !== 'undefined' && window.buildPaymentIntentPayload;
     const buildCheckoutPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
+    const sandbox = this.options.mode === 'sandbox';
     const paymentIntentPayload = buildPaymentIntentPayload
-      ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined })
-      : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null);
+      ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined, sandbox })
+      : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null);
     if (!paymentIntentPayload) return;
     const self = this;
     this.paymentElementReady = false;
@@ -1030,7 +1237,8 @@ class BookingWidget {
     const canSubmit = this.state.guest.firstName && this.state.guest.lastName && this.state.guest.email;
     if (!canSubmit) return;
     const buildPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
-    const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null;
+    const sandbox = this.options.mode === 'sandbox';
+    const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined, sandbox }) : null;
     const hasStripe = this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function';
 
     // Summary step with Stripe: go to payment step (form loads there)
@@ -1177,7 +1385,7 @@ class BookingWidget {
     const token = String(confirmationToken || '').trim();
     if (!token) throw new Error('Missing confirmation token');
     const base = String(this.options.confirmationBaseUrl || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
-    const url = `${base}/proxy/confirmation/${encodeURIComponent(token)}`;
+    const url = `${base}/proxy/confirmation/${encodeURIComponent(token)}${this.options.mode === 'sandbox' ? '?sandbox=true' : ''}`;
     const res = await fetch(url, { method: 'POST' });
     if (!res.ok) throw new Error(await res.text());
     return await res.json();