npm - @burdenoff/microfe-subscriberbot - Versions diffs - 2026.624.1 → 2026.626.1 - Mend

@burdenoff/microfe-subscriberbot 2026.624.1 → 2026.626.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 (104) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethodsPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/customer/PaymentMethodsPage.tsx"],"sourcesContent":["/*\n Payment Methods Page\n * @module subscriberbot/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 { useSubscriberBot } from '../../context/SubscriberBotContext';\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: 'SubscriberBot 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 } = useSubscriberBot();\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/subscriberbot/pages/customer/PaymentMethodsPage.tsx"],"sourcesContent":["/*\n Payment Methods Page\n * @module subscriberbot/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 { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\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: 'SubscriberBot 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-seam 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-status-success-bg/10 px-2 py-0.5 text-[10px] font-medium text-status-success-text\">\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 } = useSubscriberBot();\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 <PagePurpose icon={<CreditCard className=\"h-4 w-4\" />} className=\"mb-6\">\n Save the cards and UPI options you pay with so checkout is fast and you don't have\n to re-enter details each time. Set a default for one-tap payment, and add or remove\n methods whenever they change. Your full card numbers are never stored here — only a\n secure reference.\n </PagePurpose>\n\n {/* Status message /}\n {statusMessage && (\n <div className=\"mb-4 rounded-lg border border-status-success-border/30 bg-status-success-bg/10 p-3 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-status-success-text shrink-0\" />\n <p className=\"text-sm text-status-success-text\">{statusMessage}</p>\n </div>\n )}\n\n {methods.length > 0 ? (\n <EmphasisPanel 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-seam 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 </EmphasisPanel>\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-seam 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-status-success-text\">\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-seam 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-status-success-text\">\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-bg-canvas/50 p-4\">\n <div className=\"w-full max-w-md max-h-[90vh] overflow-y-auto rounded-lg border border-border-seam 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-seam 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-seam 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-seam 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-seam 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-seam 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-seam 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-seam 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-seam 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-seam 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/subscriberbot/pages/customer/ReviewsPage.js CHANGED Viewed

@@ -7,17 +7,18 @@ import { RatingDisplay as a } from "../../components/RatingDisplay.js";
 import { useCallback as o, useState as s } from "react";
 import { CheckCircle2 as c, Info as l, MessageCircle as u, MessageSquare as d, PenSquare as f, Search as p, Star as m, ThumbsUp as h, X as g } from "lucide-react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { EmphasisPanel as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/customer/ReviewsPage.tsx
-var y = "user-001", b = {
+var x = "user-001", S = {
 	1: "Terrible",
 	2: "Poor",
 	3: "Average",
 	4: "Good",
 	5: "Excellent"
-}, x = [
+}, C = [
 	{
 		id: "review-001",
-		userId: y,
+		userId: x,
 		userName: "Rahul Sharma",
 		userAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100",
 		itemId: "FOOD-001",
@@ -80,7 +81,7 @@ var y = "user-001", b = {
 	},
 	{
 		id: "review-004",
-		userId: y,
+		userId: x,
 		userName: "Rahul Sharma",
 		userAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100",
 		itemId: "prod-001",
@@ -122,7 +123,7 @@ var y = "user-001", b = {
 		createdAt: "2024-06-12T12:20:00Z"
 	}
 ];
-function S({ value: e, onChange: n }) {
+function w({ value: e, onChange: n }) {
 	let [r, i] = s(0), a = r || e;
 	return /* @__PURE__ */ v("div", {
 		className: "flex items-center gap-3",
@@ -140,37 +141,37 @@ function S({ value: e, onChange: n }) {
 				onMouseEnter: () => i(e),
 				onMouseLeave: () => i(0),
 				className: "p-0.5 transition-transform",
-				children: /* @__PURE__ */ _(m, { className: t("h-6 w-6", e <= a ? "fill-yellow-400 text-yellow-400" : "fill-none text-text-secondary/40") })
+				children: /* @__PURE__ */ _(m, { className: t("h-6 w-6", e <= a ? "fill-status-warning-text text-status-warning-text" : "fill-none text-text-secondary/40") })
 			}, e))
 		}), /* @__PURE__ */ _("span", {
 			className: "text-sm font-medium text-text-secondary",
-			children: b[a] ?? ""
+			children: S[a] ?? ""
 		})]
 	});
 }
-function C() {
-	let { navigateTo: b } = e(), [C, w] = s(x), [T, E] = s(!1), [D, O] = s({
+function T() {
+	let { navigateTo: S } = e(), [T, E] = s(C), [D, O] = s(!1), [k, A] = s({
 		rating: 5,
 		title: "",
 		comment: ""
-	}), [k, A] = s({
+	}), [j, M] = s({
 		searchQuery: "",
 		type: "all",
 		rating: "",
 		sortBy: "recent"
-	}), [j, M] = s(null), N = (e) => {
-		M(e), setTimeout(() => M(null), 3e3);
-	}, P = o(() => {
-		let e = [...C];
-		if (k.type === "my-reviews" ? e = e.filter((e) => e.userId === y) : k.type !== "all" && (e = e.filter((e) => e.itemType === k.type)), k.rating) {
-			let t = parseInt(k.rating, 10);
+	}), [N, P] = s(null), F = (e) => {
+		P(e), setTimeout(() => P(null), 3e3);
+	}, I = o(() => {
+		let e = [...T];
+		if (j.type === "my-reviews" ? e = e.filter((e) => e.userId === x) : j.type !== "all" && (e = e.filter((e) => e.itemType === j.type)), j.rating) {
+			let t = parseInt(j.rating, 10);
 			e = e.filter((e) => e.rating === t);
 		}
-		if (k.searchQuery) {
-			let t = k.searchQuery.toLowerCase();
+		if (j.searchQuery) {
+			let t = j.searchQuery.toLowerCase();
 			e = e.filter((e) => e.itemName.toLowerCase().includes(t) || e.title.toLowerCase().includes(t) || e.comment.toLowerCase().includes(t) || e.cartName.toLowerCase().includes(t));
 		}
-		switch (k.sortBy) {
+		switch (j.sortBy) {
 			case "recent":
 				e.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
 				break;
@@ -185,14 +186,14 @@ function C() {
 				break;
 		}
 		return e;
-	}, [C, k])(), F = C.filter((e) => e.userId === y).length, I = C.length > 0 ? (C.reduce((e, t) => e + t.rating, 0) / C.length).toFixed(1) : "0", L = () => {
-		if (!D.title.trim() || !D.comment.trim()) {
+	}, [T, j])(), L = T.filter((e) => e.userId === x).length, R = T.length > 0 ? (T.reduce((e, t) => e + t.rating, 0) / T.length).toFixed(1) : "0", z = () => {
+		if (!k.title.trim() || !k.comment.trim()) {
 			alert("Please fill in the Review Title and Comment.");
 			return;
 		}
 		let e = {
 			id: `review-${Date.now()}`,
-			userId: y,
+			userId: x,
 			userName: "Rahul Sharma",
 			userAvatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100",
 			itemId: "FOOD-001",
@@ -201,21 +202,21 @@ function C() {
 			cartId: "FOOD-001",
 			cartName: "Dosa Express",
 			orderId: `ORD-2024-${Date.now()}`,
-			rating: D.rating,
-			title: D.title,
-			comment: D.comment,
+			rating: k.rating,
+			title: k.title,
+			comment: k.comment,
 			helpfulCount: 0,
 			isHelpful: !1,
 			isVerified: !0,
 			createdAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		w((t) => [e, ...t]), O({
+		E((t) => [e, ...t]), A({
 			rating: 5,
 			title: "",
 			comment: ""
-		}), E(!1), N("Review submitted successfully!");
-	}, R = (e) => {
-		w((t) => t.map((t) => t.id === e ? {
+		}), O(!1), F("Review submitted successfully!");
+	}, B = (e) => {
+		E((t) => t.map((t) => t.id === e ? {
 			...t,
 			isHelpful: !t.isHelpful,
 			helpfulCount: t.isHelpful ? t.helpfulCount - 1 : t.helpfulCount + 1
@@ -223,38 +224,43 @@ function C() {
 	};
 	return /* @__PURE__ */ v(n, {
 		title: "Reviews & Ratings",
-		description: `${P.length} reviews found`,
+		description: `${I.length} reviews found`,
 		actions: /* @__PURE__ */ v("button", {
 			type: "button",
-			onClick: () => E(!0),
+			onClick: () => O(!0),
 			className: t("flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-opacity", "bg-foreground text-background hover:opacity-90"),
 			children: [/* @__PURE__ */ _(f, { className: "h-4 w-4" }), "Write Review"]
 		}),
 		children: [
-			j && /* @__PURE__ */ v("div", {
-				className: "mb-4 rounded-lg border border-green-500/30 bg-green-500/10 p-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ _(c, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }), /* @__PURE__ */ _("p", {
-					className: "text-sm text-green-600 dark:text-green-400",
-					children: j
+			/* @__PURE__ */ _(b, {
+				icon: /* @__PURE__ */ _(m, { className: "h-4 w-4" }),
+				className: "mb-6",
+				children: "Share your experience and read what others think. Write reviews for carts you've ordered from to help the community find great service, and revisit your own ratings any time. Honest feedback keeps quality high and helps good carts stand out."
+			}),
+			N && /* @__PURE__ */ v("div", {
+				className: "mb-4 rounded-lg border border-status-success-border/30 bg-status-success-bg/10 p-3 flex items-center gap-2",
+				children: [/* @__PURE__ */ _(c, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ _("p", {
+					className: "text-sm text-status-success-text",
+					children: N
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ v(y, {
 				className: "flex flex-wrap items-center gap-4 text-sm text-text-secondary mb-6",
 				children: [
-					/* @__PURE__ */ v("span", { children: [C.length, " total reviews"] }),
-					/* @__PURE__ */ v("span", { children: [F, " your reviews"] }),
+					/* @__PURE__ */ v("span", { children: [T.length, " total reviews"] }),
+					/* @__PURE__ */ v("span", { children: [L, " your reviews"] }),
 					/* @__PURE__ */ v("span", {
 						className: "flex items-center gap-1",
 						children: [
 							"Average: ",
-							I,
-							/* @__PURE__ */ _(m, { className: "h-3.5 w-3.5 fill-yellow-400 text-yellow-400" })
+							R,
+							/* @__PURE__ */ _(m, { className: "h-3.5 w-3.5 fill-status-warning-text text-status-warning-text" })
 						]
 					})
 				]
 			}),
 			/* @__PURE__ */ _("div", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6",
+				className: "rounded-lg border border-border-seam bg-bg-surface p-4 mb-6",
 				children: /* @__PURE__ */ v("div", {
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",
 					children: [
@@ -263,21 +269,21 @@ function C() {
 							children: [/* @__PURE__ */ _(p, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ _("input", {
 								type: "text",
 								placeholder: "Search reviews...",
-								value: k.searchQuery,
-								onChange: (e) => A((t) => ({
+								value: j.searchQuery,
+								onChange: (e) => M((t) => ({
 									...t,
 									searchQuery: e.target.value
 								})),
-								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)]"
+								className: "w-full rounded-lg border border-border-seam 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)]"
 							})]
 						}),
 						/* @__PURE__ */ v("select", {
-							value: k.type,
-							onChange: (e) => A((t) => ({
+							value: j.type,
+							onChange: (e) => M((t) => ({
 								...t,
 								type: e.target.value
 							})),
-							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)]",
+							className: "w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ _("option", {
 									value: "all",
@@ -298,12 +304,12 @@ function C() {
 							]
 						}),
 						/* @__PURE__ */ v("select", {
-							value: k.rating,
-							onChange: (e) => A((t) => ({
+							value: j.rating,
+							onChange: (e) => M((t) => ({
 								...t,
 								rating: e.target.value
 							})),
-							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)]",
+							className: "w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ _("option", {
 									value: "",
@@ -332,12 +338,12 @@ function C() {
 							]
 						}),
 						/* @__PURE__ */ v("select", {
-							value: k.sortBy,
-							onChange: (e) => A((t) => ({
+							value: j.sortBy,
+							onChange: (e) => M((t) => ({
 								...t,
 								sortBy: e.target.value
 							})),
-							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)]",
+							className: "w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ _("option", {
 									value: "recent",
@@ -360,22 +366,23 @@ function C() {
 					]
 				})
 			}),
-			P.length === 0 ? /* @__PURE__ */ _(r, {
+			I.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!",
 				action: /* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => E(!0),
+					onClick: () => O(!0),
 					className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 					children: "Write a Review"
 				})
 			}) : /* @__PURE__ */ _("div", {
 				className: "space-y-4",
-				children: P.map((e) => {
-					let n = e.userId === y;
+				children: I.map((e) => {
+					let n = e.userId === x;
 					return /* @__PURE__ */ v("div", {
-						className: t("rounded-lg border bg-bg-surface p-5", n ? "border-foreground/20" : "border-border-subtle"),
+						className: t("rounded-lg border bg-bg-surface p-5", n ? "border-foreground/20" : "border-border-seam"),
 						children: [
 							/* @__PURE__ */ v("div", {
 								className: "flex items-start gap-3 mb-3",
@@ -395,11 +402,11 @@ function C() {
 													children: e.userName
 												}),
 												e.isVerified && /* @__PURE__ */ v("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",
+													className: "inline-flex items-center gap-1 rounded-full bg-status-success-bg/10 px-2 py-0.5 text-[10px] font-medium text-status-success-text",
 													children: [/* @__PURE__ */ _(c, { className: "h-3 w-3" }), "Verified"]
 												}),
 												n && /* @__PURE__ */ _("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",
+													className: "inline-flex items-center rounded-full bg-status-info-bg/10 px-2 py-0.5 text-[10px] font-medium text-status-info-text",
 													children: "Your Review"
 												})
 											]
@@ -443,17 +450,17 @@ function C() {
 								}, t))
 							}),
 							e.response && /* @__PURE__ */ v("div", {
-								className: "mb-3 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
+								className: "mb-3 rounded-lg border border-status-info-border/20 bg-status-info-bg/5 p-3",
 								children: [/* @__PURE__ */ v("div", {
 									className: "flex flex-wrap items-center gap-2 mb-1.5",
 									children: [
-										/* @__PURE__ */ _(u, { className: "h-3.5 w-3.5 text-blue-600 dark:text-blue-400" }),
+										/* @__PURE__ */ _(u, { className: "h-3.5 w-3.5 text-status-info-text" }),
 										/* @__PURE__ */ v("span", {
-											className: "text-xs font-medium text-blue-600 dark:text-blue-400",
+											className: "text-xs font-medium text-status-info-text",
 											children: ["Response from ", e.response.respondedBy]
 										}),
 										/* @__PURE__ */ _("span", {
-											className: "text-[10px] text-blue-500/70",
+											className: "text-[10px] text-status-info-text/70",
 											children: i(e.response.respondedAt, {
 												hour: void 0,
 												minute: void 0,
@@ -462,16 +469,16 @@ function C() {
 										})
 									]
 								}), /* @__PURE__ */ _("p", {
-									className: "text-xs text-blue-700 dark:text-blue-300 leading-relaxed",
+									className: "text-xs text-status-info-text leading-relaxed",
 									children: e.response.message
 								})]
 							}),
 							/* @__PURE__ */ v("div", {
-								className: "flex items-center justify-between pt-3 border-t border-border-subtle",
+								className: "flex items-center justify-between pt-3 border-t border-border-seam",
 								children: [/* @__PURE__ */ v("button", {
 									type: "button",
-									onClick: () => R(e.id),
-									className: t("flex items-center gap-1.5 text-xs transition-colors", e.isHelpful ? "text-blue-600 dark:text-blue-400 font-medium" : "text-text-secondary hover:text-text-primary"),
+									onClick: () => B(e.id),
+									className: t("flex items-center gap-1.5 text-xs transition-colors", e.isHelpful ? "text-status-info-text font-medium" : "text-text-secondary hover:text-text-primary"),
 									children: [
 										/* @__PURE__ */ _(h, { className: t("h-3.5 w-3.5", e.isHelpful && "fill-current") }),
 										"Helpful (",
@@ -482,7 +489,7 @@ function C() {
 									className: "flex items-center gap-3 text-xs text-text-secondary",
 									children: [/* @__PURE__ */ v("span", { children: ["Order: ", e.orderId] }), /* @__PURE__ */ _("button", {
 										type: "button",
-										onClick: () => b(`/customer/carts/${e.cartId}`),
+										onClick: () => S(`/customer/carts/${e.cartId}`),
 										className: "font-medium hover:text-text-primary transition-colors",
 										children: "View Cart"
 									})]
@@ -492,10 +499,10 @@ function C() {
 					}, e.id);
 				})
 			}),
-			T && /* @__PURE__ */ _("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+			D && /* @__PURE__ */ _("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-canvas/50 p-4",
 				children: /* @__PURE__ */ _("div", {
-					className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg",
+					className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-lg border border-border-seam bg-bg-surface shadow-lg",
 					children: /* @__PURE__ */ v("div", {
 						className: "p-5",
 						children: [
@@ -506,7 +513,7 @@ function C() {
 									children: "Write a Review"
 								}), /* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: () => E(!1),
+									onClick: () => O(!1),
 									className: "rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
 									children: /* @__PURE__ */ _(g, { className: "h-4 w-4" })
 								})]
@@ -517,12 +524,12 @@ function C() {
 									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-2",
 										children: ["Rating ", /* @__PURE__ */ _("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
-									}), /* @__PURE__ */ _(S, {
-										value: D.rating,
-										onChange: (e) => O((t) => ({
+									}), /* @__PURE__ */ _(w, {
+										value: k.rating,
+										onChange: (e) => A((t) => ({
 											...t,
 											rating: e
 										}))
@@ -530,34 +537,34 @@ function C() {
 									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Review Title ", /* @__PURE__ */ _("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ _("input", {
 										type: "text",
 										placeholder: "Summarize your experience",
-										value: D.title,
-										onChange: (e) => O((t) => ({
+										value: k.title,
+										onChange: (e) => A((t) => ({
 											...t,
 											title: e.target.value
 										})),
-										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)]"
+										className: "w-full rounded-lg border border-border-seam 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)]"
 									})] }),
 									/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: ["Your Review ", /* @__PURE__ */ _("span", {
-											className: "text-red-500",
+											className: "text-status-error-text",
 											children: "*"
 										})]
 									}), /* @__PURE__ */ _("textarea", {
 										rows: 5,
 										placeholder: "Share your experience with others...",
-										value: D.comment,
-										onChange: (e) => O((t) => ({
+										value: k.comment,
+										onChange: (e) => A((t) => ({
 											...t,
 											comment: e.target.value
 										})),
-										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"
+										className: "w-full rounded-lg border border-border-seam 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"
 									})] }),
 									/* @__PURE__ */ v("div", {
 										className: "rounded-lg bg-bg-sunken p-4",
@@ -583,13 +590,13 @@ function C() {
 								className: "flex items-center gap-3 pt-5",
 								children: [/* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: L,
+									onClick: z,
 									className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 									children: "Submit Review"
 								}), /* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: () => E(!1),
-									className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+									onClick: () => O(!1),
+									className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: "Cancel"
 								})]
 							})
@@ -601,6 +608,6 @@ function C() {
 	});
 }
 //#endregion
-export { C as ReviewsPage };
+export { T as ReviewsPage };
 //# sourceMappingURL=ReviewsPage.js.map