codymaster 7.0.2 → 7.0.3

package/skills/cm-growth-hacking/bottom-sheet-engine.md

@@ -0,0 +1,261 @@
+# Bottom Sheet Engine
+
+> Core module cho mọi engagement UI. Modular, responsive, accessible.
+> Một engine — nhiều content types.
+
+---
+
+## 🏗️ Architecture
+
+```
+BottomSheetEngine
+├── create(config)      → Build DOM + attach events
+├── show()              → Slide up animation
+├── hide()              → Slide down + cleanup
+├── destroy()           → Remove from DOM entirely
+├── setContent(html)    → Swap inner content dynamically
+├── setSize(size)       → Switch compact/standard/full
+└── onDismiss(callback) → Hook for tracking/state
+```
+
+### 3 Size Variants
+
+| Size | Height | Use Case |
+|------|--------|----------|
+| `compact` | ~120px | Simple CTA, chat buttons, promo banner |
+| `standard` | ~320px | Booking form, lead capture, calendar CTA |
+| `full` | ~80vh | Survey, multi-step form, detailed content |
+
+### DOM Structure
+
+```html
+<!-- Backdrop (optional, for full-size sheets) -->
+<div class="eng-backdrop" data-sheet-id="booking"></div>
+
+<!-- Bottom Sheet -->
+<div class="eng-sheet eng-sheet--standard" data-sheet-id="booking" role="dialog" aria-modal="true" aria-label="Đặt Lịch Khám">
+  <!-- Drag handle -->
+  <div class="eng-sheet__handle" aria-hidden="true">
+    <div class="eng-sheet__handle-bar"></div>
+  </div>
+  
+  <!-- Close button -->
+  <button class="eng-sheet__close" aria-label="Đóng">✕</button>
+  
+  <!-- Content area (swappable) -->
+  <div class="eng-sheet__content">
+    <!-- Dynamic content injected here -->
+  </div>
+</div>
+```
+
+---
+
+## 🎨 Styling Principles
+
+### Must-Have CSS Features
+
+| Feature | Why |
+|---------|-----|
+| `position: fixed; bottom: 0` | Anchored to viewport bottom |
+| `transform: translateY(100%)` → `translateY(0)` | Smooth slide-up animation |
+| `backdrop-filter: blur(24px)` | Glassmorphism, premium feel |
+| `border-radius: 20px 20px 0 0` | iOS-style rounded top corners |
+| `padding-bottom: env(safe-area-inset-bottom)` | Safe area for notched devices |
+| `z-index: 1100` | Above nav bars but below modals |
+| Drag handle pseudo-element | Visual signal "this is draggable" |
+
+### Animation Timing
+
+```css
+/* Open: slightly bouncy, feels natural */
+transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
+
+/* Close: quick, decisive */
+transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
+```
+
+### Responsive Rules
+
+| Viewport | Behavior |
+|----------|----------|
+| Mobile (< 768px) | Full-width, touch-optimized, swipe dismiss |
+| Tablet (768-1024px) | Max-width 480px, centered |
+| Desktop (> 1024px) | Max-width 480px, right-aligned or centered |
+
+---
+
+## 👆 Touch Interactions
+
+### Swipe-to-Dismiss
+
+```
+touchstart → record startY
+touchmove → calculate deltaY
+  if deltaY > 0 → sheet follows finger (translateY)
+  if deltaY > threshold (80px) → dismiss
+touchend → snap back or dismiss based on velocity
+```
+
+**Key Rules:**
+- Only allow downward swipe (deltaY > 0)
+- Apply `will-change: transform` during drag for perf
+- Use velocity calculation: fast swipe = dismiss even if < 80px
+- Add `touch-action: none` on the drag handle only
+
+### Focus Trap (Accessibility)
+
+```
+When sheet opens:
+1. Save currently focused element
+2. Move focus to sheet
+3. Trap Tab/Shift+Tab within sheet
+4. On close: restore focus to saved element
+```
+
+---
+
+## 📦 Content Type Patterns
+
+### 1. Booking Form Content
+
+```html
+<div class="eng-sheet__content">
+  <div class="eng-content-booking">
+    <h3 class="eng-content__title">📅 Đặt Lịch Khám</h3>
+    <form data-form-type="booking" onsubmit="window.submitToGoogleSheet(event)">
+      <input type="hidden" name="url" value="">
+      <input type="text" name="name" placeholder="Họ tên" required>
+      <input type="tel" name="phone" placeholder="Số điện thoại" required>
+      <div class="eng-date-chips" id="dateChips"><!-- JS generated --></div>
+      <div class="eng-time-slots" id="timeSlots"><!-- JS generated --></div>
+      <select name="service"><!-- Industry-specific options --></select>
+      <textarea name="note" placeholder="Ghi chú (tùy chọn)"></textarea>
+      <button type="submit" class="eng-btn eng-btn--primary">Xác Nhận Đặt Lịch</button>
+    </form>
+  </div>
+</div>
+```
+
+### 2. Calendar CTA Content (Post-Submit)
+
+```html
+<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">
+    <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">
+      📥 Apple Calendar / Khác
+    </button>
+  </div>
+  <p class="eng-content__benefit">💡 Lịch sẽ tự nhắc bạn — hoàn toàn miễn phí</p>
+</div>
+```
+
+### 3. Lead Capture Content
+
+```html
+<div class="eng-content-lead">
+  <div class="eng-content__icon">🎁</div>
+  <h3 class="eng-content__title">Nhận tài liệu miễn phí</h3>
+  <p class="eng-content__subtitle">Để lại SĐT, chúng tôi gửi ngay</p>
+  <form data-form-type="lead" onsubmit="window.submitToGoogleSheet(event)">
+    <input type="hidden" name="url" value="">
+    <input type="tel" name="phone" placeholder="Số điện thoại" required>
+    <button type="submit" class="eng-btn eng-btn--primary">Gửi Cho Tôi</button>
+  </form>
+</div>
+```
+
+### 4. Flash Sale Content
+
+```html
+<div class="eng-content-promo">
+  <div class="eng-content__icon">🔥</div>
+  <h3 class="eng-content__title">Ưu đãi đặc biệt!</h3>
+  <div class="eng-countdown" id="countdown">
+    <span class="eng-countdown__unit"><span id="hours">00</span>h</span>
+    <span class="eng-countdown__unit"><span id="minutes">00</span>m</span>
+    <span class="eng-countdown__unit"><span id="seconds">00</span>s</span>
+  </div>
+  <p class="eng-content__subtitle">Giảm 30% khi đặt lịch hôm nay</p>
+  <a href="#booking" class="eng-btn eng-btn--primary">Đặt Ngay →</a>
+  <button class="eng-btn eng-btn--outline" onclick="addDeadlineToCalendar()">
+    📅 Nhắc tôi trước khi hết hạn
+  </button>
+</div>
+```
+
+### 5. Survey / Feedback Content
+
+```html
+<div class="eng-content-survey">
+  <h3 class="eng-content__title">⭐ Đánh giá trải nghiệm</h3>
+  <div class="eng-rating" id="starRating">
+    <button data-rating="1" aria-label="1 sao">⭐</button>
+    <button data-rating="2" aria-label="2 sao">⭐</button>
+    <button data-rating="3" aria-label="3 sao">⭐</button>
+    <button data-rating="4" aria-label="4 sao">⭐</button>
+    <button data-rating="5" aria-label="5 sao">⭐</button>
+  </div>
+  <textarea name="feedback" placeholder="Chia sẻ thêm (tùy chọn)"></textarea>
+  <button class="eng-btn eng-btn--primary" onclick="submitSurvey()">Gửi Đánh Giá</button>
+</div>
+```
+
+### 6. Chat / Contact CTA
+
+```html
+<div class="eng-content-chat">
+  <p class="eng-content__title">💬 Cần tư vấn?</p>
+  <div class="eng-chat-buttons">
+    <a href="https://zalo.me/PHONE" class="eng-btn eng-btn--zalo">Zalo</a>
+    <a href="tel:PHONE" class="eng-btn eng-btn--phone">📞 Gọi ngay</a>
+    <a href="https://m.me/PAGE" class="eng-btn eng-btn--messenger">Messenger</a>
+  </div>
+</div>
+```
+
+---
+
+## 🔄 Multi-Step Flow
+
+For complex interactions (e.g., booking → success → calendar CTA):
+
+```javascript
+// Step 1: Show booking form
+sheet.setContent(bookingFormHTML);
+sheet.show();
+
+// Step 2: On form success → swap to calendar CTA
+onFormSuccess(() => {
+  sheet.setContent(calendarCTAHTML);
+  // Track transition
+  trackEngagement('cro_booking_submit', { service: formData.service });
+});
+
+// Step 3: On calendar add → show thank you + close
+onCalendarAdd(() => {
+  trackEngagement('cro_calendar_add', { type: 'gcal' });
+  sheet.hide();
+  showToast('success', 'Đã thêm vào lịch! 🎉');
+});
+```
+
+---
+
+## ❌ Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|------|
+| Nest sheets inside sheets | One sheet at a time, swap content |
+| Hardcode content | Use setContent() for flexibility |
+| Forget backdrop for full sheets | Add backdrop + blur for full-size |
+| Skip keyboard navigation | Trap Tab key, close on Escape |
+| Ignore safe-area-inset | Always pad for notched phones |
+| Use `overflow: hidden` on body | Use `overscroll-behavior: contain` on sheet |
+| Animate with JS | Use CSS transitions + `requestAnimationFrame` |

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.