codymaster 4.1.3 → 4.3.0

package/skills/cm-booking-calendar/templates/booking-form.html

@@ -0,0 +1,477 @@
+<!--
+  Booking Form Templates v1.0
+  3 variants: bottom-sheet, inline, standalone
+  Works with BookingCalendarEngine + calendar-export.js + reminder-config.js
+  
+  Required JS: calendar-engine.js, calendar-export.js, reminder-config.js
+  Required CSS: booking-form.css
+-->
+
+<!-- ============================================================ -->
+<!-- VARIANT 1: BOTTOM SHEET (Mobile-first popup) -->
+<!-- ============================================================ -->
+
+<!--
+  Usage:
+  1. Include this HTML in your page
+  2. Trigger with: document.getElementById('booking-sheet').classList.add('is-open');
+  3. Close with: document.getElementById('booking-sheet').classList.remove('is-open');
+-->
+
+<div class="booking-backdrop" id="booking-backdrop"></div>
+<div class="booking-sheet" id="booking-sheet" role="dialog" aria-modal="true" aria-label="Đặt lịch hẹn">
+    <div class="booking-handle"><span></span></div>
+    <div class="booking-header">
+        <div class="booking-header-info">
+            <span class="booking-icon" id="booking-icon">📋</span>
+            <div>
+                <h3 id="booking-title">Đặt Lịch Hẹn</h3>
+                <p id="booking-hint">Chúng tôi sẽ liên hệ bạn sớm nhất</p>
+            </div>
+        </div>
+        <button class="booking-close" id="booking-close" aria-label="Đóng">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
+    </div>
+
+    <!-- Booking Form -->
+    <form class="booking-form" id="booking-form" novalidate data-form-type="booking" data-industry="{{INDUSTRY_KEY}}"
+        onsubmit="window.submitBooking(event)">
+        <input type="hidden" name="url" value="">
+        <input type="hidden" name="formType" value="booking">
+        <input type="hidden" name="industry" value="{{INDUSTRY_KEY}}">
+
+        <!-- Phone (always required) -->
+        <div class="booking-field">
+            <label for="booking-phone">Số điện thoại <span class="required-mark">*</span></label>
+            <input type="tel" id="booking-phone" name="phone" placeholder="Nhập số điện thoại" required
+                autocomplete="tel" inputmode="numeric" pattern="0[0-9]{8,10}">
+        </div>
+
+        <!-- Name -->
+        <div class="booking-field">
+            <label for="booking-name">Họ và tên</label>
+            <input type="text" id="booking-name" name="name" placeholder="VD: Nguyễn Văn A" autocomplete="name">
+        </div>
+
+        <!-- Date Selection — Smart Chips -->
+        <div class="booking-field">
+            <label>Ngày muốn hẹn</label>
+            <div class="booking-date-chips" id="booking-date-chips">
+                <!-- Rendered dynamically by BookingCalendarEngine.getSmartDateChips() -->
+            </div>
+            <div class="booking-date-custom" id="booking-date-custom" hidden>
+                <input type="date" id="booking-date-input" name="dateCustom">
+            </div>
+            <input type="hidden" name="date" id="booking-date" value="">
+        </div>
+
+        <!-- Time Slots (shown after date selected) -->
+        <div class="booking-field" id="booking-time-field" hidden>
+            <label>Khung giờ</label>
+            <div class="booking-time-chips" id="booking-time-chips">
+                <!-- Rendered dynamically by BookingCalendarEngine.getTimeSlots() -->
+            </div>
+            <input type="hidden" name="timeSlot" id="booking-time" value="">
+        </div>
+
+        <!-- Service (customized per industry) -->
+        <div class="booking-field">
+            <label for="booking-service">Dịch vụ</label>
+            <select id="booking-service" name="service">
+                <option value="">— Chọn dịch vụ —</option>
+                <!-- Options populated per industry config -->
+            </select>
+        </div>
+
+        <!-- Note -->
+        <div class="booking-field">
+            <label for="booking-note">Ghi chú <span class="optional">(tuỳ chọn)</span></label>
+            <textarea id="booking-note" name="note" placeholder="VD: Muốn gặp bác sĩ cụ thể, có yêu cầu đặc biệt..."
+                rows="2"></textarea>
+        </div>
+
+        <!-- Google Maps Link (optional — shown if configured) -->
+        <div class="booking-maps-link" id="booking-maps-link" hidden>
+            <a href="{{GOOGLE_MAPS_URL}}" target="_blank" rel="noopener">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+                    <circle cx="12" cy="10" r="3" />
+                </svg>
+                Xem bản đồ — {{CLINIC_ADDRESS}}
+            </a>
+        </div>
+
+        <!-- Submit Button -->
+        <button type="submit" class="booking-submit" id="booking-submit">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 2L11 13"></path>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
+            Xác Nhận Đặt Lịch
+        </button>
+
+        <p class="booking-privacy">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+            </svg>
+            Thông tin được bảo mật. Chúng tôi sẽ liên hệ bạn sớm nhất.
+        </p>
+    </form>
+
+    <!-- ── Calendar CTA (shown AFTER successful submit) ── -->
+    <div class="booking-calendar-cta" id="booking-calendar-cta" hidden>
+        <div class="cta-success-icon">✅</div>
+        <p class="cta-title">Đặt lịch thành công!</p>
+        <p class="cta-subtitle">📅 Thêm vào lịch để không quên nhé!</p>
+        <div class="cta-buttons">
+            <button onclick="addToGoogleCal(window._lastBookedEvent, window._bookingConfig)"
+                class="booking-cal-btn booking-cal-btn--gcal" id="btn-gcal">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="4" width="18" height="18" rx="2" />
+                    <path d="M16 2v4M8 2v4M3 10h18" />
+                </svg>
+                Google Calendar
+            </button>
+            <button onclick="downloadICS(window._lastBookedEvent, window._bookingConfig)"
+                class="booking-cal-btn booking-cal-btn--ics" id="btn-ics">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                    <path d="M7 10l5 5 5-5" />
+                    <path d="M12 15V3" />
+                </svg>
+                Tải file lịch (.ics)
+            </button>
+        </div>
+        <p class="cta-benefit">💡 Lịch sẽ tự nhắc bạn trước — hoàn toàn miễn phí, không tốn SMS</p>
+    </div>
+</div>
+
+<!-- Toast Notification (shared with cm-google-form) -->
+<div class="form-toast" id="form-toast" role="alert" aria-live="polite" hidden>
+    <div class="form-toast-content">
+        <span class="form-toast-icon" id="form-toast-icon"></span>
+        <span class="form-toast-msg" id="form-toast-msg"></span>
+    </div>
+    <button class="form-toast-close" id="form-toast-close" aria-label="Đóng">×</button>
+</div>
+
+
+<!-- ============================================================ -->
+<!-- VARIANT 2: INLINE (Embedded in page content) -->
+<!-- ============================================================ -->
+
+<!--
+  Usage: Drop this directly in page body where you want the form
+  No backdrop needed, no bottom sheet animation
+-->
+
+<!--
+<div class="booking-inline">
+  <div class="booking-inline-header">
+    <span class="booking-icon">📅</span>
+    <div>
+      <h3>Đặt Lịch Hẹn</h3>
+      <p>Điền thông tin, chúng tôi sẽ liên hệ bạn</p>
+    </div>
+  </div>
+  <form class="booking-form" data-form-type="booking"
+        data-industry="{{INDUSTRY_KEY}}"
+        onsubmit="window.submitBooking(event)">
+    [Same form fields as Variant 1]
+  </form>
+</div>
+-->
+
+
+<!-- ============================================================ -->
+<!-- VARIANT 3: STANDALONE (Full-page booking) -->
+<!-- ============================================================ -->
+
+<!--
+  Usage: Dedicated /dat-lich or /booking page
+  Full-width form with appointment schedule display
+-->
+
+<!--
+<section class="booking-standalone">
+  <div class="booking-standalone-container">
+    <div class="booking-standalone-info">
+      <h1>Đặt Lịch Hẹn</h1>
+      <p>Chọn ngày giờ phù hợp — Chúng tôi sẽ xác nhận trong 30 phút</p>
+      
+      [Business info: address, hours, map]
+    </div>
+    <div class="booking-standalone-form">
+      <form class="booking-form" data-form-type="booking"
+            data-industry="{{INDUSTRY_KEY}}"
+            onsubmit="window.submitBooking(event)">
+        [Same form fields as Variant 1]
+      </form>
+    </div>
+  </div>
+</section>
+-->
+
+
+<!-- ============================================================ -->
+<!-- WIRING SCRIPT — Connect form to engine -->
+<!-- ============================================================ -->
+
+<script>
+    /**
+     * Booking Form Wiring Script
+     * Connects the HTML form to BookingCalendarEngine + calendar-export.js
+     * 
+     * Replace {{PLACEHOLDERS}} with actual values:
+     * - {{INDUSTRY_KEY}}: Industry key from reminder-config.js
+     * - {{CLINIC_NAME}}: Business name
+     * - {{CLINIC_ADDRESS}}: Business address
+     * - {{CLINIC_PHONE}}: Business phone
+     * - {{GOOGLE_MAPS_URL}}: Google Maps link
+     * - {{GOOGLE_SHEET_URL}}: Apps Script deployment URL (from cm-google-form)
+     */
+
+    (function () {
+        'use strict';
+
+        // ── CONFIG (customize per deployment) ──
+        const INDUSTRY_KEY = '{{INDUSTRY_KEY}}';    // e.g., 'obgyn', 'dental'
+        const CLINIC_NAME = '{{CLINIC_NAME}}';
+        const CLINIC_ADDRESS = '{{CLINIC_ADDRESS}}';
+        const CLINIC_PHONE = '{{CLINIC_PHONE}}';
+        const GOOGLE_MAPS_URL = '{{GOOGLE_MAPS_URL}}';
+
+        // Load industry config
+        const industryConfig = typeof getIndustryPattern === 'function'
+            ? getIndustryPattern(INDUSTRY_KEY)
+            : null;
+
+        if (!industryConfig) {
+            console.warn('[Booking Calendar] Industry pattern not found:', INDUSTRY_KEY);
+            return;
+        }
+
+        // Merge clinic info into config
+        const config = {
+            ...industryConfig,
+            clinicName: CLINIC_NAME,
+            clinicAddress: CLINIC_ADDRESS,
+            clinicPhone: CLINIC_PHONE,
+            googleMapsUrl: GOOGLE_MAPS_URL || buildMapsSearchUrl(CLINIC_NAME, CLINIC_ADDRESS),
+        };
+
+        // Store globally for calendar export functions
+        window._bookingConfig = config;
+
+        // Init engine
+        const engine = new BookingCalendarEngine(config);
+
+        // ── Render Date Chips ──
+        const chipsContainer = document.getElementById('booking-date-chips');
+        if (chipsContainer) {
+            const chips = engine.getSmartDateChips();
+            chipsContainer.innerHTML = '';
+
+            chips.forEach(chip => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = `date-chip ${chip.isRecommended ? 'is-recommended' : ''}`;
+                btn.innerHTML = `
+        <span class="date-chip-label">${chip.label}</span>
+        <span class="date-chip-sub">${chip.subLabel}</span>
+      `;
+                btn.addEventListener('click', () => selectDateChip(btn, chip));
+                chipsContainer.appendChild(btn);
+            });
+
+            // Add "Choose other date" chip
+            const customChip = document.createElement('button');
+            customChip.type = 'button';
+            customChip.className = 'date-chip date-chip--custom';
+            customChip.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
+      </svg>
+      <span class="date-chip-label">Ngày khác</span>
+    `;
+            customChip.addEventListener('click', () => {
+                document.querySelectorAll('.date-chip').forEach(c => c.classList.remove('is-active'));
+                customChip.classList.add('is-active');
+                document.getElementById('booking-date-custom').hidden = false;
+                document.getElementById('booking-date').value = '';
+            });
+            chipsContainer.appendChild(customChip);
+        }
+
+        function selectDateChip(btn, chip) {
+            document.querySelectorAll('.date-chip').forEach(c => c.classList.remove('is-active'));
+            btn.classList.add('is-active');
+            document.getElementById('booking-date-custom').hidden = true;
+            document.getElementById('booking-date').value = chip.dateVN;
+
+            // Show time slots
+            renderTimeSlots(chip.date);
+        }
+
+        function renderTimeSlots(date) {
+            const timeField = document.getElementById('booking-time-field');
+            const timeContainer = document.getElementById('booking-time-chips');
+            if (!timeField || !timeContainer) return;
+
+            const slots = engine.getTimeSlots(date);
+            timeContainer.innerHTML = '';
+
+            slots.forEach(slot => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'time-chip';
+                btn.innerHTML = `${slot.label}<br><span style="font-size:0.7em;opacity:0.7">${slot.subLabel}</span>`;
+                btn.addEventListener('click', () => {
+                    document.querySelectorAll('.time-chip').forEach(c => c.classList.remove('is-active'));
+                    btn.classList.add('is-active');
+                    document.getElementById('booking-time').value = slot.value;
+                });
+                timeContainer.appendChild(btn);
+            });
+
+            timeField.hidden = false;
+        }
+
+        // ── Booking Sheet Toggle ──
+        const backdrop = document.getElementById('booking-backdrop');
+        const sheet = document.getElementById('booking-sheet');
+        const closeBtn = document.getElementById('booking-close');
+
+        function openBooking(options = {}) {
+            if (!backdrop || !sheet) return;
+
+            // Update hidden URL field
+            const urlField = sheet.querySelector('input[name="url"]');
+            if (urlField) urlField.value = window.location.href;
+
+            // Customize header per options
+            if (options.icon) document.getElementById('booking-icon').textContent = options.icon;
+            if (options.title) document.getElementById('booking-title').textContent = options.title;
+            if (options.hint) document.getElementById('booking-hint').textContent = options.hint;
+
+            backdrop.classList.add('is-visible');
+            sheet.classList.add('is-open');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeBooking() {
+            if (!backdrop || !sheet) return;
+            backdrop.classList.remove('is-visible');
+            sheet.classList.remove('is-open');
+            document.body.style.overflow = '';
+        }
+
+        if (closeBtn) closeBtn.addEventListener('click', closeBooking);
+        if (backdrop) backdrop.addEventListener('click', closeBooking);
+
+        // Expose globally
+        window.openBooking = openBooking;
+        window.closeBooking = closeBooking;
+
+        // ── Form Submit Handler ──
+        window.submitBooking = function (event) {
+            event.preventDefault();
+            const form = event.target;
+            const formData = new FormData(form);
+            const data = Object.fromEntries(formData.entries());
+
+            // Phone validation
+            if (!/^0\d{8,10}$/.test(data.phone)) {
+                if (typeof window.showFormToast === 'function') {
+                    window.showFormToast('Số điện thoại không hợp lệ', 'error');
+                }
+                return;
+            }
+
+            // Build calendar event from form data
+            const bookedEvent = {
+                index: 0,
+                title: data.service || config.name,
+                desc: config.reminderContent?.preparation || '',
+                date: new Date(data.date?.split('/').reverse().join('-') + 'T00:00:00'),
+                dateISO: data.date?.split('/').reverse().join('').replace(/-/g, '') || '',
+                dateVN: data.date || '',
+                timeStr: data.timeSlot === 'morning' ? '08:00'
+                    : data.timeSlot === 'afternoon' ? '14:00'
+                        : data.timeSlot === 'evening' ? '18:00' : '08:00',
+                isPast: false,
+                isNext: true,
+                status: 'next',
+            };
+
+            // Store for calendar export
+            window._lastBookedEvent = bookedEvent;
+
+            // Submit to Google Sheet (via cm-google-form's submitToGoogleSheet)
+            if (typeof window.submitToGoogleSheet === 'function') {
+                window.submitToGoogleSheet(event);
+            }
+
+            // Track booking submit (cm-ads-tracker integration)
+            if (typeof dataLayer !== 'undefined') {
+                dataLayer.push({
+                    event: 'cro_booking_submit',
+                    event_id: (typeof _generateUUID === 'function') ? _generateUUID() : Date.now().toString(),
+                    content_name: data.service || config.name,
+                    value: config.conversionValue || 0,
+                    currency: 'VND',
+                    booking_date: data.date,
+                    booking_time: data.timeSlot,
+                    industry: config.key,
+                });
+            }
+
+            // Show Calendar CTA
+            const formEl = document.getElementById('booking-form');
+            const ctaEl = document.getElementById('booking-calendar-cta');
+            if (formEl && ctaEl) {
+                formEl.hidden = true;
+                ctaEl.hidden = false;
+
+                // Smart device detection for buttons
+                const device = detectDevice();
+                const gcalBtn = document.getElementById('btn-gcal');
+                const icsBtn = document.getElementById('btn-ics');
+                if (device === 'ios' && gcalBtn) gcalBtn.hidden = true;
+                if (device === 'android' && icsBtn) icsBtn.hidden = true;
+            }
+        };
+
+        // ── Google Maps Link ──
+        if (GOOGLE_MAPS_URL) {
+            const mapsEl = document.getElementById('booking-maps-link');
+            if (mapsEl) {
+                mapsEl.hidden = false;
+                const link = mapsEl.querySelector('a');
+                if (link) link.href = GOOGLE_MAPS_URL;
+            }
+        }
+
+        // ── Auto-set URL on custom date change ──
+        const dateInput = document.getElementById('booking-date-input');
+        if (dateInput) {
+            const tomorrow = new Date();
+            tomorrow.setDate(tomorrow.getDate() + 1);
+            dateInput.min = tomorrow.toISOString().split('T')[0];
+
+            dateInput.addEventListener('change', () => {
+                const d = new Date(dateInput.value + 'T00:00:00');
+                document.getElementById('booking-date').value =
+                    `${d.getDate().toString().padStart(2, '0')}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getFullYear()}`;
+                renderTimeSlots(d);
+            });
+        }
+
+    })();
+</script>