@nuitee/booking-widget 1.0.1 → 1.0.3

package/USAGE.md

@@ -254,7 +254,7 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | `onComplete` | function | Called when the booking is completed, with booking data. |
 | `onOpen` | function | Optional. Called when the widget opens. |
 | `propertyKey` | string | Property key for real rooms/rates/booking; omit for demo data. |
-| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+| `colors` | object | Optional. Pass 4 colors: `{ background, text, primary, primaryText }`. Card, muted, border, etc. are derived. Add `card` to override. |
 
 ### Vanilla constructor options
 
@@ -266,7 +266,7 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | `onClose` | function | Called when the user closes the widget. |
 | `onComplete` | function | Called when the booking is completed. |
 | `onOpen` | function | Optional. Called when the widget opens. |
-| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+| `colors` | object | Optional. Pass 4 colors: `{ background, text, primary, primaryText }`. Card, muted, border, etc. are derived. Add `card` to override. |
 
 ### Vanilla methods
 
@@ -286,4 +286,4 @@ Only the following props/options are for you to set. API URLs, Stripe, and booki
 | Use in vanilla (no build) | Load the standalone script and CSS, `new BookingWidget({ containerId, propertyKey, ... })`, then `init()` and `open()`. |
 | Use in vanilla (with build) | Import `@nuitee/booking-widget` and `@nuitee/booking-widget/css`, pass `propertyKey` and callbacks, then `open()`. |
 | Real rooms/rates/booking | Pass `propertyKey`. The widget uses its own runtime config for API and payments. |
-| Custom colors | Pass `colors: { background, text, primary, primaryText }`. |
+| Custom colors | Pass `colors: { background, text, primary, primaryText }`. Card, muted, border, input-bg derive from these. |

package/dist/booking-widget-standalone.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"};})();
 /**
  * Shared Booking API layer for the @nuitee/booking-widget.
  * Used by Vanilla JS, Vue, and React variants so integration lives in one place.
@@ -198,6 +198,7 @@ function deriveRatePolicyDetail(avRate) {
  * @param {string} [config.s3BaseUrl] - Base URL for room images (e.g. from VITE_AWS_S3_PATH).
  * @param {string|number} [config.propertyId] - Property ID (legacy). Prefer propertyKey for proxy endpoints.
  * @param {string} [config.propertyKey] - Property key for proxy endpoints (e.g. VITE_PROPERTY_KEY). Used in /proxy/availability and /proxy/ari-properties?key=.
+ * @param {string} [config.mode] - 'sandbox' to pass sandbox=true on all proxy/API calls; omit or 'live' to not pass it.
  * @param {string} [config.currency] - Currency code (e.g. 'MAD'). Default 'MAD'.
  * @param {Object} [config.headers] - Optional. Static headers for each request (e.g. { 'X-API-Key': '...' }).
  * @param {function(): Object} [config.getHeaders] - Optional. Return headers for each request (merged after headers). Use for dynamic headers.
@@ -216,6 +217,7 @@ function createBookingApi(config = {}) {
   if (rawKey && !propertyKey && typeof console !== 'undefined' && console.warn) {
     console.warn('[booking-api] Property key must start with "book_engine_". Ignoring invalid value. Set VITE_PROPERTY_KEY in your .env (see .env.example).');
   }
+  const sandbox = config.mode === 'sandbox';
   const currency = config.currency || 'MAD';
   const staticHeaders = config.headers || {};
   const getHeaders = config.getHeaders || (() => ({}));
@@ -280,8 +282,11 @@ function createBookingApi(config = {}) {
     // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
     let propertyRooms = {};
     let propertyCurrency = currency;
+    const propQuery = propertyKey
+      ? `key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
+      : '';
     const propFullUrl = propertyKey
-      ? `${availabilityBaseUrl}/proxy/ari-properties?key=${encodeURIComponent(propertyKey)}`
+      ? `${availabilityBaseUrl}/proxy/ari-properties?${propQuery}`
       : propertyBaseUrl
         ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
         : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
@@ -308,7 +313,7 @@ function createBookingApi(config = {}) {
     };
 
     const availabilityPath = propertyKey
-      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}`
+      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}${sandbox ? '&sandbox=true' : ''}`
       : `/api/calendar/booking_engine/${propertyId}/availability`;
     const data = await request('POST', availabilityPath, body, availabilityBaseUrl);
     if (data && typeof data === 'object' && (data.error || data.message)) {
@@ -521,14 +526,15 @@ function computeCheckoutTotal(state, nights) {
  * Use this when integrating Stripe (amount/currency for Payment Intent) and your booking API (external_booking + internal_booking; add stripe_token after payment success).
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string }
- * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object }}
+ * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string, sandbox?: boolean }
+ * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object, sandbox?: boolean }}
  */
 function buildCheckoutPayload(state, options = {}) {
   const propertyId = options.propertyId != null ? String(options.propertyId) : '';
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
   const clientBookingReference = options.clientBookingReference || 'nuitee-booking-widget';
+  const sandbox = options.sandbox === true;
 
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
@@ -592,7 +598,7 @@ function buildCheckoutPayload(state, options = {}) {
     room_id: state.selectedRoom?.id ?? '',
   };
 
-  return {
+  const out = {
     stripe: {
       amount: total,
       currency: currency.toLowerCase(),
@@ -600,6 +606,8 @@ function buildCheckoutPayload(state, options = {}) {
     external_booking,
     internal_booking,
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**
@@ -608,12 +616,23 @@ function buildCheckoutPayload(state, options = {}) {
  * Response: { clientSecret, confirmationToken }
  *
  * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
- * @param {Object} [options] - { propertyKey: string }
- * @returns {{ rate_identifier: string, key: string, metadata: Object }}
+ * @param {Object} [options] - { propertyKey: string, sandbox?: boolean }
+ * @returns {{ rate_identifier: string, key: string, metadata: Object, sandbox?: boolean }}
  */
+function generateUUID() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}
+
 function buildPaymentIntentPayload(state, options = {}) {
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const sandbox = options.sandbox === true;
   const checkIn = state.checkIn;
   const checkOut = state.checkOut;
   const nights = checkIn && checkOut
@@ -633,7 +652,7 @@ function buildPaymentIntentPayload(state, options = {}) {
     ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
   }));
 
-  return {
+  const out = {
     rate_identifier: rateIdentifier,
     key: propertyKey,
     metadata: {
@@ -649,8 +668,11 @@ function buildPaymentIntentPayload(state, options = {}) {
       email: g.email ?? '',
       occupancies: occupanciesForPayload,
       source_transaction: 'booking engine',
+      booking_code: generateUUID(),
     },
   };
+  if (sandbox) out.sandbox = true;
+  return out;
 }
 
 /**
@@ -817,30 +839,86 @@ if (typeof window !== 'undefined') {
     return `<span class="icon" style="display:inline-flex;align-items:center;justify-content:center;width:${size};height:${size};min-width:${size};min-height:${size};vertical-align:middle;flex-shrink:0;color:inherit;">${sizedIcon}</span>`;
   }
 
-  // Copy the BookingWidget class from core/widget.js
-  // This is a simplified version that will be bundled
-  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 builtInCreatePaymentIntent = (apiBase && typeof window !== 'undefined')
-    ? function (payload) {
-        return fetch(apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        }).then(function (r) {
-          if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
-          return r.json();
-        }).then(function (data) {
-          return {
-            clientSecret: data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret,
-            confirmationToken: data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token,
-          };
-        });
+  function deriveWidgetStyles(c) {
+    if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
+    function expandHex(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;
+    }
+    function hexToRgb(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)];
+    }
+    function hexToHsl(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;
       }
-    : null;
+      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;
+  }
+
+  const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
+
+  function escapeHTML(value) {
+    const s = String(value ?? '');
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+
+  // In-memory config cache shared across all instances, keyed by propertyKey.
+  const __bwConfigCache = {};
 
   class BookingWidget {
     constructor(options = {}) {
+      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+      const builtInCreatePaymentIntent = (!options.createPaymentIntent && defaultApiBase && typeof window !== 'undefined')
+        ? function (payload) {
+          const url = defaultApiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (options.mode === 'sandbox' ? '?sandbox=true' : '');
+          return fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          }).then(function (r) {
+            if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
+            return r.json();
+          }).then(function (data) {
+            return {
+              clientSecret: data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret,
+              confirmationToken: data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token,
+            };
+          });
+        }
+        : null;
+
       this.options = {
         containerId: options.containerId || 'booking-widget-container',
         onOpen: options.onOpen || null,
@@ -849,20 +927,27 @@ if (typeof window !== 'undefined') {
         onBeforeConfirm: options.onBeforeConfirm || null,
         createPaymentIntent: options.createPaymentIntent || builtInCreatePaymentIntent,
         onBookingComplete: options.onBookingComplete || null,
-        confirmationBaseUrl: options.confirmationBaseUrl || (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) || 'https://ai.thehotelplanet.com',
+        confirmationBaseUrl: options.confirmationBaseUrl || defaultApiBase || 'https://ai.thehotelplanet.com',
         stripePublishableKey: options.stripePublishableKey || builtInStripeKey || null,
         propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
         propertyKey: options.propertyKey || null,
+        mode: options.mode || null,
         bookingApi: options.bookingApi || null,
         cssUrl: options.cssUrl || null,
-        // 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
       };
       
@@ -902,11 +987,11 @@ if (typeof window !== 'undefined') {
 
       this.ROOMS = [];
       this.RATES = [];
-      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
       this.bookingApi = this.options.bookingApi || ((this.options.propertyKey || defaultApiBase) && typeof window.createBookingApi === 'function'
         ? window.createBookingApi({
             availabilityBaseUrl: defaultApiBase || '',
             propertyKey: this.options.propertyKey || undefined,
+            mode: this.options.mode === 'sandbox' ? 'sandbox' : undefined,
           })
         : null);
 
@@ -916,6 +1001,15 @@ if (typeof window !== 'undefined') {
       this.container = null;
       this.overlay = null;
       this.widget = null;
+
+      // Store raw installer colors for re-merging after API config fetch.
+      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;
     }
 
     getNights() {
@@ -952,8 +1046,13 @@ if (typeof window !== 'undefined') {
 
     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();
     }
@@ -980,6 +1079,12 @@ if (typeof window !== 'undefined') {
     }
 
     goToStep(step) {
+      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;
+      }
       if (step !== 'summary' && step !== 'payment') {
         this.checkoutShowPaymentForm = false;
         this.paymentElementReady = false;
@@ -1031,7 +1136,9 @@ if (typeof window !== 'undefined') {
       }
 
       this.container = container;
-      
+
+      // 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());
@@ -1045,40 +1152,110 @@ if (typeof window !== 'undefined') {
         <div class="booking-widget-step-content"></div>
       `;
       this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
+      this.widget.querySelector('.booking-widget-step-indicator').addEventListener('click', (e) => {
+        const stepEl = e.target.closest('[data-step]');
+        if (stepEl && stepEl.dataset.step) this.goToStep(stepEl.dataset.step);
+      });
       container.appendChild(this.widget);
 
       if (typeof window !== 'undefined') {
         window.bookingWidgetInstance = this;
       }
 
-      // Apply custom colors
       this.applyColors();
-
       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]);
+    }
+
+    _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)),
+      };
+    }
+
+    _fetchRuntimeConfig() {
+      const self = this;
+      const key = String(this.options.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;
+    }
+
+    _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>`;
     }
 
     injectCSS() {
@@ -1098,12 +1275,20 @@ if (typeof window !== 'undefined') {
 
     render() {
       this.renderStepIndicator();
+      this.renderPropertyKeyMessage();
       this.renderStepContent();
     }
 
+    renderPropertyKeyMessage() {
+      // Config errors are rendered directly inside renderStepContent as full cards.
+    }
+
     renderStepIndicator() {
       const el = this.widget.querySelector('.booking-widget-step-indicator');
-      if (this.state.step === 'confirmation') {
+      if (!el) return;
+      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;
       }
@@ -1125,6 +1310,40 @@ if (typeof window !== 'undefined') {
 
     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();
@@ -1472,7 +1691,7 @@ if (typeof window !== 'undefined') {
               <span class="rate-name">${[r.policy, ...(r.benefits || [])].filter(Boolean).join(' ')}</span>
               <div class="rate-benefits"><span class="amenity-tag">${r.rate_code ?? r.name}</span></div>
             </div>
-            <div class="rate-price"><strong>$ ${total.toLocaleString()}</strong><small>total</small></div>
+            <div class="rate-price"><strong>${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</strong><small>total</small></div>
           </div>
           <p class="rate-desc">${r.description}</p>
         </div>`;
@@ -1536,18 +1755,20 @@ if (typeof window !== 'undefined') {
                 const roomTotal = Math.round(this.state.selectedRoom.basePrice * this.state.selectedRate.priceModifier * nights * rooms);
                 const fees = this.state.selectedRate.fees ?? [];
                 const allIncluded = fees.length > 0 && fees.every(f => f.included) && (!this.state.selectedRate.vat || this.state.selectedRate.vat.included);
+                const currency = this.state.selectedRoom?.currency || 'USD';
+                const fmt = (a) => (typeof window.formatPrice === 'function' ? window.formatPrice(a, currency) : currency + ' ' + Math.round(Number(a) || 0).toLocaleString());
                 let rows = fees.map(f => {
                   const amt = f.perNight ? f.amount * nights * rooms : f.amount;
                   const badge = f.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>';
-                  return `<div class="summary-row summary-row--fee"><span class="summary-fee-label">${f.name} ${badge}</span><span>$ ` + Math.round(amt).toLocaleString() + `</span></div>`;
+                  return `<div class="summary-row summary-row--fee"><span class="summary-fee-label">${f.name} ${badge}</span><span>${fmt(amt)}</span></div>`;
                 }).join('');
                 const vat = this.state.selectedRate.vat;
                 if (vat) {
                   const showVatBadge = vat.value !== 0 && vat.value != null;
                   const vatBadge = showVatBadge ? (vat.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>') : '';
-                  rows += `<div class="summary-row summary-row--fee"><span class="summary-fee-label">VAT${vatBadge ? ' ' + vatBadge : ''}</span><span>$ ` + Math.round(vat.value || 0).toLocaleString() + `</span></div>`;
+                  rows += `<div class="summary-row summary-row--fee"><span class="summary-fee-label">VAT${vatBadge ? ' ' + vatBadge : ''}</span><span>${fmt(vat.value || 0)}</span></div>`;
                 }
-                return `<div class="summary-row"><span>Room total</span><span>$ ` + Math.round(roomTotal).toLocaleString() + `</span></div>
+                return `<div class="summary-row"><span>Room total</span><span>${fmt(roomTotal)}</span></div>
                 <div class="summary-fees">
                   <p class="summary-fees-heading">Fees &amp; taxes</p>
                   ${allIncluded ? '<p class="summary-fees-note">Included in your rate</p>' : ''}
@@ -1556,7 +1777,7 @@ if (typeof window !== 'undefined') {
               })() : ''}
               <div class="summary-total">
                 <span class="summary-total-label">Total</span>
-                <span class="summary-total-price">$ ${total.toLocaleString()}</span>
+                <span class="summary-total-price">${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</span>
               </div>
               ${this.apiError ? `<p style="color:var(--destructive, #ef4444);font-size:0.85em;margin-top:0.5em;">${this.apiError}</p>` : ''}
               <button type="button" class="btn-primary" style="max-width:100%;margin-top:1em;" ${!canSubmit ? 'disabled' : ''} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
@@ -1588,7 +1809,7 @@ if (typeof window !== 'undefined') {
               <h3>Amount due</h3>
               <div class="payment-total-row">
                 <span class="payment-total-label">Total</span>
-                <span class="payment-total-amount">$ ${total.toLocaleString()}</span>
+                <span class="payment-total-amount">${(typeof window.formatPrice === 'function' ? window.formatPrice(total, this.state.selectedRoom?.currency) : (this.state.selectedRoom?.currency || 'USD') + ' ' + total.toLocaleString())}</span>
               </div>
               <button type="button" class="btn-primary" ${buttonDisabled} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
               <p class="secure-note">${iconHTML('lock', '1em')} Secure & encrypted booking</p>
@@ -1606,7 +1827,8 @@ if (typeof window !== 'undefined') {
       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 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);
+      const sandbox = this.options.mode === 'sandbox';
+      const paymentIntentPayload = buildPaymentIntentPayload ? 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;
@@ -1685,7 +1907,8 @@ if (typeof window !== 'undefined') {
       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.hasStripe;
 
       if (this.state.step === 'summary' && hasStripe) {
@@ -1745,7 +1968,7 @@ if (typeof window !== 'undefined') {
       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();