GaragoCalendar

React Library for Appointment Scheduling linked to Garago

Table of Contents

• Introduction
• Features
• Installation
• Usage
• API Key Setup
• Toast Prerequisites
• Current Limitations
• Notifications
• Additional Notes
• License

Introduction

GaragoCalendar is a 100% TypeScript React library designed to integrate an appointment scheduling calendar into your website. This solution is specifically developed to work with the Garago platform, which provides a secure API and administrative interface. Garages can embed the calendar directly on their site without managing the backend. Time slots are fixed at 30 minutes, Sundays are closed, and default text templates (labels, etc.) are provided in French, English, and Dutch.

Features

• Fixed 30-Minute Time Slots:
  Appointments are offered in fixed 30-minute slots, with Sundays closed.

• Interactive Calendar:
  Intuitive navigation using arrows and swipe gestures to select dates.

• Complete Booking Form:
  Collects customer details (name, email, phone, brand, model, VIN, appointment type) with real-time validation.

• Default Text Templates:
  Pre-configured texts and labels are provided for easy integration and internationalization (French, English, and Dutch).

• Toast Notifications:
  Integrated toast notifications using sonner.
  Note: To use this feature, install the sonner package from shadcn/ui and include the <Toaster /> component in your global layout (e.g., in app/layout.tsx for Next.js).

• API Key Authentication:
  Access to the Garago API is secured via an API key that the developer copies directly from the Garago platform.
  Note: The developer only needs to copy their API key from their Garago account and provide it via the apiKey prop.

• Ready-to-Use Integration:
  Designed for React and Next.js with no additional backend configuration required on the client side.

Installation

Use npm, pnpm, or yarn to install the library:

# Using npm
npm install @garago/calendar

# Using pnpm
pnpm add @garago/calendar

# Using yarn
yarn add @garago/calendar

Usage

Integrating in a Next.js Project

The developer must copy the API key directly from their Garago account and provide it via the apiKey prop.

"use client";

import React from "react";
import { fr } from "date-fns/locale";
import GaragoCalendar from "@garago/calendar";

// The API key must be copied directly from your Garago account
const API_KEY = "YOUR_COPIED_API_KEY";

export default function BookingPage() {
  return (
    <div className="p-8">
      <GaragoCalendar withToaster locale={fr} apiKey={API_KEY} />
    </div>
  );
}

API Key Setup

The Garago platform generates a unique API key. Developers simply copy the API key from their Garago account and supply it to the component:

<GaragoCalendar withToaster locale={fr} apiKey="YOUR_API_KEY" />

No additional client-side configuration is necessary.

Toast Prerequisites

To use toast notifications, install the sonner package from shadcn/ui and include the <Toaster /> component in your global layout (e.g., in app/layout.tsx for Next.js).

Notifications

• Client Notification: Garago automatically sends an email to the client to inform them that they will be contacted to confirm their appointment.
• Owner Notification: The garage owner may also receive an email notification if configured in the Garago platform. Otherwise, notifications are only available within the Garago interface.

Props

Below is a detailed explanation of all the props that you can pass to the <GaragoCalendar /> component.

locale

• Type: Locale (from date-fns)
• Default: fr
• Description: The locale object used to format dates in the calendar (e.g., for day names, month names).

translations

• Type: { [code: string]: Translations }
• Default: defaultTranslations
• Description: Un objet qui associe des codes de langue (par exemple, "fr", "en", "nl") à un objet de traductions contenant les textes par défaut (titres, labels, messages, etc.) utilisés dans le calendrier.

appointmentTypes

• Type: AppointmentTypesProp (either an array of objects or an object mapping locale codes to arrays)
• Default: defaultTranslations.types
• Description: Définit les types de rendez-vous disponibles. Il peut être fourni sous forme de tableau d'objets (chacun possédant les propriétés value et label) ou sous forme d'un objet qui associe des codes de langue à ces tableaux.

withToaster

• Type: boolean
• Default: false
• Description: Lorsqu'il est défini sur true, les notifications toast seront activées (à l'aide de la librairie sonner).

apiKey

• Type: string
• Required: Yes
• Description: La clé API que vous devez copier directement depuis votre compte Garago. Cette clé est utilisée pour authentifier les requêtes vers le backend Garago.

Additional Notes

• If you choose to use a locale other than fr, en-US, or nl, you must provide both the translations and appointmentTypes props with the exact structure expected by the component.
• The styles and theme are fixed (e.g., bg-orange, text-gray-800) and cannot currently be customized.

License

All rights reserved. This software is proprietary and may be used as-is for commercial or personal purposes, but modification of the source code is strictly prohibited without explicit permission from the owner.