# Timekit Booking.js Context

## Project Overview
**Booking.js** is a beautiful, embeddable booking widget designed to work with the [Timekit API](https://timekit.io). This repository contains the source code for **Version 3** of the widget, which supports the new projects model and App Widget Key authentication.

## Key Technologies
*   **Language:** JavaScript (ES6+)
*   **Build System:** Webpack 5 (Common, Dev, Prod configs)
*   **Package Manager:** Yarn
*   **Styling:** SCSS (Sass)
*   **Libraries:**
    *   `timekit-sdk`: Interaction with Timekit API.
    *   `@fullcalendar/*`: Calendar UI rendering.
    *   `moment`, `moment-timezone`: Date and time manipulation.
    *   `jquery`: DOM manipulation.
    *   `mustache-loader`: Templating.
*   **Testing:** Karma, Jasmine, Puppeteer.

## Technical Architecture & Gotchas

### Dual-Product Repository
This repo builds two distinct libraries from different source roots:
- **TimekitBooking** (`src/booking/`): The primary calendar widget.
- **TimekitAppointments** (`src/services/`): A multi-step service/location selector.
*Note: These share very little code and often have duplicated logic in their respective `helpers/` or `classes/` folders.*

### Autoloading Side-Effect
`src/booking/index.js` automatically initializes the widget if `window.timekitBookingConfig` is present. To prevent this, set `autoload: false` in the config or ensure the global object is not defined when the script loads.

### Configuration Presets
The config system in `src/booking/` uses presets (e.g., `time_date_format`). Setting these keys will automatically merge large blocks of FullCalendar settings. See `src/booking/configs.js` for definitions.

### Known Quirks
- **The "Stratergy" Typo:** In the `src/services/` logic (TimekitAppointments), the word "strategy" is misspelled as `stratergy` in both code and configuration. This is preserved for backward compatibility.
- **Mustache Templates:** HTML files are imported via `mustache-loader` and behave as functions that accept data objects.

## Directory Structure
*   `src/`: Application source code.
    *   `booking/`: Core booking widget logic, pages, and styles.
    *   `services/`: Shared services and utilities.
*   `public/`: Static assets, HTML entry points for development (e.g., `index.html`, `appointments.html`).
*   `test/`: Test suites (Jasmine specs) and fixtures.
*   `misc/`: Miscellaneous assets (images, screenshots).
*   `dist/` or `public/build/`: Output directory for compiled assets (not always checked in).

## Development Workflow

### Setup
```bash
yarn install
```

### Running Locally
Starts the development server on `http://localhost:8081`.
```bash
yarn dev
```

### Testing
Runs the test suite using Karma.
```bash
yarn test
```

### Building for Production
Compiles and minimizes the code into `public/build/`.
```bash
yarn build
```

## Important Notes
*   This is a client-side library meant to be embedded in websites.
*   Configuration is often passed via global objects or initialization parameters.
*   The project uses `webpack-dev-server` for local development.