TS Appointment - Plugin WordPress de Réservation de Rendez-vous

📋 Présentation

TS Appointment est un plugin WordPress complet et professionnel pour la gestion des rendez-vous clients, avec synchronisation en temps réel avec Google Agenda. Entièrement personnalisable et intégrée à votre site WordPress.

✨ Caractéristiques principales

• 📅 Système de réservation complet - Interface intuitive et responsive avec révélation progressive
• 🔄 Synchronisation Google Calendar - Synchronisation bidirectionnelle en temps réel automatique
• 📍 Lieux de rendez-vous configurables - Personnalisez vos lieux avec champs spécifiques par localisation
• 💰 Prix par lieu - Définissez un prix différent pour chaque lieu avec devise personnalisable
• 💱 Configuration monétaire - Symbole de devise et position personnalisables (€, $, etc.)
• 📱 100% Responsive - Optimisé pour mobile, tablette et desktop avec design moderne
• 🎨 Formulaire dynamique JSON - Créez vos champs personnalisés sans code, stockage en JSON
• 📧 Templates d'emails avancés - Personnalisation complète avec placeholders et logique conditionnelle
• ⏰ Gestion intelligente des créneaux - Créneaux disponibles par service avec vérification de disponibilité
• 🛡️ Protection anti-robot - Cloudflare Turnstile intégré
• 🔐 Sécurité renforcée - Nonces, HMAC tokens, validation stricte, permissions WordPress
• 🚀 API REST - Endpoints complets pour intégrations tierces
• 👨‍💼 Dashboard admin complet - Gestion, édition, logs d'emails, statistiques
• ✅ Confirmation d'annulation - Page de confirmation professionnelle avant annulation
• 🎯 Architecture moderne - Code optimisé, pas de champs hardcodés, extensible

🚀 Installation

Prérequis

• WordPress 5.0+
• PHP 7.2+
• MySQL 5.5+

Installation manuelle

1. Téléchargez le fichier ZIP du plugin
2. Allez à Tableau de bord → Extensions → Ajouter
3. Cliquez sur Importer une extension
4. Choisissez le fichier ZIP et cliquez sur Installer
5. Activez le plugin
6. Les tables de base de données seront créées automatiquement

Désinstallation

⚠️ Attention: La suppression du plugin entraînera la suppression définitive de toutes les données :

• Toutes les tables de la base de données (rendez-vous, services, créneaux, etc.)
• Tous les paramètres et configurations
• Les tokens Google Calendar

Cette action est irréversible. Assurez-vous d'avoir sauvegardé vos données si nécessaire avant de supprimer le plugin.

⚙️ Configuration

Accès au panneau d'administration

Après l'activation, un nouveau menu Rendez-vous apparaît dans le menu WordPress.

Configuration initiale

1. Allez à Rendez-vous → Paramètres
2. Remplissez les informations de votre entreprise :
   • Nom
   • Email
   • Téléphone
   • Adresse
3. Configurez les paramètres des rendez-vous :
   • Fuseau horaire
   • Nombre de jours max à l'avance
   • Délai minimum entre rendez-vous
   • Formats de date et d'heure
4. Personnalisez les couleurs

Configuration Google Calendar (optionnel)

Pour synchroniser automatiquement vos rendez-vous avec Google Agenda :

Configuration simplifiée :

• Allez à Rendez-vous → Paramètres → Google Calendar
• Cochez "Activer la synchronisation"
• Cliquez sur "Lier mon compte Google" et autorisez l’accès à votre Google Agenda
• Saisissez l'ID de votre calendrier si nécessaire

Remarque: des identifiants OAuth (Client ID et Client Secret) sont requis et doivent être créés dans Google Cloud Console.

Créer Client ID et Client Secret (Google OAuth)

• Ouvrir Google Cloud Console: https://console.cloud.google.com/
• Créer un projet (ou utiliser un projet existant).
• Activer l’écran de consentement OAuth: "APIs & Services" → "OAuth consent screen".
  • Type d’utilisateur: "External" (si des comptes Google externes) ou "Internal" (organisation).
  • Ajouter le scope: https://www.googleapis.com/auth/calendar
  • Enregistrer et publier (si nécessaire).
• Créer les identifiants OAuth: "APIs & Services" → "Credentials" → "Create Credentials" → "OAuth client ID".
  • Application type: "Web application".
  • Authorized redirect URIs: ajouter l’URL suivante (adapter votre domaine):
    • https://votresite.com/wp-admin/admin.php?page=ts-appointment-settings&action=google_callback
  • (Optionnel) Authorized JavaScript origins: https://votresite.com
• Copier le "Client ID" et le "Client Secret" générés.
• Dans WordPress: Rendez-vous → Paramètres → Google Calendar, coller le Client ID et le Client Secret, puis enregistrer.

Protection Cloudflare Turnstile (optionnel)

• Créez une paire de clés Turnstile (site key + secret key) sur le tableau de bord Cloudflare
• Dans WordPress : Rendez-vous → Paramètres → Sécurité, cochez "Activer Cloudflare Turnstile" et renseignez les clés
• Le widget s'affiche alors sur le formulaire public et chaque réservation est validée côté serveur avant création

📖 Utilisation

Pour les clients

Utilisez le shortcode pour afficher le formulaire de réservation sur une page :

[ts_appointment_form]

Pour l'administrateur

• Tableau de bord : Vue d'ensemble des rendez-vous
• Rendez-vous : Liste complète, édition, confirmation, annulation
• Paramètres : Configuration du plugin

Lieux et Formulaire personnalisés

Configuration des lieux

• Menu: Rendez-vous → Lieux
• Ajoutez des lieux personnalisés (ex: À distance, Au domicile du client, À notre bureau)
• Pour chaque lieu, configurez:
  • Label : nom affiché au client
  • Clé : identifiant unique (ex: remote, home, office)
  • Prix : montant spécifique à ce lieu
  • Affichage adresse : adresse de l'entreprise ou du client
  • Champs supplémentaires : ajoutez des champs spécifiques à chaque lieu (ex: lien Zoom pour "À distance")

Formulaire dynamique JSON

• Menu: Rendez-vous → Formulaire
• Architecture moderne : tous les champs sont stockés en JSON dans la colonne client_data
• Pas de champs hardcodés : ajoutez/supprimez des champs via l'interface sans modifier le code
• Types de champs disponibles :
  • text - Texte simple
  • email - Email avec validation
  • tel - Téléphone
  • number - Numérique
  • date - Sélecteur de date
  • time - Sélecteur d'heure
  • textarea - Texte multiligne
  • select - Liste déroulante (options séparées par |)
  • checkbox - Case à cocher
• Configuration par champ :
  • Clé unique (ex: client_name, client_email)
  • Label affiché
  • Placeholder
  • Obligatoire ou optionnel
• Champs système recommandés : client_name, client_email, client_phone pour compatibilité emails
• Les données sont automatiquement disponibles dans les templates d'emails via placeholders {client_name}, {client_email}, etc.

Migration automatique

• Si vous aviez des champs hardcodés dans une version antérieure, la migration s'effectue automatiquement
• Les données existantes sont préservées et converties en JSON lors de l'activation du plugin

Créneaux horaires

• Menu: Rendez-vous → Créneaux
• Planifiez les disponibilités par service
• Configuration :
  • Jour de la semaine (1-7, lundi-dimanche)
  • Heure de début et fin
  • Durée du créneau en minutes
  • Nombre maximum de rendez-vous simultanés
  • Actif/Inactif
• Les créneaux sont vérifiés en temps réel pour éviter les doubles réservations
• Synchronisation automatique avec Google Calendar pour bloquer les créneaux réservés

Templates d'emails personnalisables

• Menu: Rendez-vous → Emails
• 4 templates configurables :
  • Email client - nouvelle demande : envoyé au client après réservation (statut pending)
  • Email client - confirmation : envoyé quand l'admin confirme le rendez-vous
  • Email admin - nouvelle demande : notification admin pour nouvelle réservation
  • Email client - annulation : envoyé quand un rendez-vous est annulé

Placeholders disponibles

Tous les champs de votre formulaire JSON sont automatiquement disponibles :

• {client_name}, {client_email}, {client_phone} (champs système)
• {nom_du_champ} pour tout champ personnalisé
• {service_name}, {appointment_date}, {appointment_time}
• {location}, {business_name}, {business_address}
• {appointment_id}, {cancel_url}, {cancel_button}
• {reason} (pour annulation)

Logique conditionnelle

{if location==remote}Votre rendez-vous aura lieu en visioconférence{else}Rendez-vous en personne{endif}

Annulation avec confirmation

• Liens d'annulation sécurisés envoyés dans les emails (tokens HMAC)
• Page de confirmation professionnelle et responsive avant annulation
• Affichage des détails du rendez-vous
• Deux boutons : Retour ou Confirmer l'annulation
• Design moderne avec gradient et optimisation mobile
• Tokens valides jusqu'à la date du rendez-vous

Édition des rendez-vous

• Menu: Rendez-vous → Liste des rendez-vous
• Bouton "Modifier" sur chaque rendez-vous
• Formulaire d'édition dynamique basé sur le schéma JSON
• Modification de tous les champs client stockés en JSON
• Mise à jour du statut, date, heure, type de rendez-vous
• Synchronisation automatique avec Google Calendar en cas de modification

Logs d'emails

• Menu: Rendez-vous → Email Logs
• Historique complet de tous les emails envoyés
• Détails : date, type, destinataire, sujet, statut
• Actions disponibles :
  • Voir : afficher le contenu complet de l'email (sujet, body HTML, contexte)
  • Edit Appoint. : modifier le rendez-vous associé
  • Renvoyer : renvoyer l'email en cas d'échec
• Utile pour déboguer les problèmes d'envoi d'emails

Paramètres monétaires

• Symbole de devise: configurez le symbole monétaire (€, $, £, etc.) dans Paramètres
• Position: choisissez si le symbole s'affiche à gauche ou à droite du montant
• Les prix sont définis par lieu pour chaque service

Formats Date / Heure

• Format de date : personnalisez l'affichage (ex: j/m/Y ou Y-m-d)
• Format d'heure : 24h (H:i) ou 12h (g:i A)
• Période de réservation : fixez le nombre de jours maximum à l'avance

Créer des services

Avant qu'un client puisse réserver, créez au moins un service :

• Dans l'admin : menu Rendez-vous → Services pour ajouter/supprimer un service
• Définissez un prix différent par lieu
• Cochez "Actif" pour qu'il apparaisse côté client
• Par code : voir la section Développement ci-dessous

🎨 Interface utilisateur

Révélation progressive (Progressive Reveal)

Le formulaire de réservation utilise une interface moderne avec révélation progressive :

1. Sélection du service → révèle les lieux disponibles
2. Choix du lieu → affiche les champs spécifiques au lieu + date
3. Sélection de la date → charge et affiche les créneaux disponibles
4. Choix du créneau → révèle les informations client
5. Remplissage du formulaire → affiche le prix et le bouton de réservation

Optimisations UX

• Auto-scroll : défilement automatique vers les nouveaux champs révélés
• Focus automatique : premier champ focusé automatiquement
• Mobile-first : design adaptatif avec breakpoints optimisés
• Chargement dynamique : les créneaux sont chargés via AJAX
• Feedback visuel : messages de succès/erreur clairs
• Validation en temps réel : vérification des champs avant soumission

💻 Développement

Créer un service par code

$service_id = TS_Appointment_Database::insert_service(array(
    'name' => 'Consultation',
    'description' => 'Consultation professionnelle de 1 heure',
    'duration' => 60,
    'price' => wp_json_encode(array('on_site' => 50, 'remote' => 30, 'home' => 80)),
    'active' => 1,
));

Accéder aux données client (JSON)

Toutes les données client sont stockées dans la colonne client_data au format JSON. Utilisez le helper :

// Récupérer une valeur client
$client_name = TS_Appointment_Email::get_client_value($appointment, 'client_name');
$client_email = TS_Appointment_Email::get_client_value($appointment, 'client_email');
$custom_field = TS_Appointment_Email::get_client_value($appointment, 'ma_cle_personnalisee');

// Le helper vérifie d'abord le JSON client_data, puis les colonnes directes (rétrocompatibilité)

Ajouter des champs au formulaire par code

// Récupérer le schéma actuel
$form_schema = json_decode(get_option('ts_appointment_form_schema'), true);

// Ajouter un champ
$form_schema[] = array(
    'key' => 'company',
    'label' => 'Entreprise',
    'type' => 'text',
    'placeholder' => 'Nom de votre entreprise',
    'required' => false
);

// Sauvegarder
update_option('ts_appointment_form_schema', wp_json_encode($form_schema));

Ajouter des créneaux horaires

// Lundi de 9h à 18h (jour_of_week: 1 = lundi, ... 7 = dimanche)
TS_Appointment_Database::insert_slot(array(
    'service_id' => $service_id,
    'day_of_week' => 1,
    'start_time' => '09:00',
    'end_time' => '18:00',
    'max_appointments' => 1,
    'active' => 1,
));

API REST

Récupérer les services

GET /wp-json/ts-appointment/v1/services

Récupérer les créneaux disponibles

GET /wp-json/ts-appointment/v1/available-slots?service_id=1&date=2024-01-20