@nuitee/booking-widget 1.0.4 → 1.0.6

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.6/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.6/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.6/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -230,6 +230,7 @@ function createBookingApi(config = {}) {
     const url = `${(base || '').replace(/\/$/, '')}${path}`;
     const headers = {
       'Content-Type': 'application/json',
+      'Source': 'booking_engine',
       ...staticHeaders,
       ...getHeaders(),
     };
@@ -291,8 +292,8 @@ function createBookingApi(config = {}) {
         ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
         : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
     try {
-      const getOpts = { method: 'GET' };
-      if (propFullUrl.includes('ngrok')) getOpts.headers = { 'ngrok-skip-browser-warning': 'true' };
+      const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
+      if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
       const propRes = await fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
@@ -692,7 +693,7 @@ async function decryptPropertyId(options = {}) {
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
   const res = await fetch(url, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json', ...headers },
+    headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
   });
   if (!res.ok) throw new Error(res.statusText || 'Failed to decrypt property id');
@@ -719,7 +720,7 @@ async function fetchBookingEnginePref(options = {}) {
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
   const res = await fetch(url, {
     method: 'GET',
-    headers: { 'Content-Type': 'application/json', ...headers },
+    headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });
   if (!res.ok) throw new Error(res.statusText || 'Failed to fetch config');
 
@@ -872,6 +873,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) + '%)';
@@ -905,7 +907,7 @@ if (typeof window !== 'undefined') {
           const url = defaultApiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (options.mode === 'sandbox' ? '?sandbox=true' : '');
           return fetch(url, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine' },
             body: JSON.stringify(payload),
           }).then(function (r) {
             if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
@@ -1204,7 +1206,7 @@ if (typeof window !== 'undefined') {
       this.render();
 
       const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
-      this._configPromise = fetch(url)
+      this._configPromise = fetch(url, { headers: { 'Source': 'booking_engine' } })
         .then(function (res) {
           if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
           return res.json();
@@ -1262,17 +1264,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 +1503,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 +1522,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 +1578,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');
@@ -1972,7 +1992,7 @@ if (typeof window !== 'undefined') {
       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) + (this.options.mode === 'sandbox' ? '?sandbox=true' : '');
-      const res = await fetch(url, { method: 'POST' });
+      const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     }

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) + '%)';
@@ -121,7 +122,7 @@ class BookingWidget {
           const url = apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent' + (builtInMode === 'sandbox' ? '?sandbox=true' : '');
           return fetch(url, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine' },
             body: JSON.stringify(payload),
           }).then(function (r) {
             if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
@@ -482,7 +483,7 @@ class BookingWidget {
     this.render();
 
     const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
-    this._configPromise = fetch(url)
+    this._configPromise = fetch(url, { headers: { 'Source': 'booking_engine' } })
       .then(function (res) {
         if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
         return res.json();
@@ -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();
@@ -1389,7 +1407,7 @@ class BookingWidget {
     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)}${this.options.mode === 'sandbox' ? '?sandbox=true' : ''}`;
-    const res = await fetch(url, { method: 'POST' });
+    const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
     if (!res.ok) throw new Error(await res.text());
     return await res.json();
   }

package/dist/core/booking-api.js

@@ -229,6 +229,7 @@ function createBookingApi(config = {}) {
     const url = `${(base || '').replace(/\/$/, '')}${path}`;
     const headers = {
       'Content-Type': 'application/json',
+      'Source': 'booking_engine',
       ...staticHeaders,
       ...getHeaders(),
     };
@@ -290,8 +291,8 @@ function createBookingApi(config = {}) {
         ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
         : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
     try {
-      const getOpts = { method: 'GET' };
-      if (propFullUrl.includes('ngrok')) getOpts.headers = { 'ngrok-skip-browser-warning': 'true' };
+      const getOpts = { method: 'GET', headers: { 'Source': 'booking_engine' } };
+      if (propFullUrl.includes('ngrok')) getOpts.headers['ngrok-skip-browser-warning'] = 'true';
       const propRes = await fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
@@ -691,7 +692,7 @@ async function decryptPropertyId(options = {}) {
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
   const res = await fetch(url, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json', ...headers },
+    headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
   });
   if (!res.ok) throw new Error(res.statusText || 'Failed to decrypt property id');
@@ -718,7 +719,7 @@ async function fetchBookingEnginePref(options = {}) {
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
   const res = await fetch(url, {
     method: 'GET',
-    headers: { 'Content-Type': 'application/json', ...headers },
+    headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });
   if (!res.ok) throw new Error(res.statusText || 'Failed to fetch config');
 

package/dist/react/BookingWidget.jsx

@@ -57,7 +57,7 @@ const BookingWidget = ({
     if (!effectivePaymentIntentUrl) return null;
     return async (payload) => {
       const url = effectivePaymentIntentUrl + (isSandbox ? '?sandbox=true' : '');
-      const headers = { 'Content-Type': 'application/json' };
+      const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
       if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
       const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
       if (!res.ok) throw new Error(await res.text());
@@ -205,7 +205,7 @@ const BookingWidget = ({
       if (cancelled) return;
       try {
         const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}${isSandbox ? '?sandbox=true' : ''}`;
-        const res = await fetch(url, { method: 'POST' });
+        const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const status = data?.status != null ? String(data.status) : '';
@@ -399,8 +399,6 @@ const BookingWidget = ({
       setCalendarOpen(false);
     }
     if (pickState === 0) {
-      setCalendarMonth(new Date().getMonth());
-      setCalendarYear(new Date().getFullYear());
       setPickState(1);
     }
   };

package/dist/utils/config-service.js

@@ -89,7 +89,7 @@ export async function fetchRuntimeConfig(propertyKey, installerColors = null, mo
   }
 
   const url = `${CONFIG_BASE_URL}?apikey=${encodeURIComponent(key)}${isSandbox ? '&mode=sandbox' : ''}`;
-  const res = await fetch(url);
+  const res = await fetch(url, { headers: { 'Source': 'booking_engine' } });
   if (!res.ok) {
     throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
   }

package/dist/vue/BookingWidget.vue

@@ -604,7 +604,7 @@ export default {
       if (!url) return null;
       return async (payload) => {
         const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
-        const headers = { 'Content-Type': 'application/json' };
+        const headers = { 'Content-Type': 'application/json', 'Source': 'booking_engine' };
         if (requestUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
         const res = await fetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error(await res.text());
@@ -795,7 +795,7 @@ export default {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
       const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}${this.isSandbox ? '?sandbox=true' : ''}`;
-      const res = await fetch(url, { method: 'POST' });
+      const res = await fetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     },

package/package.json

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