+ {/* Member Card (appears after step 1) */}
+ {step >= 1 && (
+
+ = 1 ? "#F0FDF4" : "#F8FAFC", border: `1.5px solid ${step >= 1 ? posGreen : "#E5E7EB"}`, borderRadius: 12, padding: "12px 14px", marginBottom: 12, transition: `all 0.3s ${ease}` }}>
+
+
+
👤
+
+
{memberData.name}
+
{memberData.id} · {memberData.phone}
+
+
+
+ {memberData.tierIcon}
+ {memberData.tier}
+
+
+
+ {[["Wallet", `${memberData.balance} MMK`, posGreen], ["Points", memberData.points, c.pri], ["Stamps", memberData.stamps, posAmber]].map(([l, v, col]) => (
+
+ ))}
+
+
+ )}
+
+ {/* Scan Prompt (step 0) */}
+ {step === 0 && (
+
+
+
📱
+
Scan Member QR Code
+
Point POS scanner at customer's app QR code
+
+
+
💡 ALSO ACCEPTS
+
NFC Card Tap · Manual Member ID · Phone Number Lookup
+
+
+ )}
+
+ {/* Order Items (step 2+) */}
+ {step >= 2 && (
+
+
+
+ 🛒 Order Items
+ Order #SS-2602-0847
+
+ {orderItems.map((item, i) => (
+
+
+
{item.name}
+
x{item.qty}
+
+
{(item.qty * item.price).toLocaleString()}
+
+ ))}
+
+ {step >= 5 && (
+
+ 🎫 Voucher: 20% Off
+ -{Math.round(total * 0.2).toLocaleString()}
+
+ )}
+
+
TOTAL
+
+ {step >= 5 && {total.toLocaleString()} }
+ {step >= 5 ? Math.round(total * 0.8).toLocaleString() : total.toLocaleString()} MMK
+
+
+
+
+ )}
+
+ {/* Payment Processing (step 3) */}
+ {step === 3 && (
+
+
+
💳
+
Processing Wallet Payment
+
Debiting {total.toLocaleString()} MMK from member wallet...
+
+
+ )}
+
+ {/* Loyalty Credited (step 4) */}
+ {step === 4 && (
+
+
+
⭐ LOYALTY AUTO-CREDITED
+
+
+
+{pointsEarned}
+
POINTS (2x Gold)
+
+
+
+1
+
STAMP ({isBT ? "Coffee Card" : "Lunch Card"})
+
+
+
{isBT ? "Coffee Lover Card: 7/10 stamps" : "Lunch Champion: 4/5 stamps"} — {isBT ? "3 more to free coffee!" : "1 more to free dessert!"}
+
+ )}
+
+ {/* Voucher Applied (step 5) */}
+ {step === 5 && (
+
+
+
🎫 VOUCHER REDEEMED
+
+
🏷️
+
+
20% Off Any Order
+
VCH-BT-2602-7K9X · Scanned from app
+
+
-{Math.round(total * 0.2).toLocaleString()}
+
+
+ )}
+
+ {/* Complete (step 6) */}
+ {step === 6 && (
+
+
+
🎉
+
Transaction Complete!
+
+ Receipt sent to app · Balance updated in real-time
+
+
+ setStep(0)} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: posGreen, color: "#FFF", fontSize: 12, fontWeight: 700, fontFamily: T.sans, cursor: "pointer" }}>✓ Next Customer
+ 🖨 Print Receipt
+
+
+ )}
+
+
System Log
+ {/* API calls log */}
+ {[
+ step >= 0 && { api: "POS Ready", method: "SYS", status: "online", color: posGreen },
+ step >= 1 && { api: "/member/lookup", method: "POST", status: "200 OK", color: posGreen, detail: "QR → member_id: BT-2602-A7K9X" },
+ step >= 1 && { api: "/member/profile", method: "GET", status: "200 OK", color: posGreen, detail: "Tier: Gold, Balance: 45,500" },
+ step >= 2 && { api: "/order/create", method: "POST", status: "201", color: posBlue, detail: `${orderItems.length} items, ${total.toLocaleString()} MMK` },
+ step >= 3 && { api: "/wallet/pay", method: "POST", status: step >= 4 ? "200 OK" : "pending", color: step >= 4 ? posGreen : posAmber, detail: `Debit: ${total.toLocaleString()} MMK` },
+ step >= 4 && { api: "/loyalty/credit", method: "POST", status: "200 OK", color: posGreen, detail: `+${pointsEarned} pts, +1 stamp` },
+ step >= 4 && { api: "WebSocket → App", method: "PUSH", status: "sent", color: posBlue, detail: "Real-time balance update" },
+ step >= 5 && { api: "/voucher/redeem", method: "POST", status: "200 OK", color: posGreen, detail: "VCH-BT-2602-7K9X applied" },
+ step >= 5 && { api: "/order/update", method: "PATCH", status: "200 OK", color: posBlue, detail: `New total: ${Math.round(total * 0.8).toLocaleString()}` },
+ step >= 6 && { api: "/receipt/generate", method: "POST", status: "201", color: posGreen, detail: "Digital receipt → app" },
+ step >= 6 && { api: "/notification/push", method: "POST", status: "sent", color: posBlue, detail: "FCM → customer app" },
+ ].filter(Boolean).map((log, i) => (
+
+
+
+ {log.method}
+ ● {log.status}
+
+
{log.api}
+ {log.detail &&
{log.detail}
}
+
+ ))}
+
+ {/* Data flow legend */}
+
+
Data Flow
+ {[
+ ["POS Scanner", "→", "Membership API"],
+ ["API", "→", "Wallet Service"],
+ ["API", "→", "Loyalty Engine"],
+ ["WebSocket", "→", "Customer App"],
+ ].map(([from, arrow, to], i) => (
+
+ {from}
+ {arrow}
+ {to}
+
+ ))}
+
+