@nuitee/booking-widget 1.0.10 → 1.0.11

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.10/dist/booking-widget.css">
-<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.10/dist/booking-widget-standalone.js"></script>
+<link rel="stylesheet" href="https://cdn.thehotelplanet.com/booking-widget/v1.0.11/dist/booking-widget.css">
+<script src="https://cdn.thehotelplanet.com/booking-widget/v1.0.11/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.10/dist/booking-widget.css',
+    cssUrl: 'https://cdn.thehotelplanet.com/booking-widget/v1.0.11/dist/booking-widget.css',
     propertyKey: 'your-property-key',
     onOpen: () => console.log('Opened'),
     onClose: () => console.log('Closed'),

package/dist/booking-widget-standalone.js

@@ -910,7 +910,7 @@ if (typeof window !== 'undefined') {
       }
       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 bg = c.background || '#222222', fg = c.text || '#ffffff', primary = c.primary || '#AA8453', 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];
@@ -1432,6 +1432,10 @@ if (typeof window !== 'undefined') {
     }
 
     render() {
+      if (!this.widget) return;
+      var installerBg = this._rawInstallerColors && this._rawInstallerColors.background != null && String(this._rawInstallerColors.background).trim() !== '';
+      if (this._configState !== 'loaded' && !installerBg) this.widget.style.setProperty('--bg', '#222222');
+      else this.widget.style.removeProperty('--bg');
       this.renderStepIndicator();
       this.renderPropertyKeyMessage();
       this.renderStepContent();

package/dist/booking-widget.js

@@ -79,7 +79,7 @@ function deriveWidgetStyles(c) {
     }
     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 bg = c.background || '#222222', fg = c.text || '#ffffff', primary = c.primary || '#AA8453', 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];
@@ -647,6 +647,9 @@ class BookingWidget {
     this._renderInProgress = true;
     window.__bookingWidgetRendering = true;
     try {
+      const installerBg = this._rawInstallerColors && this._rawInstallerColors.background != null && String(this._rawInstallerColors.background).trim() !== '';
+      if (this._configState !== 'loaded' && !installerBg) this.widget.style.setProperty('--bg', '#222222');
+      else this.widget.style.removeProperty('--bg');
       this.renderStepIndicator();
       this.renderPropertyKeyMessage();
       this.renderStepContent();

package/dist/core/color-utils.js

@@ -48,13 +48,13 @@ function hexToHsl(hex) {
 /**
  * Derive full widget CSS variables from 4 base colors.
  * @param {Object} c - { background, text, primary, primaryText, card? }
- * @returns {Object} CSS variable names to values, e.g. { '--bg': '#1a1a1a', ... }
+ * @returns {Object} CSS variable names to values, e.g. { '--bg': '#222222', ... }
  */
 export function deriveWidgetStyles(c) {
   if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
-  const bg = c.background || '#1a1a1a';
-  const fg = c.text || '#e0e0e0';
-  const primary = c.primary || '#3b82f6';
+  const bg = c.background || '#222222';
+  const fg = c.text || '#ffffff';
+  const primary = c.primary || '#AA8453';
   const primaryFg = c.primaryText || '#ffffff';
   const cardExplicit = c.card;
 

package/dist/react/BookingWidget.jsx

@@ -3,6 +3,7 @@ import { loadStripe } from '@stripe/stripe-js';
 import { Calendar, Users, User, Check, MapPin, Phone, Square, CreditCard, Lock, Star, X, ChevronLeft, ChevronRight } from 'lucide-react';
 import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
+import { deriveWidgetStyles } from '../core/color-utils.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
 import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
@@ -11,6 +12,13 @@ import { init as initAnalytics, capture as captureEvent, identify as identifyAna
 // library) wraps window.fetch for session recording. The wrapped version drops
 // non-standard request headers such as 'Source'.
 const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+const PRELOAD_DEFAULT_COLORS = {
+  background: '#222222',
+  text: '#ffffff',
+  primary: '#AA8453',
+  primaryText: '#ffffff',
+  card: '#222222',
+};
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -117,6 +125,17 @@ const BookingWidget = ({
   const [runtimeWidgetStyles, setRuntimeWidgetStyles] = useState({});
   const [runtimeS3BaseUrl, setRuntimeS3BaseUrl] = useState('');
   const [configRetryCount, setConfigRetryCount] = useState(0);
+  const preloadWidgetStyles = useMemo(() => {
+    const installerColors = colors && typeof colors === 'object' ? colors : {};
+    const preloadColors = {
+      background: installerColors.background ?? PRELOAD_DEFAULT_COLORS.background,
+      text: installerColors.text ?? PRELOAD_DEFAULT_COLORS.text,
+      primary: installerColors.primary ?? PRELOAD_DEFAULT_COLORS.primary,
+      primaryText: installerColors.primaryText ?? PRELOAD_DEFAULT_COLORS.primaryText,
+      card: installerColors.card ?? installerColors.background ?? PRELOAD_DEFAULT_COLORS.card,
+    };
+    return deriveWidgetStyles(preloadColors);
+  }, [colors]);
   const widgetRef = useRef(null);
   const stripeRef = useRef(null);
   const elementsRef = useRef(null);
@@ -315,10 +334,11 @@ const BookingWidget = ({
   useEffect(() => {
     if (!widgetRef.current) return;
     const style = widgetRef.current.style;
-    Object.entries(runtimeWidgetStyles).forEach(([key, val]) => {
+    const activeStyles = configLoaded ? runtimeWidgetStyles : preloadWidgetStyles;
+    Object.entries(activeStyles).forEach(([key, val]) => {
       if (val != null && val !== '') style.setProperty(key, val);
     });
-  }, [runtimeWidgetStyles, isOpen]);
+  }, [runtimeWidgetStyles, preloadWidgetStyles, configLoaded, isOpen]);
 
   const getNights = () => {
     if (!state.checkIn || !state.checkOut) return 0;

package/dist/vue/BookingWidget.vue

@@ -480,6 +480,7 @@
 import { loadStripe } from '@stripe/stripe-js';
 import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
+import { deriveWidgetStyles } from '../core/color-utils.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
 import { fetchRuntimeConfig } from '../utils/config-service.js';
 import { init as initAnalytics, capture as captureEvent, identify as identifyAnalytics } from '../utils/analytics.js';
@@ -488,6 +489,13 @@ import { init as initAnalytics, capture as captureEvent, identify as identifyAna
 // library) wraps window.fetch for session recording. The wrapped version drops
 // non-standard request headers such as 'Source'.
 const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+const PRELOAD_DEFAULT_COLORS = {
+  background: '#222222',
+  text: '#ffffff',
+  primary: '#AA8453',
+  primaryText: '#ffffff',
+  card: '#222222',
+};
 
 
 const BASE_STEPS = [
@@ -652,7 +660,16 @@ export default {
       return null;
     },
     widgetStyles() {
-      return this.runtimeWidgetStyles;
+      if (this.configLoaded) return this.runtimeWidgetStyles;
+      const installerColors = this.colors && typeof this.colors === 'object' ? this.colors : {};
+      const preloadColors = {
+        background: installerColors.background ?? PRELOAD_DEFAULT_COLORS.background,
+        text: installerColors.text ?? PRELOAD_DEFAULT_COLORS.text,
+        primary: installerColors.primary ?? PRELOAD_DEFAULT_COLORS.primary,
+        primaryText: installerColors.primaryText ?? PRELOAD_DEFAULT_COLORS.primaryText,
+        card: installerColors.card ?? installerColors.background ?? PRELOAD_DEFAULT_COLORS.card,
+      };
+      return deriveWidgetStyles(preloadColors);
     },
     nights() {
       if (!this.state.checkIn || !this.state.checkOut) return 0;

package/package.json

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