npm - @burdenoff/microfe-atheletebridge - Versions diffs - 2026.624.1 → 2026.625.1 - Mend

@burdenoff/microfe-atheletebridge 2026.624.1 → 2026.625.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/atheletebridge/pages/customer/PaymentMethodsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/PaymentMethodsPage.tsx"],"sourcesContent":["/*\n Payment Methods Page\n * @module atheletebridge/pages/customer\n \n Manage saved payment methods: UPI IDs, credit/debit cards, wallets.\n * Add Payment Method modal with type selection (Card/UPI/Wallet),\n * conditional forms, Quick Pay Options section (Cash on Delivery,\n * Pay at Cart), form state management, grouped display, security badge.\n /\n\nimport { useState } from 'react';\nimport {\n CreditCard,\n Smartphone,\n Wallet,\n Plus,\n Trash2,\n CheckCircle2,\n Shield,\n X,\n Banknote,\n ShoppingCart,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface PaymentMethod {\n id: string;\n type: 'upi' \| 'card' \| 'wallet';\n label: string;\n detail: string;\n icon: typeof CreditCard;\n isDefault: boolean;\n}\n\ninterface CardFormState {\n cardNumber: string;\n expiry: string;\n cvv: string;\n nameOnCard: string;\n}\n\ninterface UpiFormState {\n upiId: string;\n}\n\ninterface WalletFormState {\n walletProvider: string;\n mobile: string;\n}\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst initialMethods: PaymentMethod[] = [\n {\n id: 'pm-1',\n type: 'upi',\n label: 'Google Pay',\n detail: 'priya@okaxis',\n icon: Smartphone,\n isDefault: true,\n },\n {\n id: 'pm-2',\n type: 'upi',\n label: 'PhonePe',\n detail: 'priya@ybl',\n icon: Smartphone,\n isDefault: false,\n },\n {\n id: 'pm-3',\n type: 'card',\n label: 'HDFC Credit Card',\n detail: '* 4242',\n icon: CreditCard,\n isDefault: false,\n },\n {\n id: 'pm-4',\n type: 'card',\n label: 'SBI Debit Card',\n detail: ' 8765',\n icon: CreditCard,\n isDefault: false,\n },\n {\n id: 'pm-5',\n type: 'wallet',\n label: 'AthleteBridge Wallet',\n detail: 'Balance: \\u20B9 1,250.00',\n icon: Wallet,\n isDefault: false,\n },\n];\n\n// ============================================================================\n// Payment Method Row\n// ============================================================================\n\nfunction PaymentMethodRow({\n method,\n onRemove,\n onSetDefault,\n}: {\n method: PaymentMethod;\n onRemove: (id: string) => void;\n onSetDefault: (id: string) => void;\n}) {\n const Icon = method.icon;\n\n return (\n <div\n className={cn(\n 'flex items-center gap-4 rounded-lg border p-4',\n method.isDefault ? 'border-foreground/30 bg-accent/50' : 'border-border-subtle bg-bg-surface'\n )}\n >\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Icon className=\"h-5 w-5 text-text-secondary\" />\n </div>\n\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2\">\n <p className=\"text-sm font-medium text-text-primary\">{method.label}</p>\n {method.isDefault && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Default\n </span>\n )}\n </div>\n <p className=\"mt-0.5 text-xs text-text-secondary font-mono\">{method.detail}</p>\n </div>\n\n <div className=\"flex items-center gap-1\">\n {!method.isDefault && (\n <button\n type=\"button\"\n onClick={() => onSetDefault(method.id)}\n title=\"Set as default\"\n className=\"rounded-md px-2 py-1 text-xs text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n Set Default\n </button>\n )}\n <button\n type=\"button\"\n onClick={() => onRemove(method.id)}\n title=\"Remove payment method\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-status-error-bg/10 hover:text-status-error-text transition-colors\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function PaymentMethodsPage() {\n const { navigateTo } = useAthleteBridge();\n const [methods, setMethods] = useState<PaymentMethod[]>(initialMethods);\n const [showAddModal, setShowAddModal] = useState(false);\n const [selectedType, setSelectedType] = useState<'card' \| 'upi' \| 'wallet'>('card');\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n // Form states\n const [cardForm, setCardForm] = useState<CardFormState>({\n cardNumber: '',\n expiry: '',\n cvv: '',\n nameOnCard: '',\n });\n const [upiForm, setUpiForm] = useState<UpiFormState>({ upiId: '' });\n const [walletForm, setWalletForm] = useState<WalletFormState>({\n walletProvider: 'Paytm',\n mobile: '',\n });\n\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n const resetForms = () => {\n setCardForm({ cardNumber: '', expiry: '', cvv: '', nameOnCard: '' });\n setUpiForm({ upiId: '' });\n setWalletForm({ walletProvider: 'Paytm', mobile: '' });\n setSelectedType('card');\n };\n\n const handleRemove = (id: string) => {\n setMethods((prev) => prev.filter((m) => m.id !== id));\n showStatus('Payment method removed');\n };\n\n const handleSetDefault = (id: string) => {\n setMethods((prev) => prev.map((m) => ({ ...m, isDefault: m.id === id })));\n showStatus('Default payment method updated');\n };\n\n const handleAddPaymentMethod = () => {\n let label = '';\n let detail = '';\n let icon = CreditCard;\n\n if (selectedType === 'card') {\n if (\n !cardForm.cardNumber.trim() \|\|\n !cardForm.expiry.trim() \|\|\n !cardForm.cvv.trim() \|\|\n !cardForm.nameOnCard.trim()\n ) {\n alert('Please fill in all card fields.');\n return;\n }\n label = `${cardForm.nameOnCard}'s Card`;\n detail = ` ** ${cardForm.cardNumber.slice(-4)}`;\n icon = CreditCard;\n } else if (selectedType === 'upi') {\n if (!upiForm.upiId.trim()) {\n alert('Please enter a UPI ID.');\n return;\n }\n label = 'UPI';\n detail = upiForm.upiId;\n icon = Smartphone;\n } else {\n if (!walletForm.mobile.trim()) {\n alert('Please enter mobile number.');\n return;\n }\n label = walletForm.walletProvider;\n detail = `Mobile: ${walletForm.mobile}`;\n icon = Wallet;\n }\n\n const newMethod: PaymentMethod = {\n id: `pm-${Date.now()}`,\n type: selectedType,\n label,\n detail,\n icon,\n isDefault: false,\n };\n\n setMethods((prev) => [...prev, newMethod]);\n resetForms();\n setShowAddModal(false);\n showStatus('Payment method added successfully');\n };\n\n const grouped = {\n upi: methods.filter((m) => m.type === 'upi'),\n card: methods.filter((m) => m.type === 'card'),\n wallet: methods.filter((m) => m.type === 'wallet'),\n };\n\n return (\n <PageLayout\n title=\"Payment Methods\"\n description=\"Manage your saved payment options\"\n actions={\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <Plus className=\"h-4 w-4\" />\n Add Method\n </button>\n }\n >\n {/* Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {methods.length > 0 ? (\n <div className=\"space-y-6\">\n {/ UPI /}\n {grouped.upi.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <Smartphone className=\"h-4 w-4 text-text-secondary\" />\n UPI\n </h3>\n <div className=\"space-y-2\">\n {grouped.upi.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Cards /}\n {grouped.card.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <CreditCard className=\"h-4 w-4 text-text-secondary\" />\n Cards\n </h3>\n <div className=\"space-y-2\">\n {grouped.card.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Wallets /}\n {grouped.wallet.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <Wallet className=\"h-4 w-4 text-text-secondary\" />\n Wallets\n </h3>\n <div className=\"space-y-2\">\n {grouped.wallet.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Security note /}\n <div className=\"flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <Shield className=\"mt-0.5 h-5 w-5 shrink-0 text-text-secondary\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">Secure Payments</p>\n <p className=\"mt-0.5 text-xs text-text-secondary\">\n Your payment information is encrypted and securely stored. We never share your\n financial details with third parties.\n </p>\n </div>\n </div>\n </div>\n ) : (\n <EmptyState\n icon={<CreditCard className=\"h-12 w-12\" />}\n title=\"No payment methods\"\n description=\"Add a payment method to make faster checkouts.\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Payment Method\n </button>\n }\n />\n )}\n\n {/ Quick Pay Options /}\n <div className=\"mt-8\">\n <h2 className=\"text-base font-semibold text-text-primary mb-4\">Quick Pay Options</h2>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Banknote className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <h3 className=\"text-sm font-semibold text-text-primary\">Cash on Delivery</h3>\n </div>\n <p className=\"text-xs text-text-secondary mb-3\">Pay when you receive your order</p>\n <div className=\"flex items-center gap-2 text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3.5 w-3.5 shrink-0\" />\n <span className=\"text-xs\">Available for all orders</span>\n </div>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <ShoppingCart className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <h3 className=\"text-sm font-semibold text-text-primary\">Pay at Cart</h3>\n </div>\n <p className=\"text-xs text-text-secondary mb-3\">Pay directly to the vendor</p>\n <div className=\"flex items-center gap-2 text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3.5 w-3.5 shrink-0\" />\n <span className=\"text-xs\">Supports all payment methods</span>\n </div>\n </div>\n </div>\n </div>\n\n {/ Add Payment Method Modal /}\n {showAddModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-md max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Header /}\n <div className=\"flex items-center justify-between mb-4\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Add Payment Method</h2>\n <button\n type=\"button\"\n onClick={() => {\n setShowAddModal(false);\n resetForms();\n }}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n <p className=\"text-sm text-text-secondary mb-5\">\n Choose a payment method to add to your account\n </p>\n\n {/ Type Selection /}\n <div className=\"space-y-2 mb-5\">\n {[\n {\n value: 'card' as const,\n label: 'Credit/Debit Card',\n sub: 'Visa, Mastercard, Rupay',\n Icon: CreditCard,\n },\n {\n value: 'upi' as const,\n label: 'UPI',\n sub: 'Google Pay, PhonePe, Paytm',\n Icon: Smartphone,\n },\n {\n value: 'wallet' as const,\n label: 'Wallet',\n sub: 'Paytm, Amazon Pay, Mobikwik',\n Icon: Wallet,\n },\n ].map(({ value, label, sub, Icon }) => (\n <label\n key={value}\n className={cn(\n 'flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors',\n selectedType === value\n ? 'border-foreground bg-accent'\n : 'border-border-subtle hover:bg-accent'\n )}\n >\n <input\n type=\"radio\"\n name=\"paymentType\"\n value={value}\n checked={selectedType === value}\n onChange={() => setSelectedType(value)}\n className=\"h-4 w-4 shrink-0\"\n />\n <Icon className=\"h-5 w-5 text-text-secondary shrink-0\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n <p className=\"text-xs text-text-secondary\">{sub}</p>\n </div>\n </label>\n ))}\n </div>\n\n {/ Card Form /}\n {selectedType === 'card' && (\n <div className=\"space-y-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Card Number\n </label>\n <input\n type=\"text\"\n placeholder=\"1234 5678 9012 3456\"\n value={cardForm.cardNumber}\n onChange={(e) => setCardForm((p) => ({ ...p, cardNumber: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Expiry Date\n </label>\n <input\n type=\"text\"\n placeholder=\"MM/YY\"\n value={cardForm.expiry}\n onChange={(e) => setCardForm((p) => ({ ...p, expiry: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">CVV</label>\n <input\n type=\"password\"\n placeholder=\"123\"\n value={cardForm.cvv}\n onChange={(e) => setCardForm((p) => ({ ...p, cvv: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Name on Card\n </label>\n <input\n type=\"text\"\n placeholder=\"John Doe\"\n value={cardForm.nameOnCard}\n onChange={(e) => setCardForm((p) => ({ ...p, nameOnCard: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n )}\n\n {/ UPI Form /}\n {selectedType === 'upi' && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">UPI ID</label>\n <input\n type=\"text\"\n placeholder=\"yourname@paytm\"\n value={upiForm.upiId}\n onChange={(e) => setUpiForm({ upiId: e.target.value })}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n )}\n\n {/ Wallet Form /}\n {selectedType === 'wallet' && (\n <div className=\"space-y-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Select Wallet\n </label>\n <select\n value={walletForm.walletProvider}\n onChange={(e) =>\n setWalletForm((p) => ({ ...p, walletProvider: e.target.value }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option>Paytm</option>\n <option>Amazon Pay</option>\n <option>Mobikwik</option>\n <option>Freecharge</option>\n </select>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Mobile Number\n </label>\n <input\n type=\"tel\"\n placeholder=\"9876543210\"\n value={walletForm.mobile}\n onChange={(e) => setWalletForm((p) => ({ ...p, mobile: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center gap-3 pt-5\">\n <button\n type=\"button\"\n onClick={handleAddPaymentMethod}\n className=\"flex-1 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Payment Method\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setShowAddModal(false);\n resetForms();\n }}\n className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;AA6DA,IAAM,IAAkC;CACtC;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACZ;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACZ;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACZ;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACZ;CACD;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;EACZ;CACF;AAMD,SAAS,EAAiB,EACxB,WACA,aACA,mBAKC;CACD,IAAM,IAAO,EAAO;AAEpB,QACE,kBAAC,OAAD;EACE,WAAW,EACT,iDACA,EAAO,YAAY,sCAAsC,qCAC1D;YAJH;GAME,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAM,WAAU,+BAAgC,CAAA;IAC5C,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAyC,EAAO;MAAU,CAAA,EACtE,EAAO,aACN,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,UAE/B;QAEL;QACN,kBAAC,KAAD;KAAG,WAAU;eAAgD,EAAO;KAAW,CAAA,CAC3E;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,CAAC,EAAO,aACP,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,EAAO,GAAG;KACtC,OAAM;KACN,WAAU;eACX;KAEQ,CAAA,EAEX,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,EAAO,GAAG;KAClC,OAAM;KACN,WAAU;eAEV,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;KACvB,CAAA,CACL;;GACF;;;AAQV,SAAgB,IAAqB;CACnC,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAS,KAAc,EAA0B,EAAe,EACjE,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAc,KAAmB,EAAoC,OAAO,EAC7E,CAAC,GAAe,KAAoB,EAAwB,KAAK,EAGjE,CAAC,GAAU,KAAe,EAAwB;EACtD,YAAY;EACZ,QAAQ;EACR,KAAK;EACL,YAAY;EACb,CAAC,EACI,CAAC,GAAS,KAAc,EAAuB,EAAE,OAAO,IAAI,CAAC,EAC7D,CAAC,GAAY,KAAiB,EAA0B;EAC5D,gBAAgB;EAChB,QAAQ;EACT,CAAC,EAEI,KAAc,MAAgB;AAElC,EADA,EAAiB,EAAI,EACrB,iBAAiB,EAAiB,KAAK,EAAE,IAAK;IAG1C,UAAmB;AAIvB,EAHA,EAAY;GAAE,YAAY;GAAI,QAAQ;GAAI,KAAK;GAAI,YAAY;GAAI,CAAC,EACpE,EAAW,EAAE,OAAO,IAAI,CAAC,EACzB,EAAc;GAAE,gBAAgB;GAAS,QAAQ;GAAI,CAAC,EACtD,EAAgB,OAAO;IAGnB,KAAgB,MAAe;AAEnC,EADA,GAAY,MAAS,EAAK,QAAQ,MAAM,EAAE,OAAO,EAAG,CAAC,EACrD,EAAW,yBAAyB;IAGhC,KAAoB,MAAe;AAEvC,EADA,GAAY,MAAS,EAAK,KAAK,OAAO;GAAE,GAAG;GAAG,WAAW,EAAE,OAAO;GAAI,EAAE,CAAC,EACzE,EAAW,iCAAiC;IAGxC,UAA+B;EACnC,IAAI,IAAQ,IACR,IAAS,IACT,IAAO;AAEX,MAAI,MAAiB,QAAQ;AAC3B,OACE,CAAC,EAAS,WAAW,MAAM,IAC3B,CAAC,EAAS,OAAO,MAAM,IACvB,CAAC,EAAS,IAAI,MAAM,IACpB,CAAC,EAAS,WAAW,MAAM,EAC3B;AACA,UAAM,kCAAkC;AACxC;;AAIF,GAFA,IAAQ,GAAG,EAAS,WAAW,UAC/B,IAAS,kBAAkB,EAAS,WAAW,MAAM,GAAG,IACxD,IAAO;aACE,MAAiB,OAAO;AACjC,OAAI,CAAC,EAAQ,MAAM,MAAM,EAAE;AACzB,UAAM,yBAAyB;AAC/B;;AAIF,GAFA,IAAQ,OACR,IAAS,EAAQ,OACjB,IAAO;SACF;AACL,OAAI,CAAC,EAAW,OAAO,MAAM,EAAE;AAC7B,UAAM,8BAA8B;AACpC;;AAIF,GAFA,IAAQ,EAAW,gBACnB,IAAS,WAAW,EAAW,UAC/B,IAAO;;EAGT,IAAM,IAA2B;GAC/B,IAAI,MAAM,KAAK,KAAK;GACpB,MAAM;GACN;GACA;GACA;GACA,WAAW;GACZ;AAKD,EAHA,GAAY,MAAS,CAAC,GAAG,GAAM,EAAU,CAAC,EAC1C,GAAY,EACZ,EAAgB,GAAM,EACtB,EAAW,oCAAoC;IAG3C,IAAU;EACd,KAAK,EAAQ,QAAQ,MAAM,EAAE,SAAS,MAAM;EAC5C,MAAM,EAAQ,QAAQ,MAAM,EAAE,SAAS,OAAO;EAC9C,QAAQ,EAAQ,QAAQ,MAAM,EAAE,SAAS,SAAS;EACnD;AAED,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAgB,GAAK;GACpC,WAAW,EACT,uFACA,iDACD;aANH,CAQE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aAErB;;YAdb;GAkBG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAc,WAAU,uDAAwD,CAAA,EAChF,kBAAC,KAAD;KAAG,WAAU;eAA8C;KAAkB,CAAA,CACzE;;GAGP,EAAQ,SAAS,IAChB,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,EAAQ,IAAI,SAAS,KACpB,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAd,CACE,kBAAC,GAAD,EAAY,WAAU,+BAAgC,CAAA,EAAA,MAEnD;SACL,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,IAAI,KAAK,MAChB,kBAAC,GAAD;OAEU;OACR,UAAU;OACV,cAAc;OACd,EAJK,EAAO,GAIZ,CACF;MACE,CAAA,CACE,EAAA,CAAA;KAIX,EAAQ,KAAK,SAAS,KACrB,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAd,CACE,kBAAC,GAAD,EAAY,WAAU,+BAAgC,CAAA,EAAA,QAEnD;SACL,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,KAAK,KAAK,MACjB,kBAAC,GAAD;OAEU;OACR,UAAU;OACV,cAAc;OACd,EAJK,EAAO,GAIZ,CACF;MACE,CAAA,CACE,EAAA,CAAA;KAIX,EAAQ,OAAO,SAAS,KACvB,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAd,CACE,kBAAC,GAAD,EAAQ,WAAU,+BAAgC,CAAA,EAAA,UAE/C;SACL,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,OAAO,KAAK,MACnB,kBAAC,GAAD;OAEU;OACR,UAAU;OACV,cAAc;OACd,EAJK,EAAO,GAIZ,CACF;MACE,CAAA,CACE,EAAA,CAAA;KAIZ,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,+CAAgD,CAAA,EAClE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBAAwC;OAAmB,CAAA,EACxE,kBAAC,KAAD;OAAG,WAAU;iBAAqC;OAG9C,CAAA,CACA,EAAA,CAAA,CACF;;KACF;QAEN,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD,EAAY,WAAU,aAAc,CAAA;IAC1C,OAAM;IACN,aAAY;IACZ,QACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAgB,GAAK;KACpC,WAAU;eACX;KAEQ,CAAA;IAEX,CAAA;GAIJ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAiD;KAAsB,CAAA,EACrF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA;SAChD,CAAA,EACN,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAqB,CAAA,CACzE;;OACN,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAAmC,CAAA;OACnF,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,wBAAyB,CAAA,EACjD,kBAAC,QAAD;SAAM,WAAU;mBAAU;SAA+B,CAAA,CACrD;;OACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD,EAAc,WAAU,+BAAgC,CAAA;SACpD,CAAA,EACN,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAgB,CAAA,CACpE;;OACN,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAA8B,CAAA;OAC9E,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,wBAAyB,CAAA,EACjD,kBAAC,QAAD;SAAM,WAAU;mBAAU;SAAmC,CAAA,CACzD;;OACF;QACF;OACF;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAuB,CAAA,EAC/E,kBAAC,UAAD;SACE,MAAK;SACL,eAAe;AAEb,UADA,EAAgB,GAAM,EACtB,GAAY;;SAEd,WAAU;mBAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;SAClB,CAAA,CACL;;OACN,kBAAC,KAAD;QAAG,WAAU;kBAAmC;QAE5C,CAAA;OAGJ,kBAAC,OAAD;QAAK,WAAU;kBACZ;SACC;UACE,OAAO;UACP,OAAO;UACP,KAAK;UACL,MAAM;UACP;SACD;UACE,OAAO;UACP,OAAO;UACP,KAAK;UACL,MAAM;UACP;SACD;UACE,OAAO;UACP,OAAO;UACP,KAAK;UACL,MAAM;UACP;SACF,CAAC,KAAK,EAAE,UAAO,UAAO,QAAK,cAC1B,kBAAC,SAAD;SAEE,WAAW,EACT,kFACA,MAAiB,IACb,gCACA,uCACL;mBAPH;UASE,kBAAC,SAAD;WACE,MAAK;WACL,MAAK;WACE;WACP,SAAS,MAAiB;WAC1B,gBAAgB,EAAgB,EAAM;WACtC,WAAU;WACV,CAAA;UACF,kBAAC,GAAD,EAAM,WAAU,wCAAyC,CAAA;UACzD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAyC;WAAU,CAAA,EAChE,kBAAC,KAAD;WAAG,WAAU;qBAA+B;WAAQ,CAAA,CAChD,EAAA,CAAA;UACA;WArBD,EAqBC,CACR;QACE,CAAA;OAGL,MAAiB,UAChB,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAmD;UAE5D,CAAA,EACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,YAAY,EAAE,OAAO;WAAO,EAAE;UAC3E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WAAO,WAAU;qBAAmD;WAE5D,CAAA,EACR,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,QAAQ,EAAE,OAAO;YAAO,EAAE;WACvE,WAAU;WACV,CAAA,CACE,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;WAAO,WAAU;qBAAmD;WAAW,CAAA,EAC/E,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,KAAK,EAAE,OAAO;YAAO,EAAE;WACpE,WAAU;WACV,CAAA,CACE,EAAA,CAAA,CACF;;SACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAmD;UAE5D,CAAA,EACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,YAAY,EAAE,OAAO;WAAO,EAAE;UAC3E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SACF;;OAIP,MAAiB,SAChB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;QAAO,WAAU;kBAAmD;QAAc,CAAA,EAClF,kBAAC,SAAD;QACE,MAAK;QACL,aAAY;QACZ,OAAO,EAAQ;QACf,WAAW,MAAM,EAAW,EAAE,OAAO,EAAE,OAAO,OAAO,CAAC;QACtD,WAAU;QACV,CAAA,CACE,EAAA,CAAA;OAIP,MAAiB,YAChB,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SAAO,WAAU;mBAAmD;SAE5D,CAAA,EACR,kBAAC,UAAD;SACE,OAAO,EAAW;SAClB,WAAW,MACT,GAAe,OAAO;UAAE,GAAG;UAAG,gBAAgB,EAAE,OAAO;UAAO,EAAE;SAElE,WAAU;mBALZ;UAOE,kBAAC,UAAD,EAAA,UAAQ,SAAc,CAAA;UACtB,kBAAC,UAAD,EAAA,UAAQ,cAAmB,CAAA;UAC3B,kBAAC,UAAD,EAAA,UAAQ,YAAiB,CAAA;UACzB,kBAAC,UAAD,EAAA,UAAQ,cAAmB,CAAA;UACpB;WACL,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;SAAO,WAAU;mBAAmD;SAE5D,CAAA,EACR,kBAAC,SAAD;SACE,MAAK;SACL,aAAY;SACZ,OAAO,EAAW;SAClB,WAAW,MAAM,GAAe,OAAO;UAAE,GAAG;UAAG,QAAQ,EAAE,OAAO;UAAO,EAAE;SACzE,WAAU;SACV,CAAA,CACE,EAAA,CAAA,CACF;;OAIR,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBACX;SAEQ,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe;AAEb,UADA,EAAgB,GAAM,EACtB,GAAY;;SAEd,WAAU;mBACX;SAEQ,CAAA,CACL;;OACF;;KACF,CAAA;IACF,CAAA;GAEG"}
1	+ {"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/PaymentMethodsPage.tsx"],"sourcesContent":["/*\n Payment Methods Page\n * @module atheletebridge/pages/customer\n \n Manage saved payment methods: UPI IDs, credit/debit cards, wallets.\n * Add Payment Method modal with type selection (Card/UPI/Wallet),\n * conditional forms, Quick Pay Options section (Cash on Delivery,\n * Pay at Cart), form state management, grouped display, security badge.\n /\n\nimport { useState } from 'react';\nimport {\n CreditCard,\n Smartphone,\n Wallet,\n Plus,\n Trash2,\n CheckCircle2,\n Shield,\n X,\n Banknote,\n ShoppingCart,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface PaymentMethod {\n id: string;\n type: 'upi' \| 'card' \| 'wallet';\n label: string;\n detail: string;\n icon: typeof CreditCard;\n isDefault: boolean;\n}\n\ninterface CardFormState {\n cardNumber: string;\n expiry: string;\n cvv: string;\n nameOnCard: string;\n}\n\ninterface UpiFormState {\n upiId: string;\n}\n\ninterface WalletFormState {\n walletProvider: string;\n mobile: string;\n}\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst initialMethods: PaymentMethod[] = [\n {\n id: 'pm-1',\n type: 'upi',\n label: 'Google Pay',\n detail: 'priya@okaxis',\n icon: Smartphone,\n isDefault: true,\n },\n {\n id: 'pm-2',\n type: 'upi',\n label: 'PhonePe',\n detail: 'priya@ybl',\n icon: Smartphone,\n isDefault: false,\n },\n {\n id: 'pm-3',\n type: 'card',\n label: 'HDFC Credit Card',\n detail: '* 4242',\n icon: CreditCard,\n isDefault: false,\n },\n {\n id: 'pm-4',\n type: 'card',\n label: 'SBI Debit Card',\n detail: ' 8765',\n icon: CreditCard,\n isDefault: false,\n },\n {\n id: 'pm-5',\n type: 'wallet',\n label: 'AthleteBridge Wallet',\n detail: 'Balance: \\u20B9 1,250.00',\n icon: Wallet,\n isDefault: false,\n },\n];\n\n// ============================================================================\n// Payment Method Row\n// ============================================================================\n\nfunction PaymentMethodRow({\n method,\n onRemove,\n onSetDefault,\n}: {\n method: PaymentMethod;\n onRemove: (id: string) => void;\n onSetDefault: (id: string) => void;\n}) {\n const Icon = method.icon;\n\n return (\n <div\n className={cn(\n 'flex items-center gap-4 rounded-lg border p-4',\n method.isDefault\n ? 'border-foreground/30 bg-accent/50'\n : 'border-border-subtle bg-bg-surface'\n )}\n >\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Icon className=\"h-5 w-5 text-text-secondary\" />\n </div>\n\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2\">\n <p className=\"text-sm font-medium text-text-primary\">{method.label}</p>\n {method.isDefault && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Default\n </span>\n )}\n </div>\n <p className=\"mt-0.5 text-xs text-text-secondary font-mono\">{method.detail}</p>\n </div>\n\n <div className=\"flex items-center gap-1\">\n {!method.isDefault && (\n <button\n type=\"button\"\n onClick={() => onSetDefault(method.id)}\n title=\"Set as default\"\n className=\"rounded-md px-2 py-1 text-xs text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n Set Default\n </button>\n )}\n <button\n type=\"button\"\n onClick={() => onRemove(method.id)}\n title=\"Remove payment method\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-status-error-bg/10 hover:text-status-error-text transition-colors\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function PaymentMethodsPage() {\n const { navigateTo } = useAthleteBridge();\n const [methods, setMethods] = useState<PaymentMethod[]>(initialMethods);\n const [showAddModal, setShowAddModal] = useState(false);\n const [selectedType, setSelectedType] = useState<'card' \| 'upi' \| 'wallet'>('card');\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n // Form states\n const [cardForm, setCardForm] = useState<CardFormState>({\n cardNumber: '',\n expiry: '',\n cvv: '',\n nameOnCard: '',\n });\n const [upiForm, setUpiForm] = useState<UpiFormState>({ upiId: '' });\n const [walletForm, setWalletForm] = useState<WalletFormState>({\n walletProvider: 'Paytm',\n mobile: '',\n });\n\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n const resetForms = () => {\n setCardForm({ cardNumber: '', expiry: '', cvv: '', nameOnCard: '' });\n setUpiForm({ upiId: '' });\n setWalletForm({ walletProvider: 'Paytm', mobile: '' });\n setSelectedType('card');\n };\n\n const handleRemove = (id: string) => {\n setMethods((prev) => prev.filter((m) => m.id !== id));\n showStatus('Payment method removed');\n };\n\n const handleSetDefault = (id: string) => {\n setMethods((prev) => prev.map((m) => ({ ...m, isDefault: m.id === id })));\n showStatus('Default payment method updated');\n };\n\n const handleAddPaymentMethod = () => {\n let label = '';\n let detail = '';\n let icon = CreditCard;\n\n if (selectedType === 'card') {\n if (\n !cardForm.cardNumber.trim() \|\|\n !cardForm.expiry.trim() \|\|\n !cardForm.cvv.trim() \|\|\n !cardForm.nameOnCard.trim()\n ) {\n alert('Please fill in all card fields.');\n return;\n }\n label = `${cardForm.nameOnCard}'s Card`;\n detail = ` ** ${cardForm.cardNumber.slice(-4)}`;\n icon = CreditCard;\n } else if (selectedType === 'upi') {\n if (!upiForm.upiId.trim()) {\n alert('Please enter a UPI ID.');\n return;\n }\n label = 'UPI';\n detail = upiForm.upiId;\n icon = Smartphone;\n } else {\n if (!walletForm.mobile.trim()) {\n alert('Please enter mobile number.');\n return;\n }\n label = walletForm.walletProvider;\n detail = `Mobile: ${walletForm.mobile}`;\n icon = Wallet;\n }\n\n const newMethod: PaymentMethod = {\n id: `pm-${Date.now()}`,\n type: selectedType,\n label,\n detail,\n icon,\n isDefault: false,\n };\n\n setMethods((prev) => [...prev, newMethod]);\n resetForms();\n setShowAddModal(false);\n showStatus('Payment method added successfully');\n };\n\n const grouped = {\n upi: methods.filter((m) => m.type === 'upi'),\n card: methods.filter((m) => m.type === 'card'),\n wallet: methods.filter((m) => m.type === 'wallet'),\n };\n\n return (\n <PageLayout\n title=\"Payment Methods\"\n description=\"Manage your saved payment options\"\n actions={\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <Plus className=\"h-4 w-4\" />\n Add Method\n </button>\n }\n >\n {/* Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {methods.length > 0 ? (\n <div className=\"space-y-6\">\n {/ UPI /}\n {grouped.upi.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <Smartphone className=\"h-4 w-4 text-text-secondary\" />\n UPI\n </h3>\n <div className=\"space-y-2\">\n {grouped.upi.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Cards /}\n {grouped.card.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <CreditCard className=\"h-4 w-4 text-text-secondary\" />\n Cards\n </h3>\n <div className=\"space-y-2\">\n {grouped.card.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Wallets /}\n {grouped.wallet.length > 0 && (\n <section>\n <h3 className=\"text-sm font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <Wallet className=\"h-4 w-4 text-text-secondary\" />\n Wallets\n </h3>\n <div className=\"space-y-2\">\n {grouped.wallet.map((method) => (\n <PaymentMethodRow\n key={method.id}\n method={method}\n onRemove={handleRemove}\n onSetDefault={handleSetDefault}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Security note /}\n <div className=\"flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4\">\n <Shield className=\"mt-0.5 h-5 w-5 shrink-0 text-text-secondary\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">Secure Payments</p>\n <p className=\"mt-0.5 text-xs text-text-secondary\">\n Your payment information is encrypted and securely stored. We never share your\n financial details with third parties.\n </p>\n </div>\n </div>\n </div>\n ) : (\n <EmptyState\n illustration=\"empty-data\"\n icon={<CreditCard className=\"h-12 w-12\" />}\n title=\"No payment methods\"\n description=\"Add a payment method to make faster checkouts.\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowAddModal(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Payment Method\n </button>\n }\n />\n )}\n\n {/ Quick Pay Options /}\n <div className=\"mt-8\">\n <h2 className=\"text-base font-semibold text-text-primary mb-4\">Quick Pay Options</h2>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Banknote className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <h3 className=\"text-sm font-semibold text-text-primary\">Cash on Delivery</h3>\n </div>\n <p className=\"text-xs text-text-secondary mb-3\">Pay when you receive your order</p>\n <div className=\"flex items-center gap-2 text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3.5 w-3.5 shrink-0\" />\n <span className=\"text-xs\">Available for all orders</span>\n </div>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <div className=\"flex items-center gap-3 mb-2\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <ShoppingCart className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <h3 className=\"text-sm font-semibold text-text-primary\">Pay at Cart</h3>\n </div>\n <p className=\"text-xs text-text-secondary mb-3\">Pay directly to the vendor</p>\n <div className=\"flex items-center gap-2 text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3.5 w-3.5 shrink-0\" />\n <span className=\"text-xs\">Supports all payment methods</span>\n </div>\n </div>\n </div>\n </div>\n\n {/ Add Payment Method Modal /}\n {showAddModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-md max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Header /}\n <div className=\"flex items-center justify-between mb-4\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Add Payment Method</h2>\n <button\n type=\"button\"\n onClick={() => {\n setShowAddModal(false);\n resetForms();\n }}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n <p className=\"text-sm text-text-secondary mb-5\">\n Choose a payment method to add to your account\n </p>\n\n {/ Type Selection /}\n <div className=\"space-y-2 mb-5\">\n {[\n {\n value: 'card' as const,\n label: 'Credit/Debit Card',\n sub: 'Visa, Mastercard, Rupay',\n Icon: CreditCard,\n },\n {\n value: 'upi' as const,\n label: 'UPI',\n sub: 'Google Pay, PhonePe, Paytm',\n Icon: Smartphone,\n },\n {\n value: 'wallet' as const,\n label: 'Wallet',\n sub: 'Paytm, Amazon Pay, Mobikwik',\n Icon: Wallet,\n },\n ].map(({ value, label, sub, Icon }) => (\n <label\n key={value}\n className={cn(\n 'flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors',\n selectedType === value\n ? 'border-foreground bg-accent'\n : 'border-border-subtle hover:bg-accent'\n )}\n >\n <input\n type=\"radio\"\n name=\"paymentType\"\n value={value}\n checked={selectedType === value}\n onChange={() => setSelectedType(value)}\n className=\"h-4 w-4 shrink-0\"\n />\n <Icon className=\"h-5 w-5 text-text-secondary shrink-0\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n <p className=\"text-xs text-text-secondary\">{sub}</p>\n </div>\n </label>\n ))}\n </div>\n\n {/ Card Form /}\n {selectedType === 'card' && (\n <div className=\"space-y-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Card Number\n </label>\n <input\n type=\"text\"\n placeholder=\"1234 5678 9012 3456\"\n value={cardForm.cardNumber}\n onChange={(e) => setCardForm((p) => ({ ...p, cardNumber: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Expiry Date\n </label>\n <input\n type=\"text\"\n placeholder=\"MM/YY\"\n value={cardForm.expiry}\n onChange={(e) => setCardForm((p) => ({ ...p, expiry: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n CVV\n </label>\n <input\n type=\"password\"\n placeholder=\"123\"\n value={cardForm.cvv}\n onChange={(e) => setCardForm((p) => ({ ...p, cvv: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Name on Card\n </label>\n <input\n type=\"text\"\n placeholder=\"John Doe\"\n value={cardForm.nameOnCard}\n onChange={(e) => setCardForm((p) => ({ ...p, nameOnCard: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n )}\n\n {/ UPI Form /}\n {selectedType === 'upi' && (\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">UPI ID</label>\n <input\n type=\"text\"\n placeholder=\"yourname@paytm\"\n value={upiForm.upiId}\n onChange={(e) => setUpiForm({ upiId: e.target.value })}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n )}\n\n {/ Wallet Form /}\n {selectedType === 'wallet' && (\n <div className=\"space-y-3\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Select Wallet\n </label>\n <select\n value={walletForm.walletProvider}\n onChange={(e) =>\n setWalletForm((p) => ({ ...p, walletProvider: e.target.value }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option>Paytm</option>\n <option>Amazon Pay</option>\n <option>Mobikwik</option>\n <option>Freecharge</option>\n </select>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n Mobile Number\n </label>\n <input\n type=\"tel\"\n placeholder=\"9876543210\"\n value={walletForm.mobile}\n onChange={(e) => setWalletForm((p) => ({ ...p, mobile: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center gap-3 pt-5\">\n <button\n type=\"button\"\n onClick={handleAddPaymentMethod}\n className=\"flex-1 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Payment Method\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setShowAddModal(false);\n resetForms();\n }}\n className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/atheletebridge/pages/customer/ReviewsPage.js CHANGED Viewed

@@ -361,6 +361,7 @@ function C() {
 				})
 			}),
 			P.length === 0 ? /* @__PURE__ */ _(r, {
+				illustration: "empty-data",
 				icon: /* @__PURE__ */ _(d, { className: "h-12 w-12" }),
 				title: "No reviews found",
 				description: "Be the first to write a review!",

package/dist/atheletebridge/pages/customer/ReviewsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewsPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/ReviewsPage.tsx"],"sourcesContent":["/*\n Reviews Page\n * @module atheletebridge/pages/customer\n \n Full-featured reviews: Write Review modal (interactive star rating with\n * text labels, title, comment, guidelines), Owner Response callout,\n * review images, verified badge, Mark as Helpful toggle, 4 filters\n * (search, type, rating, sort), Your Review label, 5 mock reviews.\n /\n\nimport { useState, useCallback } from 'react';\nimport {\n Star,\n MessageSquare,\n ThumbsUp,\n PenSquare,\n X,\n CheckCircle2,\n Image,\n MessageCircle,\n Info,\n Search,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatDate } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface Review {\n id: string;\n userId: string;\n userName: string;\n userAvatar: string;\n itemId: string;\n itemName: string;\n itemType: 'cart' \| 'product';\n cartId: string;\n cartName: string;\n orderId: string;\n rating: number;\n title: string;\n comment: string;\n images?: string[];\n helpfulCount: number;\n isHelpful: boolean;\n isVerified: boolean;\n createdAt: string;\n response?: {\n message: string;\n respondedBy: string;\n respondedAt: string;\n };\n}\n\ninterface ReviewFormData {\n rating: number;\n title: string;\n comment: string;\n}\n\ninterface ReviewFilters {\n searchQuery: string;\n type: 'all' \| 'cart' \| 'product' \| 'my-reviews';\n rating: string;\n sortBy: 'recent' \| 'helpful' \| 'rating-high' \| 'rating-low';\n}\n\nconst CURRENT_USER_ID = 'user-001';\n\nconst ratingLabels: Record<number, string> = {\n 1: 'Terrible',\n 2: 'Poor',\n 3: 'Average',\n 4: 'Good',\n 5: 'Excellent',\n};\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst mockReviews: Review[] = [\n {\n id: 'review-001',\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-001',\n rating: 5,\n title: 'Excellent breakfast spot!',\n comment:\n 'Amazing dosas and filter coffee. The masala dosa was perfectly crispy and the potato filling was delicious. Service was quick and friendly. Highly recommend for authentic South Indian breakfast!',\n helpfulCount: 12,\n isHelpful: true,\n isVerified: true,\n createdAt: '2024-06-20T09:30:00Z',\n response: {\n message:\n \"Thank you so much for your wonderful review! We're thrilled you enjoyed the dosas. We look forward to serving you again soon!\",\n respondedBy: 'Dosa Express Team',\n respondedAt: '2024-06-20T15:45:00Z',\n },\n },\n {\n id: 'review-002',\n userId: 'user-002',\n userName: 'Priya Patel',\n userAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100',\n itemId: 'prod-002',\n itemName: 'Pani Puri',\n itemType: 'product',\n cartId: 'FOOD-002',\n cartName: 'Chaat Corner',\n orderId: 'ORD-2024-002',\n rating: 4,\n title: 'Good but could be spicier',\n comment:\n 'The pani puri was good overall. The puris were crispy and fresh. However, the pani could have been more spicy and tangy. The portions were generous though.',\n helpfulCount: 8,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-18T19:15:00Z',\n },\n {\n id: 'review-003',\n userId: 'user-003',\n userName: 'Amit Kumar',\n userAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100',\n itemId: 'FOOD-002',\n itemName: 'Chaat Corner',\n itemType: 'cart',\n cartId: 'FOOD-002',\n cartName: 'Chaat Corner',\n orderId: 'ORD-2024-003',\n rating: 5,\n title: 'Authentic Mumbai street food!',\n comment:\n 'This place brings back memories of Mumbai streets. Every item I ordered was authentic and delicious. The bhel puri and vada pav were exceptional. Will definitely order again!',\n images: ['https://images.unsplash.com/photo-1601050690597-df0568f70950?w=400'],\n helpfulCount: 15,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-17T20:30:00Z',\n },\n {\n id: 'review-004',\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'prod-001',\n itemName: 'Masala Dosa',\n itemType: 'product',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-004',\n rating: 5,\n title: 'Perfect masala dosa!',\n comment:\n 'The masala dosa here is absolutely perfect. Crispy, golden brown, and the potato masala inside is perfectly spiced. Comes with great chutneys and sambar.',\n helpfulCount: 6,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-15T08:45:00Z',\n response: {\n message: 'Glad you loved it, Rahul! Our chef takes great care with every dosa. See you soon!',\n respondedBy: 'Dosa Express Team',\n respondedAt: '2024-06-15T14:00:00Z',\n },\n },\n {\n id: 'review-005',\n userId: 'user-004',\n userName: 'Sneha Reddy',\n userAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-005',\n rating: 3,\n title: 'Average experience',\n comment:\n 'The food was okay but delivery took longer than expected. The taste was good but not exceptional. The packaging could be better to keep food warm.',\n helpfulCount: 4,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-12T12:20:00Z',\n },\n];\n\n// ============================================================================\n// Star Rating Interactive Component\n// ============================================================================\n\nfunction InteractiveStarRating({\n value,\n onChange,\n}: {\n value: number;\n onChange: (v: number) => void;\n}) {\n const [hoverValue, setHoverValue] = useState(0);\n const displayValue = hoverValue \|\| value;\n\n return (\n <div className=\"flex items-center gap-3\">\n <div className=\"flex items-center gap-0.5\">\n {[1, 2, 3, 4, 5].map((star) => (\n <button\n key={star}\n type=\"button\"\n onClick={() => onChange(star)}\n onMouseEnter={() => setHoverValue(star)}\n onMouseLeave={() => setHoverValue(0)}\n className=\"p-0.5 transition-transform\"\n >\n <Star\n className={cn(\n 'h-6 w-6',\n star <= displayValue\n ? 'fill-yellow-400 text-yellow-400'\n : 'fill-none text-text-secondary/40'\n )}\n />\n </button>\n ))}\n </div>\n <span className=\"text-sm font-medium text-text-secondary\">\n {ratingLabels[displayValue] ?? ''}\n </span>\n </div>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function ReviewsPage() {\n const { navigateTo } = useAthleteBridge();\n const [reviews, setReviews] = useState<Review[]>(mockReviews);\n const [showWriteReview, setShowWriteReview] = useState(false);\n const [reviewForm, setReviewForm] = useState<ReviewFormData>({\n rating: 5,\n title: '',\n comment: '',\n });\n const [filters, setFilters] = useState<ReviewFilters>({\n searchQuery: '',\n type: 'all',\n rating: '',\n sortBy: 'recent',\n });\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n // --- Filtered reviews ---\n const filteredReviews = useCallback(() => {\n let result = [...reviews];\n\n // Type filter\n if (filters.type === 'my-reviews') {\n result = result.filter((r) => r.userId === CURRENT_USER_ID);\n } else if (filters.type !== 'all') {\n result = result.filter((r) => r.itemType === filters.type);\n }\n\n // Rating filter\n if (filters.rating) {\n const ratingVal = parseInt(filters.rating, 10);\n result = result.filter((r) => r.rating === ratingVal);\n }\n\n // Search\n if (filters.searchQuery) {\n const q = filters.searchQuery.toLowerCase();\n result = result.filter(\n (r) =>\n r.itemName.toLowerCase().includes(q) \|\|\n r.title.toLowerCase().includes(q) \|\|\n r.comment.toLowerCase().includes(q) \|\|\n r.cartName.toLowerCase().includes(q)\n );\n }\n\n // Sort\n switch (filters.sortBy) {\n case 'recent':\n result.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());\n break;\n case 'helpful':\n result.sort((a, b) => b.helpfulCount - a.helpfulCount);\n break;\n case 'rating-high':\n result.sort((a, b) => b.rating - a.rating);\n break;\n case 'rating-low':\n result.sort((a, b) => a.rating - b.rating);\n break;\n }\n\n return result;\n }, [reviews, filters])();\n\n // --- Stats ---\n const myReviewCount = reviews.filter((r) => r.userId === CURRENT_USER_ID).length;\n const avgRating =\n reviews.length > 0\n ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1)\n : '0';\n\n // --- Handlers ---\n const handleSubmitReview = () => {\n if (!reviewForm.title.trim() \|\| !reviewForm.comment.trim()) {\n alert('Please fill in the Review Title and Comment.');\n return;\n }\n\n const newReview: Review = {\n id: `review-${Date.now()}`,\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: `ORD-2024-${Date.now()}`,\n rating: reviewForm.rating,\n title: reviewForm.title,\n comment: reviewForm.comment,\n helpfulCount: 0,\n isHelpful: false,\n isVerified: true,\n createdAt: new Date().toISOString(),\n };\n\n setReviews((prev) => [newReview, ...prev]);\n setReviewForm({ rating: 5, title: '', comment: '' });\n setShowWriteReview(false);\n showStatus('Review submitted successfully!');\n };\n\n const handleMarkHelpful = (reviewId: string) => {\n setReviews((prev) =>\n prev.map((r) =>\n r.id === reviewId\n ? {\n ...r,\n isHelpful: !r.isHelpful,\n helpfulCount: r.isHelpful ? r.helpfulCount - 1 : r.helpfulCount + 1,\n }\n : r\n )\n );\n };\n\n return (\n <PageLayout\n title=\"Reviews & Ratings\"\n description={`${filteredReviews.length} reviews found`}\n actions={\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <PenSquare className=\"h-4 w-4\" />\n Write Review\n </button>\n }\n >\n {/ Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {/ Stats /}\n <div className=\"flex flex-wrap items-center gap-4 text-sm text-text-secondary mb-6\">\n <span>{reviews.length} total reviews</span>\n <span>{myReviewCount} your reviews</span>\n <span className=\"flex items-center gap-1\">\n Average: {avgRating}\n <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n </span>\n </div>\n\n {/ Filters /}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n {/ Search /}\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"text\"\n placeholder=\"Search reviews...\"\n value={filters.searchQuery}\n onChange={(e) => setFilters((p) => ({ ...p, searchQuery: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/ Type /}\n <select\n value={filters.type}\n onChange={(e) =>\n setFilters((p) => ({ ...p, type: e.target.value as ReviewFilters['type'] }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"all\">All Reviews</option>\n <option value=\"cart\">Cart Reviews</option>\n <option value=\"product\">Product Reviews</option>\n <option value=\"my-reviews\">My Reviews</option>\n </select>\n\n {/ Rating /}\n <select\n value={filters.rating}\n onChange={(e) => setFilters((p) => ({ ...p, rating: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"\">All Ratings</option>\n <option value=\"5\">5 Stars</option>\n <option value=\"4\">4 Stars</option>\n <option value=\"3\">3 Stars</option>\n <option value=\"2\">2 Stars</option>\n <option value=\"1\">1 Star</option>\n </select>\n\n {/ Sort /}\n <select\n value={filters.sortBy}\n onChange={(e) =>\n setFilters((p) => ({ ...p, sortBy: e.target.value as ReviewFilters['sortBy'] }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"recent\">Most Recent</option>\n <option value=\"helpful\">Most Helpful</option>\n <option value=\"rating-high\">Highest Rating</option>\n <option value=\"rating-low\">Lowest Rating</option>\n </select>\n </div>\n </div>\n\n {/ Reviews List /}\n {filteredReviews.length === 0 ? (\n <EmptyState\n icon={<MessageSquare className=\"h-12 w-12\" />}\n title=\"No reviews found\"\n description=\"Be the first to write a review!\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Write a Review\n </button>\n }\n />\n ) : (\n <div className=\"space-y-4\">\n {filteredReviews.map((review) => {\n const isMyReview = review.userId === CURRENT_USER_ID;\n return (\n <div\n key={review.id}\n className={cn(\n 'rounded-lg border bg-bg-surface p-5',\n isMyReview ? 'border-foreground/20' : 'border-border-subtle'\n )}\n >\n {/ Header /}\n <div className=\"flex items-start gap-3 mb-3\">\n <img\n src={review.userAvatar}\n alt={review.userName}\n className=\"h-10 w-10 rounded-full object-cover shrink-0\"\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2 flex-wrap\">\n <span className=\"text-sm font-semibold text-text-primary\">\n {review.userName}\n </span>\n {review.isVerified && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Verified\n </span>\n )}\n {isMyReview && (\n <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400\">\n Your Review\n </span>\n )}\n </div>\n <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-secondary mt-0.5\">\n <span>\n {review.itemType === 'cart' ? (\n <MessageSquare className=\"inline h-3 w-3 mr-0.5\" />\n ) : (\n <Star className=\"inline h-3 w-3 mr-0.5\" />\n )}\n {review.itemName}\n </span>\n <span>\n {formatDate(review.createdAt, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n </div>\n <div className=\"shrink-0\">\n <RatingDisplay value={review.rating} size=\"sm\" />\n <p className=\"text-xs text-text-secondary mt-0.5 text-right\">\n From: {review.cartName}\n </p>\n </div>\n </div>\n\n {/ Content /}\n <div className=\"mb-3\">\n <h4 className=\"text-sm font-semibold text-text-primary mb-1\">{review.title}</h4>\n <p className=\"text-sm text-text-primary leading-relaxed\">{review.comment}</p>\n </div>\n\n {/ Review Images /}\n {review.images && review.images.length > 0 && (\n <div className=\"mb-3 flex gap-2 overflow-x-auto pb-1\">\n {review.images.map((img, idx) => (\n <img\n key={idx}\n src={img}\n alt={`Review image ${idx + 1}`}\n className=\"h-20 w-20 rounded-lg object-cover shrink-0\"\n />\n ))}\n </div>\n )}\n\n {/ Owner Response /}\n {review.response && (\n <div className=\"mb-3 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3\">\n <div className=\"flex flex-wrap items-center gap-2 mb-1.5\">\n <MessageCircle className=\"h-3.5 w-3.5 text-blue-600 dark:text-blue-400\" />\n <span className=\"text-xs font-medium text-blue-600 dark:text-blue-400\">\n Response from {review.response.respondedBy}\n </span>\n <span className=\"text-[10px] text-blue-500/70\">\n {formatDate(review.response.respondedAt, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n <p className=\"text-xs text-blue-700 dark:text-blue-300 leading-relaxed\">\n {review.response.message}\n </p>\n </div>\n )}\n\n {/ Footer /}\n <div className=\"flex items-center justify-between pt-3 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => handleMarkHelpful(review.id)}\n className={cn(\n 'flex items-center gap-1.5 text-xs transition-colors',\n review.isHelpful\n ? 'text-blue-600 dark:text-blue-400 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n )}\n >\n <ThumbsUp className={cn('h-3.5 w-3.5', review.isHelpful && 'fill-current')} />\n Helpful ({review.helpfulCount})\n </button>\n\n <div className=\"flex items-center gap-3 text-xs text-text-secondary\">\n <span>Order: {review.orderId}</span>\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/carts/${review.cartId}`)}\n className=\"font-medium hover:text-text-primary transition-colors\"\n >\n View Cart\n </button>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n )}\n\n {/ Write Review Modal /}\n {showWriteReview && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Header /}\n <div className=\"flex items-center justify-between mb-5\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Write a Review</h3>\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(false)}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"space-y-4\">\n {/ Rating /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-2\">\n Rating <span className=\"text-red-500\"></span>\n </label>\n <InteractiveStarRating\n value={reviewForm.rating}\n onChange={(v) => setReviewForm((p) => ({ ...p, rating: v }))}\n />\n </div>\n\n {/* Title /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Review Title <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"Summarize your experience\"\n value={reviewForm.title}\n onChange={(e) => setReviewForm((p) => ({ ...p, title: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/* Comment /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Your Review <span className=\"text-red-500\"></span>\n </label>\n <textarea\n rows={5}\n placeholder=\"Share your experience with others...\"\n value={reviewForm.comment}\n onChange={(e) => setReviewForm((p) => ({ ...p, comment: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n {/* Guidelines /}\n <div className=\"rounded-lg bg-bg-sunken p-4\">\n <div className=\"flex items-center gap-2 mb-2\">\n <Info className=\"h-4 w-4 text-text-secondary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Review Guidelines</h4>\n </div>\n <ul className=\"text-xs text-text-secondary space-y-1\">\n <li>- Be honest and helpful to other customers</li>\n <li>- Focus on your experience with the food and service</li>\n <li>- Avoid personal information or inappropriate content</li>\n <li>- Reviews are public and cannot be deleted once submitted</li>\n </ul>\n </div>\n </div>\n\n {/ Actions */}\n <div className=\"flex items-center gap-3 pt-5\">\n <button\n type=\"button\"\n onClick={handleSubmitReview}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Submit Review\n </button>\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(false)}\n className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;;;AAyEA,IAAM,IAAkB,YAElB,IAAuC;CAC3C,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ,EAMK,IAAwB;CAC5B;EACE,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,OAAO;EACP,SACE;EACF,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACX,UAAU;GACR,SACE;GACF,aAAa;GACb,aAAa;GACd;EACF;CACD;EACE,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,OAAO;EACP,SACE;EACF,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACZ;CACD;EACE,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,OAAO;EACP,SACE;EACF,QAAQ,CAAC,qEAAqE;EAC9E,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACZ;CACD;EACE,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,OAAO;EACP,SACE;EACF,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACX,UAAU;GACR,SAAS;GACT,aAAa;GACb,aAAa;GACd;EACF;CACD;EACE,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,UAAU;EACV,QAAQ;EACR,UAAU;EACV,SAAS;EACT,QAAQ;EACR,OAAO;EACP,SACE;EACF,cAAc;EACd,WAAW;EACX,YAAY;EACZ,WAAW;EACZ;CACF;AAMD,SAAS,EAAsB,EAC7B,UACA,eAIC;CACD,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAE,EACzC,IAAe,KAAc;AAEnC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ;IAAC;IAAG;IAAG;IAAG;IAAG;IAAE,CAAC,KAAK,MACpB,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAS,EAAK;IAC7B,oBAAoB,EAAc,EAAK;IACvC,oBAAoB,EAAc,EAAE;IACpC,WAAU;cAEV,kBAAC,GAAD,EACE,WAAW,EACT,WACA,KAAQ,IACJ,oCACA,mCACL,EACD,CAAA;IACK,EAfF,EAeE,CACT;GACE,CAAA,EACN,kBAAC,QAAD;GAAM,WAAU;aACb,EAAa,MAAiB;GAC1B,CAAA,CACH;;;AAQV,SAAgB,IAAc;CAC5B,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAS,KAAc,EAAmB,EAAY,EACvD,CAAC,GAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,GAAY,KAAiB,EAAyB;EAC3D,QAAQ;EACR,OAAO;EACP,SAAS;EACV,CAAC,EACI,CAAC,GAAS,KAAc,EAAwB;EACpD,aAAa;EACb,MAAM;EACN,QAAQ;EACR,QAAQ;EACT,CAAC,EACI,CAAC,GAAe,KAAoB,EAAwB,KAAK,EAEjE,KAAc,MAAgB;AAElC,EADA,EAAiB,EAAI,EACrB,iBAAiB,EAAiB,KAAK,EAAE,IAAK;IAI1C,IAAkB,QAAkB;EACxC,IAAI,IAAS,CAAC,GAAG,EAAQ;AAUzB,MAPI,EAAQ,SAAS,eACnB,IAAS,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAgB,GAClD,EAAQ,SAAS,UAC1B,IAAS,EAAO,QAAQ,MAAM,EAAE,aAAa,EAAQ,KAAK,GAIxD,EAAQ,QAAQ;GAClB,IAAM,IAAY,SAAS,EAAQ,QAAQ,GAAG;AAC9C,OAAS,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAU;;AAIvD,MAAI,EAAQ,aAAa;GACvB,IAAM,IAAI,EAAQ,YAAY,aAAa;AAC3C,OAAS,EAAO,QACb,MACC,EAAE,SAAS,aAAa,CAAC,SAAS,EAAE,IACpC,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,IACjC,EAAE,QAAQ,aAAa,CAAC,SAAS,EAAE,IACnC,EAAE,SAAS,aAAa,CAAC,SAAS,EAAE,CACvC;;AAIH,UAAQ,EAAQ,QAAhB;GACE,KAAK;AACH,MAAO,MAAM,GAAG,MAAM,IAAI,KAAK,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC;AACxF;GACF,KAAK;AACH,MAAO,MAAM,GAAG,MAAM,EAAE,eAAe,EAAE,aAAa;AACtD;GACF,KAAK;AACH,MAAO,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO;AAC1C;GACF,KAAK;AACH,MAAO,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO;AAC1C;;AAGJ,SAAO;IACN,CAAC,GAAS,EAAQ,CAAC,EAAE,EAGlB,IAAgB,EAAQ,QAAQ,MAAM,EAAE,WAAW,EAAgB,CAAC,QACpE,IACJ,EAAQ,SAAS,KACZ,EAAQ,QAAQ,GAAG,MAAM,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAQ,QAAQ,QAAQ,EAAE,GACvE,KAGA,UAA2B;AAC/B,MAAI,CAAC,EAAW,MAAM,MAAM,IAAI,CAAC,EAAW,QAAQ,MAAM,EAAE;AAC1D,SAAM,+CAA+C;AACrD;;EAGF,IAAM,IAAoB;GACxB,IAAI,UAAU,KAAK,KAAK;GACxB,QAAQ;GACR,UAAU;GACV,YAAY;GACZ,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ;GACR,UAAU;GACV,SAAS,YAAY,KAAK,KAAK;GAC/B,QAAQ,EAAW;GACnB,OAAO,EAAW;GAClB,SAAS,EAAW;GACpB,cAAc;GACd,WAAW;GACX,YAAY;GACZ,4BAAW,IAAI,MAAM,EAAC,aAAa;GACpC;AAKD,EAHA,GAAY,MAAS,CAAC,GAAW,GAAG,EAAK,CAAC,EAC1C,EAAc;GAAE,QAAQ;GAAG,OAAO;GAAI,SAAS;GAAI,CAAC,EACpD,EAAmB,GAAM,EACzB,EAAW,iCAAiC;IAGxC,KAAqB,MAAqB;AAC9C,KAAY,MACV,EAAK,KAAK,MACR,EAAE,OAAO,IACL;GACE,GAAG;GACH,WAAW,CAAC,EAAE;GACd,cAAc,EAAE,YAAY,EAAE,eAAe,IAAI,EAAE,eAAe;GACnE,GACD,EACL,CACF;;AAGH,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,GAAG,EAAgB,OAAO;EACvC,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAmB,GAAK;GACvC,WAAW,EACT,uFACA,iDACD;aANH,CAQE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,eAE1B;;YAdb;GAkBG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAc,WAAU,uDAAwD,CAAA,EAChF,kBAAC,KAAD;KAAG,WAAU;eAA8C;KAAkB,CAAA,CACzE;;GAIR,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAQ,QAAO,iBAAqB,EAAA,CAAA;KAC3C,kBAAC,QAAD,EAAA,UAAA,CAAO,GAAc,gBAAoB,EAAA,CAAA;KACzC,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OAA0C;OAC9B;OACV,kBAAC,GAAD,EAAM,WAAU,+CAAgD,CAAA;OAC3D;;KACH;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,SAAD;QACE,MAAK;QACL,aAAY;QACZ,OAAO,EAAQ;QACf,WAAW,MAAM,GAAY,OAAO;SAAE,GAAG;SAAG,aAAa,EAAE,OAAO;SAAO,EAAE;QAC3E,WAAU;QACV,CAAA,CACE;;MAGN,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MACT,GAAY,OAAO;QAAE,GAAG;QAAG,MAAM,EAAE,OAAO;QAAgC,EAAE;OAE9E,WAAU;iBALZ;QAOE,kBAAC,UAAD;SAAQ,OAAM;mBAAM;SAAoB,CAAA;QACxC,kBAAC,UAAD;SAAQ,OAAM;mBAAO;SAAqB,CAAA;QAC1C,kBAAC,UAAD;SAAQ,OAAM;mBAAU;SAAwB,CAAA;QAChD,kBAAC,UAAD;SAAQ,OAAM;mBAAa;SAAmB,CAAA;QACvC;;MAGT,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MAAM,GAAY,OAAO;QAAE,GAAG;QAAG,QAAQ,EAAE,OAAO;QAAO,EAAE;OACtE,WAAU;iBAHZ;QAKE,kBAAC,UAAD;SAAQ,OAAM;mBAAG;SAAoB,CAAA;QACrC,kBAAC,UAAD;SAAQ,OAAM;mBAAI;SAAgB,CAAA;QAClC,kBAAC,UAAD;SAAQ,OAAM;mBAAI;SAAgB,CAAA;QAClC,kBAAC,UAAD;SAAQ,OAAM;mBAAI;SAAgB,CAAA;QAClC,kBAAC,UAAD;SAAQ,OAAM;mBAAI;SAAgB,CAAA;QAClC,kBAAC,UAAD;SAAQ,OAAM;mBAAI;SAAe,CAAA;QAC1B;;MAGT,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MACT,GAAY,OAAO;QAAE,GAAG;QAAG,QAAQ,EAAE,OAAO;QAAkC,EAAE;OAElF,WAAU;iBALZ;QAOE,kBAAC,UAAD;SAAQ,OAAM;mBAAS;SAAoB,CAAA;QAC3C,kBAAC,UAAD;SAAQ,OAAM;mBAAU;SAAqB,CAAA;QAC7C,kBAAC,UAAD;SAAQ,OAAM;mBAAc;SAAuB,CAAA;QACnD,kBAAC,UAAD;SAAQ,OAAM;mBAAa;SAAsB,CAAA;QAC1C;;MACL;;IACF,CAAA;GAGL,EAAgB,WAAW,IAC1B,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD,EAAe,WAAU,aAAc,CAAA;IAC7C,OAAM;IACN,aAAY;IACZ,QACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAmB,GAAK;KACvC,WAAU;eACX;KAEQ,CAAA;IAEX,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAgB,KAAK,MAAW;KAC/B,IAAM,IAAa,EAAO,WAAW;AACrC,YACE,kBAAC,OAAD;MAEE,WAAW,EACT,uCACA,IAAa,yBAAyB,uBACvC;gBALH;OAQE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UACE,KAAK,EAAO;UACZ,KAAK,EAAO;UACZ,WAAU;UACV,CAAA;SACF,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAO;aACH,CAAA;YACN,EAAO,cACN,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,WAE/B;;YAER,KACC,kBAAC,QAAD;aAAM,WAAU;uBAA4H;aAErI,CAAA;YAEL;cACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD,EAAA,UAAA,CACG,EAAO,aAAa,SACnB,kBAAC,GAAD,EAAe,WAAU,yBAA0B,CAAA,GAEnD,kBAAC,GAAD,EAAM,WAAU,yBAA0B,CAAA,EAE3C,EAAO,SACH,EAAA,CAAA,EACP,kBAAC,QAAD,EAAA,UACG,EAAW,EAAO,WAAW;YAC5B,MAAM,KAAA;YACN,QAAQ,KAAA;YACR,QAAQ,KAAA;YACT,CAAC,EACG,CAAA,CACH;aACF;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAe,OAAO,EAAO;WAAQ,MAAK;WAAO,CAAA,EACjD,kBAAC,KAAD;WAAG,WAAU;qBAAb,CAA6D,UACpD,EAAO,SACZ;aACA;;SACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAgD,EAAO;SAAW,CAAA,EAChF,kBAAC,KAAD;SAAG,WAAU;mBAA6C,EAAO;SAAY,CAAA,CACzE;;OAGL,EAAO,UAAU,EAAO,OAAO,SAAS,KACvC,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAO,OAAO,KAAK,GAAK,MACvB,kBAAC,OAAD;SAEE,KAAK;SACL,KAAK,gBAAgB,IAAM;SAC3B,WAAU;SACV,EAJK,EAIL,CACF;QACE,CAAA;OAIP,EAAO,YACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,GAAD,EAAe,WAAU,gDAAiD,CAAA;UAC1E,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAAuE,kBACtD,EAAO,SAAS,YAC1B;;UACP,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAW,EAAO,SAAS,aAAa;YACvC,MAAM,KAAA;YACN,QAAQ,KAAA;YACR,QAAQ,KAAA;YACT,CAAC;WACG,CAAA;UACH;YACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAO,SAAS;SACf,CAAA,CACA;;OAIR,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAkB,EAAO,GAAG;SAC3C,WAAW,EACT,uDACA,EAAO,YACH,iDACA,8CACL;mBARH;UAUE,kBAAC,GAAD,EAAU,WAAW,EAAG,eAAe,EAAO,aAAa,eAAe,EAAI,CAAA;;UACpE,EAAO;UAAa;UACvB;YAET,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD,EAAA,UAAA,CAAM,WAAQ,EAAO,QAAe,EAAA,CAAA,EACpC,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,mBAAmB,EAAO,SAAS;UAC7D,WAAU;oBACX;UAEQ,CAAA,CACL;WACF;;OACF;QA7HC,EAAO,GA6HR;MAER;IACE,CAAA;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAmB,CAAA,EAC3E,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAmB,GAAM;SACxC,WAAU;mBAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;SAClB,CAAA,CACL;;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAoE,WAC3D,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CACxC;aACR,kBAAC,GAAD;UACE,OAAO,EAAW;UAClB,WAAW,MAAM,GAAe,OAAO;WAAE,GAAG;WAAG,QAAQ;WAAG,EAAE;UAC5D,CAAA,CACE,EAAA,CAAA;SAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,iBACvD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC9C;aACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAW;UAClB,WAAW,MAAM,GAAe,OAAO;WAAE,GAAG;WAAG,OAAO,EAAE,OAAO;WAAO,EAAE;UACxE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAsE,gBACxD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC7C;aACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAW;UAClB,WAAW,MAAM,GAAe,OAAO;WAAE,GAAG;WAAG,SAAS,EAAE,OAAO;WAAO,EAAE;UAC1E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,+BAAgC,CAAA,EAChD,kBAAC,MAAD;YAAI,WAAU;sBAAwC;YAAsB,CAAA,CACxE;cACN,kBAAC,MAAD;WAAI,WAAU;qBAAd;YACE,kBAAC,MAAD,EAAA,UAAI,8CAA+C,CAAA;YACnD,kBAAC,MAAD,EAAA,UAAI,wDAAyD,CAAA;YAC7D,kBAAC,MAAD,EAAA,UAAI,yDAA0D,CAAA;YAC9D,kBAAC,MAAD,EAAA,UAAI,6DAA8D,CAAA;YAC/D;aACD;;SACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBACX;SAEQ,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAmB,GAAM;SACxC,WAAU;mBACX;SAEQ,CAAA,CACL;;OACF;;KACF,CAAA;IACF,CAAA;GAEG"}
1	+ {"version":3,"file":"ReviewsPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/ReviewsPage.tsx"],"sourcesContent":["/*\n Reviews Page\n * @module atheletebridge/pages/customer\n \n Full-featured reviews: Write Review modal (interactive star rating with\n * text labels, title, comment, guidelines), Owner Response callout,\n * review images, verified badge, Mark as Helpful toggle, 4 filters\n * (search, type, rating, sort), Your Review label, 5 mock reviews.\n /\n\nimport { useState, useCallback } from 'react';\nimport {\n Star,\n MessageSquare,\n ThumbsUp,\n PenSquare,\n X,\n CheckCircle2,\n Image,\n MessageCircle,\n Info,\n Search,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatDate } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface Review {\n id: string;\n userId: string;\n userName: string;\n userAvatar: string;\n itemId: string;\n itemName: string;\n itemType: 'cart' \| 'product';\n cartId: string;\n cartName: string;\n orderId: string;\n rating: number;\n title: string;\n comment: string;\n images?: string[];\n helpfulCount: number;\n isHelpful: boolean;\n isVerified: boolean;\n createdAt: string;\n response?: {\n message: string;\n respondedBy: string;\n respondedAt: string;\n };\n}\n\ninterface ReviewFormData {\n rating: number;\n title: string;\n comment: string;\n}\n\ninterface ReviewFilters {\n searchQuery: string;\n type: 'all' \| 'cart' \| 'product' \| 'my-reviews';\n rating: string;\n sortBy: 'recent' \| 'helpful' \| 'rating-high' \| 'rating-low';\n}\n\nconst CURRENT_USER_ID = 'user-001';\n\nconst ratingLabels: Record<number, string> = {\n 1: 'Terrible',\n 2: 'Poor',\n 3: 'Average',\n 4: 'Good',\n 5: 'Excellent',\n};\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst mockReviews: Review[] = [\n {\n id: 'review-001',\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-001',\n rating: 5,\n title: 'Excellent breakfast spot!',\n comment:\n 'Amazing dosas and filter coffee. The masala dosa was perfectly crispy and the potato filling was delicious. Service was quick and friendly. Highly recommend for authentic South Indian breakfast!',\n helpfulCount: 12,\n isHelpful: true,\n isVerified: true,\n createdAt: '2024-06-20T09:30:00Z',\n response: {\n message:\n \"Thank you so much for your wonderful review! We're thrilled you enjoyed the dosas. We look forward to serving you again soon!\",\n respondedBy: 'Dosa Express Team',\n respondedAt: '2024-06-20T15:45:00Z',\n },\n },\n {\n id: 'review-002',\n userId: 'user-002',\n userName: 'Priya Patel',\n userAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100',\n itemId: 'prod-002',\n itemName: 'Pani Puri',\n itemType: 'product',\n cartId: 'FOOD-002',\n cartName: 'Chaat Corner',\n orderId: 'ORD-2024-002',\n rating: 4,\n title: 'Good but could be spicier',\n comment:\n 'The pani puri was good overall. The puris were crispy and fresh. However, the pani could have been more spicy and tangy. The portions were generous though.',\n helpfulCount: 8,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-18T19:15:00Z',\n },\n {\n id: 'review-003',\n userId: 'user-003',\n userName: 'Amit Kumar',\n userAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100',\n itemId: 'FOOD-002',\n itemName: 'Chaat Corner',\n itemType: 'cart',\n cartId: 'FOOD-002',\n cartName: 'Chaat Corner',\n orderId: 'ORD-2024-003',\n rating: 5,\n title: 'Authentic Mumbai street food!',\n comment:\n 'This place brings back memories of Mumbai streets. Every item I ordered was authentic and delicious. The bhel puri and vada pav were exceptional. Will definitely order again!',\n images: ['https://images.unsplash.com/photo-1601050690597-df0568f70950?w=400'],\n helpfulCount: 15,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-17T20:30:00Z',\n },\n {\n id: 'review-004',\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'prod-001',\n itemName: 'Masala Dosa',\n itemType: 'product',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-004',\n rating: 5,\n title: 'Perfect masala dosa!',\n comment:\n 'The masala dosa here is absolutely perfect. Crispy, golden brown, and the potato masala inside is perfectly spiced. Comes with great chutneys and sambar.',\n helpfulCount: 6,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-15T08:45:00Z',\n response: {\n message: 'Glad you loved it, Rahul! Our chef takes great care with every dosa. See you soon!',\n respondedBy: 'Dosa Express Team',\n respondedAt: '2024-06-15T14:00:00Z',\n },\n },\n {\n id: 'review-005',\n userId: 'user-004',\n userName: 'Sneha Reddy',\n userAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: 'ORD-2024-005',\n rating: 3,\n title: 'Average experience',\n comment:\n 'The food was okay but delivery took longer than expected. The taste was good but not exceptional. The packaging could be better to keep food warm.',\n helpfulCount: 4,\n isHelpful: false,\n isVerified: true,\n createdAt: '2024-06-12T12:20:00Z',\n },\n];\n\n// ============================================================================\n// Star Rating Interactive Component\n// ============================================================================\n\nfunction InteractiveStarRating({\n value,\n onChange,\n}: {\n value: number;\n onChange: (v: number) => void;\n}) {\n const [hoverValue, setHoverValue] = useState(0);\n const displayValue = hoverValue \|\| value;\n\n return (\n <div className=\"flex items-center gap-3\">\n <div className=\"flex items-center gap-0.5\">\n {[1, 2, 3, 4, 5].map((star) => (\n <button\n key={star}\n type=\"button\"\n onClick={() => onChange(star)}\n onMouseEnter={() => setHoverValue(star)}\n onMouseLeave={() => setHoverValue(0)}\n className=\"p-0.5 transition-transform\"\n >\n <Star\n className={cn(\n 'h-6 w-6',\n star <= displayValue\n ? 'fill-yellow-400 text-yellow-400'\n : 'fill-none text-text-secondary/40'\n )}\n />\n </button>\n ))}\n </div>\n <span className=\"text-sm font-medium text-text-secondary\">\n {ratingLabels[displayValue] ?? ''}\n </span>\n </div>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function ReviewsPage() {\n const { navigateTo } = useAthleteBridge();\n const [reviews, setReviews] = useState<Review[]>(mockReviews);\n const [showWriteReview, setShowWriteReview] = useState(false);\n const [reviewForm, setReviewForm] = useState<ReviewFormData>({\n rating: 5,\n title: '',\n comment: '',\n });\n const [filters, setFilters] = useState<ReviewFilters>({\n searchQuery: '',\n type: 'all',\n rating: '',\n sortBy: 'recent',\n });\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n // --- Filtered reviews ---\n const filteredReviews = useCallback(() => {\n let result = [...reviews];\n\n // Type filter\n if (filters.type === 'my-reviews') {\n result = result.filter((r) => r.userId === CURRENT_USER_ID);\n } else if (filters.type !== 'all') {\n result = result.filter((r) => r.itemType === filters.type);\n }\n\n // Rating filter\n if (filters.rating) {\n const ratingVal = parseInt(filters.rating, 10);\n result = result.filter((r) => r.rating === ratingVal);\n }\n\n // Search\n if (filters.searchQuery) {\n const q = filters.searchQuery.toLowerCase();\n result = result.filter(\n (r) =>\n r.itemName.toLowerCase().includes(q) \|\|\n r.title.toLowerCase().includes(q) \|\|\n r.comment.toLowerCase().includes(q) \|\|\n r.cartName.toLowerCase().includes(q)\n );\n }\n\n // Sort\n switch (filters.sortBy) {\n case 'recent':\n result.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());\n break;\n case 'helpful':\n result.sort((a, b) => b.helpfulCount - a.helpfulCount);\n break;\n case 'rating-high':\n result.sort((a, b) => b.rating - a.rating);\n break;\n case 'rating-low':\n result.sort((a, b) => a.rating - b.rating);\n break;\n }\n\n return result;\n }, [reviews, filters])();\n\n // --- Stats ---\n const myReviewCount = reviews.filter((r) => r.userId === CURRENT_USER_ID).length;\n const avgRating =\n reviews.length > 0\n ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1)\n : '0';\n\n // --- Handlers ---\n const handleSubmitReview = () => {\n if (!reviewForm.title.trim() \|\| !reviewForm.comment.trim()) {\n alert('Please fill in the Review Title and Comment.');\n return;\n }\n\n const newReview: Review = {\n id: `review-${Date.now()}`,\n userId: CURRENT_USER_ID,\n userName: 'Rahul Sharma',\n userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',\n itemId: 'FOOD-001',\n itemName: 'Dosa Express',\n itemType: 'cart',\n cartId: 'FOOD-001',\n cartName: 'Dosa Express',\n orderId: `ORD-2024-${Date.now()}`,\n rating: reviewForm.rating,\n title: reviewForm.title,\n comment: reviewForm.comment,\n helpfulCount: 0,\n isHelpful: false,\n isVerified: true,\n createdAt: new Date().toISOString(),\n };\n\n setReviews((prev) => [newReview, ...prev]);\n setReviewForm({ rating: 5, title: '', comment: '' });\n setShowWriteReview(false);\n showStatus('Review submitted successfully!');\n };\n\n const handleMarkHelpful = (reviewId: string) => {\n setReviews((prev) =>\n prev.map((r) =>\n r.id === reviewId\n ? {\n ...r,\n isHelpful: !r.isHelpful,\n helpfulCount: r.isHelpful ? r.helpfulCount - 1 : r.helpfulCount + 1,\n }\n : r\n )\n );\n };\n\n return (\n <PageLayout\n title=\"Reviews & Ratings\"\n description={`${filteredReviews.length} reviews found`}\n actions={\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <PenSquare className=\"h-4 w-4\" />\n Write Review\n </button>\n }\n >\n {/ Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {/ Stats /}\n <div className=\"flex flex-wrap items-center gap-4 text-sm text-text-secondary mb-6\">\n <span>{reviews.length} total reviews</span>\n <span>{myReviewCount} your reviews</span>\n <span className=\"flex items-center gap-1\">\n Average: {avgRating}\n <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n </span>\n </div>\n\n {/ Filters /}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n {/ Search /}\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"text\"\n placeholder=\"Search reviews...\"\n value={filters.searchQuery}\n onChange={(e) => setFilters((p) => ({ ...p, searchQuery: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/ Type /}\n <select\n value={filters.type}\n onChange={(e) =>\n setFilters((p) => ({ ...p, type: e.target.value as ReviewFilters['type'] }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"all\">All Reviews</option>\n <option value=\"cart\">Cart Reviews</option>\n <option value=\"product\">Product Reviews</option>\n <option value=\"my-reviews\">My Reviews</option>\n </select>\n\n {/ Rating /}\n <select\n value={filters.rating}\n onChange={(e) => setFilters((p) => ({ ...p, rating: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"\">All Ratings</option>\n <option value=\"5\">5 Stars</option>\n <option value=\"4\">4 Stars</option>\n <option value=\"3\">3 Stars</option>\n <option value=\"2\">2 Stars</option>\n <option value=\"1\">1 Star</option>\n </select>\n\n {/ Sort /}\n <select\n value={filters.sortBy}\n onChange={(e) =>\n setFilters((p) => ({ ...p, sortBy: e.target.value as ReviewFilters['sortBy'] }))\n }\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"recent\">Most Recent</option>\n <option value=\"helpful\">Most Helpful</option>\n <option value=\"rating-high\">Highest Rating</option>\n <option value=\"rating-low\">Lowest Rating</option>\n </select>\n </div>\n </div>\n\n {/ Reviews List /}\n {filteredReviews.length === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\n icon={<MessageSquare className=\"h-12 w-12\" />}\n title=\"No reviews found\"\n description=\"Be the first to write a review!\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Write a Review\n </button>\n }\n />\n ) : (\n <div className=\"space-y-4\">\n {filteredReviews.map((review) => {\n const isMyReview = review.userId === CURRENT_USER_ID;\n return (\n <div\n key={review.id}\n className={cn(\n 'rounded-lg border bg-bg-surface p-5',\n isMyReview ? 'border-foreground/20' : 'border-border-subtle'\n )}\n >\n {/ Header /}\n <div className=\"flex items-start gap-3 mb-3\">\n <img\n src={review.userAvatar}\n alt={review.userName}\n className=\"h-10 w-10 rounded-full object-cover shrink-0\"\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"flex items-center gap-2 flex-wrap\">\n <span className=\"text-sm font-semibold text-text-primary\">\n {review.userName}\n </span>\n {review.isVerified && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Verified\n </span>\n )}\n {isMyReview && (\n <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400\">\n Your Review\n </span>\n )}\n </div>\n <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-secondary mt-0.5\">\n <span>\n {review.itemType === 'cart' ? (\n <MessageSquare className=\"inline h-3 w-3 mr-0.5\" />\n ) : (\n <Star className=\"inline h-3 w-3 mr-0.5\" />\n )}\n {review.itemName}\n </span>\n <span>\n {formatDate(review.createdAt, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n </div>\n <div className=\"shrink-0\">\n <RatingDisplay value={review.rating} size=\"sm\" />\n <p className=\"text-xs text-text-secondary mt-0.5 text-right\">\n From: {review.cartName}\n </p>\n </div>\n </div>\n\n {/ Content /}\n <div className=\"mb-3\">\n <h4 className=\"text-sm font-semibold text-text-primary mb-1\">{review.title}</h4>\n <p className=\"text-sm text-text-primary leading-relaxed\">{review.comment}</p>\n </div>\n\n {/ Review Images /}\n {review.images && review.images.length > 0 && (\n <div className=\"mb-3 flex gap-2 overflow-x-auto pb-1\">\n {review.images.map((img, idx) => (\n <img\n key={idx}\n src={img}\n alt={`Review image ${idx + 1}`}\n className=\"h-20 w-20 rounded-lg object-cover shrink-0\"\n />\n ))}\n </div>\n )}\n\n {/ Owner Response /}\n {review.response && (\n <div className=\"mb-3 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3\">\n <div className=\"flex flex-wrap items-center gap-2 mb-1.5\">\n <MessageCircle className=\"h-3.5 w-3.5 text-blue-600 dark:text-blue-400\" />\n <span className=\"text-xs font-medium text-blue-600 dark:text-blue-400\">\n Response from {review.response.respondedBy}\n </span>\n <span className=\"text-[10px] text-blue-500/70\">\n {formatDate(review.response.respondedAt, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n <p className=\"text-xs text-blue-700 dark:text-blue-300 leading-relaxed\">\n {review.response.message}\n </p>\n </div>\n )}\n\n {/ Footer /}\n <div className=\"flex items-center justify-between pt-3 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => handleMarkHelpful(review.id)}\n className={cn(\n 'flex items-center gap-1.5 text-xs transition-colors',\n review.isHelpful\n ? 'text-blue-600 dark:text-blue-400 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n )}\n >\n <ThumbsUp className={cn('h-3.5 w-3.5', review.isHelpful && 'fill-current')} />\n Helpful ({review.helpfulCount})\n </button>\n\n <div className=\"flex items-center gap-3 text-xs text-text-secondary\">\n <span>Order: {review.orderId}</span>\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/carts/${review.cartId}`)}\n className=\"font-medium hover:text-text-primary transition-colors\"\n >\n View Cart\n </button>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n )}\n\n {/ Write Review Modal /}\n {showWriteReview && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Header /}\n <div className=\"flex items-center justify-between mb-5\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Write a Review</h3>\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(false)}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"space-y-4\">\n {/ Rating /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-2\">\n Rating <span className=\"text-red-500\"></span>\n </label>\n <InteractiveStarRating\n value={reviewForm.rating}\n onChange={(v) => setReviewForm((p) => ({ ...p, rating: v }))}\n />\n </div>\n\n {/* Title /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Review Title <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"Summarize your experience\"\n value={reviewForm.title}\n onChange={(e) => setReviewForm((p) => ({ ...p, title: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/* Comment /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Your Review <span className=\"text-red-500\"></span>\n </label>\n <textarea\n rows={5}\n placeholder=\"Share your experience with others...\"\n value={reviewForm.comment}\n onChange={(e) => setReviewForm((p) => ({ ...p, comment: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n {/* Guidelines /}\n <div className=\"rounded-lg bg-bg-sunken p-4\">\n <div className=\"flex items-center gap-2 mb-2\">\n <Info className=\"h-4 w-4 text-text-secondary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Review Guidelines</h4>\n </div>\n <ul className=\"text-xs text-text-secondary space-y-1\">\n <li>- Be honest and helpful to other customers</li>\n <li>- Focus on your experience with the food and service</li>\n <li>- Avoid personal information or inappropriate content</li>\n <li>- Reviews are public and cannot be deleted once submitted</li>\n </ul>\n </div>\n </div>\n\n {/ Actions */}\n <div className=\"flex items-center gap-3 pt-5\">\n <button\n type=\"button\"\n onClick={handleSubmitReview}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Submit Review\n </button>\n <button\n type=\"button\"\n onClick={() => setShowWriteReview(false)}\n className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/atheletebridge/pages/customer/SavedAddressesPage.js CHANGED Viewed

@@ -397,6 +397,7 @@ function w() {
 					}, e.id);
 				})
 			}) : /* @__PURE__ */ _(r, {
+				illustration: "empty-data",
 				icon: /* @__PURE__ */ _(d, { className: "h-12 w-12" }),
 				title: "No saved addresses",
 				description: "Add a delivery address to get started.",

package/dist/atheletebridge/pages/customer/SavedAddressesPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedAddressesPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/SavedAddressesPage.tsx"],"sourcesContent":["/*\n Saved Addresses Page\n * @module atheletebridge/pages/customer\n \n Manage delivery addresses: list, add (inline expandable), edit (modal),\n * delete (with default protection), set default, usage count, last used date,\n * address nickname support. 4 mock addresses.\n /\n\nimport { useState } from 'react';\nimport {\n MapPin,\n Plus,\n Pencil,\n Trash2,\n CheckCircle2,\n Home,\n Briefcase,\n Star,\n X,\n Hash,\n Clock,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatDate } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface SavedAddress {\n id: string;\n type: 'home' \| 'office' \| 'other';\n nickname: string;\n addressLine1: string;\n addressLine2: string;\n city: string;\n state: string;\n zipCode: string;\n isDefault: boolean;\n usageCount: number;\n lastUsed?: string;\n}\n\ntype AddressFormData = Omit<SavedAddress, 'id' \| 'usageCount' \| 'lastUsed'>;\n\nconst emptyForm: AddressFormData = {\n type: 'home',\n nickname: '',\n addressLine1: '',\n addressLine2: '',\n city: '',\n state: '',\n zipCode: '',\n isDefault: false,\n};\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst initialAddresses: SavedAddress[] = [\n {\n id: 'addr-001',\n type: 'home',\n nickname: 'Home Sweet Home',\n addressLine1: '123, MG Road',\n addressLine2: 'Near Central Mall',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560001',\n isDefault: true,\n usageCount: 45,\n lastUsed: '2024-06-24T08:30:00Z',\n },\n {\n id: 'addr-002',\n type: 'office',\n nickname: 'Office',\n addressLine1: '456, Brigade Road',\n addressLine2: 'Floor 3, Tech Tower',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560025',\n isDefault: false,\n usageCount: 28,\n lastUsed: '2024-06-23T13:15:00Z',\n },\n {\n id: 'addr-003',\n type: 'other',\n nickname: \"Friend's Place\",\n addressLine1: '789, Koramangala',\n addressLine2: 'Near Forum Mall',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560034',\n isDefault: false,\n usageCount: 12,\n lastUsed: '2024-06-20T19:45:00Z',\n },\n {\n id: 'addr-004',\n type: 'home',\n nickname: 'Weekend Place',\n addressLine1: '321, Indiranagar',\n addressLine2: 'Near Metro Station',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560038',\n isDefault: false,\n usageCount: 8,\n lastUsed: '2024-06-18T11:30:00Z',\n },\n];\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst iconMap = {\n home: Home,\n office: Briefcase,\n other: MapPin,\n};\n\nconst typeBadgeStyles: Record<string, string> = {\n home: 'bg-green-500/10 text-green-600 dark:text-green-400',\n office: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n other: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n};\n\n// ============================================================================\n// Address Form Component\n// ============================================================================\n\nfunction AddressForm({\n data,\n onChange,\n onSubmit,\n onCancel,\n submitLabel,\n}: {\n data: AddressFormData;\n onChange: (field: string, value: string \| boolean) => void;\n onSubmit: () => void;\n onCancel: () => void;\n submitLabel: string;\n}) {\n return (\n <div className=\"space-y-4\">\n {/ Type + Nickname row /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Address Type <span className=\"text-red-500\"></span>\n </label>\n <select\n value={data.type}\n onChange={(e) => onChange('type', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"home\">Home</option>\n <option value=\"office\">Office</option>\n <option value=\"other\">Other</option>\n </select>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">Nickname</label>\n <input\n type=\"text\"\n placeholder=\"e.g., Home Sweet Home\"\n value={data.nickname}\n onChange={(e) => onChange('nickname', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Address Line 1 /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Address Line 1 <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"House/Flat number, Street name\"\n value={data.addressLine1}\n onChange={(e) => onChange('addressLine1', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/* Address Line 2 /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">Address Line 2</label>\n <input\n type=\"text\"\n placeholder=\"Area, Landmark\"\n value={data.addressLine2}\n onChange={(e) => onChange('addressLine2', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/ City / State / ZIP /}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n City <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"City\"\n value={data.city}\n onChange={(e) => onChange('city', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n State <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"State\"\n value={data.state}\n onChange={(e) => onChange('state', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n ZIP Code <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"560001\"\n value={data.zipCode}\n onChange={(e) => onChange('zipCode', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Set Default checkbox /}\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={data.isDefault}\n onChange={(e) => onChange('isDefault', e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary\"\n />\n <span className=\"text-sm text-text-secondary\">Set as default address</span>\n </label>\n\n {/ Actions /}\n <div className=\"flex items-center gap-3 pt-2\">\n <button\n type=\"button\"\n onClick={onSubmit}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n {submitLabel}\n </button>\n <button\n type=\"button\"\n onClick={onCancel}\n className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function SavedAddressesPage() {\n const { navigateTo } = useAthleteBridge();\n const [addresses, setAddresses] = useState<SavedAddress[]>(initialAddresses);\n const [showAddForm, setShowAddForm] = useState(false);\n const [editingAddress, setEditingAddress] = useState<SavedAddress \| null>(null);\n const [newAddress, setNewAddress] = useState<AddressFormData>({ ...emptyForm });\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n // --- Helpers ---\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n const validateForm = (data: AddressFormData): boolean => {\n if (\n !data.addressLine1.trim() \|\|\n !data.city.trim() \|\|\n !data.state.trim() \|\|\n !data.zipCode.trim()\n ) {\n alert('Please fill in all required fields (Address Line 1, City, State, ZIP Code).');\n return false;\n }\n return true;\n };\n\n // --- Handlers ---\n const handleAddAddress = () => {\n if (!validateForm(newAddress)) return;\n\n const addressToAdd: SavedAddress = {\n id: `addr-${Date.now()}`,\n type: newAddress.type,\n nickname: newAddress.nickname,\n addressLine1: newAddress.addressLine1,\n addressLine2: newAddress.addressLine2,\n city: newAddress.city,\n state: newAddress.state,\n zipCode: newAddress.zipCode,\n isDefault: newAddress.isDefault,\n usageCount: 0,\n };\n\n setAddresses((prev) => {\n let updated = [...prev];\n if (addressToAdd.isDefault) {\n updated = updated.map((a) => ({ ...a, isDefault: false }));\n }\n return [...updated, addressToAdd];\n });\n\n setNewAddress({ ...emptyForm });\n setShowAddForm(false);\n showStatus('Address added successfully');\n };\n\n const handleEditSave = () => {\n if (!editingAddress) return;\n if (!validateForm(editingAddress)) return;\n\n setAddresses((prev) =>\n prev.map((a) => {\n if (a.id === editingAddress.id) return editingAddress;\n if (editingAddress.isDefault) return { ...a, isDefault: false };\n return a;\n })\n );\n setEditingAddress(null);\n showStatus('Address updated successfully');\n };\n\n const handleDelete = (id: string) => {\n const addr = addresses.find((a) => a.id === id);\n if (addr?.isDefault) {\n alert('Cannot delete default address. Set another address as default first.');\n return;\n }\n setAddresses((prev) => prev.filter((a) => a.id !== id));\n showStatus('Address deleted successfully');\n };\n\n const handleSetDefault = (id: string) => {\n setAddresses((prev) => prev.map((a) => ({ ...a, isDefault: a.id === id })));\n showStatus('Default address updated');\n };\n\n const handleFormChange = (\n setter: React.Dispatch<React.SetStateAction<any>>,\n field: string,\n value: string \| boolean\n ) => {\n setter((prev: any) => ({ ...prev, [field]: value }));\n };\n\n return (\n <PageLayout\n title=\"Saved Addresses\"\n description=\"Manage your delivery addresses for faster checkout\"\n actions={\n !showAddForm ? (\n <button\n type=\"button\"\n onClick={() => setShowAddForm(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <Plus className=\"h-4 w-4\" />\n Add New Address\n </button>\n ) : undefined\n }\n >\n {/ Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {/ Inline Add Form /}\n {showAddForm && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5 mb-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4\">Add New Address</h3>\n <AddressForm\n data={newAddress}\n onChange={(field, value) => handleFormChange(setNewAddress, field, value)}\n onSubmit={handleAddAddress}\n onCancel={() => {\n setShowAddForm(false);\n setNewAddress({ ...emptyForm });\n }}\n submitLabel=\"Save Address\"\n />\n </div>\n )}\n\n {/ Address List /}\n {addresses.length > 0 ? (\n <div className=\"space-y-3\">\n {addresses.map((address) => {\n const Icon = iconMap[address.type];\n return (\n <div\n key={address.id}\n className={cn(\n 'rounded-lg border bg-bg-surface p-4',\n address.isDefault ? 'border-foreground/30' : 'border-border-subtle'\n )}\n >\n <div className=\"flex items-start justify-between gap-3\">\n {/ Left: icon + details /}\n <div className=\"flex items-start gap-3 flex-1 min-w-0\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Icon className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n {/ Badges row /}\n <div className=\"flex flex-wrap items-center gap-2\">\n <span\n className={cn(\n 'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium capitalize',\n typeBadgeStyles[address.type]\n )}\n >\n {address.type}\n </span>\n {address.isDefault && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Default\n </span>\n )}\n </div>\n\n {/ Nickname /}\n {address.nickname && (\n <p className=\"mt-1 text-sm font-semibold text-text-primary\">\n {address.nickname}\n </p>\n )}\n\n {/ Address lines /}\n <p className=\"mt-0.5 text-sm text-text-primary\">{address.addressLine1}</p>\n {address.addressLine2 && (\n <p className=\"text-sm text-text-secondary\">{address.addressLine2}</p>\n )}\n <p className=\"text-sm text-text-secondary\">\n {address.city}, {address.state} - {address.zipCode}\n </p>\n\n {/ Usage stats /}\n <div className=\"mt-2 flex flex-wrap items-center gap-3 text-xs text-text-secondary\">\n <span className=\"flex items-center gap-1\">\n <Hash className=\"h-3 w-3\" />\n Used {address.usageCount} times\n </span>\n {address.lastUsed && (\n <span className=\"flex items-center gap-1\">\n <Clock className=\"h-3 w-3\" />\n Last used:{' '}\n {formatDate(address.lastUsed, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n )}\n </div>\n </div>\n </div>\n\n {/ Right: actions /}\n <div className=\"flex items-center gap-1 shrink-0\">\n {!address.isDefault && (\n <button\n type=\"button\"\n onClick={() => handleSetDefault(address.id)}\n title=\"Set as default\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Star className=\"h-4 w-4\" />\n </button>\n )}\n <button\n type=\"button\"\n onClick={() => setEditingAddress({ ...address })}\n title=\"Edit address\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Pencil className=\"h-4 w-4\" />\n </button>\n <button\n type=\"button\"\n onClick={() => handleDelete(address.id)}\n title=\"Delete address\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-status-error-bg/10 hover:text-status-error-text transition-colors\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n ) : (\n <EmptyState\n icon={<MapPin className=\"h-12 w-12\" />}\n title=\"No saved addresses\"\n description=\"Add a delivery address to get started.\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowAddForm(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Address\n </button>\n }\n />\n )}\n\n {/ Edit Address Modal /}\n {editingAddress && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Modal header */}\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Edit Address</h3>\n <button\n type=\"button\"\n onClick={() => setEditingAddress(null)}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <AddressForm\n data={editingAddress}\n onChange={(field, value) => handleFormChange(setEditingAddress, field, value)}\n onSubmit={handleEditSave}\n onCancel={() => setEditingAddress(null)}\n submitLabel=\"Save Changes\"\n />\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SavedAddressesPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/SavedAddressesPage.tsx"],"sourcesContent":["/*\n Saved Addresses Page\n * @module atheletebridge/pages/customer\n \n Manage delivery addresses: list, add (inline expandable), edit (modal),\n * delete (with default protection), set default, usage count, last used date,\n * address nickname support. 4 mock addresses.\n /\n\nimport { useState } from 'react';\nimport {\n MapPin,\n Plus,\n Pencil,\n Trash2,\n CheckCircle2,\n Home,\n Briefcase,\n Star,\n X,\n Hash,\n Clock,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatDate } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface SavedAddress {\n id: string;\n type: 'home' \| 'office' \| 'other';\n nickname: string;\n addressLine1: string;\n addressLine2: string;\n city: string;\n state: string;\n zipCode: string;\n isDefault: boolean;\n usageCount: number;\n lastUsed?: string;\n}\n\ntype AddressFormData = Omit<SavedAddress, 'id' \| 'usageCount' \| 'lastUsed'>;\n\nconst emptyForm: AddressFormData = {\n type: 'home',\n nickname: '',\n addressLine1: '',\n addressLine2: '',\n city: '',\n state: '',\n zipCode: '',\n isDefault: false,\n};\n\n// ============================================================================\n// Mock Data\n// ============================================================================\n\nconst initialAddresses: SavedAddress[] = [\n {\n id: 'addr-001',\n type: 'home',\n nickname: 'Home Sweet Home',\n addressLine1: '123, MG Road',\n addressLine2: 'Near Central Mall',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560001',\n isDefault: true,\n usageCount: 45,\n lastUsed: '2024-06-24T08:30:00Z',\n },\n {\n id: 'addr-002',\n type: 'office',\n nickname: 'Office',\n addressLine1: '456, Brigade Road',\n addressLine2: 'Floor 3, Tech Tower',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560025',\n isDefault: false,\n usageCount: 28,\n lastUsed: '2024-06-23T13:15:00Z',\n },\n {\n id: 'addr-003',\n type: 'other',\n nickname: \"Friend's Place\",\n addressLine1: '789, Koramangala',\n addressLine2: 'Near Forum Mall',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560034',\n isDefault: false,\n usageCount: 12,\n lastUsed: '2024-06-20T19:45:00Z',\n },\n {\n id: 'addr-004',\n type: 'home',\n nickname: 'Weekend Place',\n addressLine1: '321, Indiranagar',\n addressLine2: 'Near Metro Station',\n city: 'Bangalore',\n state: 'Karnataka',\n zipCode: '560038',\n isDefault: false,\n usageCount: 8,\n lastUsed: '2024-06-18T11:30:00Z',\n },\n];\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst iconMap = {\n home: Home,\n office: Briefcase,\n other: MapPin,\n};\n\nconst typeBadgeStyles: Record<string, string> = {\n home: 'bg-green-500/10 text-green-600 dark:text-green-400',\n office: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n other: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n};\n\n// ============================================================================\n// Address Form Component\n// ============================================================================\n\nfunction AddressForm({\n data,\n onChange,\n onSubmit,\n onCancel,\n submitLabel,\n}: {\n data: AddressFormData;\n onChange: (field: string, value: string \| boolean) => void;\n onSubmit: () => void;\n onCancel: () => void;\n submitLabel: string;\n}) {\n return (\n <div className=\"space-y-4\">\n {/ Type + Nickname row /}\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Address Type <span className=\"text-red-500\"></span>\n </label>\n <select\n value={data.type}\n onChange={(e) => onChange('type', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n <option value=\"home\">Home</option>\n <option value=\"office\">Office</option>\n <option value=\"other\">Other</option>\n </select>\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">Nickname</label>\n <input\n type=\"text\"\n placeholder=\"e.g., Home Sweet Home\"\n value={data.nickname}\n onChange={(e) => onChange('nickname', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Address Line 1 /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Address Line 1 <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"House/Flat number, Street name\"\n value={data.addressLine1}\n onChange={(e) => onChange('addressLine1', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/* Address Line 2 /}\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">Address Line 2</label>\n <input\n type=\"text\"\n placeholder=\"Area, Landmark\"\n value={data.addressLine2}\n onChange={(e) => onChange('addressLine2', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\n {/ City / State / ZIP /}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n City <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"City\"\n value={data.city}\n onChange={(e) => onChange('city', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n State <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"State\"\n value={data.state}\n onChange={(e) => onChange('state', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n ZIP Code <span className=\"text-red-500\"></span>\n </label>\n <input\n type=\"text\"\n placeholder=\"560001\"\n value={data.zipCode}\n onChange={(e) => onChange('zipCode', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n\n {/* Set Default checkbox /}\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={data.isDefault}\n onChange={(e) => onChange('isDefault', e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary\"\n />\n <span className=\"text-sm text-text-secondary\">Set as default address</span>\n </label>\n\n {/ Actions /}\n <div className=\"flex items-center gap-3 pt-2\">\n <button\n type=\"button\"\n onClick={onSubmit}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n {submitLabel}\n </button>\n <button\n type=\"button\"\n onClick={onCancel}\n className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n </div>\n );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport function SavedAddressesPage() {\n const { navigateTo } = useAthleteBridge();\n const [addresses, setAddresses] = useState<SavedAddress[]>(initialAddresses);\n const [showAddForm, setShowAddForm] = useState(false);\n const [editingAddress, setEditingAddress] = useState<SavedAddress \| null>(null);\n const [newAddress, setNewAddress] = useState<AddressFormData>({ ...emptyForm });\n const [statusMessage, setStatusMessage] = useState<string \| null>(null);\n\n // --- Helpers ---\n const showStatus = (msg: string) => {\n setStatusMessage(msg);\n setTimeout(() => setStatusMessage(null), 3000);\n };\n\n const validateForm = (data: AddressFormData): boolean => {\n if (\n !data.addressLine1.trim() \|\|\n !data.city.trim() \|\|\n !data.state.trim() \|\|\n !data.zipCode.trim()\n ) {\n alert('Please fill in all required fields (Address Line 1, City, State, ZIP Code).');\n return false;\n }\n return true;\n };\n\n // --- Handlers ---\n const handleAddAddress = () => {\n if (!validateForm(newAddress)) return;\n\n const addressToAdd: SavedAddress = {\n id: `addr-${Date.now()}`,\n type: newAddress.type,\n nickname: newAddress.nickname,\n addressLine1: newAddress.addressLine1,\n addressLine2: newAddress.addressLine2,\n city: newAddress.city,\n state: newAddress.state,\n zipCode: newAddress.zipCode,\n isDefault: newAddress.isDefault,\n usageCount: 0,\n };\n\n setAddresses((prev) => {\n let updated = [...prev];\n if (addressToAdd.isDefault) {\n updated = updated.map((a) => ({ ...a, isDefault: false }));\n }\n return [...updated, addressToAdd];\n });\n\n setNewAddress({ ...emptyForm });\n setShowAddForm(false);\n showStatus('Address added successfully');\n };\n\n const handleEditSave = () => {\n if (!editingAddress) return;\n if (!validateForm(editingAddress)) return;\n\n setAddresses((prev) =>\n prev.map((a) => {\n if (a.id === editingAddress.id) return editingAddress;\n if (editingAddress.isDefault) return { ...a, isDefault: false };\n return a;\n })\n );\n setEditingAddress(null);\n showStatus('Address updated successfully');\n };\n\n const handleDelete = (id: string) => {\n const addr = addresses.find((a) => a.id === id);\n if (addr?.isDefault) {\n alert('Cannot delete default address. Set another address as default first.');\n return;\n }\n setAddresses((prev) => prev.filter((a) => a.id !== id));\n showStatus('Address deleted successfully');\n };\n\n const handleSetDefault = (id: string) => {\n setAddresses((prev) => prev.map((a) => ({ ...a, isDefault: a.id === id })));\n showStatus('Default address updated');\n };\n\n const handleFormChange = (\n setter: React.Dispatch<React.SetStateAction<any>>,\n field: string,\n value: string \| boolean\n ) => {\n setter((prev: any) => ({ ...prev, [field]: value }));\n };\n\n return (\n <PageLayout\n title=\"Saved Addresses\"\n description=\"Manage your delivery addresses for faster checkout\"\n actions={\n !showAddForm ? (\n <button\n type=\"button\"\n onClick={() => setShowAddForm(true)}\n className={cn(\n 'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity',\n 'bg-foreground text-background hover:opacity-90'\n )}\n >\n <Plus className=\"h-4 w-4\" />\n Add New Address\n </button>\n ) : undefined\n }\n >\n {/ Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-600 dark:text-green-400 shrink-0\" />\n <p className=\"text-sm text-green-600 dark:text-green-400\">{statusMessage}</p>\n </div>\n )}\n\n {/ Inline Add Form /}\n {showAddForm && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5 mb-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4\">Add New Address</h3>\n <AddressForm\n data={newAddress}\n onChange={(field, value) => handleFormChange(setNewAddress, field, value)}\n onSubmit={handleAddAddress}\n onCancel={() => {\n setShowAddForm(false);\n setNewAddress({ ...emptyForm });\n }}\n submitLabel=\"Save Address\"\n />\n </div>\n )}\n\n {/ Address List /}\n {addresses.length > 0 ? (\n <div className=\"space-y-3\">\n {addresses.map((address) => {\n const Icon = iconMap[address.type];\n return (\n <div\n key={address.id}\n className={cn(\n 'rounded-lg border bg-bg-surface p-4',\n address.isDefault ? 'border-foreground/30' : 'border-border-subtle'\n )}\n >\n <div className=\"flex items-start justify-between gap-3\">\n {/ Left: icon + details /}\n <div className=\"flex items-start gap-3 flex-1 min-w-0\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken\">\n <Icon className=\"h-5 w-5 text-text-secondary\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n {/ Badges row /}\n <div className=\"flex flex-wrap items-center gap-2\">\n <span\n className={cn(\n 'inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium capitalize',\n typeBadgeStyles[address.type]\n )}\n >\n {address.type}\n </span>\n {address.isDefault && (\n <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n <CheckCircle2 className=\"h-3 w-3\" />\n Default\n </span>\n )}\n </div>\n\n {/ Nickname /}\n {address.nickname && (\n <p className=\"mt-1 text-sm font-semibold text-text-primary\">\n {address.nickname}\n </p>\n )}\n\n {/ Address lines /}\n <p className=\"mt-0.5 text-sm text-text-primary\">{address.addressLine1}</p>\n {address.addressLine2 && (\n <p className=\"text-sm text-text-secondary\">{address.addressLine2}</p>\n )}\n <p className=\"text-sm text-text-secondary\">\n {address.city}, {address.state} - {address.zipCode}\n </p>\n\n {/ Usage stats /}\n <div className=\"mt-2 flex flex-wrap items-center gap-3 text-xs text-text-secondary\">\n <span className=\"flex items-center gap-1\">\n <Hash className=\"h-3 w-3\" />\n Used {address.usageCount} times\n </span>\n {address.lastUsed && (\n <span className=\"flex items-center gap-1\">\n <Clock className=\"h-3 w-3\" />\n Last used:{' '}\n {formatDate(address.lastUsed, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n )}\n </div>\n </div>\n </div>\n\n {/ Right: actions /}\n <div className=\"flex items-center gap-1 shrink-0\">\n {!address.isDefault && (\n <button\n type=\"button\"\n onClick={() => handleSetDefault(address.id)}\n title=\"Set as default\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Star className=\"h-4 w-4\" />\n </button>\n )}\n <button\n type=\"button\"\n onClick={() => setEditingAddress({ ...address })}\n title=\"Edit address\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Pencil className=\"h-4 w-4\" />\n </button>\n <button\n type=\"button\"\n onClick={() => handleDelete(address.id)}\n title=\"Delete address\"\n className=\"rounded-md p-2 text-text-secondary hover:bg-status-error-bg/10 hover:text-status-error-text transition-colors\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n </div>\n );\n })}\n </div>\n ) : (\n <EmptyState\n illustration=\"empty-data\"\n icon={<MapPin className=\"h-12 w-12\" />}\n title=\"No saved addresses\"\n description=\"Add a delivery address to get started.\"\n action={\n <button\n type=\"button\"\n onClick={() => setShowAddForm(true)}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Add Address\n </button>\n }\n />\n )}\n\n {/ Edit Address Modal /}\n {editingAddress && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n <div className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg\">\n <div className=\"p-5\">\n {/ Modal header */}\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Edit Address</h3>\n <button\n type=\"button\"\n onClick={() => setEditingAddress(null)}\n className=\"rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n <AddressForm\n data={editingAddress}\n onChange={(field, value) => handleFormChange(setEditingAddress, field, value)}\n onSubmit={handleEditSave}\n onCancel={() => setEditingAddress(null)}\n submitLabel=\"Save Changes\"\n />\n </div>\n </div>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}

package/dist/atheletebridge/pages/investor/InvestmentOpportunitiesPage.js CHANGED Viewed

@@ -533,6 +533,7 @@ function T() {
 			z.length === 0 ? /* @__PURE__ */ v("div", {
 				className: "mt-6",
 				children: /* @__PURE__ */ v(r, {
+					illustration: "empty-search",
 					icon: /* @__PURE__ */ v(h, { className: "h-10 w-10" }),
 					title: "No opportunities found",
 					description: "Try adjusting your filters to find more opportunities",