@nuitee/booking-widget 1.0.4 → 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) + '%)';
@@ -1262,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);
       }
     }
 
@@ -1494,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;
     }
@@ -1506,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();
       }
     }
@@ -1562,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.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) + '%)';
@@ -511,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 =====
@@ -763,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;
   }
@@ -775,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();
     }
   }
@@ -831,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 {
@@ -838,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/react/BookingWidget.jsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuitee/booking-widget",
-  "version": "1.0.4",
+  "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",