codymaster 4.1.4 → 4.3.0

package/skills/cm-growth-hacking/templates/bottom-sheet.js

@@ -0,0 +1,269 @@
+/**
+ * CM Growth Hacking — BottomSheetEngine
+ * 
+ * Universal bottom sheet component.
+ * Create, show, hide, swipe-to-dismiss, multi-step content.
+ * Zero dependencies.
+ * 
+ * Usage:
+ *   const sheet = new BottomSheetEngine({
+ *     id: 'booking',
+ *     size: 'standard',
+ *     content: '<h3>Đặt Lịch</h3>...',
+ *     backdrop: false,
+ *     onDismiss: () => trackEngagement('cro_sheet_dismissed'),
+ *     onShow: () => trackEngagement('cro_sheet_shown'),
+ *   });
+ *   sheet.show();
+ */
+
+(function () {
+  'use strict';
+
+  const SWIPE_THRESHOLD = 80;    // px to trigger dismiss
+  const VELOCITY_THRESHOLD = 0.5; // px/ms for fast swipe
+
+  class BottomSheetEngine {
+    constructor(config) {
+      this.config = {
+        id: config.id || 'eng-sheet-' + Date.now(),
+        size: config.size || 'standard',       // compact | standard | full
+        content: config.content || '',
+        backdrop: config.backdrop ?? false,     // show backdrop overlay
+        dismissible: config.dismissible ?? true,
+        swipeToDismiss: config.swipeToDismiss ?? true,
+        closeButton: config.closeButton ?? true,
+        ariaLabel: config.ariaLabel || 'Dialog',
+        desktopPosition: config.desktopPosition || 'center', // center | right
+        onDismiss: config.onDismiss || null,
+        onShow: config.onShow || null,
+      };
+
+      this.el = null;
+      this.backdropEl = null;
+      this.isVisible = false;
+      this._previousFocus = null;
+      this._shownAt = null;
+
+      // Touch tracking
+      this._startY = 0;
+      this._startTime = 0;
+      this._currentY = 0;
+
+      this._build();
+    }
+
+    // ─── DOM Construction ───────────────────────────────
+    _build() {
+      // Backdrop
+      if (this.config.backdrop) {
+        this.backdropEl = document.createElement('div');
+        this.backdropEl.className = 'eng-backdrop';
+        this.backdropEl.dataset.sheetId = this.config.id;
+        if (this.config.dismissible) {
+          this.backdropEl.addEventListener('click', () => this.hide());
+        }
+      }
+
+      // Sheet
+      this.el = document.createElement('div');
+      this.el.className = `eng-sheet eng-sheet--${this.config.size}`;
+      if (this.config.desktopPosition === 'right') {
+        this.el.classList.add('eng-sheet--desktop-right');
+      }
+      this.el.dataset.sheetId = this.config.id;
+      this.el.setAttribute('role', 'dialog');
+      this.el.setAttribute('aria-modal', this.config.backdrop ? 'true' : 'false');
+      this.el.setAttribute('aria-label', this.config.ariaLabel);
+
+      const inner = document.createElement('div');
+      inner.className = 'eng-sheet__inner';
+
+      // Handle
+      const handle = document.createElement('div');
+      handle.className = 'eng-sheet__handle';
+      handle.setAttribute('aria-hidden', 'true');
+      const handleBar = document.createElement('div');
+      handleBar.className = 'eng-sheet__handle-bar';
+      handle.appendChild(handleBar);
+      inner.appendChild(handle);
+
+      // Close button
+      if (this.config.closeButton && this.config.dismissible) {
+        const close = document.createElement('button');
+        close.className = 'eng-sheet__close';
+        close.setAttribute('aria-label', 'Đóng');
+        close.textContent = '✕';
+        close.addEventListener('click', () => this.hide());
+        inner.appendChild(close);
+      }
+
+      // Content
+      this._contentEl = document.createElement('div');
+      this._contentEl.className = 'eng-sheet__content';
+      this._contentEl.innerHTML = this.config.content;
+      inner.appendChild(this._contentEl);
+
+      this.el.appendChild(inner);
+
+      // Touch events for swipe-to-dismiss
+      if (this.config.swipeToDismiss) {
+        this._initSwipe(handle);
+      }
+
+      // Keyboard: Escape to close
+      if (this.config.dismissible) {
+        this._onKeyDown = (e) => {
+          if (e.key === 'Escape' && this.isVisible) {
+            this.hide();
+          }
+        };
+        document.addEventListener('keydown', this._onKeyDown);
+      }
+    }
+
+    // ─── Swipe-to-Dismiss ───────────────────────────────
+    _initSwipe(handle) {
+      handle.addEventListener('touchstart', (e) => {
+        this._startY = e.touches[0].clientY;
+        this._startTime = Date.now();
+        this.el.classList.add('dragging');
+      }, { passive: true });
+
+      handle.addEventListener('touchmove', (e) => {
+        const dy = e.touches[0].clientY - this._startY;
+        this._currentY = dy;
+        if (dy > 0) {
+          // Only allow downward drag
+          this.el.style.transform = `translateY(${dy}px)`;
+        }
+      }, { passive: true });
+
+      handle.addEventListener('touchend', () => {
+        this.el.classList.remove('dragging');
+        const elapsed = Date.now() - this._startTime;
+        const velocity = this._currentY / elapsed; // px/ms
+
+        if (this._currentY > SWIPE_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
+          this.hide();
+        } else {
+          // Snap back
+          this.el.style.transform = '';
+          requestAnimationFrame(() => {
+            this.el.classList.add('active');
+          });
+        }
+        this._currentY = 0;
+      }, { passive: true });
+    }
+
+    // ─── Public API ─────────────────────────────────────
+
+    show() {
+      if (this.isVisible) return;
+
+      this._previousFocus = document.activeElement;
+      this._shownAt = Date.now();
+
+      // Append to DOM
+      if (this.backdropEl) document.body.appendChild(this.backdropEl);
+      document.body.appendChild(this.el);
+
+      // Trigger animation (double rAF for initial paint)
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (this.backdropEl) this.backdropEl.classList.add('active');
+          this.el.classList.add('active');
+          this.el.style.transform = '';
+        });
+      });
+
+      this.isVisible = true;
+
+      // Focus trap: focus the sheet
+      const firstFocusable = this.el.querySelector('button, a, input, select, textarea');
+      if (firstFocusable) firstFocusable.focus();
+
+      if (typeof this.config.onShow === 'function') {
+        this.config.onShow(this);
+      }
+    }
+
+    hide() {
+      if (!this.isVisible) return;
+
+      if (this.backdropEl) this.backdropEl.classList.remove('active');
+      this.el.classList.remove('active');
+      this.el.style.transform = 'translateY(100%)';
+
+      this.isVisible = false;
+
+      const visibleDuration = this._shownAt ? Date.now() - this._shownAt : 0;
+
+      // Remove from DOM after animation
+      setTimeout(() => {
+        if (this.backdropEl && this.backdropEl.parentNode) {
+          this.backdropEl.remove();
+        }
+        if (this.el.parentNode) {
+          this.el.remove();
+        }
+      }, 400);
+
+      // Restore focus
+      if (this._previousFocus) {
+        this._previousFocus.focus();
+      }
+
+      if (typeof this.config.onDismiss === 'function') {
+        this.config.onDismiss(this, visibleDuration);
+      }
+    }
+
+    setContent(html) {
+      if (this._contentEl) {
+        this._contentEl.innerHTML = html;
+      }
+    }
+
+    setSize(size) {
+      this.el.classList.remove('eng-sheet--compact', 'eng-sheet--standard', 'eng-sheet--full');
+      this.el.classList.add(`eng-sheet--${size}`);
+    }
+
+    destroy() {
+      this.hide();
+      if (this._onKeyDown) {
+        document.removeEventListener('keydown', this._onKeyDown);
+      }
+      this.el = null;
+      this.backdropEl = null;
+    }
+  }
+
+  // ─── Toast Helper ───────────────────────────────────
+  function showToast(type, message, duration) {
+    const toast = document.createElement('div');
+    toast.className = `eng-toast eng-toast--${type}`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        toast.classList.add('active');
+      });
+    });
+
+    const autoDismiss = duration || (type === 'success' ? 4000 : type === 'error' ? 8000 : 5000);
+
+    setTimeout(() => {
+      toast.classList.remove('active');
+      setTimeout(() => toast.remove(), 300);
+    }, autoDismiss);
+  }
+
+  // ─── Export ─────────────────────────────────────────
+  window.BottomSheetEngine = BottomSheetEngine;
+  window.showEngToast = showToast;
+
+})();

package/skills/cm-growth-hacking/templates/calendar-cta.js

@@ -0,0 +1,213 @@
+/**
+ * CM Growth Hacking — Calendar CTA
+ * 
+ * Post-action calendar buttons: Google Calendar deep link + ICS download.
+ * Smart device routing: iOS → ICS, Android → GCal, Desktop → both.
+ * 
+ * Kế thừa logic từ cm-booking-calendar/calendar-export.js
+ * 
+ * Usage:
+ *   const html = CalendarCTA.render(event, config);
+ *   sheet.setContent(html);
+ *   
+ *   CalendarCTA.addToGoogleCal(event, config);
+ *   CalendarCTA.downloadICS(event, config);
+ *   CalendarCTA.autoRoute(event, config); // device-aware
+ */
+
+(function () {
+  'use strict';
+
+  const CalendarCTA = {
+
+    // ─── Device Detection ─────────────────────────────
+    detectDevice() {
+      const ua = navigator.userAgent;
+      if (/iPhone|iPad|iPod/.test(ua)) return 'ios';
+      if (/Android/.test(ua)) return 'android';
+      return 'desktop';
+    },
+
+    // ─── Google Calendar Deep Link ────────────────────
+    buildGoogleCalUrl(event, config) {
+      const startDate = new Date(event.date + 'T' + (event.time || '09:00'));
+      const endDate = new Date(startDate.getTime() + (config.duration || 60) * 60 * 1000);
+
+      const formatGCal = (d) => d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+
+      const description = [
+        event.description || event.service || '',
+        '',
+        config.clinicName ? '📍 ' + config.clinicName : '',
+        config.address ? '📌 ' + config.address : '',
+        config.phone ? '📞 ' + config.phone : '',
+        config.mapsUrl ? '🗺️ ' + config.mapsUrl : '',
+        '',
+        config.preparation ? '⚠️ Lưu ý: ' + config.preparation : '',
+      ].filter(Boolean).join('\n');
+
+      const params = new URLSearchParams({
+        action: 'TEMPLATE',
+        text: event.title || (event.service + ' — ' + (config.clinicName || '')),
+        dates: formatGCal(startDate) + '/' + formatGCal(endDate),
+        details: description,
+        location: config.address || '',
+        sf: 'true',
+        output: 'xml',
+      });
+
+      return 'https://calendar.google.com/calendar/render?' + params.toString();
+    },
+
+    addToGoogleCal(event, config) {
+      const url = this.buildGoogleCalUrl(event, config);
+      window.open(url, '_blank', 'noopener');
+    },
+
+    // ─── ICS File Generation (RFC 5545) ───────────────
+    buildICSContent(event, config) {
+      const uid = Date.now() + '-' + Math.random().toString(36).substr(2, 9) + '@' + (window.location.hostname || 'cm-growth-hacking');
+
+      const startDate = new Date(event.date + 'T' + (event.time || '09:00'));
+      const endDate = new Date(startDate.getTime() + (config.duration || 60) * 60 * 1000);
+      const now = new Date();
+
+      const formatICS = (d) => d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+
+      const escapeICS = (str) => (str || '').replace(/\n/g, '\\n').replace(/,/g, '\\,').replace(/;/g, '\\;');
+
+      const description = escapeICS([
+        event.description || event.service || '',
+        '',
+        config.clinicName ? '📍 ' + config.clinicName : '',
+        config.address ? '📌 ' + config.address : '',
+        config.phone ? '📞 ' + config.phone : '',
+        config.preparation ? '⚠️ ' + config.preparation : '',
+      ].filter(Boolean).join('\n'));
+
+      const lines = [
+        'BEGIN:VCALENDAR',
+        'VERSION:2.0',
+        'PRODID:-//CMGrowthHacking//Calendar//VI',
+        'CALSCALE:GREGORIAN',
+        'METHOD:PUBLISH',
+        'BEGIN:VEVENT',
+        'UID:' + uid,
+        'DTSTAMP:' + formatICS(now),
+        'DTSTART:' + formatICS(startDate),
+        'DTEND:' + formatICS(endDate),
+        'SUMMARY:' + escapeICS(event.title || (event.service + ' — ' + (config.clinicName || ''))),
+        'DESCRIPTION:' + description,
+        'LOCATION:' + escapeICS(config.address || ''),
+      ];
+
+      if (config.mapsUrl) {
+        lines.push('URL:' + config.mapsUrl);
+      }
+
+      // Add reminders (VALARM)
+      const reminders = config.reminderMinutes || [1440, 120]; // 1 day + 2h
+      reminders.forEach(function (minutes) {
+        const reminderText = minutes >= 1440
+          ? 'Nhắc trước ' + (minutes / 1440) + ' ngày'
+          : minutes >= 60
+            ? 'Nhắc trước ' + (minutes / 60) + ' giờ'
+            : 'Nhắc trước ' + minutes + ' phút';
+
+        lines.push(
+          'BEGIN:VALARM',
+          'TRIGGER:-PT' + minutes + 'M',
+          'ACTION:DISPLAY',
+          'DESCRIPTION:' + escapeICS((event.title || event.service) + ' — ' + reminderText),
+          'END:VALARM'
+        );
+      });
+
+      lines.push('END:VEVENT', 'END:VCALENDAR');
+
+      return lines.join('\r\n');
+    },
+
+    downloadICS(event, config) {
+      const content = this.buildICSContent(event, config);
+      const filename = (event.service || 'appointment').replace(/\s+/g, '-').toLowerCase() + '.ics';
+
+      const blob = new Blob([content], { type: 'text/calendar;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
+
+    // ─── Auto-Route by Device ─────────────────────────
+    autoRoute(event, config) {
+      const device = this.detectDevice();
+      if (device === 'ios') {
+        this.downloadICS(event, config);
+      } else {
+        this.addToGoogleCal(event, config);
+      }
+    },
+
+    // ─── Render Calendar CTA HTML ─────────────────────
+    render(event, config) {
+      const device = this.detectDevice();
+      let buttonsHTML = '';
+
+      if (device === 'ios') {
+        buttonsHTML = '<button class="eng-btn eng-btn--primary eng-btn--full" data-cal-action="ics">'
+          + '📥 Thêm vào Apple Calendar</button>';
+      } else if (device === 'android') {
+        buttonsHTML = '<button class="eng-btn eng-btn--primary eng-btn--full" data-cal-action="gcal">'
+          + '📅 Thêm vào Google Calendar</button>';
+      } else {
+        buttonsHTML = '<button class="eng-btn eng-btn--gcal" data-cal-action="gcal">'
+          + '📅 Google Calendar</button>'
+          + '<button class="eng-btn eng-btn--ics" data-cal-action="ics">'
+          + '📥 Tải file lịch (.ics)</button>';
+      }
+
+      const reminderHours = config.reminderMinutes
+        ? Math.round(config.reminderMinutes[0] / 60)
+        : 24;
+
+      const html = '<div class="eng-content-calendar">'
+        + '<div class="eng-content__icon">✅</div>'
+        + '<h3 class="eng-content__title">' + (config.successTitle || 'Thành công!') + '</h3>'
+        + '<p class="eng-content__subtitle">' + (config.successSubtitle || 'Thêm vào lịch để không quên nhé') + '</p>'
+        + '<div class="eng-calendar-buttons">' + buttonsHTML + '</div>'
+        + '<p class="eng-content__benefit">💡 Lịch sẽ tự nhắc bạn trước '
+        + reminderHours + 'h — hoàn toàn miễn phí</p>'
+        + '</div>';
+
+      return html;
+    },
+
+    // ─── Attach Click Handlers ────────────────────────
+    attachHandlers(container, event, config, onAdd) {
+      const self = this;
+      const buttons = container.querySelectorAll('[data-cal-action]');
+      buttons.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          const action = btn.dataset.calAction;
+          if (action === 'gcal') {
+            self.addToGoogleCal(event, config);
+          } else if (action === 'ics') {
+            self.downloadICS(event, config);
+          }
+          if (typeof onAdd === 'function') {
+            onAdd(action);
+          }
+        });
+      });
+    },
+  };
+
+  // ─── Export ─────────────────────────────────────────
+  window.CalendarCTA = CalendarCTA;
+
+})();

package/skills/cm-growth-hacking/templates/tracking-events.js

@@ -0,0 +1,211 @@
+/**
+ * CM Growth Hacking — Tracking Events
+ * 
+ * Engagement-specific dataLayer push helpers.
+ * Compatible with cm-ads-tracker GTM architecture.
+ * 
+ * Usage:
+ *   trackEngagement('cro_sheet_shown', { sheet_type: 'booking', trigger_type: 'scroll' });
+ *   trackEngagement('cro_booking_submit', { content_name: 'Khám thai', value: 500000 });
+ *   trackEngagement('cro_calendar_add', { calendar_type: 'gcal' });
+ */
+
+(function () {
+  'use strict';
+
+  // ─── UUID Generator ─────────────────────────────────
+  function generateUUID() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = Math.random() * 16 | 0;
+      var v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
+  }
+
+  // ─── SHA256 Hash ────────────────────────────────────
+  function sha256Hash(value) {
+    if (typeof crypto === 'undefined' || !crypto.subtle) {
+      return Promise.resolve('');
+    }
+    var encoder = new TextEncoder();
+    var data = encoder.encode(value.toLowerCase().trim());
+    return crypto.subtle.digest('SHA-256', data).then(function (hash) {
+      return Array.from(new Uint8Array(hash))
+        .map(function (b) { return b.toString(16).padStart(2, '0'); })
+        .join('');
+    });
+  }
+
+  function hashPhone(phone) {
+    var digits = (phone || '').replace(/\D/g, '');
+    return sha256Hash(digits);
+  }
+
+  // ─── Core Tracker ───────────────────────────────────
+  function trackEngagement(eventName, data) {
+    var payload = {
+      event: eventName,
+      event_id: generateUUID(),
+      page_path: window.location.pathname,
+      page_url: window.location.href,
+      timestamp: Date.now(),
+    };
+
+    // Merge extra data
+    if (data && typeof data === 'object') {
+      for (var key in data) {
+        if (data.hasOwnProperty(key)) {
+          payload[key] = data[key];
+        }
+      }
+    }
+
+    // Push to GTM dataLayer
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push(payload);
+
+    // Store locally for debug/analytics
+    _storeLocal(payload);
+
+    return payload;
+  }
+
+  // ─── Local Analytics Storage ────────────────────────
+  var LOCAL_KEY = 'eng_analytics';
+  var MAX_LOCAL_EVENTS = 100;
+
+  function _storeLocal(payload) {
+    try {
+      var stored = JSON.parse(localStorage.getItem(LOCAL_KEY) || '[]');
+      stored.push({
+        event: payload.event,
+        page: payload.page_path,
+        time: new Date(payload.timestamp).toISOString(),
+        data: payload
+      });
+      // Keep max events
+      if (stored.length > MAX_LOCAL_EVENTS) {
+        stored.splice(0, stored.length - MAX_LOCAL_EVENTS);
+      }
+      localStorage.setItem(LOCAL_KEY, JSON.stringify(stored));
+    } catch (e) { /* noop */ }
+  }
+
+  // ─── Debug: Get Local Stats ─────────────────────────
+  function getEngagementStats() {
+    try {
+      var events = JSON.parse(localStorage.getItem(LOCAL_KEY) || '[]');
+      var stats = {};
+
+      events.forEach(function (e) {
+        var key = e.event;
+        if (!stats[key]) stats[key] = { count: 0, last: null, pages: {} };
+        stats[key].count++;
+        stats[key].last = e.time;
+        stats[key].pages[e.page] = (stats[key].pages[e.page] || 0) + 1;
+      });
+
+      console.table(stats);
+      return stats;
+    } catch (e) { return {}; }
+  }
+
+  // ─── Clear Local Stats ──────────────────────────────
+  function clearEngagementStats() {
+    try { localStorage.removeItem(LOCAL_KEY); }
+    catch (e) { /* noop */ }
+  }
+
+  // ─── Preset Event Helpers ───────────────────────────
+  var EngagementTracker = {
+    // Sheet lifecycle
+    sheetShown: function (sheetType, triggerType, extra) {
+      return trackEngagement('cro_sheet_shown', Object.assign({
+        sheet_type: sheetType,
+        trigger_type: triggerType,
+      }, extra || {}));
+    },
+
+    sheetDismissed: function (sheetType, method, timeVisible, interacted) {
+      return trackEngagement('cro_sheet_dismissed', {
+        sheet_type: sheetType,
+        dismiss_method: method,           // swipe | close_button | backdrop | escape
+        time_visible: timeVisible || 0,   // ms
+        interacted: !!interacted,
+      });
+    },
+
+    // Conversions
+    bookingSubmit: function (serviceName, value, currency, extra) {
+      return trackEngagement('cro_booking_submit', Object.assign({
+        content_name: serviceName,
+        value: value || 0,
+        currency: currency || 'VND',
+        source_sheet: true,
+      }, extra || {}));
+    },
+
+    calendarAdd: function (calendarType, serviceName, extra) {
+      return trackEngagement('cro_calendar_add', Object.assign({
+        calendar_type: calendarType,       // gcal | ics
+        content_name: serviceName,
+        device_type: _detectDeviceType(),
+      }, extra || {}));
+    },
+
+    leadCapture: function (contentName, triggerType, value, extra) {
+      return trackEngagement('cro_lead_capture', Object.assign({
+        content_name: contentName,
+        trigger_type: triggerType,
+        value: value || 0,
+        currency: 'VND',
+      }, extra || {}));
+    },
+
+    promoEngage: function (promoName, extra) {
+      return trackEngagement('cro_promo_engage', Object.assign({
+        content_name: promoName,
+      }, extra || {}));
+    },
+
+    surveyComplete: function (rating, hasFeedback, surveyType, extra) {
+      return trackEngagement('cro_survey_complete', Object.assign({
+        rating: rating,
+        has_feedback: !!hasFeedback,
+        survey_type: surveyType || 'post_service',
+      }, extra || {}));
+    },
+
+    chatInitiate: function (channel, triggerType, extra) {
+      return trackEngagement('cro_chat_initiate', Object.assign({
+        channel: channel,                  // zalo | messenger | phone | whatsapp
+        trigger_type: triggerType,
+      }, extra || {}));
+    },
+
+    reengagement: function (visitCount, extra) {
+      return trackEngagement('cro_reengagement', Object.assign({
+        visit_count: visitCount,
+      }, extra || {}));
+    },
+  };
+
+  function _detectDeviceType() {
+    var ua = navigator.userAgent;
+    if (/iPhone|iPad|iPod/.test(ua)) return 'ios';
+    if (/Android/.test(ua)) return 'android';
+    return 'desktop';
+  }
+
+  // ─── Export ─────────────────────────────────────────
+  window.trackEngagement = trackEngagement;
+  window.EngagementTracker = EngagementTracker;
+  window.getEngagementStats = getEngagementStats;
+  window.clearEngagementStats = clearEngagementStats;
+  window.sha256Hash = sha256Hash;
+  window.hashPhone = hashPhone;
+
+})();