@bigz-app/booking-widget

v1.1.5

Published

a day ago

Booking widget for bigZ Booking System @ bigz.app

0High
0Medium
0Low

99power

bigz booking-widget

bigZ Booking Widget

A modern, customizable booking widget for bigZ Booking System built with React, TypeScript, and Tailwind CSS v4.

Features

🎯 Multi-format support: ESM, CommonJS, and UMD builds
⚡ Performance optimized: Built with Preact for UMD, React for npm
🎨 Fully customizable: Theme-based styling with CSS custom properties
🌍 Internationalization ready: Support for multiple currencies and locales
📱 Responsive design: Mobile-first approach with Tailwind CSS
🔒 Type-safe: Full TypeScript support with strict type checking
🧩 Modular architecture: Well-organized component structure
💳 Payment integration: Stripe-powered payment processing
🎫 Discount system: Voucher and gift card support

Quick Start

For Vanilla JavaScript (UMD)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bigz-app/booking-widget@latest/dist/styles.css">
</head>
<body>
  <div id="booking-widget"></div>

  <script src="https://cdn.jsdelivr.net/npm/@bigz-app/booking-widget@latest/dist/booking-widget.js"></script>
  <script>
    BigZBookingWidget.init({
      target: '#booking-widget',
      config: {
        apiUrl: 'https://api.bigz.app',
        locale: 'de',
        currency: 'EUR',
        theme: {
          primary: '#007bff',
          secondary: '#6c757d',
          success: '#28a745',
          warning: '#ffc107',
          error: '#dc3545'
        }
      }
    });
  </script>
</body>
</html>

For React Applications

npm install @bigz-app/booking-widget
# or
pnpm add @bigz-app/booking-widget

import { UniversalBookingWidget } from '@bigz-app/booking-widget';

function App() {
  const config = {
    apiUrl: 'https://api.bigz.app',
    locale: 'de',
    currency: 'EUR',
    // ... other config options
  };

  return <UniversalBookingWidget config={config} />;
}

Configuration

UniversalBookingConfig

interface UniversalBookingConfig {
  // API Configuration
  apiUrl: string;
  apiKey?: string;

  // Localization
  locale?: SupportedLocale; // 'de' | 'en'
  currency?: CurrencyCode; // 'EUR' | 'USD' | 'GBP' | etc.

  // Theming
  theme?: {
    surface?: string;
    background?: string;
    highlight?: string;
    text?: string;
    muted?: string;
    border?: string;
    success?: string;
    warning?: string;
    error?: string;
  };

  // UI Options
  view?: 'next-events' | 'button' | 'cards';
  maxEvents?: number;
  showPrices?: boolean;
  showDescriptions?: boolean;

  // Promo Dialog
  promoDialog?: PromoDialogConfig;

  // Callbacks
  onBookingComplete?: (booking: BookingResult) => void;
  onError?: (error: Error) => void;
}

Component Architecture

src/components/
├── booking/          # Booking flow components
│   ├── BookingForm.tsx
│   ├── PaymentForm.tsx
│   └── VoucherInput.tsx
├── events/           # Event selection components
│   ├── EventTypeSelection.tsx
│   ├── EventInstanceSelection.tsx
│   └── NextEventsPreview.tsx
├── shared/           # Reusable UI components
│   ├── Button.tsx
│   ├── Input.tsx
│   ├── Spinner.tsx
│   └── skeletons/
└── UniversalBookingWidget.tsx  # Main entry point

Styling & Theming

The widget uses Tailwind CSS v4 with CSS custom properties for theming. All colors, spacing, and typography can be customized through CSS variables:

:root {
  --bw-surface-color: #ffffff;
  --bw-background-color: #f8f9fa;
  --bw-highlight-color: #007bff;
  --bw-text-color: #212529;
  --bw-text-muted: #6c757d;
  --bw-border-color: #dee2e6;
  --bw-success-color: #28a745;
  --bw-warning-color: #ffc107;
  --bw-error-color: #dc3545;
  --bw-border-radius: 8px;
  --bw-font-family: system-ui, sans-serif;
}

Development

Prerequisites

Node.js 18+
pnpm

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run linting
pnpm lint

# Type checking
pnpm exec tsc --noEmit

Build Outputs

dist/index.esm.js - ES modules for modern bundlers
dist/index.cjs - CommonJS for Node.js
dist/booking-widget.js - UMD build with Preact for vanilla JS
dist/styles.css - Extracted CSS styles

API Reference

UniversalBookingWidget Props

interface UniversalBookingWidgetProps {
  config: UniversalBookingConfig;
  className?: string;
}

Supported Locales

de - German
en - English

Supported Currencies

EUR - Euro (€)
USD - US Dollar ($)
GBP - British Pound (£)
CHF - Swiss Franc (CHF)
SEK - Swedish Krona (kr)
NOK - Norwegian Krone (kr)
DKK - Danish Krone (kr)
PLN - Polish Zloty (zł)
CZK - Czech Koruna (Kč)

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Ensure TypeScript compilation passes
Submit a pull request

License

Bundle Size

UMD: ~585KB (gzipped: ~150KB)
ESM: ~494KB (gzipped: ~130KB)
CSS: ~46KB (gzipped: ~8KB)