@nuitee/booking-widget 1.0.3 → 1.0.4

package/dist/booking-widget-standalone.js

@@ -1189,18 +1189,21 @@ if (typeof window !== 'undefined') {
     _fetchRuntimeConfig() {
       const self = this;
       const key = String(this.options.propertyKey).trim();
+      const isSandbox = this.options.mode === 'sandbox';
+      // Cache key is mode-aware so sandbox and live configs are stored separately.
+      const cacheKey = isSandbox ? key + ':sandbox' : key;
 
-      if (__bwConfigCache[key]) {
-        this._applyApiColors(__bwConfigCache[key]);
+      if (__bwConfigCache[cacheKey]) {
+        this._applyApiColors(__bwConfigCache[cacheKey]);
         this._configState = 'loaded';
         this.applyColors();
-        return Promise.resolve(__bwConfigCache[key]);
+        return Promise.resolve(__bwConfigCache[cacheKey]);
       }
 
       this._configState = 'loading';
       this.render();
 
-      const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + '&mode=sandbox';
+      const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
       this._configPromise = fetch(url)
         .then(function (res) {
           if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
@@ -1213,7 +1216,7 @@ if (typeof window !== 'undefined') {
           if (data.primaryColor)     apiColors.primary     = data.primaryColor;
           if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
           if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
-          __bwConfigCache[key] = apiColors;
+          __bwConfigCache[cacheKey] = apiColors;
           self._applyApiColors(apiColors);
           self._configState = 'loaded';
           self.applyColors();

package/dist/booking-widget.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -611,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid, var(--card));
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/booking-widget.js

@@ -467,18 +467,21 @@ class BookingWidget {
     const self = this;
     const propertyKey = this.options.propertyKey;
     const key = String(propertyKey).trim();
+    const isSandbox = this.options.mode === 'sandbox';
+    // Cache key is mode-aware so sandbox and live configs are stored separately.
+    const cacheKey = isSandbox ? key + ':sandbox' : key;
 
-    if (__bwConfigCache[key]) {
-      this._applyApiColors(__bwConfigCache[key]);
+    if (__bwConfigCache[cacheKey]) {
+      this._applyApiColors(__bwConfigCache[cacheKey]);
       this._configState = 'loaded';
       this.applyColors();
-      return Promise.resolve(__bwConfigCache[key]);
+      return Promise.resolve(__bwConfigCache[cacheKey]);
     }
 
     this._configState = 'loading';
     this.render();
 
-    const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + '&mode=sandbox';
+    const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
     this._configPromise = fetch(url)
       .then(function (res) {
         if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
@@ -491,7 +494,7 @@ class BookingWidget {
         if (data.primaryColor)     apiColors.primary     = data.primaryColor;
         if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
         if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
-        __bwConfigCache[key] = apiColors;
+        __bwConfigCache[cacheKey] = apiColors;
         self._applyApiColors(apiColors);
         self._configState = 'loaded';
         self.applyColors();

package/dist/core/styles.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -611,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid, var(--card));
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/react/BookingWidget.jsx

@@ -240,7 +240,7 @@ const BookingWidget = ({
     setConfigLoading(true);
     setConfigError(null);
     setConfigLoaded(false);
-    fetchRuntimeConfig(propertyKey, colors)
+    fetchRuntimeConfig(propertyKey, colors, mode)
       .then(({ widgetStyles }) => {
         if (cancelled) return;
         setRuntimeWidgetStyles(widgetStyles);
@@ -253,7 +253,7 @@ const BookingWidget = ({
         setConfigLoading(false);
       });
     return () => { cancelled = true; };
-  }, [propertyKey, colors, configRetryCount]);
+  }, [propertyKey, colors, mode, configRetryCount]);
 
   // Apply resolved CSS custom properties to the widget element.
   useEffect(() => {

package/dist/react/styles.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -611,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid, var(--card));
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/config-service.js

@@ -64,27 +64,31 @@ export function mergeColors(mappedApiColors, installerColors) {
  * - Throws synchronously (or rejects) when propertyKey is null, undefined, or
  *   an empty string. Callers must catch this and render a "Missing Configuration"
  *   error state rather than attempting to render the normal widget UI.
- * - Caches the raw API color payload by propertyKey. Subsequent calls for the
- *   same key re-use the cache and only re-merge installer overrides.
+ * - Caches the raw API color payload by propertyKey + mode. Subsequent calls for
+ *   the same key+mode re-use the cache and only re-merge installer overrides.
  *
- * @param {string} propertyKey        - The hotel property key / API key.
- * @param {object|null} installerColors - Optional installer color overrides.
+ * @param {string}      propertyKey      - The hotel property key / API key.
+ * @param {object|null} installerColors  - Optional installer color overrides.
+ * @param {string}      [mode]           - Pass 'sandbox' to append &mode=sandbox to the request.
  * @returns {Promise<{ apiColors: object, colors: object, widgetStyles: object }>}
  */
-export async function fetchRuntimeConfig(propertyKey, installerColors = null) {
+export async function fetchRuntimeConfig(propertyKey, installerColors = null, mode = null) {
   if (!propertyKey || !String(propertyKey).trim()) {
     throw new Error('propertyKey is required to initialize the booking widget.');
   }
 
   const key = String(propertyKey).trim();
+  const isSandbox = mode === 'sandbox';
+  // Cache separately for sandbox vs live so switching modes gets a fresh fetch.
+  const cacheKey = isSandbox ? `${key}:sandbox` : key;
 
-  if (_configCache.has(key)) {
-    const apiColors = _configCache.get(key);
+  if (_configCache.has(cacheKey)) {
+    const apiColors = _configCache.get(cacheKey);
     const colors = mergeColors(apiColors, installerColors);
     return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
   }
 
-  const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}&mode=sandbox`;
+  const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}${isSandbox ? '&mode=sandbox' : ''}`;
   const res = await fetch(url);
   if (!res.ok) {
     throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
@@ -92,7 +96,7 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null) {
 
   const data = await res.json();
   const apiColors = mapApiColors(data);
-  _configCache.set(key, apiColors);
+  _configCache.set(cacheKey, apiColors);
 
   const colors = mergeColors(apiColors, installerColors);
   return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };

package/dist/vue/BookingWidget.vue

@@ -730,6 +730,9 @@ export default {
     propertyKey() {
       this._initRuntimeConfig();
     },
+    mode() {
+      this._initRuntimeConfig();
+    },
     colors: {
       deep: true,
       handler() { this._initRuntimeConfig(); },
@@ -779,7 +782,7 @@ export default {
       this.configError = null;
       this.configLoaded = false;
       try {
-        const { widgetStyles } = await fetchRuntimeConfig(this.propertyKey, this.colors);
+        const { widgetStyles } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
         this.runtimeWidgetStyles = widgetStyles;
         this.configLoaded = true;
       } catch (err) {

package/dist/vue/styles.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -611,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid, var(--card));
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A beautiful, customizable booking widget modal that can be embedded in any website. Supports vanilla JavaScript, React, and Vue.js.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",