@burdenoff/microfe-adaptercloud 2026.625.1 → 2026.625.2
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.
- package/dist/adaptercloud/components/PageLayout.js +24 -17
- package/dist/adaptercloud/components/PageLayout.js.map +1 -1
- package/dist/adaptercloud/pages/HomePage.js +18 -16
- package/dist/adaptercloud/pages/HomePage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminAnalyticsPage.js +90 -82
- package/dist/adaptercloud/pages/admin/AdminAnalyticsPage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminDashboard.js +70 -44
- package/dist/adaptercloud/pages/admin/AdminDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminFinancialPage.js +60 -55
- package/dist/adaptercloud/pages/admin/AdminFinancialPage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminOrdersPage.js +97 -92
- package/dist/adaptercloud/pages/admin/AdminOrdersPage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminProfilePage.js +59 -57
- package/dist/adaptercloud/pages/admin/AdminProfilePage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/AdminSettingsPage.js +118 -104
- package/dist/adaptercloud/pages/admin/AdminSettingsPage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/CartManagementPage.js +145 -140
- package/dist/adaptercloud/pages/admin/CartManagementPage.js.map +1 -1
- package/dist/adaptercloud/pages/admin/UserManagementPage.js +152 -147
- package/dist/adaptercloud/pages/admin/UserManagementPage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/AnalyticsDashboard.js +87 -81
- package/dist/adaptercloud/pages/cart-owner/AnalyticsDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/BusinessSettingsPage.js +179 -165
- package/dist/adaptercloud/pages/cart-owner/BusinessSettingsPage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/CartOwnerDashboard.js +73 -48
- package/dist/adaptercloud/pages/cart-owner/CartOwnerDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/CartOwnerProfilePage.js +95 -93
- package/dist/adaptercloud/pages/cart-owner/CartOwnerProfilePage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/CartServiceConfigPage.js +110 -107
- package/dist/adaptercloud/pages/cart-owner/CartServiceConfigPage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/InventoryManagementPage.js +293 -299
- package/dist/adaptercloud/pages/cart-owner/InventoryManagementPage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/OrderManagementPage.js +218 -224
- package/dist/adaptercloud/pages/cart-owner/OrderManagementPage.js.map +1 -1
- package/dist/adaptercloud/pages/cart-owner/StaffManagementPage.js +122 -128
- package/dist/adaptercloud/pages/cart-owner/StaffManagementPage.js.map +1 -1
- package/dist/adaptercloud/pages/common/HelpSupportPage.js +248 -244
- package/dist/adaptercloud/pages/common/HelpSupportPage.js.map +1 -1
- package/dist/adaptercloud/pages/common/NotificationCenterPage.js +96 -91
- package/dist/adaptercloud/pages/common/NotificationCenterPage.js.map +1 -1
- package/dist/adaptercloud/pages/common/SettingsPage.js +754 -736
- package/dist/adaptercloud/pages/common/SettingsPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/BookingDetailsPage.js +63 -61
- package/dist/adaptercloud/pages/customer/BookingDetailsPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/CartDetailPage.js +110 -108
- package/dist/adaptercloud/pages/customer/CartDetailPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/CartDiscoveryPage.js +221 -217
- package/dist/adaptercloud/pages/customer/CartDiscoveryPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/CheckoutPage.js +89 -87
- package/dist/adaptercloud/pages/customer/CheckoutPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/CustomerDashboard.js +410 -381
- package/dist/adaptercloud/pages/customer/CustomerDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/customer/CustomerProfilePage.js +120 -118
- package/dist/adaptercloud/pages/customer/CustomerProfilePage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/DirectServiceBookingPage.js +86 -81
- package/dist/adaptercloud/pages/customer/DirectServiceBookingPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/FavoritesPage.js +53 -51
- package/dist/adaptercloud/pages/customer/FavoritesPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/OrderHistoryPage.js +114 -109
- package/dist/adaptercloud/pages/customer/OrderHistoryPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/OrderTrackingPage.js +60 -58
- package/dist/adaptercloud/pages/customer/OrderTrackingPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/PaymentMethodsPage.js +87 -72
- package/dist/adaptercloud/pages/customer/PaymentMethodsPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/ReviewsPage.js +65 -63
- package/dist/adaptercloud/pages/customer/ReviewsPage.js.map +1 -1
- package/dist/adaptercloud/pages/customer/SavedAddressesPage.js +68 -53
- package/dist/adaptercloud/pages/customer/SavedAddressesPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestmentDetailsPage.js +63 -61
- package/dist/adaptercloud/pages/investor/InvestmentDetailsPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestmentOpportunitiesPage.js +86 -84
- package/dist/adaptercloud/pages/investor/InvestmentOpportunitiesPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestorAnalyticsPage.js +57 -55
- package/dist/adaptercloud/pages/investor/InvestorAnalyticsPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestorDashboard.js +341 -308
- package/dist/adaptercloud/pages/investor/InvestorDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestorInvestmentsPage.js +34 -32
- package/dist/adaptercloud/pages/investor/InvestorInvestmentsPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestorPortfolioPage.js +48 -46
- package/dist/adaptercloud/pages/investor/InvestorPortfolioPage.js.map +1 -1
- package/dist/adaptercloud/pages/investor/InvestorProfilePage.js +383 -381
- package/dist/adaptercloud/pages/investor/InvestorProfilePage.js.map +1 -1
- package/dist/adaptercloud/pages/worker/TaskDetailsPage.js +348 -319
- package/dist/adaptercloud/pages/worker/TaskDetailsPage.js.map +1 -1
- package/dist/adaptercloud/pages/worker/WorkerDashboard.js +84 -59
- package/dist/adaptercloud/pages/worker/WorkerDashboard.js.map +1 -1
- package/dist/adaptercloud/pages/worker/WorkerOrdersPage.js +73 -71
- package/dist/adaptercloud/pages/worker/WorkerOrdersPage.js.map +1 -1
- package/dist/adaptercloud/pages/worker/WorkerProfilePage.js +76 -74
- package/dist/adaptercloud/pages/worker/WorkerProfilePage.js.map +1 -1
- package/dist/adaptercloud/pages/worker/WorkerSchedulePage.js +70 -68
- package/dist/adaptercloud/pages/worker/WorkerSchedulePage.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrderTrackingPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/OrderTrackingPage.tsx"],"sourcesContent":["/**\n * Order Tracking Page\n * @module adaptercloud/pages/customer\n *\n * Real-time order tracking with status timeline, delivery partner info,\n * price breakdown, Need Help sidebar, and rate order functionality.\n */\n\nimport { useState, useMemo } from'react';\nimport { useParams } from'react-router-dom';\nimport {\n ArrowLeft,\n CheckCircle2,\n Circle,\n Clock,\n MapPin,\n Phone,\n Star,\n Package,\n Truck,\n ChefHat,\n ShoppingBag,\n XCircle,\n MessageCircle,\n AlertTriangle,\n} from'lucide-react';\nimport { PageLayout } from'../../components/PageLayout';\nimport { StatusBadge } from'../../components/StatusBadge';\nimport { EmptyState } from'../../components/EmptyState';\nimport { useAdapterCloud } from'../../context/AdapterCloudContext';\nimport { getOrderById } from'../../mocks/data';\nimport { cn } from'../../utils/cn';\nimport { formatCurrency, formatDate } from'../../utils/formatters';\nimport type { OrderStatus } from'../../types';\n\nconst statusIcons: Record<string, typeof Package> = {\n pending: Clock,\n confirmed: CheckCircle2,\n preparing: ChefHat,\n ready: Package,\n picked_up: Package,\n out_for_delivery: Truck,\n delivered: CheckCircle2,\n cancelled: XCircle,\n};\n\nconst statusOrder: OrderStatus[] = [\n 'pending',\n 'confirmed',\n 'preparing',\n 'ready',\n 'out_for_delivery',\n 'delivered',\n];\n\nconst statusLabels: Record<string, string> = {\n pending: 'Order Placed',\n confirmed: 'Confirmed',\n preparing: 'Preparing',\n ready: 'Ready',\n out_for_delivery: 'Out for Delivery',\n delivered: 'Delivered',\n};\n\nconst statusDescriptions: Record<string, string> = {\n pending: 'Your order has been received',\n confirmed: 'Cart has accepted your order',\n preparing: 'Your food is being prepared',\n ready: 'Order is ready for pickup/delivery',\n out_for_delivery: 'Your order is on the way',\n delivered: 'Order has been delivered',\n};\n\nexport function OrderTrackingPage() {\n const { orderId } = useParams<{ orderId: string }>();\n const { navigateTo } = useAdapterCloud();\n const [isLoading, setIsLoading] = useState(true);\n\n // Simulate loading\n useMemo(() => {\n const timer = setTimeout(() => setIsLoading(false), 800);\n return () => clearTimeout(timer);\n }, []);\n\n const order = useMemo(() => (orderId ? getOrderById(orderId) : undefined), [orderId]);\n\n if (isLoading) {\n return (\n <PageLayout title=\"Track Order\">\n <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4\" />\n <p className=\"text-sm text-text-secondary\">Loading order details...</p>\n </div>\n </PageLayout>\n );\n }\n\n if (!order) {\n return (\n <PageLayout title=\"Order Not Found\">\n <EmptyState\n illustration=\"empty-data\"\n icon={<ShoppingBag className=\"h-12 w-12\" />}\n title=\"Order not found\"\n description={`The order you're looking for doesn't exist.`}\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/orders')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n View All Orders\n </button>\n }\n />\n </PageLayout>\n );\n }\n\n const currentStatusIndex = statusOrder.indexOf(order.status);\n const isCancelled = order.status === 'cancelled';\n const isDelivered = order.status === 'delivered';\n\n const isStepCompleted = (stepStatus: string): boolean => {\n const stepIndex = statusOrder.indexOf(stepStatus as OrderStatus);\n return stepIndex <= currentStatusIndex;\n };\n\n const isCurrentStep = (stepStatus: string): boolean => {\n return stepStatus === order.status;\n };\n\n return (\n <PageLayout\n title={\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/orders')}\n className=\"rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"h-5 w-5\" />\n </button>\n <span>Track Order</span>\n </div>\n }\n actions={<StatusBadge status={order.status} />}\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n {/* Left: Order Details & Timeline */}\n <div className=\"lg:col-span-2 space-y-6\">\n {/* Order Header */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3\">\n <div className=\"flex-1\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Order #{order.id}</h2>\n <p className=\"text-sm text-text-secondary\">{order.cartName}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n {formatDate(order.orderDate)}\n </p>\n </div>\n <div className=\"text-left sm:text-right\">\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n </p>\n <p className=\"text-xs text-text-secondary uppercase\">{order.paymentMethod}</p>\n </div>\n </div>\n\n {/* Status Banner */}\n {isCancelled ? (\n <div className=\"mt-4 flex items-start gap-3 rounded-lg bg-status-error-bg/10 p-4 border border-status-error-border/20\">\n <XCircle className=\"h-5 w-5 text-status-error-text mt-0.5 shrink-0\" />\n <div>\n <p className=\"font-medium text-status-error-text\">Order Cancelled</p>\n {order.cancellationReason && (\n <p className=\"text-sm text-status-error-text/80 mt-0.5\">{order.cancellationReason}</p>\n )}\n </div>\n </div>\n ) : (\n <div\n className={cn(\n 'mt-4 flex items-start gap-3 rounded-lg p-4 border',\n isDelivered\n ? 'bg-status-success-bg-subtle/10 border-status-success-border/20'\n : 'bg-accent-blue-subtle/10 border-accent-blue-subtle/20'\n )}\n >\n {isDelivered ? (\n <CheckCircle2 className=\"h-5 w-5 text-status-success-text mt-0.5 shrink-0\" />\n ) : (\n <Clock className=\"h-5 w-5 text-accent-blue mt-0.5 shrink-0\" />\n )}\n <p\n className={cn(\n 'text-sm font-medium',\n isDelivered\n ? 'text-status-success-text'\n : 'text-accent-blue'\n )}\n >\n {isDelivered\n ? `Delivered at ${formatDate(order.actualDeliveryTime!)}`\n : order.estimatedDeliveryTime\n ? `Estimated delivery by ${formatDate(order.estimatedDeliveryTime)}`\n : 'Estimated delivery time: TBD'}\n </p>\n </div>\n )}\n </div>\n\n {/* Tracking Progress Timeline */}\n {!isCancelled && (\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-5\">Order Status</h3>\n <div className=\"relative space-y-0\">\n {statusOrder.map((stepStatus, index) => {\n const completed = isStepCompleted(stepStatus);\n const current = isCurrentStep(stepStatus);\n const isLast = index === statusOrder.length - 1;\n const StepIcon = statusIcons[stepStatus] ?? Circle;\n\n return (\n <div key={stepStatus} className=\"flex items-start relative\">\n {/* Connecting line */}\n {!isLast && (\n <div\n className={cn(\n 'absolute left-5 top-10 w-0.5 h-8 z-0',\n completed ? 'bg-status-success-bg-subtle' : 'bg-border'\n )}\n />\n )}\n\n {/* Step circle */}\n <div\n className={cn(\n 'relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full',\n completed\n ? 'bg-status-success-bg-subtle/10 border-2 border-status-success-border text-status-success-text'\n : 'bg-bg-sunken border-2 border-border-subtle text-text-secondary',\n current && 'ring-4 ring-status-success-border/20'\n )}\n >\n <StepIcon className=\"h-4 w-4\" />\n </div>\n\n {/* Step content */}\n <div className=\"ml-4 flex-1 pb-8\">\n <h4\n className={cn(\n 'text-sm font-semibold',\n completed ? 'text-text-primary' : 'text-text-secondary'\n )}\n >\n {statusLabels[stepStatus]}\n </h4>\n <p\n className={cn(\n 'text-xs',\n completed ? 'text-text-secondary' : 'text-text-secondary/50'\n )}\n >\n {statusDescriptions[stepStatus]}\n </p>\n {/* Show driver info at current step */}\n {current && order.assignedWorker && (\n <div className=\"mt-1.5 text-xs text-accent-blue\">\n <p>Driver: {order.assignedWorker.name}</p>\n <p>Contact: {order.assignedWorker.phone}</p>\n </div>\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n )}\n\n {/* Order Items & Price Breakdown */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Order Items</h3>\n <div className=\"space-y-2\">\n {order.items.map((item, index) => (\n <div\n key={index}\n className=\"flex justify-between items-start pb-2 border-b border-border-subtle last:border-b-0\"\n >\n <div className=\"flex-1 pr-2\">\n <p className=\"text-sm font-medium text-text-primary\">{item.name}</p>\n {item.customizations && item.customizations.length > 0 && (\n <p className=\"text-xs text-text-secondary\">\n {item.customizations.join(', ')}\n </p>\n )}\n <p className=\"text-xs text-text-secondary\">\n {formatCurrency(item.price, { minimumFractionDigits: 0 })} x {item.quantity}\n </p>\n </div>\n <p className=\"text-sm font-medium text-text-primary\">\n {formatCurrency(item.price * item.quantity, { minimumFractionDigits: 0 })}\n </p>\n </div>\n ))}\n </div>\n\n {/* Price Breakdown */}\n <div className=\"mt-4 pt-4 border-t border-border-subtle space-y-2 text-sm\">\n <div className=\"flex justify-between text-text-secondary\">\n <span>Subtotal</span>\n <span>{formatCurrency(order.subtotal, { minimumFractionDigits: 0 })}</span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Delivery Fee</span>\n <span>\n {order.deliveryFee === 0\n ? 'FREE'\n : formatCurrency(order.deliveryFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Tax</span>\n <span>{formatCurrency(order.taxes, { minimumFractionDigits: 0 })}</span>\n </div>\n {order.discount && order.discount > 0 && (\n <div className=\"flex justify-between text-status-success-text\">\n <span>Discount</span>\n <span>-{formatCurrency(order.discount, { minimumFractionDigits: 0 })}</span>\n </div>\n )}\n <div className=\"flex justify-between font-semibold pt-2 border-t border-border-subtle text-text-primary\">\n <span>Total</span>\n <span>{formatCurrency(order.total, { minimumFractionDigits: 0 })}</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Right: Sidebar */}\n <div className=\"lg:col-span-1 space-y-6\">\n {/* Delivery Details */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Delivery Details</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-start gap-2\">\n <MapPin className=\"mt-0.5 h-4 w-4 shrink-0 text-text-secondary\" />\n <div>\n <p className=\"text-xs text-text-secondary\">Delivery Address</p>\n <p className=\"text-sm font-medium text-text-primary\">\n {order.deliveryAddress.street}\n </p>\n <p className=\"text-sm text-text-secondary\">{order.deliveryAddress.area}</p>\n <p className=\"text-sm text-text-secondary\">\n {order.deliveryAddress.city}, {order.deliveryAddress.pincode}\n </p>\n {order.deliveryAddress.landmark && (\n <p className=\"text-xs text-text-secondary mt-0.5\">\n Landmark: {order.deliveryAddress.landmark}\n </p>\n )}\n </div>\n </div>\n\n {/* Customer Notes */}\n {order.customerNotes && (\n <div>\n <p className=\"text-xs text-text-secondary\">Customer Notes</p>\n <p className=\"text-sm text-text-primary\">{order.customerNotes}</p>\n </div>\n )}\n\n {/* Payment */}\n <div>\n <p className=\"text-xs text-text-secondary\">Payment Method</p>\n <p className=\"text-sm font-medium text-text-primary capitalize\">\n {order.paymentMethod}\n </p>\n <p className=\"text-xs text-text-secondary\">\n {order.paymentStatus === 'completed' ? 'Paid' : 'Payment Pending'}\n </p>\n </div>\n </div>\n </div>\n\n {/* Delivery Partner */}\n {order.assignedWorker && (\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Delivery Partner</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n <span className=\"text-sm font-semibold\">\n {order.assignedWorker.name.charAt(0)}\n </span>\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {order.assignedWorker.name}\n </p>\n <div className=\"flex items-center gap-1.5 mt-0.5\">\n <Star className=\"h-3 w-3 fill-status-warning-text text-status-warning-text\" />\n <span className=\"text-xs text-text-secondary\">\n {order.assignedWorker.rating}/5\n </span>\n </div>\n </div>\n <a\n href={`tel:${order.assignedWorker.phone}`}\n className=\"flex h-9 w-9 items-center justify-center rounded-full bg-bg-sunken text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n </a>\n </div>\n <button\n type=\"button\"\n onClick={() => (window.location.href = `tel:${order.assignedWorker!.phone}`)}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n Call Driver\n </button>\n </div>\n </div>\n )}\n\n {/* Need Help */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Need Help?</h3>\n <div className=\"space-y-2\">\n <button\n type=\"button\"\n onClick={() => alert('Chat support coming soon!')}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <MessageCircle className=\"h-4 w-4\" />\n Chat Support\n </button>\n <button\n type=\"button\"\n onClick={() => (window.location.href = 'tel:7012270561')}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n Call Support\n </button>\n {isDelivered && !order.rating && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}/rate`)}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg bg-foreground px-3 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Star className=\"h-4 w-4\" />\n Rate Order\n </button>\n )}\n </div>\n </div>\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OrderTrackingPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/OrderTrackingPage.tsx"],"sourcesContent":["/**\n * Order Tracking Page\n * @module adaptercloud/pages/customer\n *\n * Real-time order tracking with status timeline, delivery partner info,\n * price breakdown, Need Help sidebar, and rate order functionality.\n */\n\nimport { useState, useMemo } from'react';\nimport { useParams } from'react-router-dom';\nimport {\n ArrowLeft,\n CheckCircle2,\n Circle,\n Clock,\n MapPin,\n Phone,\n Star,\n Package,\n Truck,\n ChefHat,\n ShoppingBag,\n XCircle,\n MessageCircle,\n AlertTriangle,\n} from'lucide-react';\nimport { EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from'../../components/PageLayout';\nimport { StatusBadge } from'../../components/StatusBadge';\nimport { EmptyState } from'../../components/EmptyState';\nimport { useAdapterCloud } from'../../context/AdapterCloudContext';\nimport { getOrderById } from'../../mocks/data';\nimport { cn } from'../../utils/cn';\nimport { formatCurrency, formatDate } from'../../utils/formatters';\nimport type { OrderStatus } from'../../types';\n\nconst statusIcons: Record<string, typeof Package> = {\n pending: Clock,\n confirmed: CheckCircle2,\n preparing: ChefHat,\n ready: Package,\n picked_up: Package,\n out_for_delivery: Truck,\n delivered: CheckCircle2,\n cancelled: XCircle,\n};\n\nconst statusOrder: OrderStatus[] = [\n 'pending',\n 'confirmed',\n 'preparing',\n 'ready',\n 'out_for_delivery',\n 'delivered',\n];\n\nconst statusLabels: Record<string, string> = {\n pending: 'Order Placed',\n confirmed: 'Confirmed',\n preparing: 'Preparing',\n ready: 'Ready',\n out_for_delivery: 'Out for Delivery',\n delivered: 'Delivered',\n};\n\nconst statusDescriptions: Record<string, string> = {\n pending: 'Your order has been received',\n confirmed: 'Cart has accepted your order',\n preparing: 'Your food is being prepared',\n ready: 'Order is ready for pickup/delivery',\n out_for_delivery: 'Your order is on the way',\n delivered: 'Order has been delivered',\n};\n\nexport function OrderTrackingPage() {\n const { orderId } = useParams<{ orderId: string }>();\n const { navigateTo } = useAdapterCloud();\n const [isLoading, setIsLoading] = useState(true);\n\n // Simulate loading\n useMemo(() => {\n const timer = setTimeout(() => setIsLoading(false), 800);\n return () => clearTimeout(timer);\n }, []);\n\n const order = useMemo(() => (orderId ? getOrderById(orderId) : undefined), [orderId]);\n\n if (isLoading) {\n return (\n <PageLayout title=\"Track Order\">\n <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4\" />\n <p className=\"text-sm text-text-secondary\">Loading order details...</p>\n </div>\n </PageLayout>\n );\n }\n\n if (!order) {\n return (\n <PageLayout title=\"Order Not Found\">\n <EmptyState\n illustration=\"empty-data\"\n icon={<ShoppingBag className=\"h-12 w-12\" />}\n title=\"Order not found\"\n description={`The order you're looking for doesn't exist.`}\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/orders')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n View All Orders\n </button>\n }\n />\n </PageLayout>\n );\n }\n\n const currentStatusIndex = statusOrder.indexOf(order.status);\n const isCancelled = order.status === 'cancelled';\n const isDelivered = order.status === 'delivered';\n\n const isStepCompleted = (stepStatus: string): boolean => {\n const stepIndex = statusOrder.indexOf(stepStatus as OrderStatus);\n return stepIndex <= currentStatusIndex;\n };\n\n const isCurrentStep = (stepStatus: string): boolean => {\n return stepStatus === order.status;\n };\n\n return (\n <PageLayout\n title={\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/orders')}\n className=\"rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <ArrowLeft className=\"h-5 w-5\" />\n </button>\n <span>Track Order</span>\n </div>\n }\n purpose=\"Follow this order in real time — see which stage it's at, the live delivery timeline, and the contact details you need if you want to reach the cart or your delivery partner.\"\n actions={<StatusBadge status={order.status} />}\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n {/* Left: Order Details & Timeline */}\n <div className=\"lg:col-span-2 space-y-6\">\n {/* Order Header (emphasis zone) */}\n <EmphasisPanel className=\"p-5\">\n <div className=\"flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3\">\n <div className=\"flex-1\">\n <h2 className=\"text-lg font-semibold text-text-primary\">Order #{order.id}</h2>\n <p className=\"text-sm text-text-secondary\">{order.cartName}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n {formatDate(order.orderDate)}\n </p>\n </div>\n <div className=\"text-left sm:text-right\">\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n </p>\n <p className=\"text-xs text-text-secondary uppercase\">{order.paymentMethod}</p>\n </div>\n </div>\n\n {/* Status Banner */}\n {isCancelled ? (\n <div className=\"mt-4 flex items-start gap-3 rounded-lg bg-status-error-bg/10 p-4 border border-status-error-border/20\">\n <XCircle className=\"h-5 w-5 text-status-error-text mt-0.5 shrink-0\" />\n <div>\n <p className=\"font-medium text-status-error-text\">Order Cancelled</p>\n {order.cancellationReason && (\n <p className=\"text-sm text-status-error-text/80 mt-0.5\">{order.cancellationReason}</p>\n )}\n </div>\n </div>\n ) : (\n <div\n className={cn(\n 'mt-4 flex items-start gap-3 rounded-lg p-4 border',\n isDelivered\n ? 'bg-status-success-bg-subtle/10 border-status-success-border/20'\n : 'bg-accent-blue-subtle/10 border-accent-blue-subtle/20'\n )}\n >\n {isDelivered ? (\n <CheckCircle2 className=\"h-5 w-5 text-status-success-text mt-0.5 shrink-0\" />\n ) : (\n <Clock className=\"h-5 w-5 text-accent-blue mt-0.5 shrink-0\" />\n )}\n <p\n className={cn(\n 'text-sm font-medium',\n isDelivered\n ? 'text-status-success-text'\n : 'text-accent-blue'\n )}\n >\n {isDelivered\n ? `Delivered at ${formatDate(order.actualDeliveryTime!)}`\n : order.estimatedDeliveryTime\n ? `Estimated delivery by ${formatDate(order.estimatedDeliveryTime)}`\n : 'Estimated delivery time: TBD'}\n </p>\n </div>\n )}\n </EmphasisPanel>\n\n {/* Tracking Progress Timeline */}\n {!isCancelled && (\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-5\">Order Status</h3>\n <div className=\"relative space-y-0\">\n {statusOrder.map((stepStatus, index) => {\n const completed = isStepCompleted(stepStatus);\n const current = isCurrentStep(stepStatus);\n const isLast = index === statusOrder.length - 1;\n const StepIcon = statusIcons[stepStatus] ?? Circle;\n\n return (\n <div key={stepStatus} className=\"flex items-start relative\">\n {/* Connecting line */}\n {!isLast && (\n <div\n className={cn(\n 'absolute left-5 top-10 w-0.5 h-8 z-0',\n completed ? 'bg-status-success-bg-subtle' : 'bg-border'\n )}\n />\n )}\n\n {/* Step circle */}\n <div\n className={cn(\n 'relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full',\n completed\n ? 'bg-status-success-bg-subtle/10 border-2 border-status-success-border text-status-success-text'\n : 'bg-bg-sunken border-2 border-border-subtle text-text-secondary',\n current && 'ring-4 ring-status-success-border/20'\n )}\n >\n <StepIcon className=\"h-4 w-4\" />\n </div>\n\n {/* Step content */}\n <div className=\"ml-4 flex-1 pb-8\">\n <h4\n className={cn(\n 'text-sm font-semibold',\n completed ? 'text-text-primary' : 'text-text-secondary'\n )}\n >\n {statusLabels[stepStatus]}\n </h4>\n <p\n className={cn(\n 'text-xs',\n completed ? 'text-text-secondary' : 'text-text-secondary/50'\n )}\n >\n {statusDescriptions[stepStatus]}\n </p>\n {/* Show driver info at current step */}\n {current && order.assignedWorker && (\n <div className=\"mt-1.5 text-xs text-accent-blue\">\n <p>Driver: {order.assignedWorker.name}</p>\n <p>Contact: {order.assignedWorker.phone}</p>\n </div>\n )}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n )}\n\n {/* Order Items & Price Breakdown */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Order Items</h3>\n <div className=\"space-y-2\">\n {order.items.map((item, index) => (\n <div\n key={index}\n className=\"flex justify-between items-start pb-2 border-b border-border-subtle last:border-b-0\"\n >\n <div className=\"flex-1 pr-2\">\n <p className=\"text-sm font-medium text-text-primary\">{item.name}</p>\n {item.customizations && item.customizations.length > 0 && (\n <p className=\"text-xs text-text-secondary\">\n {item.customizations.join(', ')}\n </p>\n )}\n <p className=\"text-xs text-text-secondary\">\n {formatCurrency(item.price, { minimumFractionDigits: 0 })} x {item.quantity}\n </p>\n </div>\n <p className=\"text-sm font-medium text-text-primary\">\n {formatCurrency(item.price * item.quantity, { minimumFractionDigits: 0 })}\n </p>\n </div>\n ))}\n </div>\n\n {/* Price Breakdown */}\n <div className=\"mt-4 pt-4 border-t border-border-subtle space-y-2 text-sm\">\n <div className=\"flex justify-between text-text-secondary\">\n <span>Subtotal</span>\n <span>{formatCurrency(order.subtotal, { minimumFractionDigits: 0 })}</span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Delivery Fee</span>\n <span>\n {order.deliveryFee === 0\n ? 'FREE'\n : formatCurrency(order.deliveryFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Tax</span>\n <span>{formatCurrency(order.taxes, { minimumFractionDigits: 0 })}</span>\n </div>\n {order.discount && order.discount > 0 && (\n <div className=\"flex justify-between text-status-success-text\">\n <span>Discount</span>\n <span>-{formatCurrency(order.discount, { minimumFractionDigits: 0 })}</span>\n </div>\n )}\n <div className=\"flex justify-between font-semibold pt-2 border-t border-border-subtle text-text-primary\">\n <span>Total</span>\n <span>{formatCurrency(order.total, { minimumFractionDigits: 0 })}</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Right: Sidebar */}\n <div className=\"lg:col-span-1 space-y-6\">\n {/* Delivery Details */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Delivery Details</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-start gap-2\">\n <MapPin className=\"mt-0.5 h-4 w-4 shrink-0 text-text-secondary\" />\n <div>\n <p className=\"text-xs text-text-secondary\">Delivery Address</p>\n <p className=\"text-sm font-medium text-text-primary\">\n {order.deliveryAddress.street}\n </p>\n <p className=\"text-sm text-text-secondary\">{order.deliveryAddress.area}</p>\n <p className=\"text-sm text-text-secondary\">\n {order.deliveryAddress.city}, {order.deliveryAddress.pincode}\n </p>\n {order.deliveryAddress.landmark && (\n <p className=\"text-xs text-text-secondary mt-0.5\">\n Landmark: {order.deliveryAddress.landmark}\n </p>\n )}\n </div>\n </div>\n\n {/* Customer Notes */}\n {order.customerNotes && (\n <div>\n <p className=\"text-xs text-text-secondary\">Customer Notes</p>\n <p className=\"text-sm text-text-primary\">{order.customerNotes}</p>\n </div>\n )}\n\n {/* Payment */}\n <div>\n <p className=\"text-xs text-text-secondary\">Payment Method</p>\n <p className=\"text-sm font-medium text-text-primary capitalize\">\n {order.paymentMethod}\n </p>\n <p className=\"text-xs text-text-secondary\">\n {order.paymentStatus === 'completed' ? 'Paid' : 'Payment Pending'}\n </p>\n </div>\n </div>\n </div>\n\n {/* Delivery Partner */}\n {order.assignedWorker && (\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Delivery Partner</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary\">\n <span className=\"text-sm font-semibold\">\n {order.assignedWorker.name.charAt(0)}\n </span>\n </div>\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {order.assignedWorker.name}\n </p>\n <div className=\"flex items-center gap-1.5 mt-0.5\">\n <Star className=\"h-3 w-3 fill-status-warning-text text-status-warning-text\" />\n <span className=\"text-xs text-text-secondary\">\n {order.assignedWorker.rating}/5\n </span>\n </div>\n </div>\n <a\n href={`tel:${order.assignedWorker.phone}`}\n className=\"flex h-9 w-9 items-center justify-center rounded-full bg-bg-sunken text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n </a>\n </div>\n <button\n type=\"button\"\n onClick={() => (window.location.href = `tel:${order.assignedWorker!.phone}`)}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n Call Driver\n </button>\n </div>\n </div>\n )}\n\n {/* Need Help */}\n <div className=\"rounded-lg border border-border-seam bg-bg-surface p-5 bg-gloss-card shadow-pop\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">Need Help?</h3>\n <div className=\"space-y-2\">\n <button\n type=\"button\"\n onClick={() => alert('Chat support coming soon!')}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <MessageCircle className=\"h-4 w-4\" />\n Chat Support\n </button>\n <button\n type=\"button\"\n onClick={() => (window.location.href = 'tel:7012270561')}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Phone className=\"h-4 w-4\" />\n Call Support\n </button>\n {isDelivered && !order.rating && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}/rate`)}\n className=\"w-full flex items-center justify-center gap-2 rounded-lg bg-foreground px-3 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Star className=\"h-4 w-4\" />\n Rate Order\n </button>\n )}\n </div>\n </div>\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
|
|
@@ -5,8 +5,9 @@ import { EmptyState as r } from "../../components/EmptyState.js";
|
|
|
5
5
|
import { useState as i } from "react";
|
|
6
6
|
import { Banknote as a, CheckCircle2 as o, CreditCard as s, Plus as c, Shield as l, ShoppingCart as u, Smartphone as d, Trash2 as f, Wallet as p, X as m } from "lucide-react";
|
|
7
7
|
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
8
|
+
import { EmphasisPanel as _ } from "@burdenoff/fe-libs/ui";
|
|
8
9
|
//#region src/adaptercloud/pages/customer/PaymentMethodsPage.tsx
|
|
9
|
-
var
|
|
10
|
+
var v = [
|
|
10
11
|
{
|
|
11
12
|
id: "pm-1",
|
|
12
13
|
type: "upi",
|
|
@@ -48,7 +49,7 @@ var _ = [
|
|
|
48
49
|
isDefault: !1
|
|
49
50
|
}
|
|
50
51
|
];
|
|
51
|
-
function
|
|
52
|
+
function y({ method: e, onRemove: n, onSetDefault: r }) {
|
|
52
53
|
let i = e.icon;
|
|
53
54
|
return /* @__PURE__ */ g("div", {
|
|
54
55
|
className: t("flex items-center gap-4 rounded-lg border p-4", e.isDefault ? "border-foreground/30 bg-accent/50" : "border-border-subtle bg-bg-surface"),
|
|
@@ -92,120 +93,134 @@ function v({ method: e, onRemove: n, onSetDefault: r }) {
|
|
|
92
93
|
]
|
|
93
94
|
});
|
|
94
95
|
}
|
|
95
|
-
function
|
|
96
|
-
let { navigateTo: f } = e(), [
|
|
96
|
+
function b() {
|
|
97
|
+
let { navigateTo: f } = e(), [b, x] = i(v), [S, C] = i(!1), [w, T] = i("card"), [E, D] = i(null), [O, k] = i({
|
|
97
98
|
cardNumber: "",
|
|
98
99
|
expiry: "",
|
|
99
100
|
cvv: "",
|
|
100
101
|
nameOnCard: ""
|
|
101
|
-
}), [
|
|
102
|
+
}), [A, j] = i({ upiId: "" }), [M, N] = i({
|
|
102
103
|
walletProvider: "Paytm",
|
|
103
104
|
mobile: ""
|
|
104
|
-
}),
|
|
105
|
-
|
|
106
|
-
},
|
|
107
|
-
|
|
105
|
+
}), P = (e) => {
|
|
106
|
+
D(e), setTimeout(() => D(null), 3e3);
|
|
107
|
+
}, F = () => {
|
|
108
|
+
k({
|
|
108
109
|
cardNumber: "",
|
|
109
110
|
expiry: "",
|
|
110
111
|
cvv: "",
|
|
111
112
|
nameOnCard: ""
|
|
112
|
-
}),
|
|
113
|
+
}), j({ upiId: "" }), N({
|
|
113
114
|
walletProvider: "Paytm",
|
|
114
115
|
mobile: ""
|
|
115
|
-
}),
|
|
116
|
-
}, F = (e) => {
|
|
117
|
-
b((t) => t.filter((t) => t.id !== e)), N("Payment method removed");
|
|
116
|
+
}), T("card");
|
|
118
117
|
}, I = (e) => {
|
|
119
|
-
|
|
118
|
+
x((t) => t.filter((t) => t.id !== e)), P("Payment method removed");
|
|
119
|
+
}, L = (e) => {
|
|
120
|
+
x((t) => t.map((t) => ({
|
|
120
121
|
...t,
|
|
121
122
|
isDefault: t.id === e
|
|
122
|
-
}))),
|
|
123
|
-
},
|
|
123
|
+
}))), P("Default payment method updated");
|
|
124
|
+
}, R = () => {
|
|
124
125
|
let e = "", t = "", n = s;
|
|
125
|
-
if (
|
|
126
|
-
if (!
|
|
126
|
+
if (w === "card") {
|
|
127
|
+
if (!O.cardNumber.trim() || !O.expiry.trim() || !O.cvv.trim() || !O.nameOnCard.trim()) {
|
|
127
128
|
alert("Please fill in all card fields.");
|
|
128
129
|
return;
|
|
129
130
|
}
|
|
130
|
-
e = `${
|
|
131
|
-
} else if (
|
|
132
|
-
if (!
|
|
131
|
+
e = `${O.nameOnCard}'s Card`, t = `**** **** **** ${O.cardNumber.slice(-4)}`, n = s;
|
|
132
|
+
} else if (w === "upi") {
|
|
133
|
+
if (!A.upiId.trim()) {
|
|
133
134
|
alert("Please enter a UPI ID.");
|
|
134
135
|
return;
|
|
135
136
|
}
|
|
136
|
-
e = "UPI", t =
|
|
137
|
+
e = "UPI", t = A.upiId, n = d;
|
|
137
138
|
} else {
|
|
138
|
-
if (!
|
|
139
|
+
if (!M.mobile.trim()) {
|
|
139
140
|
alert("Please enter mobile number.");
|
|
140
141
|
return;
|
|
141
142
|
}
|
|
142
|
-
e =
|
|
143
|
+
e = M.walletProvider, t = `Mobile: ${M.mobile}`, n = p;
|
|
143
144
|
}
|
|
144
145
|
let r = {
|
|
145
146
|
id: `pm-${Date.now()}`,
|
|
146
|
-
type:
|
|
147
|
+
type: w,
|
|
147
148
|
label: e,
|
|
148
149
|
detail: t,
|
|
149
150
|
icon: n,
|
|
150
151
|
isDefault: !1
|
|
151
152
|
};
|
|
152
|
-
|
|
153
|
-
},
|
|
154
|
-
upi:
|
|
155
|
-
card:
|
|
156
|
-
wallet:
|
|
153
|
+
x((e) => [...e, r]), F(), C(!1), P("Payment method added successfully");
|
|
154
|
+
}, z = {
|
|
155
|
+
upi: b.filter((e) => e.type === "upi"),
|
|
156
|
+
card: b.filter((e) => e.type === "card"),
|
|
157
|
+
wallet: b.filter((e) => e.type === "wallet")
|
|
157
158
|
};
|
|
158
159
|
return /* @__PURE__ */ g(n, {
|
|
159
160
|
title: "Payment Methods",
|
|
160
161
|
description: "Manage your saved payment options",
|
|
162
|
+
purpose: "Save the cards and UPI handles you pay with so checkout is one tap, not a re-type. Set a default for the fastest path, and remove anything you no longer use to keep your account tidy and secure.",
|
|
161
163
|
actions: /* @__PURE__ */ g("button", {
|
|
162
164
|
type: "button",
|
|
163
|
-
onClick: () =>
|
|
165
|
+
onClick: () => C(!0),
|
|
164
166
|
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"),
|
|
165
167
|
children: [/* @__PURE__ */ h(c, { className: "h-4 w-4" }), "Add Method"]
|
|
166
168
|
}),
|
|
167
169
|
children: [
|
|
168
|
-
|
|
170
|
+
E && /* @__PURE__ */ g("div", {
|
|
169
171
|
className: "mb-4 rounded-lg border border-status-success-border/30 bg-status-success-bg-subtle/10 p-3 flex items-center gap-2",
|
|
170
172
|
children: [/* @__PURE__ */ h(o, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ h("p", {
|
|
171
173
|
className: "text-sm text-status-success-text",
|
|
172
|
-
children:
|
|
174
|
+
children: E
|
|
173
175
|
})]
|
|
174
176
|
}),
|
|
175
|
-
|
|
177
|
+
/* @__PURE__ */ g(_, {
|
|
178
|
+
className: "mb-6 flex items-start gap-3 p-4",
|
|
179
|
+
children: [/* @__PURE__ */ h(l, {
|
|
180
|
+
className: "h-5 w-5 shrink-0 text-status-success-text",
|
|
181
|
+
"aria-hidden": "true"
|
|
182
|
+
}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
|
|
183
|
+
className: "text-sm font-semibold text-text-primary",
|
|
184
|
+
children: "Your payment details are safe"
|
|
185
|
+
}), /* @__PURE__ */ h("p", {
|
|
186
|
+
className: "mt-0.5 text-sm text-text-secondary",
|
|
187
|
+
children: "Cards and UPI handles are stored securely and used only to speed up checkout. Set a default to skip a step every time you order."
|
|
188
|
+
})] })]
|
|
189
|
+
}),
|
|
190
|
+
b.length > 0 ? /* @__PURE__ */ g("div", {
|
|
176
191
|
className: "space-y-6",
|
|
177
192
|
children: [
|
|
178
|
-
|
|
193
|
+
z.upi.length > 0 && /* @__PURE__ */ g("section", { children: [/* @__PURE__ */ g("h3", {
|
|
179
194
|
className: "text-sm font-semibold text-text-primary mb-3 flex items-center gap-2",
|
|
180
195
|
children: [/* @__PURE__ */ h(d, { className: "h-4 w-4 text-text-secondary" }), "UPI"]
|
|
181
196
|
}), /* @__PURE__ */ h("div", {
|
|
182
197
|
className: "space-y-2",
|
|
183
|
-
children:
|
|
198
|
+
children: z.upi.map((e) => /* @__PURE__ */ h(y, {
|
|
184
199
|
method: e,
|
|
185
|
-
onRemove:
|
|
186
|
-
onSetDefault:
|
|
200
|
+
onRemove: I,
|
|
201
|
+
onSetDefault: L
|
|
187
202
|
}, e.id))
|
|
188
203
|
})] }),
|
|
189
|
-
|
|
204
|
+
z.card.length > 0 && /* @__PURE__ */ g("section", { children: [/* @__PURE__ */ g("h3", {
|
|
190
205
|
className: "text-sm font-semibold text-text-primary mb-3 flex items-center gap-2",
|
|
191
206
|
children: [/* @__PURE__ */ h(s, { className: "h-4 w-4 text-text-secondary" }), "Cards"]
|
|
192
207
|
}), /* @__PURE__ */ h("div", {
|
|
193
208
|
className: "space-y-2",
|
|
194
|
-
children:
|
|
209
|
+
children: z.card.map((e) => /* @__PURE__ */ h(y, {
|
|
195
210
|
method: e,
|
|
196
|
-
onRemove:
|
|
197
|
-
onSetDefault:
|
|
211
|
+
onRemove: I,
|
|
212
|
+
onSetDefault: L
|
|
198
213
|
}, e.id))
|
|
199
214
|
})] }),
|
|
200
|
-
|
|
215
|
+
z.wallet.length > 0 && /* @__PURE__ */ g("section", { children: [/* @__PURE__ */ g("h3", {
|
|
201
216
|
className: "text-sm font-semibold text-text-primary mb-3 flex items-center gap-2",
|
|
202
217
|
children: [/* @__PURE__ */ h(p, { className: "h-4 w-4 text-text-secondary" }), "Wallets"]
|
|
203
218
|
}), /* @__PURE__ */ h("div", {
|
|
204
219
|
className: "space-y-2",
|
|
205
|
-
children:
|
|
220
|
+
children: z.wallet.map((e) => /* @__PURE__ */ h(y, {
|
|
206
221
|
method: e,
|
|
207
|
-
onRemove:
|
|
208
|
-
onSetDefault:
|
|
222
|
+
onRemove: I,
|
|
223
|
+
onSetDefault: L
|
|
209
224
|
}, e.id))
|
|
210
225
|
})] }),
|
|
211
226
|
/* @__PURE__ */ g("div", {
|
|
@@ -226,7 +241,7 @@ function y() {
|
|
|
226
241
|
description: "Add a payment method to make faster checkouts.",
|
|
227
242
|
action: /* @__PURE__ */ h("button", {
|
|
228
243
|
type: "button",
|
|
229
|
-
onClick: () =>
|
|
244
|
+
onClick: () => C(!0),
|
|
230
245
|
className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
|
|
231
246
|
children: "Add Payment Method"
|
|
232
247
|
})
|
|
@@ -291,7 +306,7 @@ function y() {
|
|
|
291
306
|
})]
|
|
292
307
|
})]
|
|
293
308
|
}),
|
|
294
|
-
|
|
309
|
+
S && /* @__PURE__ */ h("div", {
|
|
295
310
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
|
|
296
311
|
children: /* @__PURE__ */ h("div", {
|
|
297
312
|
className: "w-full max-w-md max-h-[90vh] overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface shadow-lg",
|
|
@@ -306,7 +321,7 @@ function y() {
|
|
|
306
321
|
}), /* @__PURE__ */ h("button", {
|
|
307
322
|
type: "button",
|
|
308
323
|
onClick: () => {
|
|
309
|
-
|
|
324
|
+
C(!1), F();
|
|
310
325
|
},
|
|
311
326
|
className: "rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
|
|
312
327
|
children: /* @__PURE__ */ h(m, { className: "h-4 w-4" })
|
|
@@ -338,14 +353,14 @@ function y() {
|
|
|
338
353
|
Icon: p
|
|
339
354
|
}
|
|
340
355
|
].map(({ value: e, label: n, sub: r, Icon: i }) => /* @__PURE__ */ g("label", {
|
|
341
|
-
className: t("flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors",
|
|
356
|
+
className: t("flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors", w === e ? "border-foreground bg-accent" : "border-border-subtle hover:bg-accent"),
|
|
342
357
|
children: [
|
|
343
358
|
/* @__PURE__ */ h("input", {
|
|
344
359
|
type: "radio",
|
|
345
360
|
name: "paymentType",
|
|
346
361
|
value: e,
|
|
347
|
-
checked:
|
|
348
|
-
onChange: () =>
|
|
362
|
+
checked: w === e,
|
|
363
|
+
onChange: () => T(e),
|
|
349
364
|
className: "h-4 w-4 shrink-0"
|
|
350
365
|
}),
|
|
351
366
|
/* @__PURE__ */ h(i, { className: "h-5 w-5 text-text-secondary shrink-0" }),
|
|
@@ -359,7 +374,7 @@ function y() {
|
|
|
359
374
|
]
|
|
360
375
|
}, e))
|
|
361
376
|
}),
|
|
362
|
-
|
|
377
|
+
w === "card" && /* @__PURE__ */ g("div", {
|
|
363
378
|
className: "space-y-3",
|
|
364
379
|
children: [
|
|
365
380
|
/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
|
|
@@ -368,8 +383,8 @@ function y() {
|
|
|
368
383
|
}), /* @__PURE__ */ h("input", {
|
|
369
384
|
type: "text",
|
|
370
385
|
placeholder: "1234 5678 9012 3456",
|
|
371
|
-
value:
|
|
372
|
-
onChange: (e) =>
|
|
386
|
+
value: O.cardNumber,
|
|
387
|
+
onChange: (e) => k((t) => ({
|
|
373
388
|
...t,
|
|
374
389
|
cardNumber: e.target.value
|
|
375
390
|
})),
|
|
@@ -383,8 +398,8 @@ function y() {
|
|
|
383
398
|
}), /* @__PURE__ */ h("input", {
|
|
384
399
|
type: "text",
|
|
385
400
|
placeholder: "MM/YY",
|
|
386
|
-
value:
|
|
387
|
-
onChange: (e) =>
|
|
401
|
+
value: O.expiry,
|
|
402
|
+
onChange: (e) => k((t) => ({
|
|
388
403
|
...t,
|
|
389
404
|
expiry: e.target.value
|
|
390
405
|
})),
|
|
@@ -395,8 +410,8 @@ function y() {
|
|
|
395
410
|
}), /* @__PURE__ */ h("input", {
|
|
396
411
|
type: "password",
|
|
397
412
|
placeholder: "123",
|
|
398
|
-
value:
|
|
399
|
-
onChange: (e) =>
|
|
413
|
+
value: O.cvv,
|
|
414
|
+
onChange: (e) => k((t) => ({
|
|
400
415
|
...t,
|
|
401
416
|
cvv: e.target.value
|
|
402
417
|
})),
|
|
@@ -409,8 +424,8 @@ function y() {
|
|
|
409
424
|
}), /* @__PURE__ */ h("input", {
|
|
410
425
|
type: "text",
|
|
411
426
|
placeholder: "John Doe",
|
|
412
|
-
value:
|
|
413
|
-
onChange: (e) =>
|
|
427
|
+
value: O.nameOnCard,
|
|
428
|
+
onChange: (e) => k((t) => ({
|
|
414
429
|
...t,
|
|
415
430
|
nameOnCard: e.target.value
|
|
416
431
|
})),
|
|
@@ -418,24 +433,24 @@ function y() {
|
|
|
418
433
|
})] })
|
|
419
434
|
]
|
|
420
435
|
}),
|
|
421
|
-
|
|
436
|
+
w === "upi" && /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
|
|
422
437
|
className: "block text-sm font-medium text-text-primary mb-1",
|
|
423
438
|
children: "UPI ID"
|
|
424
439
|
}), /* @__PURE__ */ h("input", {
|
|
425
440
|
type: "text",
|
|
426
441
|
placeholder: "yourname@paytm",
|
|
427
|
-
value:
|
|
428
|
-
onChange: (e) =>
|
|
442
|
+
value: A.upiId,
|
|
443
|
+
onChange: (e) => j({ upiId: e.target.value }),
|
|
429
444
|
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)]"
|
|
430
445
|
})] }),
|
|
431
|
-
|
|
446
|
+
w === "wallet" && /* @__PURE__ */ g("div", {
|
|
432
447
|
className: "space-y-3",
|
|
433
448
|
children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
|
|
434
449
|
className: "block text-sm font-medium text-text-primary mb-1",
|
|
435
450
|
children: "Select Wallet"
|
|
436
451
|
}), /* @__PURE__ */ g("select", {
|
|
437
|
-
value:
|
|
438
|
-
onChange: (e) =>
|
|
452
|
+
value: M.walletProvider,
|
|
453
|
+
onChange: (e) => N((t) => ({
|
|
439
454
|
...t,
|
|
440
455
|
walletProvider: e.target.value
|
|
441
456
|
})),
|
|
@@ -452,8 +467,8 @@ function y() {
|
|
|
452
467
|
}), /* @__PURE__ */ h("input", {
|
|
453
468
|
type: "tel",
|
|
454
469
|
placeholder: "9876543210",
|
|
455
|
-
value:
|
|
456
|
-
onChange: (e) =>
|
|
470
|
+
value: M.mobile,
|
|
471
|
+
onChange: (e) => N((t) => ({
|
|
457
472
|
...t,
|
|
458
473
|
mobile: e.target.value
|
|
459
474
|
})),
|
|
@@ -464,13 +479,13 @@ function y() {
|
|
|
464
479
|
className: "flex items-center gap-3 pt-5",
|
|
465
480
|
children: [/* @__PURE__ */ h("button", {
|
|
466
481
|
type: "button",
|
|
467
|
-
onClick:
|
|
482
|
+
onClick: R,
|
|
468
483
|
className: "flex-1 rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
|
|
469
484
|
children: "Add Payment Method"
|
|
470
485
|
}), /* @__PURE__ */ h("button", {
|
|
471
486
|
type: "button",
|
|
472
487
|
onClick: () => {
|
|
473
|
-
|
|
488
|
+
C(!1), F();
|
|
474
489
|
},
|
|
475
490
|
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",
|
|
476
491
|
children: "Cancel"
|
|
@@ -484,6 +499,6 @@ function y() {
|
|
|
484
499
|
});
|
|
485
500
|
}
|
|
486
501
|
//#endregion
|
|
487
|
-
export {
|
|
502
|
+
export { b as PaymentMethodsPage };
|
|
488
503
|
|
|
489
504
|
//# sourceMappingURL=PaymentMethodsPage.js.map
|