@zinnect-test/embed-react/README.md

React package for embedding Zinnect booking widget

# @zinnect-test/embed-react

React package for embedding Zinnect booking widget into your React applications.

## Installation

```bash
# Using npm
npm install @zinnect-test/embed-react

# Using yarn
yarn add @zinnect-test/embed-react

# Using pnpm
pnpm add @zinnect-test/embed-react
```

## Usage

### Basic Example

```jsx
import { getBookingApi } from "@zinnect-test/embed-react";
import { useEffect } from "react";

export default function MyApp() {
  useEffect(() => {
    (async function () {
      const booking = await getBookingApi({
        namespace: "my-event-slug",
        origin: "https://your-domain.com", // Optional, defaults to window.location.origin
      });
      
      booking("ui", {
        layout: "month_view",
        hideEventTypeDetails: false,
      });
    })();
  }, []);
  
  return <div>Your app content</div>;
}
```

### Configure UI Settings

```jsx
import { getBookingApi } from "@zinnect-test/embed-react";
import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    (async function () {
      const booking = await getBookingApi({
        namespace: "15min",
        origin: "https://example.com",
      });
      
      // Configure UI
      booking("ui", {
        layout: "weekly",
        hideEventTypeDetails: false,
        bg_url: "https://example.com/background.jpg",
        title: "Book a Meeting",
        logo_url: "https://example.com/logo.png",
      });
    })();
  }, []);
  
  return (
    <button
      data-booking-link="https://example.com/username/event-slug"
      data-booking-namespace="15min"
    >
      Book Now
    </button>
  );
}
```

### Open Booking Modal Programmatically

```jsx
import { getBookingApi } from "@zinnect-test/embed-react";
import { useEffect, useState } from "react";

function BookingButton() {
  const [booking, setBooking] = useState(null);
  
  useEffect(() => {
    (async function () {
      const api = await getBookingApi({
        namespace: "my-event",
        origin: "https://example.com",
      });
      setBooking(() => api);
    })();
  }, []);
  
  const handleBookClick = () => {
    if (booking) {
      booking("open", {
        bookingLink: "https://example.com/username/event-slug",
        config: {
          layout: "month",
          hideEventTypeDetails: false,
        },
      });
    }
  };
  
  return <button onClick={handleBookClick}>Book Appointment</button>;
}
```

### With Custom Embed URL

```jsx
import { getBookingApi } from "@zinnect-test/embed-react";
import { useEffect } from "react";

export default function MyApp() {
  useEffect(() => {
    (async function () {
      const booking = await getBookingApi({
        namespace: "my-event",
        embedUrl: "https://custom-domain.com/embed/embed.js",
      });
      
      booking("ui", {
        layout: "month_view",
      });
    })();
  }, []);
  
  return <div>Your app content</div>;
}
```

## API Reference

### `getBookingApi(config)`

Returns a Promise that resolves to a Booking API function.

#### Parameters

- `config` (Object)
  - `namespace` (string, required): Namespace identifier for the booking instance
  - `origin` (string, optional): Origin URL for the booking API. Defaults to `window.location.origin`
  - `embedUrl` (string, optional): Custom embed.js URL. Defaults to `{origin}/embed/embed.js`

#### Returns

Promise that resolves to a `BookingApi` function.

### Booking API Methods

#### `booking("ui", uiConfig)`

Configure UI settings for the booking widget.

- `uiConfig` (Object)
  - `layout` (string): Layout type - "month", "week", "weekly", etc.
  - `hideEventTypeDetails` (boolean): Hide event type details
  - `bg_url` (string): Background image URL
  - `title` (string): Title text
  - `logo_url` (string): Logo URL
  - `brandColorLight` (string): Brand color for light mode
  - `brandColorDark` (string): Brand color for dark mode
  - `theme` (string): Theme - "auto", "light", "dark"

#### `booking("open", options)`

Open the booking modal programmatically.

- `options` (Object)
  - `bookingLink` (string): URL to the booking page
  - `config` (Object): UI configuration object (same as uiConfig above)

#### `booking("inline", options)`

Set up inline booking on an element (advanced usage).

## Requirements

- React 16.8.0 or higher
- The embed.js script must be accessible at `{origin}/embed/embed.js` or the custom `embedUrl`

## License

MIT