@nuitee/booking-widget 1.0.2 → 1.0.4

package/dist/react/BookingWidget.jsx

@@ -4,6 +4,7 @@ import { Calendar, Users, User, Check, MapPin, Phone, Square, CreditCard, Lock,
 import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
+import { fetchRuntimeConfig } from '../utils/config-service.js';
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -98,6 +99,11 @@ const BookingWidget = ({
   const [checkoutShowPaymentForm, setCheckoutShowPaymentForm] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const [isReadyForOpen, setIsReadyForOpen] = useState(false);
+  const [configLoading, setConfigLoading] = useState(false);
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const [configError, setConfigError] = useState(null);
+  const [runtimeWidgetStyles, setRuntimeWidgetStyles] = useState({});
+  const [configRetryCount, setConfigRetryCount] = useState(0);
   const widgetRef = useRef(null);
   const stripeRef = useRef(null);
   const elementsRef = useRef(null);
@@ -220,26 +226,43 @@ const BookingWidget = ({
     };
   }, [state.step, confirmationToken, effectiveConfirmationBaseUrl, isSandbox]);
 
-  // Apply custom colors
+  // Fetch runtime config (colors) from /load-config on mount and when propertyKey/colors change.
+  // The config service caches API results so re-renders triggered by other prop changes are cheap.
   useEffect(() => {
-    if (widgetRef.current && colors) {
-      const style = widgetRef.current.style;
-      if (colors.background) {
-        style.setProperty('--bg', colors.background);
-        style.setProperty('--card', colors.background);
-      }
-      if (colors.text) {
-        style.setProperty('--fg', colors.text);
-        style.setProperty('--card-fg', colors.text);
-      }
-      if (colors.primary) {
-        style.setProperty('--primary', colors.primary);
-      }
-      if (colors.primaryText) {
-        style.setProperty('--primary-fg', colors.primaryText);
-      }
+    if (!propertyKey || !String(propertyKey).trim()) {
+      setConfigError('propertyKey is required to initialize the booking widget.');
+      setConfigLoading(false);
+      setConfigLoaded(false);
+      setRuntimeWidgetStyles({});
+      return;
     }
-  }, [colors, isOpen]);
+    let cancelled = false;
+    setConfigLoading(true);
+    setConfigError(null);
+    setConfigLoaded(false);
+    fetchRuntimeConfig(propertyKey, colors, mode)
+      .then(({ widgetStyles }) => {
+        if (cancelled) return;
+        setRuntimeWidgetStyles(widgetStyles);
+        setConfigLoaded(true);
+        setConfigLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setConfigError(err?.message || 'Failed to load widget configuration.');
+        setConfigLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [propertyKey, colors, mode, configRetryCount]);
+
+  // Apply resolved CSS custom properties to the widget element.
+  useEffect(() => {
+    if (!widgetRef.current) return;
+    const style = widgetRef.current.style;
+    Object.entries(runtimeWidgetStyles).forEach(([key, val]) => {
+      if (val != null && val !== '') style.setProperty(key, val);
+    });
+  }, [runtimeWidgetStyles, isOpen]);
 
   const getNights = () => {
     if (!state.checkIn || !state.checkOut) return 0;
@@ -278,6 +301,8 @@ const BookingWidget = ({
   const stepIndex = (key) => STEPS.findIndex(s => s.key === key);
 
   const goToStep = (step) => {
+    // Block room/rate navigation until runtime config (colors) has been loaded.
+    if ((step === 'rooms' || step === 'rates') && !configLoaded) return;
     setApiError(null);
     if (step !== 'summary' && step !== 'payment') setCheckoutShowPaymentForm(false);
     if (step === 'payment') setCheckoutShowPaymentForm(true);
@@ -1181,20 +1206,58 @@ const BookingWidget = ({
         onTransitionEnd={handleTransitionEnd}
       >
         <button className="booking-widget-close" onClick={requestClose}><X size={24} /></button>
-        {hasPropertyKey && renderStepIndicator()}
+        {configLoaded && hasPropertyKey && renderStepIndicator()}
         {(!propertyKey || (typeof propertyKey === 'string' && !propertyKey.trim())) ? (
-          <div className="booking-widget-property-key-message" role="alert" style={{ margin: '1.5em', padding: '1em', background: 'var(--destructive, #ef4444)', color: '#fff', borderRadius: '8px', fontSize: '0.9em' }}>
-            The propertyKey is missing. Please provide it as a prop to load rooms from the API.
+          <div className="booking-widget-config-error" role="alert">
+            <div className="booking-widget-config-error__icon-wrap">
+              <Lock size={22} strokeWidth={1.5} />
+            </div>
+            <span className="booking-widget-config-error__badge">
+              <Lock size={10} strokeWidth={2} /> Missing Configuration
+            </span>
+            <h3 className="booking-widget-config-error__title">Widget Not Configured</h3>
+            <p className="booking-widget-config-error__desc">
+              A <code>propertyKey</code> prop is required to initialize this booking widget. Please provide it to load rooms and availability.
+            </p>
+            <div className="booking-widget-config-error__divider" />
+            <p className="booking-widget-config-error__hint">
+              Contact the site administrator to configure this widget.
+            </p>
+          </div>
+        ) : configError ? (
+          <div className="booking-widget-config-error" role="alert">
+            <div className="booking-widget-config-error__icon-wrap">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+            </div>
+            <span className="booking-widget-config-error__badge">Configuration Error</span>
+            <h3 className="booking-widget-config-error__title">Could Not Load Config</h3>
+            <p className="booking-widget-config-error__desc">{configError}</p>
+            <div className="booking-widget-config-error__divider" />
+            <p className="booking-widget-config-error__hint">
+              Please try again or contact support.
+            </p>
+            <button
+              className="booking-widget-config-error__retry"
+              onClick={() => setConfigRetryCount(c => c + 1)}
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+              Try Again
+            </button>
+          </div>
+        ) : configLoading ? (
+          <div className="booking-widget-config-loading">
+            <div className="booking-widget-config-loading__spinner" />
+            <span className="booking-widget-config-loading__text">Loading configuration…</span>
           </div>
         ) : (
-        <div className="booking-widget-step-content">
-          {state.step === 'dates' && renderDatesStep()}
-          {state.step === 'rooms' && renderRoomsStep()}
-          {state.step === 'rates' && renderRatesStep()}
-          {state.step === 'summary' && renderSummaryStep()}
-          {state.step === 'payment' && renderPaymentStep()}
-          {state.step === 'confirmation' && renderConfirmationStep()}
-        </div>
+          <div className="booking-widget-step-content">
+            {state.step === 'dates' && renderDatesStep()}
+            {state.step === 'rooms' && renderRoomsStep()}
+            {state.step === 'rates' && renderRatesStep()}
+            {state.step === 'summary' && renderSummaryStep()}
+            {state.step === 'payment' && renderPaymentStep()}
+            {state.step === 'confirmation' && renderConfirmationStep()}
+          </div>
         )}
       </div>
     </>

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%);
@@ -106,6 +107,145 @@
   font-weight: 500;
 }
 
+/* ===== Config Error State ===== */
+.booking-widget-config-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-error__icon-wrap {
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
+  border: 1.5px solid rgba(239, 68, 68, 0.22);
+  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f87171;
+  flex-shrink: 0;
+  margin-bottom: 0.25em;
+}
+
+.booking-widget-config-error__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  border-radius: 99em;
+  padding: 0.3em 0.85em;
+}
+
+.booking-widget-config-error__title {
+  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
+  font-size: 1.35em;
+  font-weight: 600;
+  color: var(--fg, #e8e0d5);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.booking-widget-config-error__desc {
+  font-size: 0.875em;
+  color: var(--secondary-fg, #a09080);
+  max-width: 25em;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.booking-widget-config-error__desc code {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--primary, #f59e0b);
+  padding: 0.12em 0.45em;
+  border-radius: 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.booking-widget-config-error__divider {
+  width: 2.5em;
+  height: 1.5px;
+  background: var(--border, rgba(255,255,255,0.1));
+  border-radius: 1px;
+}
+
+.booking-widget-config-error__hint {
+  font-size: 0.78em;
+  color: var(--muted, #6b5f50);
+  max-width: 21em;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.booking-widget-config-error__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  padding: 0.55em 1.4em;
+  background: transparent;
+  color: var(--secondary-fg, #a09080);
+  border: 1.5px solid var(--border, rgba(255,255,255,0.13));
+  border-radius: 99em;
+  font-size: 0.8em;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  margin-top: 0.25em;
+}
+
+.booking-widget-config-error__retry:hover {
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* ===== Config Loading State ===== */
+.booking-widget-config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-loading__spinner {
+  width: 2.75em;
+  height: 2.75em;
+  border: 2px solid var(--border, rgba(255,255,255,0.1));
+  border-top-color: var(--primary, hsl(38,60%,55%));
+  border-radius: 50%;
+  animation: bw-spin 0.75s linear infinite;
+}
+
+@keyframes bw-spin {
+  to { transform: rotate(360deg); }
+}
+
+.booking-widget-config-loading__text {
+  font-size: 0.875em;
+  color: var(--muted, #888);
+  letter-spacing: 0.01em;
+}
+
 /* ===== Step Indicator ===== */
 .booking-widget-step-indicator {
   display: flex;
@@ -448,7 +588,7 @@
 }
 
 .booking-widget-modal .date-trigger:hover {
-  border-color: hsl(38, 60%, 55%, 0.5);
+  border-color: var(--primary);
 }
 
 .booking-widget-modal .date-trigger .placeholder {
@@ -472,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/config-service.js

@@ -0,0 +1,103 @@
+/**
+ * Runtime configuration service for the booking widget.
+ *
+ * Fetches styling config from /load-config keyed by propertyKey.
+ * Results are cached in memory so subsequent calls for the same key are instant.
+ * Throws (or rejects) when propertyKey is missing — callers must handle the
+ * "locked" state and display an error UI rather than attempting to fall back.
+ */
+
+import { DEFAULT_COLORS } from '../core/stripe-config.js';
+import { deriveWidgetStyles } from '../core/color-utils.js';
+
+const CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/load-config';
+
+/** In-memory cache: propertyKey → raw API color object */
+const _configCache = new Map();
+
+/**
+ * Map the /load-config response field names to the internal color keys used
+ * throughout the widget.
+ *
+ * API field          → internal key
+ * widgetBackground   → background
+ * widgetTextColor    → text
+ * primaryColor       → primary
+ * buttonTextColor    → primaryText
+ * widgetCardColor    → card
+ */
+function mapApiColors(data) {
+  const mapped = {};
+  if (data.widgetBackground) mapped.background  = data.widgetBackground;
+  if (data.widgetTextColor)  mapped.text        = data.widgetTextColor;
+  if (data.primaryColor)     mapped.primary     = data.primaryColor;
+  if (data.buttonTextColor)  mapped.primaryText = data.buttonTextColor;
+  if (data.widgetCardColor)  mapped.card        = data.widgetCardColor;
+  return mapped;
+}
+
+/**
+ * Merge colors following priority (highest → lowest):
+ *   1. installerColors (explicit values in the `colors` prop win over everything)
+ *   2. mappedApiColors (values fetched from /load-config override package defaults)
+ *   3. DEFAULT_COLORS  (built-in fallback)
+ *
+ * @param {object} mappedApiColors  - Colors mapped from the API response.
+ * @param {object|null} installerColors - Colors passed via the `colors` prop.
+ * @returns {object} Resolved color set with all five standard keys.
+ */
+export function mergeColors(mappedApiColors, installerColors) {
+  const base = { ...DEFAULT_COLORS, ...(mappedApiColors || {}) };
+  if (!installerColors || typeof installerColors !== 'object') return base;
+  return {
+    background:  installerColors.background  ?? base.background,
+    text:        installerColors.text        ?? base.text,
+    primary:     installerColors.primary     ?? base.primary,
+    primaryText: installerColors.primaryText ?? base.primaryText,
+    card:        installerColors.card ?? installerColors.background ?? base.card,
+  };
+}
+
+/**
+ * Fetch runtime styling configuration from the /load-config endpoint.
+ *
+ * - 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 + 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}      [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, 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(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)}${isSandbox ? '&mode=sandbox' : ''}`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
+  }
+
+  const data = await res.json();
+  const apiColors = mapApiColors(data);
+  _configCache.set(cacheKey, apiColors);
+
+  const colors = mergeColors(apiColors, installerColors);
+  return { apiColors, colors, widgetStyles: deriveWidgetStyles(colors) };
+}

package/dist/vue/BookingWidget.vue

@@ -10,7 +10,7 @@
       <button class="booking-widget-close" @click="requestClose">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
       </button>
-      <div v-if="hasPropertyKey && state.step !== 'confirmation'" class="booking-widget-step-indicator">
+      <div v-if="hasPropertyKey && configLoaded && state.step !== 'confirmation'" class="booking-widget-step-indicator">
         <template v-for="(step, i) in STEPS" :key="step.key">
           <div class="step-item">
             <span 
@@ -34,9 +34,45 @@
           </span>
         </template>
       </div>
-      <div v-if="!propertyKey || !String(propertyKey).trim()" class="booking-widget-property-key-message" role="alert" style="margin: 1.5em; padding: 1em; background: var(--destructive, #ef4444); color: #fff; border-radius: 8px; font-size: 0.9em;">
-        The propertyKey is missing. Please provide it as a prop to load rooms from the API.
+      <!-- Missing propertyKey error -->
+      <div v-if="!propertyKey || !String(propertyKey).trim()" class="booking-widget-config-error" role="alert">
+        <div class="booking-widget-config-error__icon-wrap">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+        </div>
+        <span class="booking-widget-config-error__badge">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+          Missing Configuration
+        </span>
+        <h3 class="booking-widget-config-error__title">Widget Not Configured</h3>
+        <p class="booking-widget-config-error__desc">
+          A <code>propertyKey</code> prop is required to initialize this booking widget. Please provide it to load rooms and availability.
+        </p>
+        <div class="booking-widget-config-error__divider"></div>
+        <p class="booking-widget-config-error__hint">Contact the site administrator to configure this widget.</p>
+      </div>
+
+      <!-- Config fetch error -->
+      <div v-else-if="configError" class="booking-widget-config-error" role="alert">
+        <div class="booking-widget-config-error__icon-wrap">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+        </div>
+        <span class="booking-widget-config-error__badge">Configuration Error</span>
+        <h3 class="booking-widget-config-error__title">Could Not Load Config</h3>
+        <p class="booking-widget-config-error__desc">{{ configError }}</p>
+        <div class="booking-widget-config-error__divider"></div>
+        <p class="booking-widget-config-error__hint">Please try again or contact support.</p>
+        <button class="booking-widget-config-error__retry" @click="_initRuntimeConfig()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+          Try Again
+        </button>
+      </div>
+
+      <!-- Config loading -->
+      <div v-else-if="configLoading" class="booking-widget-config-loading">
+        <div class="booking-widget-config-loading__spinner"></div>
+        <span class="booking-widget-config-loading__text">Loading configuration…</span>
       </div>
+
       <div v-else class="booking-widget-step-content">
         <!-- Dates Step -->
         <div v-if="state.step === 'dates'">
@@ -445,6 +481,8 @@ import { loadStripe } from '@stripe/stripe-js';
 import '../core/styles.css';
 import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
 import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
+import { fetchRuntimeConfig } from '../utils/config-service.js';
+
 
 const BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -497,6 +535,10 @@ export default {
       loadingRates: false,
       apiError: null,
       confirmationCode: null,
+      configLoading: false,
+      configLoaded: false,
+      configError: null,
+      runtimeWidgetStyles: {},
       calendarMonth: new Date().getMonth(),
       calendarYear: new Date().getFullYear(),
       pickState: 0,
@@ -595,23 +637,7 @@ export default {
       return null;
     },
     widgetStyles() {
-      if (!this.colors) return {};
-      const styles = {};
-      if (this.colors.background) {
-        styles['--bg'] = this.colors.background;
-        styles['--card'] = this.colors.background;
-      }
-      if (this.colors.text) {
-        styles['--fg'] = this.colors.text;
-        styles['--card-fg'] = this.colors.text;
-      }
-      if (this.colors.primary) {
-        styles['--primary'] = this.colors.primary;
-      }
-      if (this.colors.primaryText) {
-        styles['--primary-fg'] = this.colors.primaryText;
-      }
-      return styles;
+      return this.runtimeWidgetStyles;
     },
     nights() {
       if (!this.state.checkIn || !this.state.checkOut) return 0;
@@ -697,7 +723,20 @@ export default {
       return this.isOpen && !this.isClosing && this.isReadyForOpen;
     },
   },
+  created() {
+    this._initRuntimeConfig();
+  },
   watch: {
+    propertyKey() {
+      this._initRuntimeConfig();
+    },
+    mode() {
+      this._initRuntimeConfig();
+    },
+    colors: {
+      deep: true,
+      handler() { this._initRuntimeConfig(); },
+    },
     isOpen: {
       handler(open) {
         if (open && this.onOpen) this.onOpen();
@@ -731,6 +770,27 @@ export default {
     },
   },
   methods: {
+    async _initRuntimeConfig() {
+      if (!this.propertyKey || !String(this.propertyKey).trim()) {
+        this.configError = 'propertyKey is required to initialize the booking widget.';
+        this.configLoading = false;
+        this.configLoaded = false;
+        this.runtimeWidgetStyles = {};
+        return;
+      }
+      this.configLoading = true;
+      this.configError = null;
+      this.configLoaded = false;
+      try {
+        const { widgetStyles } = await fetchRuntimeConfig(this.propertyKey, this.colors, this.mode);
+        this.runtimeWidgetStyles = widgetStyles;
+        this.configLoaded = true;
+      } catch (err) {
+        this.configError = err?.message || 'Failed to load widget configuration.';
+      } finally {
+        this.configLoading = false;
+      }
+    },
     async fetchConfirmationDetails(token) {
       const t = String(token || '').trim();
       if (!t) throw new Error('Missing confirmation token');
@@ -802,6 +862,8 @@ export default {
       return i === ci ? 'active' : i < ci ? 'past' : 'future';
     },
     goToStep(step) {
+      // Block navigation to room/rate steps until runtime config is loaded.
+      if ((step === 'rooms' || step === 'rates') && !this.configLoaded) return;
       if (step !== 'summary' && step !== 'payment') this.checkoutShowPaymentForm = false;
       if (step === 'payment') this.checkoutShowPaymentForm = true;
       this.state.step = step;