codymaster 4.8.0 → 7.0.0

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

@@ -1,477 +0,0 @@
-<!--
-  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>