@nuitee/booking-widget 1.0.7 → 1.0.8

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

package/dist/booking-widget-standalone.js

@@ -20,6 +20,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -237,7 +242,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -294,7 +299,7 @@ function createBookingApi(config = {}) {
     try {
       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);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
         propertyRooms = propData?.rooms ?? {};
@@ -691,7 +696,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -718,7 +723,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });
@@ -872,8 +877,9 @@ if (typeof window !== 'undefined') {
     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];
-    styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-    styles['--card-solid'] = styles['--card'];
+    var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+    styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+    styles['--card-solid'] = _cardBase;
     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) + '%)';

package/dist/booking-widget.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/booking-widget.js

@@ -83,8 +83,9 @@ function deriveWidgetStyles(c) {
   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];
-  styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
-  styles['--card-solid'] = styles['--card'];
+  var _cardBase = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+  styles['--card'] = c.card ? _cardBase + '40' : _cardBase;
+  styles['--card-solid'] = _cardBase;
   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) + '%)';

package/dist/core/booking-api.js

@@ -19,6 +19,11 @@ const DEFAULT_ROOMS = [];
 
 const DEFAULT_RATES = [];
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// library) has a chance to wrap window.fetch for session recording. PostHog's wrapped
+// fetch drops non-standard request headers such as 'Source', breaking API auth.
+const _fetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 /**
  * Returns date as YYYY-MM-DD using local date (no timezone shift).
  * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
@@ -236,7 +241,7 @@ function createBookingApi(config = {}) {
     if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
     const options = { method, headers };
     if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
-    const res = await fetch(url, options);
+    const res = await _fetch(url, options);
     if (!res.ok) {
       let body;
       try { body = await res.json(); } catch (_) {}
@@ -293,7 +298,7 @@ function createBookingApi(config = {}) {
     try {
       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);
+      const propRes = await _fetch(propFullUrl, getOpts);
       if (propRes.ok) {
         const propData = await propRes.json();
         propertyRooms = propData?.rooms ?? {};
@@ -690,7 +695,7 @@ async function decryptPropertyId(options = {}) {
   if (!propertyKey) return null;
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
     body: JSON.stringify({ hash: propertyKey }),
@@ -717,7 +722,7 @@ async function fetchBookingEnginePref(options = {}) {
   }
   const base = (baseUrl || '').replace(/\/$/, '');
   const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
-  const res = await fetch(url, {
+  const res = await _fetch(url, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Source': 'booking_engine', ...headers },
   });

package/dist/core/color-utils.js

@@ -73,7 +73,7 @@ export function deriveWidgetStyles(c) {
   if (primaryRgb) styles['--primary-rgb'] = `${primaryRgb[0]}, ${primaryRgb[1]}, ${primaryRgb[2]}`;
 
   if (cardExplicit) {
-    styles['--card'] = cardExplicit + "40";
+    styles['--card'] = cardExplicit + '40';
     styles['--card-solid'] = cardExplicit;
   } else if (bgHsl) {
     const cardVal = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 2)}%)`;

package/dist/core/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/react/BookingWidget.jsx

@@ -7,6 +7,11 @@ 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';
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// 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 BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
   { key: 'rooms', label: 'Room', num: '02' },
@@ -64,7 +69,7 @@ const BookingWidget = ({
       const url = effectivePaymentIntentUrl + (isSandbox ? '?sandbox=true' : '');
       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) });
+      const res = await _nativeFetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
       if (!res.ok) throw new Error(await res.text());
       const data = await res.json();
       const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -227,7 +232,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', headers: { 'Source': 'booking_engine' } });
+        const res = await _nativeFetch(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) : '';

package/dist/react/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;

package/dist/utils/analytics.js

@@ -0,0 +1,88 @@
+/**
+ * PostHog analytics for the booking widget.
+ * The key is sourced from /load-config at runtime; VITE_POSTHOG_KEY/.env or prop overrides are
+ * also supported but the config-fetched key is preferred so no hardcoded key is needed.
+ * Used by React and Vue; core/standalone use window.posthog when host provides it.
+ */
+import posthog from 'posthog-js';
+
+let initialized = false;
+
+function getConfig(overrides = {}) {
+  if (overrides.key != null || overrides.host != null) {
+    return {
+      key: (overrides.key && String(overrides.key).trim()) || '',
+      host: overrides.host || 'https://us.i.posthog.com',
+    };
+  }
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    const key = import.meta.env.VITE_POSTHOG_KEY || import.meta.env.POSTHOG_KEY || '';
+    const host = import.meta.env.VITE_POSTHOG_HOST || import.meta.env.POSTHOG_HOST || 'https://us.i.posthog.com';
+    return { key: (key && String(key).trim()) || '', host };
+  }
+  if (typeof window !== 'undefined') {
+    const key = (window.__BOOKING_WIDGET_POSTHOG_KEY__ || '').trim();
+    const host = window.__BOOKING_WIDGET_POSTHOG_HOST__ || 'https://us.i.posthog.com';
+    return { key, host };
+  }
+  return { key: '', host: 'https://us.i.posthog.com' };
+}
+
+/**
+ * Initialize PostHog when key is available. Call once at app/widget load.
+ * @param {object} [overrides] - Optional { key, host } to override env.
+ */
+export function init(overrides = {}) {
+  if (initialized) return posthog;
+  const { key, host } = getConfig(overrides);
+  if (!key) return null;
+  try {
+    // Snapshot the native fetch/XHR before posthog.init() wraps them for session recording.
+    // PostHog's wrapped fetch drops non-standard headers (e.g. 'Source'), so we restore the
+    // originals immediately after init so all subsequent widget API calls are unaffected.
+    const _savedFetch = typeof window !== 'undefined' ? window.fetch : undefined;
+    const _savedXHROpen = typeof window !== 'undefined' && window.XMLHttpRequest
+      ? window.XMLHttpRequest.prototype.open
+      : undefined;
+
+    posthog.init(key, { api_host: host });
+
+    if (_savedFetch && typeof window !== 'undefined') window.fetch = _savedFetch;
+    if (_savedXHROpen && typeof window !== 'undefined') window.XMLHttpRequest.prototype.open = _savedXHROpen;
+
+    initialized = true;
+    return posthog;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Identify the current context (e.g. property/tenant) so events are associated with it.
+ * Call with propertyKey when the widget has a known property.
+ * @param {string} id - Distinct ID (e.g. propertyKey).
+ */
+export function identify(id) {
+  try {
+    if (initialized && id != null && String(id).trim() && typeof posthog.identify === 'function') {
+      posthog.identify(String(id).trim());
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
+/**
+ * Capture an event. No-op if PostHog is not initialized.
+ * @param {string} eventName - Event name (e.g. 'widgetLoaded', 'search').
+ * @param {object} [properties] - Optional event properties.
+ */
+export function capture(eventName, properties = {}) {
+  try {
+    if (initialized && typeof posthog.capture === 'function') {
+      posthog.capture(eventName, properties);
+    }
+  } catch (e) {
+    // ignore
+  }
+}

package/dist/utils/config-service.js

@@ -10,6 +10,10 @@
 import { DEFAULT_COLORS } from '../core/stripe-config.js';
 import { deriveWidgetStyles } from '../core/color-utils.js';
 
+// Capture native fetch before PostHog can wrap it (PostHog session recording
+// wraps window.fetch and may strip non-standard headers such as 'Source').
+const _nativeFetch = typeof fetch === 'function' ? fetch : /* istanbul ignore next */ undefined;
+
 const CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/load-config';
 
 /** In-memory cache: propertyKey → { apiColors, posthogKey } */
@@ -89,7 +93,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, { headers: { 'Source': 'booking_engine' } });
+  const res = await _nativeFetch(url, { headers: { 'Source': 'booking_engine' } });
   if (!res.ok) {
     throw new Error(`Failed to load widget configuration (HTTP ${res.status}).`);
   }

package/dist/vue/BookingWidget.vue

@@ -484,6 +484,11 @@ 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';
 
+// Capture the native browser fetch at module-load time — before PostHog (or any other
+// 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 BASE_STEPS = [
   { key: 'dates', label: 'Dates & Guests', num: '01' },
@@ -611,7 +616,7 @@ export default {
         const requestUrl = url + (this.isSandbox ? '?sandbox=true' : '');
         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) });
+        const res = await _nativeFetch(requestUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error(await res.text());
         const data = await res.json();
         const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
@@ -821,7 +826,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', headers: { 'Source': 'booking_engine' } });
+      const res = await _nativeFetch(url, { method: 'POST', headers: { 'Source': 'booking_engine' } });
       if (!res.ok) throw new Error(await res.text());
       return await res.json();
     },

package/dist/vue/styles.css

@@ -612,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card-solid);
+  background: var(--bg);
   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.7",
+  "version": "1.0.8",
   "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",
@@ -34,7 +34,7 @@
     "build": "node scripts/generate-stripe-config.js && npm run build:css && npm run build:js && npm run build:react && npm run build:vue && npm run build:types",
     "build:stripe-config": "node scripts/generate-stripe-config.js",
     "build:css": "mkdir -p dist dist/core && cp src/core/styles.css dist/booking-widget.css && cp src/core/styles.css dist/core/styles.css",
-    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
+    "build:js": "mkdir -p dist dist/core dist/utils && cp src/core/widget.js dist/booking-widget.js && cp src/core/booking-api.js dist/core/booking-api.js && cp src/core/stripe-config.js dist/core/stripe-config.js && cp src/core/color-utils.js dist/core/color-utils.js && cp src/utils/config-service.js dist/utils/config-service.js && cp src/utils/analytics.js dist/utils/analytics.js && node scripts/inject-widget-bootstrap.js && cp src/standalone/bundle.js dist/booking-widget-standalone.js && node scripts/build-standalone.js && npm run build:entry",
     "build:react": "mkdir -p dist/react && cp src/react/BookingWidget.jsx dist/react/BookingWidget.jsx && cp src/core/styles.css dist/react/styles.css",
     "build:vue": "mkdir -p dist/vue && cp src/vue/BookingWidget.vue dist/vue/BookingWidget.vue && cp src/core/styles.css dist/vue/styles.css",
     "build:types": "npm run build:types:main && npm run build:types:react && npm run build:types:vue",