pluracore-reservation-react-comp

Composant React réutilisable et personnalisable pour intégrer la prise de réservation (créneaux) dans vos interfaces clients. Compatible avec l’API booking-system Pluracore.

Installation

npm install pluracore-reservation-react-comp
# ou
yarn add pluracore-reservation-react-comp

Dépendances

• React >= 17 (peer dependency)
• React-DOM >= 17 (peer dependency)

Aucune dépendance directe (fetch natif pour l’API).

Usage minimal

import { ReservationWidget } from 'pluracore-reservation-react-comp';

function App() {
  return (
    <ReservationWidget
      apiBaseUrl="https://votre-api.com"
      activityId="uuid-de-l-activite"
      getAuthToken={() => localStorage.getItem('booking_token') ?? ''}
      onSuccess={(booking) => console.log('Réservé:', booking)}
      onError={(msg) => console.error(msg)}
    />
  );
}

Props principales

| Prop | Type | Description | |------|------|-------------| | apiBaseUrl | string | URL de base de l’API (ex: https://api.example.com) | | activityId | string | ID de l’activité à réserver | | getAuthToken | () => string \| Promise<string> | Retourne le JWT (Bearer) pour les requêtes | | onSuccess | (booking) => void | Appelé après une réservation réussie | | onError | (message, error?) => void | Appelé en cas d’erreur |

| mode | 'slot' \| 'stay' | slot = date + heures ; stay = deux dates (arrivée/départ) pour gîte | | showLoginWhenUnauthenticated | boolean | Affiche un formulaire de connexion (backend booking-system) si pas de token | | onLoginSuccess | (token: string) => void | Appelé après connexion réussie (stocker le token) | | registerUrl | string | URL de la page d'inscription (lien sous le formulaire de connexion) |

Personnalisation

Labels (textes)

Tous les textes sont surchargeables via labels :

<ReservationWidget
  apiBaseUrl="..."
  activityId="..."
  getAuthToken={...}
  labels={{
    title: 'Choisir un créneau',
    dateLabel: 'Jour',
    startLabel: 'Début',
    endLabel: 'Fin',
    submitLabel: 'Confirmer la réservation',
    submittingLabel: 'Envoi…',
    successMessage: 'Votre réservation est enregistrée.',
  }}
/>

Créneaux et plage de dates

<ReservationWidget
  slotStepMinutes={30}   // pas des créneaux (défaut: 30)
  daysAhead={14}         // jours proposés à l’avance (défaut: 30)
  minDate={new Date()}   // date min sélectionnable
  maxDate="2026-12-31"   // date max (Date ou string ISO)
  activityName="Cours de yoga"
  ...
/>

Style (CSS et inline)

• className : classe sur le conteneur racine.
• style : styles inline sur le conteneur.
• classNames : classes par zone (root, header, form, fieldGroup, label, input, select, button, message, messageError, messageSuccess).
• styles : styles inline par zone (root, header, form, fieldGroup, label, input, select, button, message, messageError, messageSuccess).

Exemple :

<ReservationWidget
  className="my-booking-card"
  styles={{
    root: { padding: 24, borderRadius: 12 },
    button: { background: '#0ea5e9', color: 'white' },
  }}
  classNames={{
    input: 'my-input',
    button: 'my-btn',
  }}
  ...
/>

Bouton de soumission personnalisé

<ReservationWidget
  renderSubmitButton={({ disabled, loading }) => (
    <button type="submit" disabled={disabled}>
      {loading ? 'Envoi…' : 'Réserver'}
    </button>
  )}
  ...
/>

Désactiver le widget

<ReservationWidget disabled ... />

Backend booking-system (booking-system/backend)

Le composant est conçu pour fonctionner avec le backend booking-system :

• apiBaseUrl doit être l’URL racine du backend (ex. http://localhost:5000).
• Connexion : avec showLoginWhenUnauthenticated et onLoginSuccess, le widget affiche un formulaire de connexion qui appelle POST {apiBaseUrl}/api/auth/login avec { email, password }. Réponse attendue : { token } ou { success, user, token }.
• Réservation : POST {apiBaseUrl}/api/bookings avec Authorization: Bearer <token>, body { activity_id, starts_at, ends_at, user_datas? } (dates en ISO).

Mode séjour (gîte) : date de début → date de fin

Pour un gîte ou hébergement, utilisez mode="stay" : le formulaire affiche uniquement deux champs date (date d’arrivée, date de départ), sans heure. Les créneaux envoyés à l’API sont à minuit (arrivée à 00:00, départ à 00:00). Labels : arrivalDateLabel, departureDateLabel.

<ReservationWidget
  apiBaseUrl="http://localhost:5000"
  activityId="..."
  getAuthToken={...}
  mode="stay"
  showLoginWhenUnauthenticated
  onLoginSuccess={(token) => { /* stocker le token */ }}
  labels={{
    arrivalDateLabel: "Date d'arrivée",
    departureDateLabel: 'Date de départ',
  }}
/>

API attendue

Le composant envoie une requête POST vers {apiBaseUrl}/api/bookings avec :

• Headers : Content-Type: application/json, Authorization: Bearer <token>
• Body : { activity_id, starts_at, ends_at, user_datas? } (ISO pour les dates)

Réponse attendue : objet réservation (ex: { id, activity_id, starts_at, ends_at, status, ... }).

Exports

export { ReservationWidget, default } from 'pluracore-reservation-react-comp';
export type {
  ReservationWidgetProps,
  CreatedBooking,
  ReservationLabels,
  ReservationClassNames,
  ReservationStyles,
} from 'pluracore-reservation-react-comp';
export { defaultLabels } from 'pluracore-reservation-react-comp';

Build en local

cd pluracore-reservation-react-comp
yarn install
yarn build

Le build produit dist/ (CJS, ESM et .d.ts). Pour publier sur npm : npm publish (après avoir configuré repository et éventuellement un scope).