{/* Step list (left) */}
Order setup
{WIZARD_STEPS.map((s, i) => {
const done = i < step;
const active = i === step;
return (
);
})}
{/* Step body */}
{/* Order summary bar — steps 2–5 only */}
{step > 0 && draft.items.length > 0 && (() => {
const prods = window.PRODUCTS || PRODUCTS || [];
const items = draft.items.map(it => {
const product = prods.find(p => p.id === it.productId);
const pkg = product?.packages?.find(p => p.id === it.packageId);
return { product, pkg, qty: it.qty };
}).filter(x => x.product && x.pkg);
if (!items.length) return null;
return (
Ordering
·
{items.map(({ product, pkg, qty }, i) => (
{i > 0 && +}
{product.name}
·
{pkg.name}
฿{(pkg.price * qty).toLocaleString()}/{pkg.billingPeriod === 'yearly' ? 'yr' : 'mo'}
))}
);
})()}
{step === 0 &&
}
{step === 1 && }
{step === 2 && }
{step === 3 && }
{step === 4 && }
{/* Footer nav */}
{(() => {
// Validate required docs on step 3
let docsBlocked = false;
let missingCount = 0;
if (step === 3) {
const docReqs = window.DOC_REQUIREMENTS || DOC_REQUIREMENTS || {};
const docTypes = window.DOC_TYPES || DOC_TYPES || [];
const docLevels = {};
for (const it of (draft.items || [])) {
const reqs = docReqs[it.productId] || {};
for (const [docId, level] of Object.entries(reqs)) {
if (level === 'none') continue;
if (!docLevels[docId] || (level === 'required' && docLevels[docId] !== 'required')) docLevels[docId] = level;
}
}
const requiredIds = docTypes.filter(d => docLevels[d.id] === 'required').map(d => d.id);
const uploadedIds = (draft.docs || []).map(d => d.docId);
missingCount = requiredIds.filter(id => !uploadedIds.includes(id)).length;
docsBlocked = missingCount > 0;
}
const hasDraftItems = draft.items?.length > 0;
return (
{docsBlocked && <> อัปโหลดเอกสาร Required อีก {missingCount} รายการ · }
Step {step + 1} of {WIZARD_STEPS.length}
{submitError && (
{submitError}
)}
{hasDraftItems && (
)}
{step < WIZARD_STEPS.length - 1
?
: (
)
}
);
})()}
{/* ── Company info (new customer only) ─────────────────────────────── */}
{isNew && (
ข้อมูลบริษัทลูกค้าใหม่ · New company information
updCo('name', e.target.value)}/>
updCo('taxId', e.target.value)}/>
updCo('province', e.target.value)}/>
)}
{isNew && (
ข้อมูลผู้ติดต่อหลัก · Primary contact
)}
upd('name', e.target.value)}/>
upd('role', e.target.value)}/>
upd('email', e.target.value)}/>
upd('phone', e.target.value)}/>
upd('mobile', e.target.value)}/>
{/* Additional contacts */}
Additional contacts
ผู้ติดต่อสำรองสำหรับ technical และ billing
ยังไม่ได้เพิ่ม Additional contacts — สามารถเพิ่มภายหลังได้จากหน้า Order detail
);
};
// ---------- Step 4: Documents ----------
const DocRow = ({ label, en, hint, file, onUpload, onRemove, accept }) => {
const inputRef = React.useRef(null);
const handleChange = (e) => {
const f = e.target.files?.[0];
if (!f) return;
const sizeMb = (f.size / 1024 / 1024).toFixed(1);
const sizeLabel = f.size < 1024 * 1024 ? `${Math.round(f.size / 1024)} KB` : `${sizeMb} MB`;
onUpload && onUpload({ name: f.name, size: sizeLabel, file: f });
e.target.value = '';
};
return (
{requiredDocs.length === 0 && optionalDocs.length === 0 ? (
ไม่มีเอกสารที่กำหนดไว้สำหรับสินค้าที่เลือก
) : (
<>
{requiredDocs.length > 0 && (
เอกสารที่จำเป็น · Required
{requiredDocs.map(d => (
'.'+x.trim()).join(',') : undefined}/>
))}
)}
{optionalDocs.length > 0 && (
เอกสารเพิ่มเติม · Optional
{optionalDocs.map(d => (
'.'+x.trim()).join(',') : undefined}/>
))}
)}
)}
การจัดเก็บข้อมูล
เอกสารถูกเก็บภายใต้ True Business KYC vault — เข้าถึงได้เฉพาะทีม Sales Ops และ Compliance ตาม PDPA
);
};
// ---------- Step 5: Review ----------
const ReviewStep = ({ draft, setDraft, tweaks }) => {
const products = draft.items.map(it => {
const product = (window.PRODUCTS || PRODUCTS || []).find(p => p.id === it.productId);
const pkg = product?.packages?.find(p => p.id === it.packageId);
return { item: it, product, pkg };
}).filter(x => x.product && x.pkg);
const monthly = products.reduce((s, x) => {
const perMonth = x.pkg.billingPeriod === 'yearly' ? x.pkg.price / 12 : x.pkg.price;
return s + perMonth * x.item.qty;
}, 0);
const maxSla = products.length ? Math.max(...products.map(x => tweaks.slaOverride != null ? tweaks.slaOverride : x.product.slaDays)) : 0;
return (