@nuitee/booking-widget 1.0.0

package/dist/core/booking-api.js

@@ -0,0 +1,755 @@
+/**
+ * Shared Booking API layer for the @nuitee/booking-widget.
+ * Used by Vanilla JS, Vue, and React variants so integration lives in one place.
+ *
+ * API contract (adapt your backend to this shape or use transform in the methods below):
+ *
+ * GET /rooms?checkIn=ISO&checkOut=ISO&adults=N&children=N&rooms=N
+ * Response: Array<{ id, name, description, image, size, maxGuests, amenities[], basePrice }>
+ *
+ * GET /rates?roomId=ID&checkIn=ISO&checkOut=ISO&adults=N&children=N&rooms=N
+ * Response: Array<{ id, name, description, priceModifier, benefits[], recommended? }>
+ *
+ * POST /bookings
+ * Body: { checkIn, checkOut, adults, children, rooms, roomId, rateId, guest: { firstName, lastName, email, phone, specialRequests } }
+ * Response: { confirmationCode [, ...] }
+ */
+
+const DEFAULT_ROOMS = [];
+
+const DEFAULT_RATES = [];
+
+/**
+ * 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.
+ */
+function toISO(date) {
+  if (!date) return '';
+  const d = date instanceof Date ? date : new Date(date);
+  if (Number.isNaN(d.getTime())) return '';
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+/** Maps currency code (e.g. 'EUR') to symbol (e.g. '€'). Falls back to code if unknown. */
+const CURRENCY_SYMBOLS = {
+  USD: '$', EUR: '€', GBP: '£', JPY: '¥', CHF: 'Fr', CAD: 'C$', AUD: 'A$',
+  MAD: 'MAD', IDR: 'Rp', INR: '₹', THB: '฿', MXN: 'MX$', BRL: 'R$',
+  CNY: '¥', KRW: '₩', PLN: 'zł', SEK: 'kr', NOK: 'kr', DKK: 'kr', CZK: 'Kč',
+  HUF: 'Ft', RON: 'lei', BGN: 'лв', TRY: '₺', ZAR: 'R', AED: 'د.إ', SAR: '﷼',
+};
+function getCurrencySymbol(code) {
+  if (!code || typeof code !== 'string') return '$';
+  const c = code.trim().toUpperCase();
+  return CURRENCY_SYMBOLS[c] ?? c + ' ';
+}
+
+/** Format price with currency symbol and space (e.g. formatPrice(1234, 'EUR') → '€ 1,234') */
+function formatPrice(amount, currencyCode = 'USD') {
+  const symbol = getCurrencySymbol(currencyCode).replace(/\s+$/, '');
+  const n = Number(amount);
+  if (Number.isNaN(n)) return symbol + ' 0';
+  return symbol + ' ' + Math.round(n).toLocaleString();
+}
+
+/** Extract user-facing error message from API response body (error, message, etc.) */
+function getErrorMessage(body, fallback) {
+  if (body && typeof body === 'object') {
+    const msg = body.error ?? body.message ?? body.err ?? body.detail;
+    if (typeof msg === 'string') return msg;
+    if (typeof msg === 'object' && msg?.message) return msg.message;
+  }
+  return fallback || 'Request failed';
+}
+
+/**
+ * Parses date from availability API (e.g. "2023-05-20 23:59:59"). Normalizes to ISO for reliable parsing.
+ */
+function parsePolicyUntil(val) {
+  if (val == null) return null;
+  if (val instanceof Date) return Number.isNaN(val.getTime()) ? null : val;
+  const str = String(val).trim();
+  if (!str) return null;
+  const iso = str.replace(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2}(?::\d{2})?)/, '$1T$2');
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/**
+ * Derives "Free cancellation" vs "Non-refundable" from the availability rate only.
+ * Uses only the policy array from the availability response: policy[] with { until: "YYYY-MM-DD HH:mm:ss", penalty }.
+ * If policy.length > 0 and the first until date is in the future → "Free cancellation", else "Non-refundable".
+ */
+function deriveRatePolicyLabel(avRate) {
+  const policy = avRate.policy;
+  if (!Array.isArray(policy) || policy.length === 0) return 'Non-refundable';
+
+  const first = policy[0];
+  const until = first?.until;
+  if (until == null) return 'Non-refundable';
+
+  const untilDate = parsePolicyUntil(until);
+  if (untilDate == null) return 'Non-refundable';
+
+  return untilDate > new Date() ? 'Free cancellation' : 'Non-refundable';
+}
+
+/**
+ * Build a stable key for "board" (meal plan) from rate benefits for grouping.
+ * @param {Array<string>} [benefits]
+ * @returns {string}
+ */
+function getBoardKey(benefits) {
+  if (!Array.isArray(benefits) || benefits.length === 0) return '';
+  return benefits
+    .map((b) => (typeof b === 'string' ? b : String(b)).trim())
+    .filter(Boolean)
+    .sort()
+    .join('|');
+}
+
+/**
+ * From a list of rates (widget shape with policy, benefits, priceModifier), keep only the cheapest
+ * rate per (cancellation policy, board). So e.g. 4 rates → 2 free cancellation + room only, 2 non-refundable + breakfast
+ * becomes 2 rates: cheapest in each group.
+ * @param {Array<{ policy?: string, benefits?: string[], priceModifier?: number }>} rates
+ * @returns {Array} Filtered rates (same objects, no copy)
+ */
+function filterCheapestRatePerPolicyAndBoard(rates) {
+  if (!Array.isArray(rates) || rates.length === 0) return rates;
+  const byKey = new Map();
+  for (const r of rates) {
+    const policy = r.policy ?? 'Non-refundable';
+    const boardKey = getBoardKey(r.benefits);
+    const key = `${String(policy)}::${boardKey}`;
+    const existing = byKey.get(key);
+    const price = r.priceModifier ?? 1;
+    if (!existing || (existing.priceModifier ?? 1) > price) {
+      byKey.set(key, r);
+    }
+  }
+  return Array.from(byKey.values());
+}
+
+/**
+ * Normalize rate fees from availability API into a uniform shape for the widget.
+ * API shape: [{ name, value, included? }, ...]. included: true = fee already in rate (show only); false = add to total.
+ * @param {Object} avRate - Raw rate from availability response
+ * @returns {Array<{ name: string, amount: number, included?: boolean }>}
+ */
+function normalizeRateFees(avRate) {
+  const list = avRate?.fees ?? (avRate?.fee != null ? [avRate.fee] : []);
+  if (!Array.isArray(list) || list.length === 0) return [];
+  return list
+    .map((f) => {
+      const name = f?.name ?? f?.label ?? f?.type ?? f?.description ?? 'Fee';
+      const amount = Number(f?.value ?? f?.amount ?? f?.price ?? 0) || 0;
+      if (amount <= 0) return null;
+      const included = Boolean(f?.included);
+      return { name: String(name), amount, included };
+    })
+    .filter(Boolean);
+}
+
+/** Format policy "until" (e.g. "2023-05-20 23:59:59") for display in tooltip. */
+function formatPolicyUntilForDisplay(untilStr) {
+  const d = parsePolicyUntil(untilStr);
+  if (!d) return '';
+  const datePart = d.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' });
+  const timePart = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
+  return `${datePart}, ${timePart}`;
+}
+
+/**
+ * Builds human-readable policy detail for tooltip from availability rate policy array.
+ */
+const NON_REFUNDABLE_POLICY_DETAIL = 'In case of cancellation, no-show or modification, the total amount of the booking is not refunded.';
+
+function deriveRatePolicyDetail(avRate) {
+  const policy = avRate.policy;
+  if (!Array.isArray(policy) || policy.length === 0) {
+    return NON_REFUNDABLE_POLICY_DETAIL;
+  }
+  const first = policy[0];
+  const until = first?.until;
+  const penalty = first?.penalty;
+  const untilDate = until ? parsePolicyUntil(until) : null;
+  const isFree = untilDate != null && untilDate > new Date();
+  const formattedUntil = formatPolicyUntilForDisplay(until);
+  if (isFree && formattedUntil) {
+    const penaltyNote = penalty != null && penalty > 0
+      ? ` After that, a penalty of ${penalty} may apply.`
+      : ' After that, a penalty may apply.';
+    return `Free cancellation until ${formattedUntil}.${penaltyNote}`;
+  }
+  return NON_REFUNDABLE_POLICY_DETAIL;
+}
+
+/**
+ * Creates a booking API client. Use this in all three widgets (Vanilla, Vue, React).
+ *
+ * @param {Object} config
+ * @param {string} [config.baseUrl] - Base URL for the API (e.g. 'https://api.example.com'). If omitted, fetch methods return static fallback data.
+ * @param {string} [config.availabilityBaseUrl] - Base URL for availability API (e.g. 'https://extranet.thehotelplanet.com'). Defaults to baseUrl.
+ * @param {string} [config.propertyBaseUrl] - Base URL for property/rooms API (e.g. 'https://thehotelplanet.com'). Use '' in dev for same-origin proxy.
+ * @param {string} [config.s3BaseUrl] - Base URL for room images (e.g. from VITE_AWS_S3_PATH).
+ * @param {string|number} [config.propertyId] - Property ID (legacy). Prefer propertyKey for proxy endpoints.
+ * @param {string} [config.propertyKey] - Property key for proxy endpoints (e.g. VITE_PROPERTY_KEY). Used in /proxy/availability and /proxy/ari-properties?key=.
+ * @param {string} [config.currency] - Currency code (e.g. 'MAD'). Default 'MAD'.
+ * @param {Object} [config.headers] - Optional. Static headers for each request (e.g. { 'X-API-Key': '...' }).
+ * @param {function(): Object} [config.getHeaders] - Optional. Return headers for each request (merged after headers). Use for dynamic headers.
+ * @returns {{ fetchRooms: function, fetchRates: function, createBooking: function, hasApi: boolean }}
+ */
+function createBookingApi(config = {}) {
+  const baseUrl = (config.baseUrl || '').replace(/\/$/, '');
+  // Empty string means "same-origin" (relative path) for proxy in dev; undefined/null fall back to baseUrl
+  const availabilityBaseUrl = config.availabilityBaseUrl === '' ? '' : ((config.availabilityBaseUrl || baseUrl) || '').replace(/\/$/, '');
+  const propertyBaseUrl = (config.propertyBaseUrl ?? '').replace(/\/$/, '');
+  const s3BaseUrl = (config.s3BaseUrl ?? '').replace(/\/$/, '');
+  const propertyId = config.propertyId != null ? String(config.propertyId) : null;
+  const rawKey = config.propertyKey != null && config.propertyKey !== '' ? String(config.propertyKey).trim() : null;
+  // Proxy endpoints expect key to start with "book_engine_" (installer's VITE_PROPERTY_KEY). Ignore other values.
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : null;
+  if (rawKey && !propertyKey && typeof console !== 'undefined' && console.warn) {
+    console.warn('[booking-api] Property key must start with "book_engine_". Ignoring invalid value. Set VITE_PROPERTY_KEY in your .env (see .env.example).');
+  }
+  const currency = config.currency || 'MAD';
+  const staticHeaders = config.headers || {};
+  const getHeaders = config.getHeaders || (() => ({}));
+
+  // baseUrl can be empty string for same-origin; treat propertyKey flow as "API enabled"
+  const hasApi = Boolean(baseUrl) || Boolean(propertyKey);
+  const hasAvailabilityApi = Boolean(propertyKey || propertyId);
+
+  async function request(method, path, body, base = baseUrl) {
+    const url = `${(base || '').replace(/\/$/, '')}${path}`;
+    const headers = {
+      'Content-Type': 'application/json',
+      ...staticHeaders,
+      ...getHeaders(),
+    };
+    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);
+    if (!res.ok) {
+      let body;
+      try { body = await res.json(); } catch (_) {}
+      const err = new Error(getErrorMessage(body, res.statusText || 'Request failed'));
+      err.status = res.status;
+      err.response = res;
+      err.body = body;
+      throw err;
+    }
+    const contentType = res.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) return res.json();
+    return res.text();
+  }
+
+  /**
+   * Fetches available rooms: calls availability API, applies occupancy filter, merges with property/rooms from get_properties.
+   * @param {{ checkIn: Date|string, checkOut: Date|string, adults: number, children: number, rooms: number }} params
+   * @returns {Promise<Array>} Room list in widget shape { id, name, description, image, size, maxGuests, amenities, basePrice }
+   */
+  async function fetchRooms(params) {
+    if (!hasAvailabilityApi) return Promise.resolve([]);
+    const rooms = params.rooms ?? 1;
+    let occupancies;
+    if (Array.isArray(params.occupancies) && params.occupancies.length >= rooms) {
+      occupancies = params.occupancies.slice(0, rooms).map((occ, i) => ({
+        adults: Math.max(1, Math.min(8, Number(occ.adults) || 1)),
+        children: Array.isArray(occ.children) ? occ.children.slice(0, 6).map(a => Math.max(0, Math.min(17, Number(a) || 0))) : [],
+        occupancy_index: i + 1,
+      }));
+    } else {
+      const adults = params.adults ?? 2;
+      const children = params.children ?? 0;
+      const childrenAges = Array.isArray(params.childrenAges) ? params.childrenAges.slice(0, children) : [];
+      while (childrenAges.length < children) childrenAges.push(0);
+      occupancies = Array.from({ length: rooms }, (_, i) => ({
+        adults: i === 0 ? adults : 1,
+        children: i === 0 ? childrenAges : [],
+        occupancy_index: i + 1,
+      }));
+    }
+    const occupancyLength = occupancies.length;
+
+    // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
+    let propertyRooms = {};
+    let propertyCurrency = currency;
+    const propFullUrl = propertyKey
+      ? `${availabilityBaseUrl}/proxy/ari-properties?key=${encodeURIComponent(propertyKey)}`
+      : propertyBaseUrl
+        ? `${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 propRes = await fetch(propFullUrl, getOpts);
+      if (propRes.ok) {
+        const propData = await propRes.json();
+        propertyRooms = propData?.rooms ?? {};
+        propertyCurrency = (typeof propData?.currency_code === 'string' && propData.currency_code.trim())
+          ? propData.currency_code.trim()
+          : currency;
+      }
+    } catch (_) {}
+
+    const body = {
+      ...(propertyKey ? {} : { property_ids: [Number(propertyId)] }),
+      checkin: toISO(params.checkIn),
+      checkout: toISO(params.checkOut),
+      occupancies,
+      nationality: '',
+      currency: propertyCurrency,
+    };
+
+    const availabilityPath = propertyKey
+      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}`
+      : `/api/calendar/booking_engine/${propertyId}/availability`;
+    const data = await request('POST', availabilityPath, body, availabilityBaseUrl);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Failed to load rooms'));
+    }
+
+    // Extract rates: properties[0].rates or rates or data
+    const rawRates = data?.properties?.[0]?.rates ?? data?.rates ?? data?.data ?? [];
+    const ratesArray = Array.isArray(rawRates) ? rawRates : Object.values(rawRates || {});
+
+    if (ratesArray.length === 0) {
+      return [];
+    }
+
+    // Occupancy filter: keep only room_id+rate_id combos that appear for ALL occupancies
+    const duplicateCountMap = new Map();
+    for (const r of ratesArray) {
+      const key = `${r.room_id}-${r.rate_id}`;
+      duplicateCountMap.set(key, (duplicateCountMap.get(key) || 0) + 1);
+    }
+    const uniqueRates = ratesArray.filter((r) => {
+      const key = `${r.room_id}-${r.rate_id}`;
+      return duplicateCountMap.get(key) === occupancyLength;
+    });
+    const seenKeys = new Set();
+    const filteredRates = uniqueRates.filter((r) => {
+      const key = `${r.room_id}-${r.rate_id}`;
+      if (seenKeys.has(key)) return false;
+      seenKeys.add(key);
+      return true;
+    });
+
+    const availableRoomIds = [...new Set(filteredRates.map((r) => String(r.room_id)))];
+    if (availableRoomIds.length === 0) return [];
+
+    // Map to widget room format (propertyRooms already fetched above)
+    const getPrice = (r) => {
+      const a = r?.amount ?? r;
+      return (a?.price ?? a?.total ?? r?.price ?? 0) || 0;
+    };
+    const fallbackImage = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';
+
+    return availableRoomIds.map((roomId) => {
+      const roomData = propertyRooms[roomId] ?? propertyRooms[String(roomId)] ?? {};
+      const roomRates = filteredRates.filter((r) => String(r.room_id) === String(roomId));
+      const minPrice = roomRates.length
+        ? Math.min(...roomRates.map(getPrice).filter((p) => p > 0)) || roomData.base_price || 0
+        : roomData.base_price || 0;
+
+      const photos = roomData.photos ?? [];
+      const mainPhoto = photos.find((p) => p.main) ?? photos[0];
+      const photoPath = mainPhoto?.path ?? '';
+      const image = s3BaseUrl && photoPath ? `${s3BaseUrl}/${photoPath.replace(/^\//, '')}` : fallbackImage;
+
+      const sizeVal = roomData.size?.value ?? roomData.size_value;
+      let sizeUnit = roomData.size?.unit ?? roomData.size_unit ?? 'm²';
+      if (typeof sizeUnit === 'string' && /^square_?meter(s)?$/i.test(sizeUnit.trim())) sizeUnit = 'm²';
+      const size = sizeVal != null ? `${sizeVal} ${sizeUnit}` : '';
+
+      const roomBasePrice = minPrice || 1;
+      const propertyRates = roomData.rates ?? {};
+      const rates = roomRates.map((avRate, idx) => {
+        const ratePrice = getPrice(avRate) || 0;
+        const plan = propertyRates[avRate.rate_id] ?? propertyRates[String(avRate.rate_id)] ?? {};
+        const planName = plan.name ?? avRate.name ?? `Rate ${avRate.rate_id}`;
+        const board = avRate.board ?? avRate.meal_plan;
+        const benefits = Array.isArray(board) ? board : (board ? [String(board)] : []);
+        const policyLabel = deriveRatePolicyLabel(avRate);
+        const policyDetail = deriveRatePolicyDetail(avRate);
+        const fees = normalizeRateFees(avRate);
+        const vat = avRate?.vat != null
+          ? { value: Number(avRate.vat.value) || 0, included: Boolean(avRate.vat.included) }
+          : { value: 0, included: false };
+        const rateCode = avRate.rate_code ?? avRate.rate_name ?? plan.rate_code ?? plan.rate_name ?? planName;
+        const rateIdentifier = avRate.rate_identifier ?? avRate.rate_id ?? avRate.id ?? rateCode;
+        return {
+          id: avRate.rate_id ?? avRate.id ?? avRate,
+          name: planName,
+          description: plan.min_stay_length ? `Min. ${plan.min_stay_length} night(s)` : '',
+          priceModifier: ratePrice > 0 ? ratePrice / roomBasePrice : 1,
+          benefits,
+          policy: policyLabel,
+          policyDetail,
+          fees,
+          vat,
+          recommended: idx === 0,
+          rate_code: rateCode,
+          rate_identifier: rateIdentifier,
+        };
+      });
+
+      const ratesFiltered = filterCheapestRatePerPolicyAndBoard(rates);
+
+      return {
+        id: roomData.id ?? roomId,
+        name: roomData.name ?? `Room ${roomId}`,
+        description: roomData.description ?? '',
+        image,
+        size,
+        maxGuests: roomData.max_guests ?? roomData.max_occupancy ?? 2,
+        amenities: (() => {
+          const a = roomData.amenities;
+          if (!a) return [];
+          if (Array.isArray(a)) return a.map((x) => (typeof x === 'object' && x?.name ? x.name : String(x)));
+          return [String(a)];
+        })(),
+        basePrice: minPrice || 0,
+        currency: propertyCurrency,
+        rates: ratesFiltered,
+      };
+    });
+  }
+
+  /**
+   * @param {string} roomId
+   * @param {{ checkIn: Date|string, checkOut: Date|string, adults: number, children: number, rooms: number }} params
+   * @returns {Promise<Array>} Rate list in widget shape
+   */
+  async function fetchRates(roomId, params) {
+    if (!hasApi) return Promise.resolve([]);
+    let adults = params.adults;
+    let children = params.children;
+    if (Array.isArray(params.occupancies) && params.occupancies.length > 0) {
+      adults = params.occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+      children = params.occupancies.reduce((s, o) => s + (o.children || 0), 0);
+    }
+    const q = new URLSearchParams({
+      roomId,
+      checkIn: toISO(params.checkIn),
+      checkOut: toISO(params.checkOut),
+      adults: String(adults ?? 2),
+      children: String(children ?? 0),
+      rooms: String(params.rooms ?? 1),
+    }).toString();
+    const data = await request('GET', `/rates?${q}`);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Failed to load rates'));
+    }
+    return Array.isArray(data) ? data : (data.rates || data.data || []);
+  }
+
+  /**
+   * @param {Object} payload - Full booking state: checkIn, checkOut, adults, children, rooms, selectedRoom (or roomId), selectedRate (or rateId), guest
+   * @returns {Promise<{ confirmationCode: string }>}
+   */
+  async function createBooking(payload) {
+    let adults = payload.adults;
+    let children = payload.children;
+    if (Array.isArray(payload.occupancies) && payload.occupancies.length > 0) {
+      adults = payload.occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+      children = payload.occupancies.reduce((s, o) => s + (o.children || 0), 0);
+    }
+    const body = {
+      checkIn: toISO(payload.checkIn),
+      checkOut: toISO(payload.checkOut),
+      adults: adults ?? 2,
+      children: children ?? 0,
+      rooms: payload.rooms ?? 1,
+      roomId: payload.selectedRoom?.id ?? payload.roomId,
+      rateId: payload.selectedRate?.id ?? payload.rateId,
+      guest: payload.guest || {},
+    };
+    if (!hasApi) {
+      return Promise.resolve({
+        confirmationCode: 'LX' + Date.now().toString(36).toUpperCase().slice(-6),
+      });
+    }
+    const data = await request('POST', '/bookings', body);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Booking failed'));
+    }
+    return {
+      confirmationCode: data.confirmationCode || data.confirmation_code || data.id || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)),
+      ...data,
+    };
+  }
+
+  return {
+    fetchRooms,
+    fetchRates,
+    createBooking,
+    hasApi,
+  };
+}
+
+/**
+ * Compute total price (same logic as widget getTotalPrice).
+ * API basePrice is total for the full stay per room; total = basePrice * priceModifier * rooms.
+ * @param {{ selectedRoom: { basePrice: number, currency?: string }, selectedRate: { priceModifier: number, fees?: Array<{ included?: boolean, perNight?: boolean, amount: number }>, vat?: { included?: boolean, value?: number } }, rooms: number }} state
+ * @param {number} nights
+ * @returns {number}
+ */
+function computeCheckoutTotal(state, nights) {
+  const room = state.selectedRoom;
+  const rate = state.selectedRate;
+  if (!room || !rate) return 0;
+  const rooms = state.rooms ?? 1;
+  const roomTotal = Math.round(room.basePrice * rate.priceModifier * rooms);
+  const fees = rate.fees ?? [];
+  let add = 0;
+  fees.forEach((f) => {
+    if (!f.included) add += f.perNight ? f.amount * nights * rooms : f.amount;
+  });
+  if (rate.vat && !rate.vat.included) add += rate.vat.value || 0;
+  return Math.round(roomTotal + add);
+}
+
+/**
+ * Build payload for checkout submit: Stripe Payment Intent + external_booking + internal_booking.
+ * Use this when integrating Stripe (amount/currency for Payment Intent) and your booking API (external_booking + internal_booking; add stripe_token after payment success).
+ *
+ * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
+ * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string }
+ * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object }}
+ */
+function buildCheckoutPayload(state, options = {}) {
+  const propertyId = options.propertyId != null ? String(options.propertyId) : '';
+  const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const clientBookingReference = options.clientBookingReference || 'nuitee-booking-widget';
+
+  const checkIn = state.checkIn;
+  const checkOut = state.checkOut;
+  const nights = checkIn && checkOut
+    ? Math.max(1, Math.round((checkOut - checkIn) / 86400000))
+    : 0;
+  const total = computeCheckoutTotal(state, nights);
+  const currency = (state.selectedRoom?.currency || 'USD').trim();
+  const occupancies = Array.isArray(state.occupancies) ? state.occupancies : [{ adults: 2, children: 0, childrenAges: [] }];
+  const totalAdults = occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+  const totalChildren = occupancies.reduce((s, o) => s + (o.children || 0), 0);
+
+  const g = state.guest || {};
+  const availabilityRequest = {
+    ...(propertyKey ? { property_key: propertyKey } : propertyId ? { property_id: propertyId } : {}),
+    checkin: toISO(checkIn),
+    checkout: toISO(checkOut),
+    currency: currency.toUpperCase(),
+    occupancies: occupancies.map((o, i) => ({
+      adults: o.adults ?? 0,
+      children: o.children ?? 0,
+      ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
+      ...(i > 0 ? { occupancy_index: i + 1 } : {}),
+    })),
+  };
+
+  const rateIdentifier = state.selectedRate?.rate_identifier ?? state.selectedRate?.rate_code ?? state.selectedRate?.id;
+
+  const external_booking = {
+    availability_request: availabilityRequest,
+    booked_rates: [
+      {
+        quantity: state.rooms ?? 1,
+        rate_identifier: rateIdentifier,
+        amount: { price: total, currency: currency.toUpperCase() },
+        guest_details: [
+          { leader: true, first_name: g.firstName || '', last_name: g.lastName || '' },
+        ],
+      },
+    ],
+    client_booking_reference: clientBookingReference,
+  };
+  if (g.specialRequests != null && String(g.specialRequests).trim() !== '') {
+    external_booking.customer_remarks = String(g.specialRequests).trim();
+  }
+
+  const internal_booking = {
+    email: g.email || '',
+    first_name: g.firstName || '',
+    last_name: g.lastName || '',
+    phone: g.phone || '',
+    checkin: toISO(checkIn),
+    checkout: toISO(checkOut),
+    stays: nights,
+    price: total,
+    currency: currency.toUpperCase(),
+    points_for_currency_amount: options.pointsForCurrencyAmount ?? 2,
+    adults: totalAdults,
+    children: totalChildren,
+    room_name: state.selectedRoom?.name || '',
+    room_id: state.selectedRoom?.id ?? '',
+  };
+
+  return {
+    stripe: {
+      amount: total,
+      currency: currency.toLowerCase(),
+    },
+    external_booking,
+    internal_booking,
+  };
+}
+
+/**
+ * Build payload for payment-intent API (Stripe).
+ * Request body: { rate_identifier, key, metadata: { hotel_name, room_type, check_in, check_out, guests, nights, currency, first_name, last_name } }
+ * Response: { clientSecret, confirmationToken }
+ *
+ * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
+ * @param {Object} [options] - { propertyKey: string }
+ * @returns {{ rate_identifier: string, key: string, metadata: Object }}
+ */
+function buildPaymentIntentPayload(state, options = {}) {
+  const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const checkIn = state.checkIn;
+  const checkOut = state.checkOut;
+  const nights = checkIn && checkOut
+    ? Math.max(1, Math.round((checkOut - checkIn) / 86400000))
+    : 0;
+  const currency = (state.selectedRoom?.currency || 'USD').trim().toUpperCase();
+  const occupancies = Array.isArray(state.occupancies) ? state.occupancies : [{ adults: 2, children: 0, childrenAges: [] }];
+  const totalAdults = occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+  const totalChildren = occupancies.reduce((s, o) => s + (o.children || 0), 0);
+  const g = state.guest || {};
+  const rateIdentifier = state.selectedRate?.rate_identifier ?? state.selectedRate?.rate_code ?? state.selectedRate?.id ?? '';
+  // Same occupancies shape as availability body: adults, children, child_ages?, occupancy_index?
+  const occupanciesForPayload = occupancies.map((o, i) => ({
+    adults: o.adults ?? 0,
+    children: (o.children && o.children > 0) ? o.children : [],
+    occupancy_index: i + 1,
+    ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
+  }));
+
+  return {
+    rate_identifier: rateIdentifier,
+    key: propertyKey,
+    metadata: {
+      hotel_name: state.selectedRoom?.name ?? 'Hotel',
+      room_type: state.selectedRoom?.name ?? 'Room',
+      check_in: toISO(checkIn),
+      check_out: toISO(checkOut),
+      guests: String(totalAdults + totalChildren),
+      nights: String(nights),
+      currency,
+      first_name: g.firstName ?? '',
+      last_name: g.lastName ?? '',
+      email: g.email ?? '',
+      occupancies: occupanciesForPayload,
+      source_transaction: 'booking engine',
+    },
+  };
+}
+
+/**
+ * Decrypts property key to get property_id. Call this before fetchBookingEnginePref.
+ *
+ * @param {Object} options
+ * @param {string} options.baseUrl - Base URL for the API (e.g. 'https://thehotelplanet.com')
+ * @param {string} options.propertyKey - Hash from env (e.g. VITE_PROPERTY_KEY)
+ * @param {Object} [options.headers] - Optional headers (e.g. { 'X-API-Key': '...' })
+ * @param {string} [options.locale='en'] - Locale segment in path (default 'en')
+ * @returns {Promise<number|null>} property_id or null
+ */
+async function decryptPropertyId(options = {}) {
+  const { baseUrl, propertyKey, headers = {}, locale = 'en' } = options;
+  if (!propertyKey) return null;
+  const base = (baseUrl || '').replace(/\/$/, '');
+  const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...headers },
+    body: JSON.stringify({ hash: propertyKey }),
+  });
+  if (!res.ok) throw new Error(res.statusText || 'Failed to decrypt property id');
+  const data = await res.json();
+  return data.property_id != null ? Number(data.property_id) : null;
+}
+
+/**
+ * Fetches booking engine preferences (colors, links) from the config API.
+ *
+ * @param {Object} options
+ * @param {string} options.baseUrl - Base URL for the API (e.g. 'https://thehotelplanet.com')
+ * @param {string|number} options.propertyId - Property ID (from decryptPropertyId)
+ * @param {Object} [options.headers] - Optional headers (e.g. { 'X-API-Key': '...' })
+ * @param {string} [options.locale='en'] - Locale segment in path (default 'en')
+ * @returns {Promise<{ color_header, color_button, color_Text, link_privacy, link_terms }>}
+ */
+async function fetchBookingEnginePref(options = {}) {
+  const { baseUrl, propertyId, headers = {}, locale = 'en', debug = false } = options;
+  if (!propertyId) {
+    return Promise.resolve(null);
+  }
+  const base = (baseUrl || '').replace(/\/$/, '');
+  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 },
+  });
+  if (!res.ok) throw new Error(res.statusText || 'Failed to fetch config');
+
+  const text = await res.text();
+  if (debug) console.log('[fetchBookingEnginePref] raw response:', { status: res.status, contentType: res.headers.get('content-type'), bodyLength: text?.length, bodyPreview: text?.slice(0, 200) });
+  if (!text || !text.trim()) return null;
+
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    if (debug) console.warn('[fetchBookingEnginePref] invalid JSON');
+    return null;
+  }
+
+  // Unwrap nested response: { data: {...} } or { result: {...} }
+  const pref = data?.data ?? data?.result ?? data;
+  const out = pref && typeof pref === 'object' ? pref : null;
+  if (debug) console.log('[fetchBookingEnginePref] parsed pref:', out);
+  return out;
+}
+
+/**
+ * Maps booking_engine_pref API response to widget customColors.
+ *
+ * @param {Object} pref - Response from fetchBookingEnginePref
+ * @returns {Object} customColors for the widget { background, text, primary, primaryText } plus link_privacy, link_terms
+ */
+function mapPrefToCustomColors(pref) {
+  if (!pref) return null;
+  return {
+    background: pref.color_header || '#1a1a1a',
+    text: pref.color_Text || '#e0e0e0',
+    primary: pref.color_button || '#3b82f6',
+    primaryText: '#ffffff',
+    link_privacy: pref.link_privacy || '#',
+    link_terms: pref.link_terms || '#',
+  };
+}
+
+// Support both ESM and CJS
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { createBookingApi, DEFAULT_ROOMS, DEFAULT_RATES, buildCheckoutPayload, buildPaymentIntentPayload, decryptPropertyId, fetchBookingEnginePref, mapPrefToCustomColors, getCurrencySymbol, formatPrice };
+}
+if (typeof window !== 'undefined') {
+  window.createBookingApi = createBookingApi;
+  window.buildCheckoutPayload = buildCheckoutPayload;
+  window.buildPaymentIntentPayload = buildPaymentIntentPayload;
+  window.decryptPropertyId = decryptPropertyId;
+  window.fetchBookingEnginePref = fetchBookingEnginePref;
+  window.mapPrefToCustomColors = mapPrefToCustomColors;
+  window.getCurrencySymbol = getCurrencySymbol;
+  window.formatPrice = formatPrice;
+}
+
+export { createBookingApi, DEFAULT_ROOMS, DEFAULT_RATES, buildCheckoutPayload, buildPaymentIntentPayload, decryptPropertyId, fetchBookingEnginePref, mapPrefToCustomColors, getCurrencySymbol, formatPrice };