// Result screen — Kết quả phân tích thần số học // Exports to window: ResultScreen const RES_SG = '#14C560'; const RES_SN = '#1E3888'; const RES_SG_DEEP = '#005323'; const MASTER_ROOT = { 11: 2, 22: 4, 33: 6 }; function isMasterNumber(n) { return n === 11 || n === 22 || n === 33; } function toDisplayNumber(n) { return isMasterNumber(n) ? `${n}/${MASTER_ROOT[n]}` : String(n); } function toPlotNumber(n) { return MASTER_ROOT[n] || n; } // ───────────────────────────────────────────────────────────── // Build numbers display data from user.numbers + content database // ───────────────────────────────────────────────────────────── function buildNumbersFromUser(user) { const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {}; const Content = (typeof window !== 'undefined' && window.SaladinContent) || {}; const C = Content.NUMBER_CONTENT || {}; const R = Content.ROLE_LABELS || {}; const profile = Content.computeUserProfile ? Content.computeUserProfile(user || {}) : null; // Priority: // 1. user.numbers (already computed by form submit) // 2. Auto-compute from user.name + user.dob (when navigating without form) // 3. Hardcoded fallback (last resort — should never hit in practice) let numbers = user && user.numbers ? user.numbers : null; if (!numbers && user && user.dob && N.calculateAll) { try { numbers = N.calculateAll({ name: user.name || '', dob: user.dob }); } catch (e) { /* ignore */ } } const fallback = { lifePath: 7, soulUrge: 7, personality: 7, destiny: 7, personalYear: 7 }; const nums = numbers || fallback; const roles = ['lifePath', 'soulUrge', 'personality', 'destiny', 'personalYear']; return roles.map((role) => { const n = nums[role] || 7; const c = C[n] || C[7] || {}; const r = R[role] || {}; const dynamicTips = Content.buildDynamicTips ? Content.buildDynamicTips(role, n, profile) : null; return { key: role, n, displayN: toDisplayNumber(n), isMaster: isMasterNumber(n), plotN: toPlotNumber(n), label: r.label || role, vi: r.vi || '', short: c.short || c.tagline || '', body: { 'Tính cách': ((dynamicTips && dynamicTips.personality) || (c.sections && c.sections['Tính cách cốt lõi']) || c.tagline || ''), 'Điểm mạnh': ((dynamicTips && dynamicTips.strength) || (c.sections && c.sections['Sự nghiệp']) || ''), 'Lưu ý': ((dynamicTips && dynamicTips.caution) || (c.sections && c.sections['Tình cảm']) || ''), }, }; }); } function getUserNumbers(user) { const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {}; if (user && user.numbers) return user.numbers; if (user && user.dob && N.calculateAll) { try { return N.calculateAll({ name: user.name || '', dob: user.dob }); } catch (e) { return null; } } return null; } function buildCrossSellCopy(user) { const nums = getUserNumbers(user) || { personalYear: 7, lifePath: 7 }; const y = new Date().getFullYear(); const py = nums.personalYear || 7; const life = nums.lifePath || 7; const titleByYear = { 1: 'năm bắt đầu mới', 2: 'năm hợp tác và cân bằng', 3: 'năm mở rộng kết nối', 4: 'năm xây nền tảng', 5: 'năm nhiều thay đổi', 6: 'năm trách nhiệm gia đình', 7: 'năm đào sâu nội lực', 8: 'năm tài chính và thành tựu', 9: 'năm hoàn tất chu kỳ', 11: 'năm trực giác mạnh', 22: 'năm kiến tạo dài hạn', 33: 'năm phụng sự và chữa lành', }; const tipByYear = { 1: 'ưu tiên các kế hoạch tạo đà dài hạn và bảo vệ thu nhập khi bắt đầu chu kỳ mới.', 2: 'tập trung kế hoạch tài chính an toàn, linh hoạt cho gia đình và các mối quan hệ.', 3: 'cân bằng chi tiêu trải nghiệm với một lớp bảo vệ rủi ro sức khỏe cơ bản.', 4: 'thiết kế ngân sách kỷ luật và khóa nền tảng bảo vệ dài hạn.', 5: 'giữ quỹ dự phòng lớn hơn bình thường để hấp thụ biến động.', 6: 'ưu tiên bảo vệ cho người thân trước, sau đó mới tối ưu tăng trưởng.', 7: 'phù hợp các quyết định cẩn trọng, dựa trên phân tích dữ liệu.', 8: 'nên kết hợp tăng trưởng tài sản với bảo vệ trách nhiệm tài chính.', 9: 'phù hợp rà soát lại danh mục và chốt các kế hoạch đã kéo dài nhiều năm.', 11: 'đặt trực giác cạnh số liệu để ra quyết định cân bằng.', 22: 'đầu tư vào cấu trúc bảo vệ đủ lớn cho mục tiêu đường dài.', 33: 'giữ ổn định tài chính cá nhân để duy trì khả năng chăm lo cho người khác.', }; return { title: `${y}: ${titleByYear[py] || 'chu kỳ tài chính cá nhân'}?`, body: `Personal Year ${py} và Life Path ${life} của bạn cho thấy giai đoạn này ${tipByYear[py] || 'nên ưu tiên chiến lược an toàn, rõ mục tiêu và có lớp bảo vệ rủi ro.'}`, }; } // ───────────────────────────────────────────────────────────── // Pentagon radar chart for 5 numbers // ───────────────────────────────────────────────────────────── function NumberRadar({ values, labels, size = 240 }) { // values: array of 5 numbers (1-9); labels: array of 5 short strings const c = size / 2; const r = size * 0.36; const pts = values.map((v, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; const radius = (v / 9) * r; return { x: c + Math.cos(angle) * radius, y: c + Math.sin(angle) * radius, angle, v }; }); const labelPts = values.map((v, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; return { x: c + Math.cos(angle) * (r + 22), y: c + Math.sin(angle) * (r + 22), angle, anchor: i === 0 ? 'middle' : (i < 3 ? 'start' : (i === 3 ? 'end' : (i === 4 ? 'end' : 'middle'))) }; }); const rings = [0.33, 0.66, 1.0]; const ringPath = (factor) => Array.from({ length: 5 }).map((_, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; return `${c + Math.cos(angle) * r * factor},${c + Math.sin(angle) * r * factor}`; }).join(' '); const valuePath = pts.map(p => `${p.x},${p.y}`).join(' '); return ( ); } // ───────────────────────────────────────────────────────────── // Summary card (sticky on desktop, inline on mobile) // ───────────────────────────────────────────────────────────── function SummaryCard({ user, mobile, onOpenDetail }) { const NUMBERS = buildNumbersFromUser(user); const lifePath = NUMBERS[0]; const radarValues = NUMBERS.map(n => n.plotN); const radarLabels = ['Life', 'Soul', 'Pers.', 'Dest.', 'PY']; const masterRoot = lifePath.isMaster ? MASTER_ROOT[lifePath.n] : null; const heroPrimaryNumber = lifePath.isMaster ? String(masterRoot) : (lifePath.displayN || String(lifePath.n)); return (
{/* User row */}
Phân tích cho
{user.name}
{formatVNDate(user.dob)}
{/* Big life-path number */}
{heroPrimaryNumber}
Con số chủ đạo
{lifePath.isMaster && (
{`Master ${lifePath.n}`}
)}
{lifePath.short}
{/* Radar chart */}
Biểu đồ 5 con số
{NUMBERS.some((n) => n.isMaster) && (
* Số Master hiển thị dạng 11/2, 22/4, 33/6: trước là Master, sau là số gốc để vẽ biểu đồ.
)}
{/* Mini legend */}
{NUMBERS.map((num, i) => ( { const card = document.getElementById(num.key); if (card) { e.preventDefault(); card.scrollIntoView({ block: 'start' }); } }} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, background: 'var(--bg-variant)', textDecoration: 'none', }}> {num.displayN} {num.vi} ))}
{/* Open detail of life path */} {onOpenDetail && ( )}
); } // ───────────────────────────────────────────────────────────── // Number detail card // ───────────────────────────────────────────────────────────── function NumberCard({ num, index, onOpenDetail }) { const sections = ['Tính cách', 'Điểm mạnh', 'Lưu ý']; const sectionIcons = { 'Tính cách': 'ri-user-3-line', 'Điểm mạnh': 'ri-flashlight-line', 'Lưu ý': 'ri-alert-line', }; const sectionColors = { 'Tính cách': RES_SN, 'Điểm mạnh': RES_SG_DEEP, 'Lưu ý': '#A29200', }; return (
{/* Watermark number */}
{num.displayN || num.n}
{/* Header */}
{num.displayN || num.n}
{num.label} {index === 0 && ( · Quan trọng nhất )}

{num.vi}

{num.short}
{/* Body sections */}
{sections.map(s => (
{s}

{num.body[s]}

))}
{/* Read more link */} {onOpenDetail && ( )}
); } // ───────────────────────────────────────────────────────────── // CTA — Download PDF (needs email) // ───────────────────────────────────────────────────────────── function PdfCta({ onExportPdf }) { return (

Tải PDF nội dung chính

Xuất phần kết quả chính (không gồm header/footer)
Trình duyệt sẽ mở hộp thoại in. Chọn "Save as PDF" để lưu file.
); } // ───────────────────────────────────────────────────────────── // CTA — Soft Saladin cross-sell // ───────────────────────────────────────────────────────────── function SaladinCta({ user }) { const copy = buildCrossSellCopy(user); return (
Gợi ý từ Saladin

{copy.title}

{copy.body}

Xem các gói Saladin
); } // ───────────────────────────────────────────────────────────── // Result top hero (slim) // ───────────────────────────────────────────────────────────── function ResultHero({ user, mobile, onBack, onShare, onPrint }) { return (

Kết quả phân tích của {user.name.split(' ').slice(-1)[0]}

Hoàn tất · 5 chỉ số · phương pháp Pythagorean
{!mobile ? (
) : ( )}
); } // ───────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────── // BirthChartCard — Biểu đồ ngày sinh (matrix 3×3) // ───────────────────────────────────────────────────────────── function BirthChartCard({ user, mobile }) { if (typeof window === 'undefined' || !window.BirthChartMatrix) return null; return (
Bonus

Biểu đồ ngày sinh

Ma trận 3×3 cho thấy các con số xuất hiện trong ngày sinh — mỗi nhóm số liên tiếp tạo thành "Mũi tên cá tính" phản ánh phẩm chất bẩm sinh.

{React.createElement(window.BirthChartMatrix, { dob: user.dob, mobile })}
); } // ───────────────────────────────────────────────────────────── // EmailBanner — Sticky top banner for email capture (replaces popup) // Dismissible — saves "saladin-banner-dismissed-until" for 7 days // ───────────────────────────────────────────────────────────── function EmailBanner({ mobile, user }) { const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {}; const [visible, setVisible] = React.useState(true); const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); React.useEffect(() => { // Read localStorage on mount if (N.shouldShowBanner && !N.shouldShowBanner()) setVisible(false); }, []); if (!visible) return null; const dismiss = () => { if (N.dismissBanner) N.dismissBanner(); if (N.trackEvent) N.trackEvent('email_banner_dismissed', {}); setVisible(false); }; const submit = (e) => { e.preventDefault(); if (!email || !/^\S+@\S+\.\S+$/.test(email)) return; setSubmitting(true); // In production: POST to /api/save-result if (N.trackEvent) N.trackEvent('email_capture', { source: 'result_banner' }); setTimeout(() => { setSent(true); setSubmitting(false); // Auto-fade after 3s setTimeout(() => setVisible(false), 3000); }, 700); }; return (
{sent ? ( <>Đã gửi tới {email} ) : ( 'Lưu kết quả về email để đọc lại sau' )}
{!sent && (
setEmail(e.target.value)} placeholder="email@cua-ban.com" style={{ flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 6, border: '1px solid var(--border-default)', background: 'var(--bg)', fontSize: 13, fontFamily: 'inherit', color: 'var(--text-default)', outline: 'none', }} />
)}
); } // ───────────────────────────────────────────────────────────── // PosterCta — CTA card sending users to Poster Generator // ───────────────────────────────────────────────────────────── function PosterCta({ user, onOpen, mobile }) { return (

Khoe con số của bạn lên social

Tạo poster cá nhân hoá cho Facebook, Zalo, TikTok — đẹp như một designer pro.
); } // Main ResultScreen // ───────────────────────────────────────────────────────────── function ResultScreen({ mobile, user, onBack, onShare, onOpenDetail, onOpenPoster }) { const u = user || { name: 'Bạn', dob: '1990-01-01', email: '' }; const NUMBERS = buildNumbersFromUser(u); const exportMainResultPdf = () => { if (typeof window === 'undefined' || typeof document === 'undefined') return; document.body.classList.add('print-result-only'); window.print(); setTimeout(() => document.body.classList.remove('print-result-only'), 250); }; React.useEffect(() => { if (typeof window === 'undefined') return undefined; window.SaladinExportResultPdf = exportMainResultPdf; return () => { delete window.SaladinExportResultPdf; }; }, []); return (
{/* LEFT: sticky summary */} {/* RIGHT: scrolling number cards + CTAs */}
{NUMBERS.map((num, i) => ( ))} {/* Birth Chart matrix — visual signature of numerology */} {/* CTAs at end */}
); } // ───────────────────────────────────────────────────────────── // Helpers // ───────────────────────────────────────────────────────────── function formatVNDate(iso) { if (!iso) return ''; const [y, m, d] = iso.split('-'); return `${d}/${m}/${y}`; } Object.assign(window, { ResultScreen });