// =========================================================== // Wizards: AddCustomerModal + AddPartnerWizard // 2 form đa bước để Coder build theo // =========================================================== // SĐT hợp lệ = 9-11 chữ số (bỏ khoảng trắng, dấu +, gạch ngang) function __phoneValid(p) { const d = String(p || '').replace(/\D/g, ''); return d.length >= 9 && d.length <= 11; } // ---------- ADD CUSTOMER ---------- function AddCustomerModal({ onClose, onSave, role }) { const [data, setData] = useState({ custType:'individual', // individual | business — quyết định trường cần điền types:['retail'], // Loại khách hàng — chọn nhiều; phần tử đầu = loại chính name:'', phone:'', email:'', gender:'female', birthYear:'', city:'TP.HCM', // — riêng khách doanh nghiệp / tổ chức company:'', taxId:'', bizType:'company', contactRole:'', address:'', channel:'store', affiliateId:'', consent:{ call:true, sms:true, email:true, zalo:true }, preferredContact:'Zalo', tags:[], notes:'', owner:'', // người phụ trách — chỉ Marketing / Admin chọn được (quyền customers.assign); trống = chính mình }); // Marketing đẩy khách cho nhân viên bán hàng: chọn người phụ trách ngay khi tạo const canAssign = !!(role && window.tvsCan && tvsCan(role, 'customers.assign')); const staffOptions = canAssign ? window.tvsSalesStaff() : []; const [saving, setSaving] = useState(false); const [done, setDone] = useState(false); const update = (k, v) => setData(d => ({...d, [k]: v})); const updateConsent = (k, v) => setData(d => ({...d, consent: {...d.consent, [k]: v}})); // Chọn nhiều loại khách — click lần 2 bỏ chọn (kể cả loại cuối cùng); để trống thì chặn ở nút Tiếp tục const toggleType = (t) => setData(d => ({ ...d, types: d.types.includes(t) ? d.types.filter(x => x !== t) : [...d.types, t], })); const toggleTag = (t) => setData(d => ({...d, tags: d.tags.includes(t) ? d.tags.filter(x => x !== t) : [...d.tags, t]})); const isBiz = data.custType === 'business'; // Đổi cá nhân ⇄ tổ chức: lọc lại loại khách cho hợp lệ useEffect(() => { const valid = (D.typeOptions || []).filter(o => o.kind === data.custType).map(o => o.id); setData(d => ({...d, types: d.types.filter(t => valid.includes(t))})); }, [data.custType]); // Kênh ưa thích phải là kênh khách đã đồng ý — tự chuyển khi bỏ tick consent useEffect(() => { const KEY = {'Gọi điện':'call','Zalo':'zalo','SMS':'sms','Email':'email'}; const k = KEY[data.preferredContact]; if (k && !data.consent[k]) { const first = Object.keys(KEY).find(l => data.consent[KEY[l]]) || 'Cửa hàng'; setData(d => ({...d, preferredContact: first})); } }, [data.consent, data.preferredContact]); // Cảnh báo trùng SĐT với khách đã có — check quan trọng nhất của CRM const dupCustomer = (() => { const d = String(data.phone || '').replace(/\D/g, ''); if (d.length < 9) return null; return D.customers.find(c => String(c.phone || '').replace(/\D/g, '') === d) || null; })(); // Điều kiện tạo khách — form gộp 1 trang, không còn bước const canNext = (() => { const phoneOk = __phoneValid(data.phone) && !dupCustomer; if (!data.types.length) return false; return isBiz ? (data.company.trim() && data.name.trim() && phoneOk) : (data.name.trim() && phoneOk); })(); // Huỷ giữa chừng (đóng modal) thì không tạo khách nữa — dọn timeout khi unmount const saveTimers = useRef([]); useEffect(() => () => saveTimers.current.forEach(clearTimeout), []); const save = () => { setSaving(true); saveTimers.current.push(setTimeout(() => { setSaving(false); setDone(true); saveTimers.current.push(setTimeout(() => onSave && onSave(data), 1100)); }, 700)); }; const Req = () => *; const chipCls = (on) => on ? 'btn btn-cta btn-sm' : 'btn btn-secondary btn-sm'; const CITIES = ['TP.HCM','Hà Nội','Đà Nẵng','Hải Phòng','Cần Thơ','Khác']; const CHANNELS = [ {k:'store',l:'Cửa hàng',ic:'store'}, {k:'web', l:'Web/App',ic:'home'}, {k:'telesale',l:'Telesale',ic:'phone'}, {k:'facebook',l:'Facebook',ic:'chat'}, {k:'tiktok',l:'TikTok',ic:'sparkles'}, {k:'shopee',l:'Shopee',ic:'cart'}, {k:'zalo',l:'Zalo',ic:'chat'}, {k:'referral',l:'Giới thiệu',ic:'users'}, {k:'event',l:'Event',ic:'calendar'}, {k:'other',l:'Khác',ic:'more'}, ]; // Tags nhóm theo 3 trục: nhóm hàng (theo catalog thật TVS) · mục tiêu sức khoẻ / điều kiện thương mại · đặc điểm khách / mức ưu tiên const PRODUCT_GROUPS = ['Sắc đẹp — Da & Tóc','Vitamin & Khoáng tổng hợp','Miễn dịch & Đề kháng','Tim mạch & Omega-3','Tiêu hoá & Probiotic','Xương khớp & Canxi','Giấc ngủ & Thư giãn','Năng lượng & Trí não','Sức khoẻ Nam','Sức khoẻ Nữ','Gan & Thải độc','Mắt','Đường huyết & Cân nặng','Thể hình — Sports']; const TAG_GROUPS = isBiz ? [ {h:'Nhóm hàng quan tâm', items:PRODUCT_GROUPS}, {h:'Mức ưu tiên', items:['Ưu tiên cao','Khách trọng điểm','Mới — cần onboarding','Đang đàm phán']}, ] : [ {h:'Nhóm hàng quan tâm', items:PRODUCT_GROUPS}, {h:'Mục tiêu sức khoẻ', items:['Tăng cơ','Giảm cân','Tăng đề kháng','Đẹp da — chống lão hoá','Ngủ ngon','Giảm stress','Xương khớp','Tiêu hoá','Tim mạch','Sinh lý','Tiền mãn kinh','Trí nhớ — tập trung']}, ]; return ( // Toàn màn hình — không đóng khi bấm nền tối, chỉ đóng bằng nút X (lỡ tay là mất hết dữ liệu đã nhập)
e.stopPropagation()} className="addcust" style={{position:'fixed',inset:0,width:'100vw',height:'100vh',background:'var(--bg-page)',display:'flex',flexDirection:'column',overflow:'hidden',animation:'fadein 0.2s ease-out'}}> {/* Header */}
Đăng ký khách hàng mới

{done ? 'Hoàn tất!' : isBiz ? 'Thông tin doanh nghiệp' : 'Thông tin khách hàng'}

{/* Body */}
{done ? (

Đã tạo khách hàng

{isBiz ? <>Hồ sơ đã tạo cho {data.company} · người liên hệ {data.name} : <>Mã thành viên đã được cấp · SMS chào mừng đã gửi tới {data.phone}}

) : (
{/* ===== CỘT TRÁI — THÔNG TIN CƠ BẢN ===== */}
Thông tin cơ bản
{/* Hồ sơ cá nhân hay tổ chức — quyết định các trường cần điền */}
{[ {k:'individual', l:'Cá nhân', d:'Khách lẻ, bác sĩ, dược sĩ, affiliate, KOC…', ic:'user'}, {k:'business', l:'Tổ chức / Doanh nghiệp', d:'Nhà thuốc, gym, spa, đại lý, công ty…', ic:'briefcase'}, ].map(o => { const on = data.custType === o.k; return ( ); })}
{isBiz && ( <>
Tên doanh nghiệp / cửa hàng
update('company',e.target.value)}/>
Mã số thuế
update('taxId',e.target.value)}/>
Địa chỉ
update('address',e.target.value)}/>
Người liên hệ chính
)}
{isBiz ? 'Họ tên người liên hệ' : 'Họ và tên'}
update('name',e.target.value)}/>
SĐT
update('phone',e.target.value)} style={dupCustomer ? {borderColor:'var(--status-sale)'} : undefined}/> {data.phone && !__phoneValid(data.phone) && (
SĐT cần 9–11 chữ số
)} {dupCustomer && (
⚠ Trùng SĐT với khách {dupCustomer.name} ({dupCustomer.id}) — kiểm tra trước khi tạo mới
)}
{isBiz ? (
Email
update('email',e.target.value)}/>
Chức vụ
update('contactRole',e.target.value)}/>
Thành phố
) : ( <>
Email
update('email',e.target.value)}/>
Giới tính
update('gender',v)}/>
Năm sinh
update('birthYear',e.target.value)}/>
Thành phố
)}
Kênh đăng ký
{CHANNELS.map(c => ( ))}
{canAssign && (
Người phụ trách — gán khách này cho nhân viên bán hàng
)} {/* Loại khách hàng — chọn NHIỀU, loại tick đầu tiên là loại chính */}
Loại khách hàng — chọn nhiều được, tick đầu tiên là loại chính
{(D.typeOptions || []).filter(o => o.kind === data.custType).map(o => { const on = data.types.includes(o.id); const primary = data.types[0] === o.id; return ( ); })}
{data.types.length === 0 && (
⚠ Cần chọn ít nhất 1 loại khách hàng.
)} {data.types.some(t => t.startsWith('affiliate') || t === 'koc') && (
Mã affiliate / ID sàn — để đối chiếu doanh số từ TikTok Shop
update('affiliateId',e.target.value)}/>
)}
{/* ===== CỘT PHẢI — NHU CẦU & GHI CHÚ ===== */}
Nhu cầu & ghi chú Đã chọn {data.tags.length} tag
{TAG_GROUPS.map(g => (
{g.h}
{g.items.map(t => ( ))}
))}
Ghi chú ban đầu (tuỳ chọn)