@nuitee/booking-widget 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,268 @@
+# Booking Engine Widget
+
+A customizable booking widget modal you can embed in any website. It works with **vanilla JavaScript**, **React**, and **Vue**. API and payment configuration are loaded by the widget at runtime; you only need to install the package and pass options (e.g. `propertyKey` for real data).
+
+## Features
+
+- Modern UI with smooth transitions
+- Responsive layout
+- **Vanilla JS**, **React**, and **Vue** integrations
+- Step-by-step flow: dates → rooms → rates → checkout → confirmation
+- Room selection with images and amenities
+- Rate selection with pricing
+- Full checkout with Stripe (handled by the widget)
+- Customizable colors
+- Lucide icons (shadcn-style)
+
+## Installation
+
+### NPM
+
+```bash
+npm install @nuitee/booking-widget
+```
+
+### Yarn
+
+```bash
+yarn add @nuitee/booking-widget
+```
+
+### PNPM
+
+```bash
+pnpm add @nuitee/booking-widget
+```
+
+### With React
+
+```bash
+npm install @nuitee/booking-widget react react-dom lucide-react
+```
+
+### With Vue
+
+```bash
+npm install @nuitee/booking-widget vue lucide-vue-next
+```
+
+*(Use `lucide-vue-next` for Vue 3 or the appropriate Lucide Vue package for your version.)*
+
+---
+
+## Usage
+
+### Vanilla JavaScript (ES modules)
+
+```javascript
+import BookingWidget from '@nuitee/booking-widget';
+import '@nuitee/booking-widget/css';
+
+const widget = new BookingWidget({
+  containerId: 'booking-widget-container',
+  propertyKey: 'your-property-key',  // optional; omit for demo data
+  colors: {
+    background: '#1a1a1a',
+    text: '#e0e0e0',
+    primary: '#3b82f6',
+    primaryText: '#ffffff'
+  },
+  onOpen: () => console.log('Widget opened'),
+  onClose: () => console.log('Widget closed'),
+  onComplete: (bookingData) => console.log('Booking completed', bookingData)
+});
+
+widget.open();
+```
+
+### Vanilla JavaScript (CommonJS)
+
+```javascript
+const BookingWidget = require('@nuitee/booking-widget');
+require('@nuitee/booking-widget/css');
+
+const widget = new BookingWidget({
+  containerId: 'booking-widget-container',
+  propertyKey: 'your-property-key'
+});
+
+widget.open();
+```
+
+### Vanilla JavaScript (standalone script)
+
+No bundler: load the script and CSS, then create the widget.
+
+```html
+<link rel="stylesheet" href="node_modules/@nuitee/booking-widget/dist/booking-widget.css">
+<script src="node_modules/@nuitee/booking-widget/dist/booking-widget-standalone.js"></script>
+
+<div id="booking-widget-container"></div>
+
+<script>
+  const widget = new BookingWidget({
+    containerId: 'booking-widget-container',
+    cssUrl: 'node_modules/@nuitee/booking-widget/dist/booking-widget.css',
+    propertyKey: 'your-property-key',
+    onOpen: () => console.log('Opened'),
+    onClose: () => console.log('Closed'),
+    onComplete: (data) => console.log('Completed', data)
+  });
+  widget.init();
+  widget.open();
+</script>
+```
+
+### React
+
+```jsx
+import { useState } from 'react';
+import BookingWidget from '@nuitee/booking-widget/react';
+import '@nuitee/booking-widget/css';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Book now</button>
+      <BookingWidget
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        propertyKey="your-property-key"
+        colors={{
+          background: '#1a1a1a',
+          text: '#e0e0e0',
+          primary: '#3b82f6',
+          primaryText: '#ffffff'
+        }}
+        onComplete={(data) => {
+          console.log('Booking completed', data);
+        }}
+      />
+    </>
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <div>
+    <button @click="isOpen = true">Book now</button>
+    <BookingWidget
+      :is-open="isOpen"
+      :property-key="propertyKey"
+      :colors="customColors"
+      @close="isOpen = false"
+      @complete="handleComplete"
+    />
+  </div>
+</template>
+
+<script>
+import BookingWidget from '@nuitee/booking-widget/vue';
+import '@nuitee/booking-widget/css';
+
+export default {
+  components: { BookingWidget },
+  data() {
+    return {
+      isOpen: false,
+      propertyKey: 'your-property-key',
+      customColors: {
+        background: '#1a1a1a',
+        text: '#e0e0e0',
+        primary: '#3b82f6',
+        primaryText: '#ffffff'
+      }
+    };
+  },
+  methods: {
+    handleComplete(data) {
+      console.log('Booking completed', data);
+    }
+  }
+};
+</script>
+```
+
+---
+
+## Property key and data
+
+- **Real rooms/rates/booking:** pass `propertyKey` (string) so the widget can load data for that property. Omit it to use built-in demo data.
+- **Vanilla:** `new BookingWidget({ propertyKey: '...', ... })`
+- **React:** `<BookingWidget propertyKey="..." ... />`
+- **Vue:** `<BookingWidget :property-key="propertyKey" ... />`
+
+API base URLs, Stripe, and related config are provided by the widget at runtime; you do not configure them in your app.
+
+---
+
+## API reference
+
+### Constructor options (Vanilla JS)
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `containerId` | string | ID of the container element (default: `'booking-widget-container'`) |
+| `cssUrl` | string | URL to the CSS file (optional if CSS is already loaded) |
+| `propertyKey` | string | Property key for real data; omit for demo |
+| `onOpen` | function | Callback when the widget opens |
+| `onClose` | function | Callback when the widget closes |
+| `onComplete` | function | Callback when booking is completed `(bookingData) => void` |
+| `colors` | object | `{ background, text, primary, primaryText }` |
+
+### React / Vue props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | boolean | Controls widget visibility |
+| `onClose` | function | Called when the user closes the widget |
+| `onComplete` | function | Called when booking is completed |
+| `onOpen` | function | Optional; called when the widget opens |
+| `propertyKey` | string | Property key for real data; omit for demo |
+| `colors` | object | Optional; same shape as above |
+
+### Vanilla methods
+
+- `open()` — open the modal (calls `init()` if needed)
+- `close()` — close the modal
+- `goToStep(step)` — go to step: `'dates'`, `'rooms'`, `'rates'`, `'checkout'`, `'confirmation'`
+- `init()` — mount the widget into the container (required for standalone before `open()`)
+
+---
+
+## Import paths
+
+- `@nuitee/booking-widget` — main entry (vanilla JS)
+- `@nuitee/booking-widget/react` — React component
+- `@nuitee/booking-widget/vue` — Vue component
+- `@nuitee/booking-widget/css` — styles
+- `@nuitee/booking-widget/standalone` — standalone script entry
+
+---
+
+## Examples
+
+- `index.html` — vanilla integration
+- `examples/react-app/` — React app example
+- `examples/vue-app/` — Vue app example
+
+See **[USAGE.md](./USAGE.md)** for more detailed usage by framework.
+
+---
+
+## Development
+
+```bash
+npm install
+npm run build
+npm run dev
+```
+
+## License
+
+MIT

package/USAGE.md

@@ -0,0 +1,289 @@
+# Booking Engine Widget — Usage by framework
+
+This guide describes how to **install** and **use** the booking widget in your app (React, Vue, or vanilla JavaScript). API and payment configuration are loaded by the widget at runtime; you only need to add the package and pass the options described below.
+
+---
+
+## Table of contents
+
+1. [Installation](#installation)
+2. [React](#react)
+3. [Vue](#vue)
+4. [Vanilla JavaScript (standalone / script tag)](#vanilla-javascript-standalone--script-tag)
+5. [Vanilla JavaScript (ES modules)](#vanilla-javascript-es-modules)
+6. [Configuration reference](#configuration-reference)
+
+---
+
+## Installation
+
+### Base install
+
+```bash
+npm install @nuitee/booking-widget
+# or
+yarn add @nuitee/booking-widget
+# or
+pnpm add @nuitee/booking-widget
+```
+
+The widget includes its own dependencies (e.g. `@stripe/stripe-js`, `lucide-react`). You do **not** need to install API keys or config in your app; the widget loads what it needs at runtime.
+
+### If you use React
+
+Install the widget plus React and React DOM (and Lucide if your project uses it):
+
+```bash
+npm install @nuitee/booking-widget react react-dom lucide-react
+```
+
+### If you use Vue
+
+Install the widget and Vue (Vue is a peer dependency):
+
+```bash
+npm install @nuitee/booking-widget vue
+```
+
+For Vue 3 with Lucide:
+
+```bash
+npm install @nuitee/booking-widget vue lucide-vue-next
+```
+
+---
+
+## React
+
+### 1. Import and mount
+
+```jsx
+import { useState } from 'react';
+import BookingWidget from '@nuitee/booking-widget/react';
+import '@nuitee/booking-widget/css';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Book now</button>
+      <BookingWidget
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onComplete={(data) => console.log('Booking completed', data)}
+        propertyKey="your-property-key"
+      />
+    </>
+  );
+}
+```
+
+- **Real data:** pass `propertyKey` (string). Omit it to use demo data.
+- **Callbacks:** `onClose` when the user closes the widget; `onComplete(data)` when the booking is completed.
+
+### 2. With custom colors
+
+```jsx
+<BookingWidget
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onComplete={handleComplete}
+  propertyKey="your-property-key"
+  colors={{
+    background: '#1a1a1a',
+    text: '#e0e0e0',
+    primary: '#3b82f6',
+    primaryText: '#ffffff',
+  }}
+/>
+```
+
+---
+
+## Vue
+
+### 1. Import and mount
+
+```vue
+<template>
+  <div>
+    <button @click="isOpen = true">Book now</button>
+    <BookingWidget
+      :is-open="isOpen"
+      :property-key="propertyKey"
+      @close="isOpen = false"
+      @complete="handleComplete"
+    />
+  </div>
+</template>
+
+<script>
+import BookingWidget from '@nuitee/booking-widget/vue';
+import '@nuitee/booking-widget/css';
+
+export default {
+  components: { BookingWidget },
+  data() {
+    return {
+      isOpen: false,
+      propertyKey: 'your-property-key',
+    };
+  },
+  methods: {
+    handleComplete(data) {
+      console.log('Booking completed', data);
+    },
+  },
+};
+</script>
+```
+
+- **Real data:** pass `propertyKey`. Omit for demo data.
+- **Events:** `@close` when the user closes; `@complete` when the booking is done.
+
+### 2. With custom colors
+
+```vue
+<BookingWidget
+  :is-open="isOpen"
+  :property-key="propertyKey"
+  :colors="customColors"
+  @close="isOpen = false"
+  @complete="handleComplete"
+/>
+
+<!-- in data -->
+customColors: {
+  background: '#1a1a1a',
+  text: '#e0e0e0',
+  primary: '#3b82f6',
+  primaryText: '#ffffff',
+},
+```
+
+---
+
+## Vanilla JavaScript (standalone / script tag)
+
+Use the **standalone bundle** when you are not using a bundler: load the script and CSS, then create the widget with a container ID and options.
+
+### 1. Load assets
+
+```html
+<link rel="stylesheet" href="node_modules/@nuitee/booking-widget/dist/booking-widget.css">
+<script src="node_modules/@nuitee/booking-widget/dist/booking-widget-standalone.js"></script>
+
+<div id="booking-widget-container"></div>
+```
+
+Replace `node_modules/...` with your actual path or a CDN URL if you host the built files.
+
+### 2. Create the widget
+
+```html
+<script>
+  const widget = new BookingWidget({
+    containerId: 'booking-widget-container',
+    cssUrl: 'node_modules/@nuitee/booking-widget/dist/booking-widget.css',
+    propertyKey: 'your-property-key',
+    onOpen: () => console.log('Opened'),
+    onClose: () => console.log('Closed'),
+    onComplete: (data) => console.log('Completed', data),
+  });
+  widget.init();
+  widget.open();
+</script>
+```
+
+For the standalone bundle you must call `init()` before `open()` so the widget mounts into the container.
+
+### 3. With custom colors
+
+```javascript
+const widget = new BookingWidget({
+  containerId: 'booking-widget-container',
+  propertyKey: 'your-property-key',
+  colors: {
+    background: '#1a1a1a',
+    text: '#e0e0e0',
+    primary: '#3b82f6',
+    primaryText: '#ffffff',
+  },
+  onClose: () => {},
+  onComplete: (data) => console.log(data),
+});
+widget.init();
+widget.open();
+```
+
+---
+
+## Vanilla JavaScript (ES modules)
+
+When using a bundler (Vite, Webpack, etc.), import the widget and CSS:
+
+```javascript
+import BookingWidget from '@nuitee/booking-widget';
+import '@nuitee/booking-widget/css';
+
+const widget = new BookingWidget({
+  containerId: 'booking-widget-container',
+  propertyKey: 'your-property-key',
+  onClose: () => {},
+  onComplete: (data) => console.log(data),
+});
+
+widget.open();
+```
+
+You do **not** need to call `init()` when using the main entry; `open()` will mount the widget if needed.
+
+---
+
+## Configuration reference
+
+Only the following props/options are for you to set. API URLs, Stripe, and booking submission are handled by the widget and are not configured in your app.
+
+### React / Vue props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | boolean | Controls visibility of the modal. |
+| `onClose` | function | Called when the user closes the widget. |
+| `onComplete` | function | Called when the booking is completed, with booking data. |
+| `onOpen` | function | Optional. Called when the widget opens. |
+| `propertyKey` | string | Property key for real rooms/rates/booking; omit for demo data. |
+| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+
+### Vanilla constructor options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `containerId` | string | ID of the DOM container (default: `'booking-widget-container'`). |
+| `cssUrl` | string | URL of the widget CSS (for standalone when CSS is not loaded by a build step). |
+| `propertyKey` | string | Property key for real data; omit for demo. |
+| `onClose` | function | Called when the user closes the widget. |
+| `onComplete` | function | Called when the booking is completed. |
+| `onOpen` | function | Optional. Called when the widget opens. |
+| `colors` | object | Optional. `{ background, text, primary, primaryText }`. |
+
+### Vanilla methods
+
+- **`widget.open()`** — Open the modal. With the main entry (ES modules), this will init if needed; with standalone, call `init()` first.
+- **`widget.close()`** — Close the modal.
+- **`widget.goToStep(step)`** — Go to step: `'dates'`, `'rooms'`, `'rates'`, `'summary'`, `'payment'`, `'confirmation'`.
+- **`widget.init()`** — Mount the widget into the container. **Required** for the standalone bundle before calling `open()`.
+
+---
+
+## Summary
+
+| Goal | What to do |
+|------|------------|
+| Use in React | `npm install @nuitee/booking-widget react react-dom`, import `@nuitee/booking-widget/react` and `@nuitee/booking-widget/css`, pass `isOpen`, `onClose`, `onComplete`, and optionally `propertyKey`. |
+| Use in Vue | `npm install @nuitee/booking-widget vue`, import `@nuitee/booking-widget/vue` and `@nuitee/booking-widget/css`, pass `:is-open`, `@close`, `@complete`, and optionally `:property-key`. |
+| Use in vanilla (no build) | Load the standalone script and CSS, `new BookingWidget({ containerId, propertyKey, ... })`, then `init()` and `open()`. |
+| Use in vanilla (with build) | Import `@nuitee/booking-widget` and `@nuitee/booking-widget/css`, pass `propertyKey` and callbacks, then `open()`. |
+| Real rooms/rates/booking | Pass `propertyKey`. The widget uses its own runtime config for API and payments. |
+| Custom colors | Pass `colors: { background, text, primary, primaryText }`. |