// screen-order-detail.jsx — Single order view with timeline + line items + invoice summary function OrderDetailScreen({ route, setRoute, persona, addToCart }) { // Look the order up on the server first — the demo ORDERS book belongs to the // sample personas, so reading it here showed a stranger's order to whoever was // signed in. Local copies still cover an order placed moments ago or offline. const [remote, setRemote] = React.useState(null); React.useEffect(() => { var token; try { token = localStorage.getItem('eurostar_token'); } catch (e) {} if (!token) { setRemote([]); return; } fetch((window.EUROSTAR_API || location.origin) + '/orders', { headers: { authorization: 'Bearer ' + token }, }) .then(function (r) { return r.ok ? r.json() : []; }) .then(function (rows) { setRemote(Array.isArray(rows) ? rows.map(normaliseOrder) : []); }) .catch(function () { setRemote([]); }); }, [route.oid]); const local = window.loadMyOrders ? loadMyOrders(persona) : []; const order = [...(remote || []), ...local].find(o => o.id === route.oid); // Still loading the server copy — don't flash "not found" at a real order. if (!order && remote === null) { return

Loading…

; } if (!order) { return (

Order not found

); } const status = STATUS_META[order.status]; // Placed orders carry the total they were actually charged. const total = typeof order.placedTotal === 'number' ? order.placedTotal : orderTotal(order); const itemCount = orderQty(order); const tax = Math.round(total * 0.03); // IGST 3% for export, GST varies; using rough 3% for prototype const shipping = order.ship.includes('DHL') ? 8500 : 1200; const grand = total + tax + shipping; // Invoice PDF. // // This button had no click handler at all — it looked like a feature and did // nothing. Built the same way the cart's proforma is: lay the invoice out as // a print stylesheet and hand it to the browser's own PDF writer, which every // phone and desktop already has. No library, no server round trip, and the // customer gets a real file they can forward to their accountant. const invoiceHTML = () => { const rows = order.lines.map((l) => { const p = findProduct(l.pid) || {}; const shape = (findShape(p.shape) || {}).name || p.shape || ''; // Some orders store the money on the order and leave the line at zero. // Printing "₹0" next to 2,000 pieces states a price that is not true, so // those cells show a dash and the totals below carry the real figures. const rate = l.unitPrice || p.price || 0; const amount = l.lineTotal || (rate ? rate * (l.qty || 0) : 0); return ` ${(p.name || l.pid || '')}${p.tone ? ' · ' + ((findTone(p.tone) || {}).name || p.tone) : ''} ${shape} ${p.size || ''} ${(l.qty || 0).toLocaleString('en-IN')} ${rate ? formatINR(rate) : '—'} ${amount ? formatINR(amount) : '—'}`; }).join(''); const shipTo = [ persona.company || '', persona.contact ? 'c/o ' + persona.contact : '', persona.location || '', persona.phone || '', ].filter(Boolean).join('
'); return `Invoice ${order.id}
eurostarGEMSTONES · Estd 1980

INVOICE

${order.id}
${formatDate(order.date)}
Bill to
${shipTo}${persona.gst ? '
GSTIN ' + persona.gst : ''}
${rows}
ProductShapeSizeQtyRateAmount
Subtotal · ${itemCount.toLocaleString('en-IN')} pcs${formatINR(total)}
GST 3%${formatINR(tax)}
Shipping & insurance${formatINR(shipping)}
Total payable${formatINR(grand)}
Status: ${status.label}${order.ship ? ' · ' + order.ship : ''}.
Eurostar Technologies Inc. · Authorised Distributor for Asia-Pacific: Ganesh Jewellery I Pvt Ltd · Mumbai, Jaipur
`; }; // Packing list — what is in the box, for the warehouse and for the customer // checking a delivery in. Deliberately carries no prices: it travels with the // goods, and a courier or a shop assistant has no business reading the rates. const packingHTML = () => { const rows = order.lines.map((l, i) => { const p = findProduct(l.pid) || {}; const shape = (findShape(p.shape) || {}).name || p.shape || l.shape || ''; return ` ${i + 1} ${(p.name || l.name || l.pid || '')}${p.tone ? ' · ' + ((findTone(p.tone) || {}).name || p.tone) : ''} ${shape} ${p.size || l.size || ''} ${(l.qty || 0).toLocaleString('en-IN')} `; }).join(''); return `Packing list ${order.id}
eurostarGEMSTONES · Estd 1980

PACKING LIST

${order.id}
${formatDate(order.date)}
Ship to
${persona.company || ''}${persona.contact ? '
c/o ' + persona.contact : ''}${persona.location ? '
' + persona.location : ''}${persona.phone ? '
' + persona.phone : ''}
${rows}
#ProductShapeSizeQty (pcs)Checked
Total pieces: ${itemCount.toLocaleString('en-IN')} across ${order.lines.length} SKU${order.lines.length > 1 ? 's' : ''}
Packed by
Received by
No prices are shown on a packing list. Check the goods against this list on delivery and report any shortfall within 48 hours.
Eurostar Technologies Inc. · Mumbai, Jaipur
`; }; const printDoc = (html, what) => { const w = window.open('', '_blank'); if (!w) { alert(`Please allow pop-ups for this site to download the ${what}.`); return; } w.document.write(html); w.document.close(); setTimeout(() => { w.focus(); w.print(); }, 350); }; // Request cancellation. There is no self-service cancel API — an order that // is already packed or shipped cannot simply vanish — so this raises it with // the trade desk on WhatsApp, which is how the rest of the app escalates. const requestCancellation = () => { if (['shipped', 'delivered'].includes(order.status)) { alert( `This order is already ${order.status}, so it cannot be cancelled here. ` + 'Message the trade desk and they will advise on a return.' ); return; } if (!window.confirm(`Request cancellation of ${order.id}?\n\nThe trade desk will confirm before anything is cancelled.`)) return; const text = `Cancellation request — ${order.id}\n` + `${persona.company || ''}${(persona.code || persona.account) ? ' · ' + (persona.code || persona.account) : ''}\n` + `Placed ${formatDate(order.date)} · ${itemCount.toLocaleString('en-IN')} pcs · ${formatINR(grand)}\n\n` + 'Please confirm whether this order can still be cancelled.'; window.open('https://wa.me/917710065480?text=' + encodeURIComponent(text), '_blank'); }; // A blocked pop-up is the usual reason nothing happens, and printDoc says so // rather than leaving the customer tapping a button that appears dead. const downloadInvoice = () => printDoc(invoiceHTML(), 'invoice'); // Opens WhatsApp with the order already quoted, so the customer does not have // to type out which order they are calling about. const messageTradeDesk = () => { const text = `Hello Eurostar — about order ${order.id}\n` + `${persona.company || ''}${(persona.code || persona.account) ? ' · ' + (persona.code || persona.account) : ''}\n` + `Placed ${formatDate(order.date)} · ${itemCount.toLocaleString('en-IN')} pcs · ${formatINR(grand)}\n\n`; window.open('https://wa.me/917710065480?text=' + encodeURIComponent(text), '_blank'); }; return (
{order.id}

Order on {formatDate(order.date)}

{status.label} {formatDate(order.expected) ? ` · Expected by ${formatDate(order.expected)}` : ''} {order.ship ? ` · ${order.ship}` : ''}

{/* LEFT: Line items + timeline */}

Line items · {order.lines.length} SKU{order.lines.length > 1 ? 's' : ''} · {itemCount.toLocaleString('en-IN')} pcs

{order.lines.map((l, i) => { const p = findProduct(l.pid); if (!p) return null; const tone = findTone(p.tone); // The picture this line was ordered with. Server-fetched orders // carry no imageUrl (line items store no picture), so fall back to // resolving it from the SKU's own category/colour/shape. const lineImg = l.imageUrl || (typeof productImageFor === 'function' ? productImageFor(p.cat, p.tone, p.shape) : null); return (
{/* The drawn shape icon used to be the only thing here, so an order never showed the product image the customer had been looking at when they bought it. */}
{lineImg ? {p.name} { e.currentTarget.style.display = 'none'; }} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : }
setRoute({ name: 'product', pid: p.id })} style={{ cursor: 'pointer' }}> {p.name}
{findShape(p.shape)?.name} {p.size} {p.clarity}
{p.id}
{l.qty.toLocaleString('en-IN')} × {formatINR(p.price)}
{formatINR(p.price * l.qty)}
); })}
{/* Timeline */}

Tracking

{/* Notes */} {order.notes && (

Notes from you

"{order.notes}"

)}
{/* RIGHT: Summary + Address */}

Invoice summary

Subtotal · {itemCount.toLocaleString('en-IN')} pcs {formatINR(total)}
{order.ship.includes('DHL') ? 'IGST · export' : 'GST · 3%'} {formatINR(tax)}
Shipping & insurance {formatINR(shipping)}
Total payable {formatINR(grand)}
{order.paymentTerm} {formatDate(order.expected) ? ` · invoice due ${formatDate(order.expected)}` : ''}

Shipping to

{persona.company}
c/o {persona.contact}
{persona.location}
{persona.phone}
Carrier
{order.ship}

Need something?

); } function OrderTimeline({ order }) { const stages = [ { id: 'placed', label: 'Order placed', meta: formatDate(order.date) }, { id: 'confirmed', label: 'Confirmed by Eurostar', meta: 'Within 24h' }, { id: 'packed', label: 'Packed & sealed', meta: 'Mumbai warehouse' }, { id: 'shipped', label: 'In transit', meta: order.ship }, { id: 'delivered', label: 'Delivered', meta: formatDate(order.expected) ? (order.status === 'delivered' ? formatDate(order.expected) : `Expected ${formatDate(order.expected)}`) : '' }, ]; const order_idx = ['pending', 'confirmed', 'packed', 'shipped', 'delivered']; const currentIdx = order_idx.indexOf(order.status); return (
{stages.map((s, i) => { const done = i < currentIdx + (order.status === 'pending' ? 1 : 0) || (order.status === 'delivered' && i <= currentIdx + 1); const isDone = i <= currentIdx; const isCurrent = i === currentIdx + (order.status === 'pending' ? 1 : 0) - 1 && order.status !== 'delivered'; const cls = i < currentIdx ? 'done' : i === currentIdx ? (order.status === 'delivered' ? 'done' : 'current') : ''; return (
{s.label}
{s.meta}
); })}
); } Object.assign(window, { OrderDetailScreen });