@nuitee/booking-widget 1.0.3 → 1.0.5

package/README.md

@@ -94,15 +94,15 @@ widget.open();
 No bundler: load the script and CSS from the CDN, then create the widget.
 
 ```html
-<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget.css">
-<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget-standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.5/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.5/dist/booking-widget-standalone.js"></script>
 
 <div id="booking-widget-container"></div>
 
 <script>
   const widget = new BookingWidget({
     containerId: 'booking-widget-container',
-    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.0/dist/booking-widget.css',
+    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.5/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -872,6 +872,7 @@ if (typeof window !== 'undefined') {
     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);
+    styles['--card-solid'] = styles['--card'];
     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) + '%)';
@@ -1189,18 +1190,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 +1217,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();
@@ -1259,17 +1263,24 @@ if (typeof window !== 'undefined') {
     }
 
     injectCSS() {
-      if (document.getElementById('booking-widget-styles')) return;
-      
-      if (this.options.cssUrl) {
-        const link = document.createElement('link');
-        link.id = 'booking-widget-styles';
-        link.rel = 'stylesheet';
-        link.href = this.options.cssUrl;
-        document.head.appendChild(link);
-      } else {
-        // Inline CSS would go here in a real bundle
-        console.warn('CSS not loaded. Please include booking-widget.css or provide cssUrl option.');
+      if (!document.getElementById('booking-widget-styles')) {
+        if (this.options.cssUrl) {
+          const link = document.createElement('link');
+          link.id = 'booking-widget-styles';
+          link.rel = 'stylesheet';
+          link.href = this.options.cssUrl;
+          document.head.appendChild(link);
+        } else {
+          // Inline CSS would go here in a real bundle
+          console.warn('CSS not loaded. Please include booking-widget.css or provide cssUrl option.');
+        }
+      }
+
+      if (!document.getElementById('booking-widget-overrides')) {
+        const style = document.createElement('style');
+        style.id = 'booking-widget-overrides';
+        style.textContent = '.booking-widget-modal .confirm-icon { font-size: 1em; }';
+        document.head.appendChild(style);
       }
     }
 
@@ -1491,10 +1502,17 @@ if (typeof window !== 'undefined') {
       this.render();
     }
 
-    initCalendar() {
-      const now = new Date();
-      this.calendarMonth = now.getMonth();
-      this.calendarYear = now.getFullYear();
+    // force=true resets the view when the user opens the picker.
+    //   - If a check-in date is already selected, starts from that month/year.
+    //   - Otherwise starts from today.
+    // force=false (default) preserves the current month/year so mid-pick re-renders
+    // don't snap the calendar back to the current month.
+    initCalendar(force = false) {
+      if (force || this.calendarMonth === null || this.calendarYear === null) {
+        const anchor = this.state.checkIn || new Date();
+        this.calendarMonth = anchor.getMonth();
+        this.calendarYear = anchor.getFullYear();
+      }
       // If we have check-in but no check-out, next click sets check-out; otherwise next click sets check-in (allows changing check-in when both are set)
       this.pickState = (this.state.checkIn && !this.state.checkOut) ? 1 : 0;
     }
@@ -1503,7 +1521,7 @@ if (typeof window !== 'undefined') {
       const popup = this.widget.querySelector('.calendar-popup');
       popup.classList.toggle('open');
       if (popup.classList.contains('open')) {
-        this.initCalendar();
+        this.initCalendar(true);
         this.renderCalendar();
       }
     }
@@ -1559,10 +1577,14 @@ if (typeof window !== 'undefined') {
 
     pickDate(y, m, d) {
       const date = new Date(y, m, d);
+      // Save the current view so render() cannot shift the calendar.
+      const savedMonth = this.calendarMonth;
+      const savedYear  = this.calendarYear;
       if (this.pickState === 0 || (this.state.checkIn && date <= this.state.checkIn)) {
         this.state.checkIn = date; this.state.checkOut = null; this.pickState = 1;
         this.render();
-        this.initCalendar();
+        // Restore view after render (render calls initCalendar which may reset month/year).
+        if (savedMonth !== null) { this.calendarMonth = savedMonth; this.calendarYear = savedYear; }
         this.pickState = 1;
         const popup = this.widget.querySelector('.calendar-popup');
         if (popup) popup.classList.add('open');

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

@@ -84,6 +84,7 @@ function deriveWidgetStyles(c) {
   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);
+  styles['--card-solid'] = styles['--card'];
   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) + '%)';
@@ -467,18 +468,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 +495,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();
@@ -508,13 +512,20 @@ class BookingWidget {
   }
 
   injectCSS() {
-    if (document.getElementById('booking-widget-styles')) return;
-    
-    const link = document.createElement('link');
-    link.id = 'booking-widget-styles';
-    link.rel = 'stylesheet';
-    link.href = this.options.cssUrl || './booking-widget.css';
-    document.head.appendChild(link);
+    if (!document.getElementById('booking-widget-styles')) {
+      const link = document.createElement('link');
+      link.id = 'booking-widget-styles';
+      link.rel = 'stylesheet';
+      link.href = this.options.cssUrl || './booking-widget.css';
+      document.head.appendChild(link);
+    }
+
+    if (!document.getElementById('booking-widget-overrides')) {
+      const style = document.createElement('style');
+      style.id = 'booking-widget-overrides';
+      style.textContent = '.booking-widget-modal .confirm-icon { font-size: 1em; }';
+      document.head.appendChild(style);
+    }
   }
 
   // ===== Render =====
@@ -760,10 +771,17 @@ class BookingWidget {
   }
 
   // --- Calendar ---
-  initCalendar() {
-    const now = new Date();
-    this.calendarMonth = now.getMonth();
-    this.calendarYear = now.getFullYear();
+  // force=true resets the view when the user opens the picker.
+  //   - If a check-in date is already selected, starts from that month/year.
+  //   - Otherwise starts from today.
+  // force=false (default) preserves the current month/year so mid-pick re-renders
+  // don't snap the calendar back to the current month.
+  initCalendar(force = false) {
+    if (force || this.calendarMonth === null || this.calendarYear === null) {
+      const anchor = this.state.checkIn || new Date();
+      this.calendarMonth = anchor.getMonth();
+      this.calendarYear = anchor.getFullYear();
+    }
     // If we have check-in but no check-out, next click sets check-out; otherwise next click sets check-in (allows changing check-in when both are set)
     this.pickState = (this.state.checkIn && !this.state.checkOut) ? 1 : 0;
   }
@@ -772,7 +790,7 @@ class BookingWidget {
     const popup = this.widget.querySelector('.calendar-popup');
     popup.classList.toggle('open');
     if (popup.classList.contains('open')) {
-      this.initCalendar();
+      this.initCalendar(true);
       this.renderCalendar();
     }
   }
@@ -828,6 +846,9 @@ class BookingWidget {
 
   pickDate(y, m, d) {
     const date = new Date(y, m, d);
+    // Save the current view so render() cannot shift the calendar.
+    const savedMonth = this.calendarMonth;
+    const savedYear  = this.calendarYear;
     if (this.pickState === 0 || (this.state.checkIn && date <= this.state.checkIn)) {
       this.state.checkIn = date; this.state.checkOut = null; this.pickState = 1;
     } else {
@@ -835,9 +856,9 @@ class BookingWidget {
       this.widget.querySelector('.calendar-popup').classList.remove('open');
     }
     this.render();
+    // Restore view after render (render calls initCalendar which may reset month/year).
+    if (savedMonth !== null) { this.calendarMonth = savedMonth; this.calendarYear = savedYear; }
     if (this.pickState === 1) {
-      this.initCalendar();
-      this.pickState = 1;
       const popup = this.widget.querySelector('.calendar-popup');
       if (popup) popup.classList.add('open');
       this.renderCalendar();

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(() => {
@@ -399,8 +399,6 @@ const BookingWidget = ({
       setCalendarOpen(false);
     }
     if (pickState === 0) {
-      setCalendarMonth(new Date().getMonth());
-      setCalendarYear(new Date().getFullYear());
       setPickState(1);
     }
   };

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.5",
   "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",