codymaster 4.1.3 → 4.3.0

package/skills/cm-growth-hacking/calendar-integration.md

@@ -0,0 +1,264 @@
+# Calendar Integration
+
+> Kế thừa từ `cm-booking-calendar` skill. Focus vào post-engagement calendar CTA.
+> Google Calendar deep link + Apple Calendar ICS + smart device routing.
+
+---
+
+## 🎯 Purpose
+
+Sau khi user hoàn thành một action trong bottom sheet (đặt lịch, đăng ký event, nhận promo), hiển thị **Calendar CTA** để:
+
+1. **Giảm no-show 30-60%** — Calendar reminder thay SMS
+2. **Tăng commitment 40%** — Micro-action = tâm lý cam kết
+3. **Free reminder forever** — Không tốn SMS/ZNS
+4. **Google Maps built-in** — Navigate 1 chạm
+
+---
+
+## 📱 Smart Device Routing
+
+```
+User clicks "Add to Calendar"
+│
+├─ iOS detected (iPhone/iPad)
+│  └─ Download .ics file
+│  └─ iOS auto-opens Apple Calendar
+│
+├─ Android detected
+│  └─ Open Google Calendar deep link
+│  └─ Pre-filled event in new tab
+│
+└─ Desktop
+   └─ Show both options
+   └─ "Google Calendar" + "Tải file lịch (.ics)"
+```
+
+### Detection Logic
+
+```javascript
+function detectDevice() {
+  const ua = navigator.userAgent;
+  if (/iPhone|iPad|iPod/.test(ua)) return 'ios';
+  if (/Android/.test(ua)) return 'android';
+  return 'desktop';
+}
+
+function addToCalendar(event, config) {
+  const device = detectDevice();
+  if (device === 'ios') {
+    downloadICS(event, config);
+  } else if (device === 'android') {
+    addToGoogleCal(event, config);
+  } else {
+    // Desktop: show both options
+    showCalendarOptions(event, config);
+  }
+}
+```
+
+---
+
+## 📅 Google Calendar Deep Link
+
+### URL Structure
+
+```
+https://calendar.google.com/calendar/render?action=TEMPLATE
+&text={title}
+&dates={startISO}/{endISO}
+&details={description}
+&location={location}
+&sf=true
+&output=xml
+```
+
+### Building the URL
+
+```javascript
+function buildGoogleCalUrl(event, config) {
+  const formatDate = (d) => d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+  
+  const start = formatDate(new Date(event.date + 'T' + event.time));
+  const end = formatDate(new Date(new Date(event.date + 'T' + event.time).getTime() + 60 * 60 * 1000)); // +1h
+  
+  const description = [
+    event.description || '',
+    '',
+    `📍 ${config.clinicName}`,
+    `📌 ${config.address}`,
+    `📞 ${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: `${start}/${end}`,
+    details: description,
+    location: config.address || '',
+    sf: 'true',
+    output: 'xml',
+  });
+  
+  return `https://calendar.google.com/calendar/render?${params.toString()}`;
+}
+```
+
+---
+
+## 📥 ICS File Generation (Apple Calendar + Others)
+
+### RFC 5545 Format
+
+```javascript
+function buildICSContent(event, config) {
+  const uid = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}@${window.location.hostname}`;
+  const formatICSDate = (d) => d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+  
+  const start = new Date(event.date + 'T' + event.time);
+  const end = new Date(start.getTime() + 60 * 60 * 1000);
+  const now = new Date();
+  
+  const description = [
+    event.description || event.service,
+    '',
+    `📍 ${config.clinicName}`,
+    `📌 ${config.address}`,
+    `📞 ${config.phone}`,
+    config.preparation ? `⚠️ ${config.preparation}` : '',
+  ].filter(Boolean).join('\\n');
+  
+  let ics = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//CMGrowthHacking//Calendar//VI',
+    'CALSCALE:GREGORIAN',
+    'METHOD:PUBLISH',
+    'BEGIN:VEVENT',
+    `UID:${uid}`,
+    `DTSTAMP:${formatICSDate(now)}`,
+    `DTSTART:${formatICSDate(start)}`,
+    `DTEND:${formatICSDate(end)}`,
+    `SUMMARY:${event.title || event.service + ' — ' + config.clinicName}`,
+    `DESCRIPTION:${description}`,
+    `LOCATION:${config.address || ''}`,
+    config.mapsUrl ? `URL:${config.mapsUrl}` : '',
+  ];
+  
+  // Add reminders (VALARM)
+  const reminders = config.reminderMinutes || [1440, 120]; // 1 day + 2h
+  reminders.forEach(minutes => {
+    ics.push(
+      'BEGIN:VALARM',
+      'TRIGGER:-PT' + minutes + 'M',
+      'ACTION:DISPLAY',
+      `DESCRIPTION:${event.title || event.service} — ${getReminderText(minutes)}`,
+      'END:VALARM'
+    );
+  });
+  
+  ics.push('END:VEVENT', 'END:VCALENDAR');
+  
+  return ics.filter(Boolean).join('\r\n');
+}
+
+function getReminderText(minutes) {
+  if (minutes >= 1440) return `Nhắc trước ${minutes / 1440} ngày`;
+  if (minutes >= 60) return `Nhắc trước ${minutes / 60} giờ`;
+  return `Nhắc trước ${minutes} phút`;
+}
+```
+
+### Download Trigger
+
+```javascript
+function triggerICSDownload(content, filename) {
+  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 || 'appointment.ics';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+```
+
+---
+
+## 🗓️ Calendar CTA UI Pattern
+
+After successful form submission, swap bottom sheet content to calendar CTA:
+
+```javascript
+function showCalendarCTA(event, config) {
+  const device = detectDevice();
+  
+  let buttonsHTML = '';
+  
+  if (device === 'ios') {
+    buttonsHTML = `
+      <button onclick="downloadICS()" class="eng-btn eng-btn--primary eng-btn--full">
+        📥 Thêm vào Apple Calendar
+      </button>
+    `;
+  } else if (device === 'android') {
+    buttonsHTML = `
+      <button onclick="addToGoogleCal()" class="eng-btn eng-btn--primary eng-btn--full">
+        <img src="gcal-icon.svg" alt="" width="20"> Thêm vào Google Calendar
+      </button>
+    `;
+  } else {
+    buttonsHTML = `
+      <button onclick="addToGoogleCal()" class="eng-btn eng-btn--gcal">
+        <img src="gcal-icon.svg" alt="" width="20"> Google Calendar
+      </button>
+      <button onclick="downloadICS()" class="eng-btn eng-btn--ics">
+        📥 Tải file lịch (.ics)
+      </button>
+    `;
+  }
+  
+  return `
+    <div class="eng-content-calendar">
+      <div class="eng-content__icon">✅</div>
+      <h3 class="eng-content__title">Đặt lịch thành công!</h3>
+      <p class="eng-content__subtitle">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 ${config.reminderMinutes[0] / 60}h — hoàn toàn miễn phí
+      </p>
+    </div>
+  `;
+}
+```
+
+---
+
+## ⚙️ Configuration Defaults
+
+```javascript
+const CALENDAR_DEFAULTS = {
+  reminderMinutes: [1440, 120],    // 1 day + 2 hours before
+  duration: 60,                     // event duration in minutes
+  timezone: 'Asia/Ho_Chi_Minh',
+  providers: ['gcal', 'ics'],       // available calendar providers
+};
+```
+
+---
+
+## 🔗 Skill Inheritance
+
+| Feature | Source Skill | Reuse |
+|---------|-------------|-------|
+| `BookingCalendarEngine` class | `cm-booking-calendar/calendar-engine.js` | Full schedule generation for milestone-based industries |
+| Industry reminder configs | `cm-booking-calendar/reminder-config.js` | 20 industry presets with preparation instructions |
+| ICS export | `cm-booking-calendar/calendar-export.js` | Core ICS generation logic |
+| GCal deep link | `cm-booking-calendar/calendar-export.js` | URL builder |
+
+> 📌 **Rule:** If user needs full scheduling (milestones, follow-ups, multi-appointment), delegate to `cm-booking-calendar` skill. This module handles the **post-action calendar CTA** only.

package/skills/cm-growth-hacking/references/engagement-patterns.md

@@ -0,0 +1,346 @@
+# Engagement Patterns by Industry
+
+> Config-ready patterns cho 10+ ngành nghề.
+> Mỗi pattern = trigger + sheet + calendar + tracking config đầy đủ.
+
+---
+
+## 📋 Pattern Index
+
+| # | Industry | Key Pattern | Calendar? |
+|---|----------|-------------|-----------|
+| 1 | Healthcare / Phòng khám | Booking + Follow-up Reminder | ✅ |
+| 2 | Dental / Nha khoa | Booking + Periodic Reminder | ✅ |
+| 3 | Salon / Spa | Booking + Re-booking Nudge | ✅ |
+| 4 | Education / Đào tạo | Lead Capture + Event Registration | ✅ |
+| 5 | Real Estate / BĐS | Lead Capture + Viewing Appointment | ✅ |
+| 6 | E-commerce | Flash Sale + Cart Reminder | ⚪ |
+| 7 | F&B / Nhà hàng | Reservation + Review | ✅ |
+| 8 | Fitness / Gym | Trial Booking + Class Schedule | ✅ |
+| 9 | Legal / Tư vấn pháp lý | Consultation Booking | ✅ |
+| 10 | Events / Sự kiện | Event Registration + Calendar | ✅ |
+| 11 | Insurance / Bảo hiểm | Lead Capture + Callback | ⚪ |
+| 12 | Automotive / Ô tô | Test Drive Booking + Service Reminder | ✅ |
+
+---
+
+## 1. Healthcare / Phòng Khám
+
+```javascript
+const HEALTHCARE_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'scroll', value: 0.25, delay: 0 },
+  sheet: {
+    size: 'standard',
+    title: '📅 Đặt Lịch Khám',
+    icon: '🏥',
+    ariaLabel: 'Đặt lịch khám bệnh',
+  },
+  form: {
+    fields: ['name', 'phone', 'date', 'timeSlot', 'service', 'note'],
+    services: ['Khám tổng quát', 'Khám thai', 'Siêu âm', 'Xét nghiệm'],
+    submitText: 'Xác Nhận Đặt Lịch',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 120],
+    preparation: 'Mang theo sổ khám, CCCD, thẻ BHYT. Đến sớm 15 phút.',
+    duration: 60,
+  },
+  tracking: {
+    events: ['cro_sheet_shown', 'cro_booking_submit', 'cro_calendar_add'],
+    conversionValue: 500000,
+    currency: 'VND',
+  },
+  session: { dismissKey: 'eng_healthcare_booking', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 2. Dental / Nha Khoa
+
+```javascript
+const DENTAL_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'scroll', value: 0.25 },
+  sheet: { size: 'standard', title: '🦷 Đặt Lịch Khám Răng', icon: '🦷' },
+  form: {
+    fields: ['name', 'phone', 'date', 'timeSlot', 'service'],
+    services: ['Khám tổng quát', 'Tẩy trắng', 'Niềng răng', 'Nhổ răng khôn', 'Trồng implant'],
+    submitText: 'Đặt Lịch',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 120],
+    preparation: 'Đánh răng sạch trước khi đến. Mang theo kết quả X-ray cũ (nếu có).',
+    duration: 45,
+  },
+  tracking: { conversionValue: 300000 },
+  session: { dismissKey: 'eng_dental_booking', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 3. Salon / Spa
+
+```javascript
+const SALON_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'dual', value: { time: 12000, scroll: 0.2 } },
+  sheet: { size: 'standard', title: '💆 Đặt Lịch Làm Đẹp', icon: '💅' },
+  form: {
+    fields: ['name', 'phone', 'date', 'timeSlot', 'service', 'branch'],
+    services: ['Cắt tóc', 'Nhuộm tóc', 'Nail', 'Massage', 'Facial', 'Gội đầu dưỡng sinh'],
+    submitText: 'Đặt Lịch',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 60],
+    preparation: 'Đến đúng giờ để được phục vụ tốt nhất.',
+    duration: 90,
+  },
+  tracking: { conversionValue: 200000 },
+  session: { dismissKey: 'eng_salon_booking', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 4. Education / Đào Tạo
+
+```javascript
+const EDUCATION_PATTERN = {
+  type: 'lead',
+  trigger: { type: 'exit', fallbackDelay: 20000 }, // exit intent on desktop
+  sheet: {
+    size: 'standard',
+    title: '🎓 Nhận Tư Vấn Miễn Phí',
+    icon: '📚',
+  },
+  form: {
+    fields: ['name', 'phone', 'course'],
+    services: ['Tiếng Anh giao tiếp', 'IELTS', 'Lập trình', 'Marketing'],
+    submitText: 'Tư Vấn Cho Tôi',
+  },
+  calendar: {
+    enabled: false, // no calendar for lead capture
+  },
+  tracking: {
+    events: ['cro_sheet_shown', 'cro_lead_capture'],
+    conversionValue: 100000,
+  },
+  session: { dismissKey: 'eng_edu_lead', storage: 'localStorage' },
+};
+```
+
+---
+
+## 5. Real Estate / BĐS
+
+```javascript
+const REALESTATE_PATTERN = {
+  type: 'lead',
+  trigger: { type: 'scroll', value: 0.3, delay: 5000 },
+  sheet: {
+    size: 'standard',
+    title: '🏠 Đặt Lịch Xem Nhà',
+    icon: '🏡',
+  },
+  form: {
+    fields: ['name', 'phone', 'date', 'budget', 'area'],
+    submitText: 'Đặt Lịch Xem',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 120],
+    preparation: 'Mang CCCD. Chuẩn bị câu hỏi về pháp lý, tiện ích.',
+    duration: 60,
+  },
+  tracking: { conversionValue: 1000000 },
+  session: { dismissKey: 'eng_re_lead', storage: 'localStorage' },
+};
+```
+
+---
+
+## 6. E-commerce
+
+```javascript
+const ECOMMERCE_PATTERN = {
+  type: 'promo',
+  trigger: { type: 'exit', fallbackDelay: 15000 },
+  sheet: {
+    size: 'compact',
+    title: '🔥 Ưu Đãi Đặc Biệt',
+    icon: '🎁',
+  },
+  promo: {
+    message: 'Giảm 15% cho đơn hàng đầu tiên!',
+    code: 'WELCOME15',
+    countdown: true,
+    countdownHours: 24,
+  },
+  calendar: { enabled: false },
+  tracking: {
+    events: ['cro_sheet_shown', 'cro_promo_engage'],
+    conversionValue: 0, // varies per order
+  },
+  session: { dismissKey: 'eng_ecom_promo', storage: 'localStorage' },
+};
+```
+
+---
+
+## 7. F&B / Nhà Hàng
+
+```javascript
+const FNB_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'scroll', value: 0.2 },
+  sheet: { size: 'standard', title: '🍽️ Đặt Bàn', icon: '🍽️' },
+  form: {
+    fields: ['name', 'phone', 'date', 'timeSlot', 'guests', 'note'],
+    submitText: 'Đặt Bàn',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [180, 60], // 3h + 1h
+    preparation: 'Gọi xác nhận nếu thay đổi số người.',
+    duration: 120,
+  },
+  tracking: { conversionValue: 500000 },
+  session: { dismissKey: 'eng_fnb_booking', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 8. Fitness / Gym
+
+```javascript
+const FITNESS_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'dual', value: { time: 15000, scroll: 0.3 } },
+  sheet: { size: 'standard', title: '💪 Đăng Ký Tập Thử', icon: '🏋️' },
+  form: {
+    fields: ['name', 'phone', 'date', 'timeSlot', 'goal'],
+    services: ['Tập gym', 'Yoga', 'Boxing', 'CrossFit', 'Pilates'],
+    submitText: 'Đăng Ký',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 60],
+    preparation: 'Mang quần áo thể thao, giày tập, khăn, nước uống.',
+    duration: 90,
+  },
+  tracking: { conversionValue: 200000 },
+  session: { dismissKey: 'eng_fitness_trial', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 9. Legal / Tư Vấn Pháp Lý
+
+```javascript
+const LEGAL_PATTERN = {
+  type: 'booking',
+  trigger: { type: 'scroll', value: 0.35 },
+  sheet: { size: 'standard', title: '⚖️ Đặt Lịch Tư Vấn', icon: '⚖️' },
+  form: {
+    fields: ['name', 'phone', 'date', 'service', 'note'],
+    services: ['Hôn nhân gia đình', 'Doanh nghiệp', 'Đất đai', 'Hình sự', 'Lao động'],
+    submitText: 'Đặt Lịch Tư Vấn',
+  },
+  calendar: {
+    enabled: true,
+    reminderMinutes: [1440, 120],
+    preparation: 'Mang theo hồ sơ, giấy tờ liên quan. Chuẩn bị tóm tắt vấn đề.',
+    duration: 60,
+  },
+  tracking: { conversionValue: 500000 },
+  session: { dismissKey: 'eng_legal_consult', storage: 'sessionStorage' },
+};
+```
+
+---
+
+## 10. Events / Sự Kiện
+
+```javascript
+const EVENT_PATTERN = {
+  type: 'event',
+  trigger: { type: 'time', value: 10000 },
+  sheet: {
+    size: 'standard',
+    title: '🎤 Đăng Ký Tham Dự',
+    icon: '🎪',
+  },
+  form: {
+    fields: ['name', 'phone', 'email', 'tickets'],
+    submitText: 'Đăng Ký',
+  },
+  calendar: {
+    enabled: true, // Always add event to calendar
+    reminderMinutes: [10080, 1440, 120], // 1 week + 1 day + 2h
+    preparation: 'Mang email xác nhận / QR code để check-in.',
+    duration: 180,
+  },
+  tracking: {
+    events: ['cro_sheet_shown', 'cro_event_register', 'cro_calendar_add'],
+    conversionValue: 300000,
+  },
+  session: { dismissKey: 'eng_event_register', storage: 'localStorage' },
+};
+```
+
+---
+
+## 🔧 How to Use Patterns
+
+```javascript
+// 1. Import pattern
+const config = HEALTHCARE_PATTERN;
+
+// 2. Override with site-specific config
+config.calendar.clinicName = 'Phòng Khám An Sinh';
+config.calendar.address = '123 Nguyễn Văn A, Q9, TPHCM';
+config.calendar.phone = '0559 669 663';
+config.calendar.mapsUrl = 'https://maps.google.com/?q=Phong+Kham+An+Sinh';
+
+// 3. Initialize
+const sheet = new BottomSheetEngine({
+  id: 'booking',
+  size: config.sheet.size,
+  content: buildFormHTML(config),
+  onShow: () => EngagementTracker.sheetShown(config.type, config.trigger.type),
+  onDismiss: (s, dur) => EngagementTracker.sheetDismissed(config.type, 'close', dur),
+});
+
+const trigger = new TriggerManager({
+  trigger: config.trigger,
+  session: config.session,
+  onTrigger: () => sheet.show(),
+});
+
+trigger.init();
+```
+
+---
+
+## 📊 Conversion Value Guide
+
+| Industry | Avg Conversion Value (VND) | Rationale |
+|----------|---------------------------|-----------|
+| Healthcare | 300,000 - 1,000,000 | Consultation + follow-up potential |
+| Dental | 200,000 - 500,000 | Exam + treatment plan |
+| Salon/Spa | 150,000 - 500,000 | Service booking |
+| Education | 50,000 - 200,000 | Lead value (not enrollment) |
+| Real Estate | 500,000 - 2,000,000 | High-ticket lead |
+| E-commerce | Varies per order | Dynamic value |
+| F&B | 200,000 - 1,000,000 | Table reservation value |
+| Fitness | 100,000 - 300,000 | Trial → membership funnel |
+| Legal | 500,000 - 2,000,000 | Consultation fee |
+| Events | 100,000 - 500,000 | Ticket value |