codymaster 7.0.2 → 7.0.3

package/skills/cm-google-form/templates/form-submit.js

@@ -0,0 +1,201 @@
+/**
+ * Form Submission Handler — Auto Retry + Toast UI + Fallback
+ * 
+ * Features:
+ * - Auto retry 3x with exponential backoff (1s → 2s → 4s)
+ * - Toast notifications (success/error/retrying) — no alert()
+ * - Phone validation (Vietnamese format)
+ * - Zalo/contact fallback on total failure
+ * - CORS-safe: handles opaque responses from Google Apps Script
+ * 
+ * USAGE:
+ * 1. Include this script in your page (or append to shared.js)
+ * 2. Add toast.css to your stylesheet
+ * 3. Configure URLS object with your Apps Script deployment URLs
+ * 4. Configure FALLBACK_CONTACT with your Zalo/contact URL
+ * 5. Add forms with: data-form-type="xxx" onsubmit="window.submitToGoogleSheet(event)"
+ */
+
+// ═══════════════════════════════════════
+// CONFIGURATION — Change these values
+// ═══════════════════════════════════════
+const FORM_CONFIG = {
+    // Apps Script URLs per form type
+    URLS: {
+        // Add your deployed Apps Script URLs here
+        // massage: 'https://script.google.com/macros/s/YOUR_ID/exec',
+        // course:  'https://script.google.com/macros/s/YOUR_ID/exec',
+    },
+    // Fallback contact when form fails completely
+    FALLBACK_CONTACT: {
+        url: 'https://zalo.me/0559669663',   // Change to your Zalo/Messenger/etc
+        label: '💬 Nhắn tin Zalo ngay',       // Button text
+    },
+    // Retry settings
+    MAX_RETRIES: 3,
+    // Phone validation regex (Vietnamese)
+    PHONE_REGEX: /^0\d{8,10}$/,
+    // Messages (Vietnamese — customize for your language)
+    MESSAGES: {
+        sending: 'Đang gửi...',
+        retrying: (attempt, max) => `Đang thử lại (${attempt}/${max})...`,
+        phoneInvalid: {
+            title: 'Số điện thoại không hợp lệ',
+            msg: 'Vui lòng nhập số điện thoại bắt đầu bằng 0, từ 9-11 chữ số.',
+        },
+        success: {
+            title: 'Đăng ký thành công! 🎉',
+            msg: 'Chúng tôi sẽ liên hệ bạn trong 30 phút. Nhắn Zalo để được tư vấn nhanh hơn!',
+        },
+        retryNotice: {
+            title: 'Đang thử lại...',
+            msg: (attempt, max) => `Lần ${attempt}/${max} — Vui lòng chờ trong giây lát.`,
+        },
+        error: {
+            title: 'Gửi không thành công',
+            msg: 'Hệ thống đang bận. Vui lòng nhắn tin Zalo để được hỗ trợ ngay — chúng tôi sẽ phản hồi trong 5 phút!',
+        },
+    },
+};
+
+// ═══════════════════════════════════════
+// TOAST NOTIFICATION SYSTEM
+// ═══════════════════════════════════════
+
+function getToastContainer() {
+    let c = document.querySelector('.form-toast-container');
+    if (!c) {
+        c = document.createElement('div');
+        c.className = 'form-toast-container';
+        document.body.appendChild(c);
+    }
+    return c;
+}
+
+function showFormToast(type, title, msg, options = {}) {
+    const container = getToastContainer();
+    container.querySelectorAll('.form-toast').forEach(t => hideFormToast(t));
+
+    const icons = { success: '✅', error: '❌', retrying: '⏳' };
+    const toast = document.createElement('div');
+    toast.className = `form-toast form-toast--${type}`;
+
+    const fallback = FORM_CONFIG.FALLBACK_CONTACT;
+    toast.innerHTML = `
+        <span class="form-toast-icon">${icons[type] || '📋'}</span>
+        <div class="form-toast-body">
+            <div class="form-toast-title">${title}</div>
+            <div class="form-toast-msg">${msg}</div>
+            ${options.showFallback ? `<a href="${fallback.url}" target="_blank" class="form-toast-zalo">${fallback.label}</a>` : ''}
+        </div>
+        <button class="form-toast-close" aria-label="Close">✕</button>
+    `;
+
+    toast.querySelector('.form-toast-close').addEventListener('click', () => hideFormToast(toast));
+    container.appendChild(toast);
+
+    const dismissMs = { success: 6000, error: 15000, retrying: 10000 };
+    setTimeout(() => hideFormToast(toast), dismissMs[type] || 8000);
+
+    return toast;
+}
+
+function hideFormToast(toast) {
+    if (!toast || !toast.parentNode) return;
+    toast.classList.add('hiding');
+    setTimeout(() => toast.remove(), 300);
+}
+
+// ═══════════════════════════════════════
+// FETCH WITH RETRY (Exponential Backoff)
+// ═══════════════════════════════════════
+
+async function fetchWithRetry(url, options, maxRetries, onRetry) {
+    let lastError;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+            const res = await fetch(url, options);
+            if (res.type === 'opaque' || res.ok) return res;
+            try {
+                const data = await res.json();
+                if (data.status === 'success') return res;
+                throw new Error(data.message || 'Server error');
+            } catch {
+                if (res.type === 'opaque') return res;
+                throw new Error(`HTTP ${res.status}`);
+            }
+        } catch (err) {
+            lastError = err;
+            if (attempt < maxRetries) {
+                const delay = Math.pow(2, attempt - 1) * 1000;
+                if (onRetry) onRetry(attempt, maxRetries);
+                await new Promise(r => setTimeout(r, delay));
+            }
+        }
+    }
+    throw lastError;
+}
+
+// ═══════════════════════════════════════
+// FORM SUBMISSION HANDLER
+// ═══════════════════════════════════════
+
+window.submitToGoogleSheet = function (event) {
+    event.preventDefault();
+    const form = event.target;
+    const btn = form.querySelector('button[type="submit"]');
+    if (!btn || btn.disabled) return;
+    const originalText = btn.innerText;
+    const cfg = FORM_CONFIG;
+    const msgs = cfg.MESSAGES;
+
+    // Phone validation
+    const phoneInput = form.querySelector('input[name="phone"]');
+    if (phoneInput) {
+        const phone = phoneInput.value.replace(/\s+/g, '');
+        if (!cfg.PHONE_REGEX.test(phone)) {
+            showFormToast('error', msgs.phoneInvalid.title, msgs.phoneInvalid.msg);
+            phoneInput.focus();
+            return;
+        }
+    }
+
+    // Auto-fill source URL
+    const urlInput = form.querySelector('input[name="url"]');
+    if (urlInput) urlInput.value = window.location.href;
+
+    const formType = form.getAttribute('data-form-type') || Object.keys(cfg.URLS)[0];
+    const scriptURL = cfg.URLS[formType] || Object.values(cfg.URLS)[0];
+
+    if (!scriptURL) {
+        showFormToast('error', 'Lỗi cấu hình', 'Chưa cấu hình URL cho form type: ' + formType);
+        return;
+    }
+
+    btn.innerText = msgs.sending;
+    btn.disabled = true;
+
+    fetchWithRetry(
+        scriptURL,
+        { method: 'POST', body: new FormData(form) },
+        cfg.MAX_RETRIES,
+        (attempt, max) => {
+            btn.innerText = msgs.retrying(attempt, max);
+            showFormToast('retrying', msgs.retryNotice.title, msgs.retryNotice.msg(attempt, max));
+        }
+    )
+        .then(() => {
+            showFormToast('success', msgs.success.title, msgs.success.msg, { showFallback: true });
+            form.reset();
+            setTimeout(() => {
+                window.open(cfg.FALLBACK_CONTACT.url, '_blank');
+            }, 1500);
+        })
+        .catch(() => {
+            showFormToast('error', msgs.error.title, msgs.error.msg, { showFallback: true });
+        })
+        .finally(() => {
+            btn.innerText = originalText;
+            btn.disabled = false;
+        });
+};

package/skills/cm-google-form/templates/toast.css

@@ -0,0 +1,152 @@
+/* ============================================
+   FORM TOAST NOTIFICATION
+   ============================================ 
+   
+   Copy this into your main CSS file.
+   
+   Dependencies: none
+   CSS Variables used (override if needed):
+   - --space-2 through --space-8
+   - --radius-lg, --radius-full
+   - --text-sm
+   - --transition-fast
+   - --white
+   
+   If your project doesn't use CSS variables, 
+   replace them with fixed values:
+   - --space-2: 8px, --space-3: 12px, --space-4: 16px, --space-5: 20px
+   - --radius-lg: 12px, --radius-full: 9999px
+   - --text-sm: 14px
+   - --transition-fast: 150ms ease
+*/
+
+.form-toast-container {
+    position: fixed;
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: calc(100% - 32px);
+    max-width: 440px;
+    pointer-events: none;
+}
+
+.form-toast {
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px 20px;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
+    animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    opacity: 0;
+    transform: translateY(20px);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.form-toast.hiding {
+    animation: toastSlideDown 0.25s ease-in forwards;
+}
+
+/* Variants */
+.form-toast--success {
+    background: #ECFDF5;
+    border: 1px solid #A7F3D0;
+    color: #065F46;
+}
+
+.form-toast--error {
+    background: #FEF2F2;
+    border: 1px solid #FECACA;
+    color: #991B1B;
+}
+
+.form-toast--retrying {
+    background: #FFFBEB;
+    border: 1px solid #FDE68A;
+    color: #92400E;
+}
+
+/* Elements */
+.form-toast-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+    line-height: 1;
+    margin-top: 1px;
+}
+
+.form-toast-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.form-toast-title {
+    font-weight: 700;
+    margin-bottom: 2px;
+}
+
+.form-toast-msg {
+    opacity: 0.85;
+}
+
+.form-toast-close {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    opacity: 0.5;
+    padding: 4px;
+    color: inherit;
+    transition: opacity 150ms ease;
+}
+
+.form-toast-close:hover {
+    opacity: 1;
+}
+
+/* Fallback contact button (Zalo, Messenger, etc.) */
+.form-toast-zalo {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+    padding: 8px 16px;
+    background: #0068FF;
+    color: #fff !important;
+    border-radius: 9999px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background 150ms ease, transform 150ms ease;
+}
+
+.form-toast-zalo:hover {
+    background: #0054cc;
+    transform: translateY(-1px);
+}
+
+/* Animations */
+@keyframes toastSlideUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toastSlideDown {
+    from { opacity: 1; transform: translateY(0); }
+    to   { opacity: 0; transform: translateY(20px); }
+}
+
+/* Mobile: push toast above sticky CTAs */
+@media (max-width: 768px) {
+    .form-toast-container {
+        bottom: 80px;
+        width: calc(100% - 24px);
+    }
+}

package/skills/cm-growth-hacking/SKILL.md

@@ -0,0 +1,282 @@
+---
+name: cm-growth-hacking
+description: "Bottom-sheet and popup growth system: booking CTAs, calendars, lead capture, surveys, re-engagement, with CRO tracking hooks. Zero-deps; works static or dynamic sites. Works with cm-booking-calendar, cm-ads-tracker, cm-google-form, cm-readit, cm-ux-master."
+allowed-tools: Read, Write, Edit, Glob, Grep, Browser
+version: 1.0
+priority: HIGH
+skills:
+  - cm-booking-calendar
+  - cm-ads-tracker
+  - cm-google-form
+  - cm-readit
+  - cm-ux-master
+---
+
+# CM Growth Hacking
+
+> **Bottom Sheet + Calendar + Trigger + Tracking = Growth Hacking Engine.**
+> Đa ngành, đa mục đích, zero dependencies.
+> 1 skill = mọi growth hacking pattern bạn cần.
+
+---
+
+## 🎯 When to Use
+
+| Trigger | Action |
+|---------|--------|
+| User says "bottom sheet", "popup" | Activate — start Phase 1 |
+| User says "đặt lịch popup", "booking bottom sheet" | Activate — focus booking sheet |
+| User says "lead capture", "exit intent" | Activate — focus lead capture |
+| User says "nhắc lịch", "google calendar", "apple calendar" | Activate — focus calendar CTA |
+| User says "flash sale popup", "countdown" | Activate — focus promo sheet |
+| User says "survey", "đánh giá", "feedback" | Activate — focus survey sheet |
+| User says "tăng conversion", "giảm bounce" | Activate — explain + build |
+
+---
+
+## 📖 Selective Reading Rule (MANDATORY)
+
+| File | Status | When to Read |
+|------|--------|--------------|
+| [bottom-sheet-engine.md](bottom-sheet-engine.md) | 🔴 REQUIRED | Any bottom sheet implementation |
+| [trigger-system.md](trigger-system.md) | 🔴 REQUIRED | Setting up when/how sheets appear |
+| [calendar-integration.md](calendar-integration.md) | ⚪ Optional | When sheet includes calendar CTA |
+| [tracking-events.md](tracking-events.md) | ⚪ Optional | When tracking engagement events |
+
+> 🔴 **Always read `bottom-sheet-engine.md` + `trigger-system.md` first.**
+
+---
+
+## 🧭 Quick Decision Tree
+
+```
+"I need an engagement popup"
+│
+├─ Booking / Appointment
+│  └─ bottom-sheet-engine + calendar-integration + cm-booking-calendar
+│     └─ Form → Sheet: cm-google-form
+│     └─ Post-submit: Calendar CTA (GCal + ICS)
+│
+├─ Lead Capture / Exit Intent
+│  └─ bottom-sheet-engine + trigger-system (exit-intent)
+│     └─ Form → Sheet: cm-google-form
+│     └─ Tracking: cro_lead_capture
+│
+├─ Flash Sale / Promo
+│  └─ bottom-sheet-engine + trigger-system (timer)
+│     └─ Countdown timer + CTA
+│     └─ Optional: Calendar deadline
+│
+├─ Survey / Feedback
+│  └─ bottom-sheet-engine + trigger-system (post-interaction)
+│     └─ Star rating or NPS
+│     └─ Form → Sheet: cm-google-form
+│
+├─ Event / Webinar Registration
+│  └─ bottom-sheet-engine + calendar-integration
+│     └─ Register → Add to Calendar
+│     └─ Tracking: cro_event_register
+│
+├─ Re-engagement (Return Visitor)
+│  └─ bottom-sheet-engine + trigger-system (return-visitor)
+│     └─ "Welcome back" + personalized CTA
+│
+└─ Chat / Contact CTA
+   └─ bottom-sheet-engine + trigger-system (scroll)
+      └─ Zalo / Messenger / Hotline buttons
+```
+
+---
+
+## 📋 6-Phase Workflow
+
+```
+Phase 1: DISCOVER → Scan site, detect industry, identify existing popups/forms
+Phase 2: SOCRATIC GATE → Ask strategic questions (max 5)
+Phase 3: CONFIGURE → Select engagement pattern + customize
+Phase 4: BUILD → Generate bottom sheet + triggers + calendar + tracking
+Phase 5: INTEGRATE → Wire to site + link skills
+Phase 6: VERIFY → Test all interactions + tracking events
+```
+
+> 🔴 **Rule:** NEVER skip Phase 1 & 2. Always scan first, ask second.
+
+---
+
+## Phase 1: DISCOVER
+
+Scan the website to understand:
+
+```bash
+# Find existing popups/modals/sheets
+grep -ri "modal\|popup\|bottom-sheet\|overlay\|dialog" --include="*.html" --include="*.astro" --include="*.css" .
+
+# Find existing forms
+grep -ri "data-form-type\|onsubmit\|<form" --include="*.html" --include="*.astro" .
+
+# Find existing calendar code
+grep -ri "VCALENDAR\|google.com/calendar\|\.ics\|VEVENT" --include="*.js" --include="*.html" .
+
+# Find existing tracking
+grep -ri "dataLayer\|fbq\|ttq\|gtag" --include="*.js" --include="*.html" .
+```
+
+**Output:** Discovery Report with detected industry, existing UI, and recommended pattern.
+
+---
+
+## Phase 2: SOCRATIC GATE
+
+> 🔴 **MANDATORY.** Ask ALL in ONE message. Max 5 questions.
+
+1. **Mục tiêu chính** — Bạn muốn popup/bottom sheet để làm gì? (đặt lịch / thu lead / khuyến mãi / survey / khác)
+2. **Trigger** — Khi nào hiện? (ngay khi vào trang / scroll X% / sau X giây / khi sắp thoát / click nút)
+3. **Nội dung** — Trong popup cần gì? (form / calendar CTA / countdown / rating / nút chat)
+4. **Calendar** — Có cần thêm Google Calendar / Apple Calendar không? Nhắc trước bao lâu?
+5. **Tracking** — Đang chạy ads platform nào? (Facebook / TikTok / Google / không)
+
+---
+
+## Phase 3: CONFIGURE
+
+Based on answers, select from `references/engagement-patterns.md` and build config:
+
+```javascript
+const ENGAGEMENT_CONFIG = {
+  type: 'booking',           // booking | lead | promo | survey | event | chat | reengagement
+  trigger: {
+    type: 'scroll',          // scroll | time | exit | click | return | interaction
+    value: 0.3,              // scroll % or ms or selector
+    delay: 0,                // additional delay after trigger
+  },
+  sheet: {
+    size: 'standard',        // compact | standard | full
+    title: 'Đặt Lịch Khám',
+    icon: '📅',
+    dismissible: true,
+    swipeToDismiss: true,
+  },
+  calendar: {
+    enabled: true,
+    providers: ['gcal', 'ics'],  // gcal | ics | outlook
+    reminderMinutes: [1440, 120], // 1 day + 2 hours before
+    location: 'Google Maps URL',
+  },
+  tracking: {
+    events: ['cro_sheet_shown', 'cro_booking_submit', 'cro_calendar_add'],
+    conversionValue: 500000,
+    currency: 'VND',
+  },
+  session: {
+    dismissKey: 'eng_booking_dismissed',
+    storage: 'sessionStorage',   // sessionStorage | localStorage
+    maxShowPerSession: 1,
+  }
+};
+```
+
+---
+
+## Phase 4: BUILD
+
+Read and use templates from `templates/` directory:
+
+| Template | Purpose |
+|----------|---------|
+| `templates/bottom-sheet.css` | Universal responsive bottom sheet CSS |
+| `templates/bottom-sheet.js` | `BottomSheetEngine` class — create, show, hide, swipe, stack |
+| `templates/calendar-cta.js` | Calendar button generators (GCal + ICS + device detection) |
+| `templates/trigger-manager.js` | `TriggerManager` class — scroll, time, exit, click triggers |
+| `templates/tracking-events.js` | DataLayer push helpers for engagement events |
+
+---
+
+## Phase 5: INTEGRATE
+
+### Wire to Existing Skills
+
+```
+cm-growth-hacking (this skill)
+│
+├── UI Layer ──────────── templates/bottom-sheet.css + .js
+│
+├── Form Submit ───────── @skills/cm-google-form
+│   └── submitToGoogleSheet() → success callback → show calendar CTA
+│
+├── Calendar Logic ────── @skills/cm-booking-calendar
+│   └── calendar-engine.js (scheduling)
+│   └── calendar-export.js (ICS + GCal deep link)
+│   └── reminder-config.js (VALARM + industry patterns)
+│
+├── CRO Tracking ──────── @skills/cm-ads-tracker
+│   └── dataLayer.push() → GTM → FB/TikTok/Google
+│
+└── Design Principles ─── @skills/cm-ux-master
+    └── Color, typography, animation standards
+```
+
+---
+
+## Phase 6: VERIFY
+
+| # | Test Case | Expected |
+|---|-----------|----------|
+| 1 | Bottom sheet opens | Slides up with animation |
+| 2 | Swipe down to dismiss | Sheet closes + state saved |
+| 3 | Trigger fires correctly | Sheet appears at configured trigger |
+| 4 | Form submit (if applicable) | Toast success → Calendar CTA appears |
+| 5 | Google Calendar click | New tab with pre-filled event |
+| 6 | ICS download click | .ics file downloads |
+| 7 | .ics on iOS | Opens Apple Calendar with reminders |
+| 8 | Tracking events fire | dataLayer shows correct events |
+| 9 | Session dismiss works | Sheet doesn't reappear after dismiss |
+| 10 | Mobile responsive | Sheet adapts to viewport |
+| 11 | Accessibility | aria-labels, focus trap, Escape key |
+| 12 | No conflict with existing UI | Doesn't break page layout |
+
+---
+
+## ❌ Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|------|
+| Hardcode content in sheet | Use config object |
+| Show popup immediately on page load | Use trigger system with delay |
+| No dismiss option | Always allow close + swipe |
+| Forget mobile safe-area | Pad for notched devices |
+| Skip tracking | Track every interaction |
+| One-size-fits-all sheet | Use compact/standard/full variants |
+| Autoplay anything | Require user interaction |
+| Show on every page visit | Respect session/localStorage dismiss |
+| Build calendar logic from scratch | Inherit from `cm-booking-calendar` |
+| Build tracking from scratch | Inherit from `cm-ads-tracker` |
+
+---
+
+## 📑 Templates
+
+| File | Purpose |
+|------|---------|
+| `templates/bottom-sheet.css` | Universal bottom sheet CSS (3 sizes) |
+| `templates/bottom-sheet.js` | BottomSheetEngine class |
+| `templates/calendar-cta.js` | Calendar CTA buttons + auto device route |
+| `templates/trigger-manager.js` | TriggerManager class |
+| `templates/tracking-events.js` | Engagement tracking helpers |
+
+## 📚 References
+
+| File | Purpose |
+|------|---------|
+| `references/engagement-patterns.md` | 10+ engagement patterns by industry |
+
+---
+
+## 🔗 Related Skills
+
+| Need | Skill |
+|------|-------|
+| Calendar scheduling + export | `@[skills/cm-booking-calendar]` |
+| Form → Google Sheet | `@[skills/cm-google-form]` |
+| Full CRO tracking setup | `@[skills/cm-ads-tracker]` |
+| Audio engagement | `@[skills/cm-readit]` |
+| UI/UX design principles | `@[skills/cm-ux-master]` |