@burdenoff/microfe-kadaikodi 2026.704.1 → 2026.704.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.
Files changed (76) hide show
  1. package/dist/kadaikodi/hooks/useKadaikodiApi.js +77 -26
  2. package/dist/kadaikodi/hooks/useKadaikodiApi.js.map +1 -1
  3. package/dist/kadaikodi/pages/admin/AdminAnalyticsPage.js +341 -461
  4. package/dist/kadaikodi/pages/admin/AdminAnalyticsPage.js.map +1 -1
  5. package/dist/kadaikodi/pages/admin/AdminDashboard.js +115 -399
  6. package/dist/kadaikodi/pages/admin/AdminDashboard.js.map +1 -1
  7. package/dist/kadaikodi/pages/admin/AdminFinancialPage.js +140 -283
  8. package/dist/kadaikodi/pages/admin/AdminFinancialPage.js.map +1 -1
  9. package/dist/kadaikodi/pages/admin/AdminOrdersPage.js +282 -453
  10. package/dist/kadaikodi/pages/admin/AdminOrdersPage.js.map +1 -1
  11. package/dist/kadaikodi/pages/admin/AdminProfilePage.js +115 -242
  12. package/dist/kadaikodi/pages/admin/AdminProfilePage.js.map +1 -1
  13. package/dist/kadaikodi/pages/admin/AdminSettingsPage.js +2 -2
  14. package/dist/kadaikodi/pages/admin/AdminSettingsPage.js.map +1 -1
  15. package/dist/kadaikodi/pages/admin/CartManagementPage.js.map +1 -1
  16. package/dist/kadaikodi/pages/admin/UserManagementPage.js.map +1 -1
  17. package/dist/kadaikodi/pages/cart-owner/AnalyticsDashboard.js +503 -627
  18. package/dist/kadaikodi/pages/cart-owner/AnalyticsDashboard.js.map +1 -1
  19. package/dist/kadaikodi/pages/cart-owner/BusinessSettingsPage.js +339 -282
  20. package/dist/kadaikodi/pages/cart-owner/BusinessSettingsPage.js.map +1 -1
  21. package/dist/kadaikodi/pages/cart-owner/CartOwnerDashboard.js +323 -422
  22. package/dist/kadaikodi/pages/cart-owner/CartOwnerDashboard.js.map +1 -1
  23. package/dist/kadaikodi/pages/cart-owner/CartOwnerProfilePage.js +374 -383
  24. package/dist/kadaikodi/pages/cart-owner/CartOwnerProfilePage.js.map +1 -1
  25. package/dist/kadaikodi/pages/cart-owner/CartServiceConfigPage.js +249 -208
  26. package/dist/kadaikodi/pages/cart-owner/CartServiceConfigPage.js.map +1 -1
  27. package/dist/kadaikodi/pages/cart-owner/InventoryManagementPage.js +1 -1
  28. package/dist/kadaikodi/pages/cart-owner/InventoryManagementPage.js.map +1 -1
  29. package/dist/kadaikodi/pages/cart-owner/OrderManagementPage.js +1 -1
  30. package/dist/kadaikodi/pages/cart-owner/OrderManagementPage.js.map +1 -1
  31. package/dist/kadaikodi/pages/cart-owner/StaffManagementPage.js +171 -627
  32. package/dist/kadaikodi/pages/cart-owner/StaffManagementPage.js.map +1 -1
  33. package/dist/kadaikodi/pages/common/HelpSupportPage.js +331 -415
  34. package/dist/kadaikodi/pages/common/HelpSupportPage.js.map +1 -1
  35. package/dist/kadaikodi/pages/common/NotificationCenterPage.js +18 -670
  36. package/dist/kadaikodi/pages/common/NotificationCenterPage.js.map +1 -1
  37. package/dist/kadaikodi/pages/common/SettingsPage.js.map +1 -1
  38. package/dist/kadaikodi/pages/customer/CheckoutPage.js +4 -2
  39. package/dist/kadaikodi/pages/customer/CheckoutPage.js.map +1 -1
  40. package/dist/kadaikodi/pages/customer/CustomerDashboard.js +191 -369
  41. package/dist/kadaikodi/pages/customer/CustomerDashboard.js.map +1 -1
  42. package/dist/kadaikodi/pages/customer/CustomerProfilePage.js +233 -389
  43. package/dist/kadaikodi/pages/customer/CustomerProfilePage.js.map +1 -1
  44. package/dist/kadaikodi/pages/customer/DirectServiceBookingPage.js.map +1 -1
  45. package/dist/kadaikodi/pages/customer/OrderHistoryPage.js.map +1 -1
  46. package/dist/kadaikodi/pages/customer/OrderTrackingPage.js.map +1 -1
  47. package/dist/kadaikodi/pages/customer/PaymentMethodsPage.js +76 -118
  48. package/dist/kadaikodi/pages/customer/PaymentMethodsPage.js.map +1 -1
  49. package/dist/kadaikodi/pages/customer/ReviewsPage.js.map +1 -1
  50. package/dist/kadaikodi/pages/customer/SavedAddressesPage.js +135 -213
  51. package/dist/kadaikodi/pages/customer/SavedAddressesPage.js.map +1 -1
  52. package/dist/kadaikodi/pages/investor/InvestmentDetailsPage.js +272 -774
  53. package/dist/kadaikodi/pages/investor/InvestmentDetailsPage.js.map +1 -1
  54. package/dist/kadaikodi/pages/investor/InvestmentOpportunitiesPage.js +232 -343
  55. package/dist/kadaikodi/pages/investor/InvestmentOpportunitiesPage.js.map +1 -1
  56. package/dist/kadaikodi/pages/investor/InvestorAnalyticsPage.js +112 -600
  57. package/dist/kadaikodi/pages/investor/InvestorAnalyticsPage.js.map +1 -1
  58. package/dist/kadaikodi/pages/investor/InvestorDashboard.js +127 -294
  59. package/dist/kadaikodi/pages/investor/InvestorDashboard.js.map +1 -1
  60. package/dist/kadaikodi/pages/investor/InvestorInvestmentsPage.js +204 -290
  61. package/dist/kadaikodi/pages/investor/InvestorInvestmentsPage.js.map +1 -1
  62. package/dist/kadaikodi/pages/investor/InvestorPortfolioPage.js +159 -500
  63. package/dist/kadaikodi/pages/investor/InvestorPortfolioPage.js.map +1 -1
  64. package/dist/kadaikodi/pages/investor/InvestorProfilePage.js +399 -487
  65. package/dist/kadaikodi/pages/investor/InvestorProfilePage.js.map +1 -1
  66. package/dist/kadaikodi/pages/worker/TaskDetailsPage.js +13 -13
  67. package/dist/kadaikodi/pages/worker/TaskDetailsPage.js.map +1 -1
  68. package/dist/kadaikodi/pages/worker/WorkerDashboard.js +192 -296
  69. package/dist/kadaikodi/pages/worker/WorkerDashboard.js.map +1 -1
  70. package/dist/kadaikodi/pages/worker/WorkerOrdersPage.js +245 -397
  71. package/dist/kadaikodi/pages/worker/WorkerOrdersPage.js.map +1 -1
  72. package/dist/kadaikodi/pages/worker/WorkerProfilePage.js +85 -117
  73. package/dist/kadaikodi/pages/worker/WorkerProfilePage.js.map +1 -1
  74. package/dist/kadaikodi/pages/worker/WorkerSchedulePage.js +177 -395
  75. package/dist/kadaikodi/pages/worker/WorkerSchedulePage.js.map +1 -1
  76. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"CustomerProfilePage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/CustomerProfilePage.tsx"],"sourcesContent":["/**\n * Customer Profile Page\n * @module kadaikodi/pages/customer\n *\n * Full profile management with 3-tab interface (Profile Info, Preferences, My Stats),\n * edit mode toggle, inline editable fields, emergency contact, dietary preferences,\n * food allergies, and stats/loyalty display.\n */\n\nimport { useState, useEffect, useCallback } from 'react';\nimport {\n User,\n Mail,\n Phone,\n Shield,\n MapPin,\n Bell,\n Globe,\n CheckCircle2,\n Camera,\n ChevronRight,\n Edit3,\n Save,\n X,\n Heart,\n AlertTriangle,\n Award,\n ShoppingBag,\n IndianRupee,\n Star,\n BarChart3,\n Settings,\n UserCircle,\n} from 'lucide-react';\nimport { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useOrders } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency, formatDate } from '../../utils/formatters';\n\ntype ProfileTab = 'profile' | 'preferences' | 'stats';\n\ninterface EmergencyContact {\n name: string;\n phone: string;\n relationship: string;\n}\n\ninterface ProfileData {\n firstName: string;\n lastName: string;\n email: string;\n phone: string;\n emergencyContact: EmergencyContact;\n dietary: string[];\n allergies: string[];\n notifications: {\n orderUpdates: boolean;\n promotions: boolean;\n newsletter: boolean;\n sms: boolean;\n };\n}\n\nconst dietaryOptions = ['vegetarian', 'vegan', 'jain', 'keto', 'gluten-free', 'low-carb'];\nconst allergyOptions = ['nuts', 'dairy', 'eggs', 'soy', 'shellfish', 'gluten'];\n\nconst mockAddresses = [\n {\n id: 'addr-1',\n label: 'Home',\n street: '123, MG Road',\n area: 'Near Central Mall',\n city: 'Bangalore',\n state: 'Karnataka',\n pincode: '560001',\n isDefault: true,\n },\n {\n id: 'addr-2',\n label: 'Office',\n street: '456 Tech Park Road',\n area: 'Whitefield',\n city: 'Bangalore',\n state: 'Karnataka',\n pincode: '560066',\n isDefault: false,\n },\n];\n\nexport function CustomerProfilePage() {\n const { navigateTo, currentUser } = useKadaikodi();\n const { data: orders = [], isLoading: isLoadingOrders } = useOrders({\n customerId: currentUser?.id,\n });\n const [activeTab, setActiveTab] = useState<ProfileTab>('profile');\n const [isEditing, setIsEditing] = useState(false);\n\n // Use currentUser from context, fallback to defaults\n const profile = {\n firstName: currentUser?.firstName || currentUser?.name?.split(' ')[0] || 'Customer',\n lastName: currentUser?.lastName || currentUser?.name?.split(' ').slice(1).join(' ') || '',\n email: currentUser?.email || '',\n phone: '+91 98765 43210',\n profilePicture: currentUser?.avatar,\n isEmailVerified: true,\n isPhoneVerified: true,\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n };\n\n // Editable profile data\n const [profileData, setProfileData] = useState<ProfileData>({\n firstName: profile.firstName,\n lastName: profile.lastName,\n email: profile.email,\n phone: profile.phone,\n emergencyContact: {\n name: 'Priya Sharma',\n phone: '+91 98765 43211',\n relationship: 'Spouse',\n },\n dietary: ['vegetarian'],\n allergies: ['nuts', 'dairy'],\n notifications: {\n orderUpdates: true,\n promotions: true,\n newsletter: false,\n sms: true,\n },\n });\n\n const [editedData, setEditedData] = useState<ProfileData>({ ...profileData });\n\n // Calculate stats from real orders\n const stats = {\n totalOrders: orders.length,\n totalSpent: orders.reduce((acc, o) => acc + o.total, 0),\n loyaltyPoints: Math.floor(orders.reduce((acc, o) => acc + o.total, 0) / 10),\n avgOrderValue:\n orders.length > 0\n ? Math.floor(orders.reduce((acc, o) => acc + o.total, 0) / orders.length)\n : 0,\n favoriteCategory: 'South Indian',\n memberSince: profile.createdAt,\n };\n\n const isLoading = isLoadingOrders;\n\n const handleStartEdit = () => {\n setEditedData({ ...profileData });\n setIsEditing(true);\n };\n\n const handleCancelEdit = () => {\n setEditedData({ ...profileData });\n setIsEditing(false);\n };\n\n const handleSaveProfile = () => {\n setProfileData({ ...editedData });\n setIsEditing(false);\n alert('Profile updated successfully');\n };\n\n const handleSavePreferences = () => {\n setProfileData({ ...editedData });\n alert('Preferences saved successfully');\n };\n\n const handleFieldChange = (field: keyof ProfileData, value: string) => {\n setEditedData((prev) => ({ ...prev, [field]: value }));\n };\n\n const handleEmergencyContactChange = (field: keyof EmergencyContact, value: string) => {\n setEditedData((prev) => ({\n ...prev,\n emergencyContact: { ...prev.emergencyContact, [field]: value },\n }));\n };\n\n const handleNotificationChange = (field: string, value: boolean) => {\n setEditedData((prev) => ({\n ...prev,\n notifications: { ...prev.notifications, [field]: value },\n }));\n };\n\n const handleArrayToggle = (field: 'dietary' | 'allergies', value: string, checked: boolean) => {\n setEditedData((prev) => {\n const currentArray = prev[field];\n const newArray = checked\n ? [...currentArray, value]\n : currentArray.filter((item) => item !== value);\n return { ...prev, [field]: newArray };\n });\n };\n\n const tabs: Array<{ key: ProfileTab; label: string; icon: typeof UserCircle }> = [\n { key: 'profile', label: 'Profile Info', icon: UserCircle },\n { key: 'preferences', label: 'Preferences', icon: Settings },\n { key: 'stats', label: 'My Stats', icon: BarChart3 },\n ];\n\n if (isLoading) {\n return (\n <PageLayout title=\"My Profile\">\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 profile...</p>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PageLayout title=\"My Profile\" description=\"Manage your personal information and preferences\">\n <PagePurpose className=\"mb-6\">\n Your account, your way — keep your contact details, delivery address and preferences up to\n date, check your loyalty rewards, and manage how Kadaikodi reaches you. Accurate details\n mean smoother orders and deliveries.\n </PagePurpose>\n\n {/* Profile Header — the one emphasis zone */}\n <GlassCard\n treatment=\"glass\"\n glow\n className=\"flex flex-col items-center sm:flex-row sm:items-start gap-6 p-6\"\n >\n <div className=\"relative\">\n <div className=\"h-24 w-24 rounded-full bg-bg-sunken overflow-hidden\">\n {profile.profilePicture ? (\n <img\n src={profile.profilePicture}\n alt={`${profile.firstName} ${profile.lastName}`}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div className=\"flex h-full w-full items-center justify-center text-text-secondary\">\n <User className=\"h-10 w-10\" />\n </div>\n )}\n </div>\n <button\n type=\"button\"\n className=\"absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full bg-foreground text-background shadow-sm hover:opacity-90 transition-opacity\"\n >\n <Camera className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"flex-1 text-center sm:text-left\">\n <h2 className=\"text-xl font-semibold text-text-primary\">\n {profileData.firstName} {profileData.lastName}\n </h2>\n <p className=\"mt-1 text-sm text-text-secondary\">{profileData.email}</p>\n <p className=\"mt-0.5 text-sm text-text-secondary\">{profileData.phone}</p>\n <div className=\"flex flex-wrap items-center justify-center sm:justify-start gap-2 mt-2\">\n <span\n className={cn(\n 'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',\n profile.isEmailVerified\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-error-bg/20 text-status-error-text'\n )}\n >\n <CheckCircle2 className=\"h-3 w-3\" />\n {profile.isEmailVerified ? 'Email Verified' : 'Email Not Verified'}\n </span>\n <span\n className={cn(\n 'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',\n profile.isPhoneVerified\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-error-bg/20 text-status-error-text'\n )}\n >\n <CheckCircle2 className=\"h-3 w-3\" />\n {profile.isPhoneVerified ? 'Phone Verified' : 'Phone Not Verified'}\n </span>\n </div>\n </div>\n\n <div className=\"text-center sm:text-right\">\n <p className=\"text-2xl font-bold text-text-primary\">{stats.loyaltyPoints}</p>\n <p className=\"text-xs text-text-secondary\">Loyalty Points</p>\n </div>\n </GlassCard>\n\n {/* Tabs */}\n <div className=\"mt-6 rounded-lg border border-border-subtle bg-bg-surface\">\n <div className=\"border-b border-border-subtle\">\n <nav className=\"flex -mb-px overflow-x-auto\">\n {tabs.map((tab) => {\n const Icon = tab.icon;\n return (\n <button\n key={tab.key}\n type=\"button\"\n className={cn(\n 'flex items-center gap-2 py-3.5 px-5 text-sm font-medium whitespace-nowrap transition-colors',\n activeTab === tab.key\n ? 'border-b-2 border-foreground text-text-primary'\n : 'text-text-secondary hover:text-text-primary'\n )}\n onClick={() => setActiveTab(tab.key)}\n >\n <Icon className=\"h-4 w-4\" />\n {tab.label}\n </button>\n );\n })}\n </nav>\n </div>\n\n <div className=\"p-5 md:p-6\">\n {/* Profile Tab */}\n {activeTab === 'profile' && (\n <div className=\"space-y-6\">\n {/* Header with Edit/Save/Cancel */}\n <div className=\"flex justify-between items-center\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Personal Information</h3>\n {isEditing ? (\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={handleSaveProfile}\n className=\"flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-3 w-3\" />\n Save\n </button>\n <button\n type=\"button\"\n onClick={handleCancelEdit}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <X className=\"h-3 w-3\" />\n Cancel\n </button>\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={handleStartEdit}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Edit3 className=\"h-3 w-3\" />\n Edit Profile\n </button>\n )}\n </div>\n\n {/* Editable Fields */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n First Name\n </label>\n <input\n type=\"text\"\n value={isEditing ? editedData.firstName : profileData.firstName}\n onChange={(e) => handleFieldChange('firstName', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Last Name\n </label>\n <input\n type=\"text\"\n value={isEditing ? editedData.lastName : profileData.lastName}\n onChange={(e) => handleFieldChange('lastName', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Email\n </label>\n <input\n type=\"email\"\n value={isEditing ? editedData.email : profileData.email}\n onChange={(e) => handleFieldChange('email', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone\n </label>\n <input\n type=\"tel\"\n value={isEditing ? editedData.phone : profileData.phone}\n onChange={(e) => handleFieldChange('phone', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n </div>\n\n {/* Primary Address */}\n <div>\n <h4 className=\"text-base font-semibold text-text-primary mb-3\">Primary Address</h4>\n <div className=\"rounded-lg bg-bg-sunken/50 p-4\">\n <p className=\"text-sm font-medium text-text-primary\">{mockAddresses[0].street}</p>\n <p className=\"text-sm text-text-secondary\">{mockAddresses[0].area}</p>\n <p className=\"text-sm text-text-secondary\">\n {mockAddresses[0].city}, {mockAddresses[0].state} - {mockAddresses[0].pincode}\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/addresses')}\n className=\"mt-2 flex items-center gap-1 text-xs font-medium text-text-secondary hover:text-text-primary transition-colors\"\n >\n <MapPin className=\"h-3 w-3\" />\n Manage Addresses\n <ChevronRight className=\"h-3 w-3\" />\n </button>\n </div>\n </div>\n\n {/* Emergency Contact */}\n <div>\n <h4 className=\"text-base font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <AlertTriangle className=\"h-4 w-4 text-text-secondary\" />\n Emergency Contact\n </h4>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Name\n </label>\n <input\n type=\"text\"\n value={\n isEditing\n ? editedData.emergencyContact.name\n : profileData.emergencyContact.name\n }\n onChange={(e) => handleEmergencyContactChange('name', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone\n </label>\n <input\n type=\"tel\"\n value={\n isEditing\n ? editedData.emergencyContact.phone\n : profileData.emergencyContact.phone\n }\n onChange={(e) => handleEmergencyContactChange('phone', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Relationship\n </label>\n <input\n type=\"text\"\n value={\n isEditing\n ? editedData.emergencyContact.relationship\n : profileData.emergencyContact.relationship\n }\n onChange={(e) => handleEmergencyContactChange('relationship', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n </div>\n </div>\n\n {/* Save/Cancel at bottom when editing */}\n {isEditing && (\n <div className=\"flex gap-3 pt-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={handleSaveProfile}\n className=\"flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-4 w-4\" />\n Save Changes\n </button>\n <button\n type=\"button\"\n onClick={handleCancelEdit}\n className=\"flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n )}\n </div>\n )}\n\n {/* Preferences Tab */}\n {activeTab === 'preferences' && (\n <div className=\"space-y-8\">\n {/* Notification Preferences */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Bell className=\"h-4 w-4 text-text-secondary\" />\n Notification Preferences\n </h3>\n <div className=\"space-y-3\">\n {[\n { key: 'orderUpdates', label: 'Order status updates' },\n { key: 'promotions', label: 'Promotional offers and discounts' },\n { key: 'newsletter', label: 'Newsletter and food recommendations' },\n { key: 'sms', label: 'SMS notifications' },\n ].map((item) => (\n <label key={item.key} className=\"flex items-center gap-3 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={\n editedData.notifications[\n item.key as keyof typeof editedData.notifications\n ]\n }\n onChange={(e) => handleNotificationChange(item.key, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary focus:ring-[var(--color-focus-ring)]\"\n />\n <span className=\"text-sm text-text-primary\">{item.label}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Dietary Preferences */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Heart className=\"h-4 w-4 text-text-secondary\" />\n Dietary Preferences\n </h3>\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n {dietaryOptions.map((diet) => (\n <label key={diet} className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={editedData.dietary.includes(diet)}\n onChange={(e) => handleArrayToggle('dietary', diet, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary focus:ring-[var(--color-focus-ring)]\"\n />\n <span className=\"text-sm text-text-primary capitalize\">{diet}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Food Allergies */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <AlertTriangle className=\"h-4 w-4 text-status-error-text\" />\n Food Allergies\n </h3>\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n {allergyOptions.map((allergy) => (\n <label key={allergy} className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={editedData.allergies.includes(allergy)}\n onChange={(e) => handleArrayToggle('allergies', allergy, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-status-error-text focus:ring-destructive\"\n />\n <span className=\"text-sm text-text-primary capitalize\">{allergy}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Save Preferences */}\n <div className=\"pt-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={handleSavePreferences}\n className=\"flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-4 w-4\" />\n Save Preferences\n </button>\n </div>\n </div>\n )}\n\n {/* Stats Tab */}\n {activeTab === 'stats' && (\n <div className=\"space-y-8\">\n {/* Top Stats Cards */}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"rounded-lg bg-[var(--color-accent-soft)] p-5 border border-border-focus/20\">\n <div className=\"flex items-center gap-2 mb-2\">\n <ShoppingBag className=\"h-4 w-4 text-text-primary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Total Orders</h4>\n </div>\n <p className=\"text-3xl font-bold text-text-primary\">{stats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg bg-status-success-bg-subtle p-5 border border-status-success-text/20\">\n <div className=\"flex items-center gap-2 mb-2\">\n <IndianRupee className=\"h-4 w-4 text-status-success-text\" />\n <h4 className=\"text-sm font-medium text-status-success-text\">Total Spent</h4>\n </div>\n <p className=\"text-3xl font-bold text-status-success-text\">\n {formatCurrency(stats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg bg-accent-purple-subtle p-5 border border-accent-purple/20\">\n <div className=\"flex items-center gap-2 mb-2\">\n <Award className=\"h-4 w-4 text-text-primary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Loyalty Points</h4>\n </div>\n <p className=\"text-3xl font-bold text-text-primary\">{stats.loyaltyPoints}</p>\n </div>\n </div>\n\n {/* Details Grid */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n {/* Order Statistics */}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h4 className=\"text-base font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <BarChart3 className=\"h-4 w-4 text-text-secondary\" />\n Order Statistics\n </h4>\n <div className=\"space-y-3\">\n <div className=\"flex justify-between\">\n <span className=\"text-sm text-text-secondary\">Average Order Value</span>\n <span className=\"text-sm font-medium text-text-primary\">\n {formatCurrency(stats.avgOrderValue, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-sm text-text-secondary\">Favorite Category</span>\n <span className=\"text-sm font-medium text-text-primary\">\n {stats.favoriteCategory}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-sm text-text-secondary\">Member Since</span>\n <span className=\"text-sm font-medium text-text-primary\">\n {formatDate(stats.memberSince, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n </div>\n </div>\n\n {/* Account Status */}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h4 className=\"text-base font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Shield className=\"h-4 w-4 text-text-secondary\" />\n Account Status\n </h4>\n <div className=\"space-y-3\">\n <div className=\"flex justify-between items-center\">\n <span className=\"text-sm text-text-secondary\">Email Verification</span>\n <span\n className={cn(\n 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',\n profile.isEmailVerified\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-error-bg/20 text-status-error-text'\n )}\n >\n {profile.isEmailVerified ? 'Verified' : 'Not Verified'}\n </span>\n </div>\n <div className=\"flex justify-between items-center\">\n <span className=\"text-sm text-text-secondary\">Phone Verification</span>\n <span\n className={cn(\n 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',\n profile.isPhoneVerified\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : 'bg-status-error-bg/20 text-status-error-text'\n )}\n >\n {profile.isPhoneVerified ? 'Verified' : 'Not Verified'}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-sm text-text-secondary\">Last Updated</span>\n <span className=\"text-sm font-medium text-text-primary\">\n {formatDate(profile.updatedAt, {\n hour: undefined,\n minute: undefined,\n hour12: undefined,\n })}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"CustomerProfilePage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/CustomerProfilePage.tsx"],"sourcesContent":["/**\n * Customer Profile Page\n * @module kadaikodi/pages/customer\n *\n * Full profile management with 3-tab interface (Profile Info, Preferences, My Stats),\n * edit mode toggle, inline editable fields, emergency contact, dietary preferences,\n * food allergies, and stats/loyalty display.\n */\n\nimport { useState } from 'react';\nimport {\n User,\n MapPin,\n Bell,\n Camera,\n ChevronRight,\n Edit3,\n Save,\n X,\n Heart,\n AlertTriangle,\n ShoppingBag,\n IndianRupee,\n BarChart3,\n Settings,\n UserCircle,\n} from 'lucide-react';\nimport { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useOrders } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\ntype ProfileTab = 'profile' | 'preferences' | 'stats';\n\ninterface EmergencyContact {\n name: string;\n phone: string;\n relationship: string;\n}\n\ninterface ProfileData {\n firstName: string;\n lastName: string;\n email: string;\n phone: string;\n emergencyContact: EmergencyContact;\n dietary: string[];\n allergies: string[];\n notifications: {\n orderUpdates: boolean;\n promotions: boolean;\n newsletter: boolean;\n sms: boolean;\n };\n}\n\nconst dietaryOptions = ['vegetarian', 'vegan', 'jain', 'keto', 'gluten-free', 'low-carb'];\nconst allergyOptions = ['nuts', 'dairy', 'eggs', 'soy', 'shellfish', 'gluten'];\n\nexport function CustomerProfilePage() {\n const { navigateTo, currentUser } = useKadaikodi();\n const { data: orders = [], isLoading: isLoadingOrders } = useOrders({\n customerId: currentUser?.id,\n });\n const [activeTab, setActiveTab] = useState<ProfileTab>('profile');\n const [isEditing, setIsEditing] = useState(false);\n\n // Use currentUser from context — only real identity fields, no fabricated defaults\n const profile = {\n firstName: currentUser?.firstName || currentUser?.name?.split(' ')[0] || 'Customer',\n lastName: currentUser?.lastName || currentUser?.name?.split(' ').slice(1).join(' ') || '',\n email: currentUser?.email || '',\n phone: currentUser?.phone || '',\n profilePicture: currentUser?.avatar,\n };\n\n // Editable profile data — preferences/emergency contact start empty (no backend to load from)\n const [profileData, setProfileData] = useState<ProfileData>({\n firstName: profile.firstName,\n lastName: profile.lastName,\n email: profile.email,\n phone: profile.phone,\n emergencyContact: {\n name: '',\n phone: '',\n relationship: '',\n },\n dietary: [],\n allergies: [],\n notifications: {\n orderUpdates: true,\n promotions: true,\n newsletter: false,\n sms: true,\n },\n });\n\n const [editedData, setEditedData] = useState<ProfileData>({ ...profileData });\n\n // Calculate stats from real orders only\n const totalSpent = orders.reduce((acc, o) => acc + o.total, 0);\n const stats = {\n totalOrders: orders.length,\n totalSpent,\n avgOrderValue: orders.length > 0 ? Math.floor(totalSpent / orders.length) : 0,\n };\n\n const isLoading = isLoadingOrders;\n\n const handleStartEdit = () => {\n setEditedData({ ...profileData });\n setIsEditing(true);\n };\n\n const handleCancelEdit = () => {\n setEditedData({ ...profileData });\n setIsEditing(false);\n };\n\n const handleSaveProfile = () => {\n setProfileData({ ...editedData });\n setIsEditing(false);\n alert('Profile updated successfully');\n };\n\n const handleSavePreferences = () => {\n setProfileData({ ...editedData });\n alert('Preferences saved successfully');\n };\n\n const handleFieldChange = (field: keyof ProfileData, value: string) => {\n setEditedData((prev) => ({ ...prev, [field]: value }));\n };\n\n const handleEmergencyContactChange = (field: keyof EmergencyContact, value: string) => {\n setEditedData((prev) => ({\n ...prev,\n emergencyContact: { ...prev.emergencyContact, [field]: value },\n }));\n };\n\n const handleNotificationChange = (field: string, value: boolean) => {\n setEditedData((prev) => ({\n ...prev,\n notifications: { ...prev.notifications, [field]: value },\n }));\n };\n\n const handleArrayToggle = (field: 'dietary' | 'allergies', value: string, checked: boolean) => {\n setEditedData((prev) => {\n const currentArray = prev[field];\n const newArray = checked\n ? [...currentArray, value]\n : currentArray.filter((item) => item !== value);\n return { ...prev, [field]: newArray };\n });\n };\n\n const tabs: Array<{ key: ProfileTab; label: string; icon: typeof UserCircle }> = [\n { key: 'profile', label: 'Profile Info', icon: UserCircle },\n { key: 'preferences', label: 'Preferences', icon: Settings },\n { key: 'stats', label: 'My Stats', icon: BarChart3 },\n ];\n\n if (isLoading) {\n return (\n <PageLayout title=\"My Profile\">\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 profile...</p>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PageLayout title=\"My Profile\" description=\"Manage your personal information and preferences\">\n <PagePurpose className=\"mb-6\">\n Your account, your way — keep your contact details, delivery address and preferences up to\n date, and manage how Kadaikodi reaches you. Accurate details mean smoother orders and\n deliveries.\n </PagePurpose>\n\n {/* Profile Header — the one emphasis zone */}\n <GlassCard\n treatment=\"glass\"\n glow\n className=\"flex flex-col items-center sm:flex-row sm:items-start gap-6 p-6\"\n >\n <div className=\"relative\">\n <div className=\"h-24 w-24 rounded-full bg-bg-sunken overflow-hidden\">\n {profile.profilePicture ? (\n <img\n src={profile.profilePicture}\n alt={`${profile.firstName} ${profile.lastName}`}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div className=\"flex h-full w-full items-center justify-center text-text-secondary\">\n <User className=\"h-10 w-10\" />\n </div>\n )}\n </div>\n <button\n type=\"button\"\n className=\"absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full bg-foreground text-background shadow-sm hover:opacity-90 transition-opacity\"\n >\n <Camera className=\"h-4 w-4\" />\n </button>\n </div>\n\n <div className=\"flex-1 text-center sm:text-left\">\n <h2 className=\"text-xl font-semibold text-text-primary\">\n {profileData.firstName} {profileData.lastName}\n </h2>\n {profileData.email && (\n <p className=\"mt-1 text-sm text-text-secondary\">{profileData.email}</p>\n )}\n {profileData.phone && (\n <p className=\"mt-0.5 text-sm text-text-secondary\">{profileData.phone}</p>\n )}\n </div>\n </GlassCard>\n\n {/* Tabs */}\n <div className=\"mt-6 rounded-lg border border-border-subtle bg-bg-surface\">\n <div className=\"border-b border-border-subtle\">\n <nav className=\"flex -mb-px overflow-x-auto\">\n {tabs.map((tab) => {\n const Icon = tab.icon;\n return (\n <button\n key={tab.key}\n type=\"button\"\n className={cn(\n 'flex items-center gap-2 py-3.5 px-5 text-sm font-medium whitespace-nowrap transition-colors',\n activeTab === tab.key\n ? 'border-b-2 border-foreground text-text-primary'\n : 'text-text-secondary hover:text-text-primary'\n )}\n onClick={() => setActiveTab(tab.key)}\n >\n <Icon className=\"h-4 w-4\" />\n {tab.label}\n </button>\n );\n })}\n </nav>\n </div>\n\n <div className=\"p-5 md:p-6\">\n {/* Profile Tab */}\n {activeTab === 'profile' && (\n <div className=\"space-y-6\">\n {/* Header with Edit/Save/Cancel */}\n <div className=\"flex justify-between items-center\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Personal Information</h3>\n {isEditing ? (\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={handleSaveProfile}\n className=\"flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-3 w-3\" />\n Save\n </button>\n <button\n type=\"button\"\n onClick={handleCancelEdit}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <X className=\"h-3 w-3\" />\n Cancel\n </button>\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={handleStartEdit}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Edit3 className=\"h-3 w-3\" />\n Edit Profile\n </button>\n )}\n </div>\n\n {/* Editable Fields */}\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n First Name\n </label>\n <input\n type=\"text\"\n value={isEditing ? editedData.firstName : profileData.firstName}\n onChange={(e) => handleFieldChange('firstName', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Last Name\n </label>\n <input\n type=\"text\"\n value={isEditing ? editedData.lastName : profileData.lastName}\n onChange={(e) => handleFieldChange('lastName', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Email\n </label>\n <input\n type=\"email\"\n value={isEditing ? editedData.email : profileData.email}\n onChange={(e) => handleFieldChange('email', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone\n </label>\n <input\n type=\"tel\"\n value={isEditing ? editedData.phone : profileData.phone}\n onChange={(e) => handleFieldChange('phone', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n </div>\n\n {/* Primary Address */}\n <div>\n <h4 className=\"text-base font-semibold text-text-primary mb-3\">Primary Address</h4>\n <div className=\"rounded-lg bg-bg-sunken/50 p-4\">\n <p className=\"text-sm text-text-secondary\">\n You haven&apos;t saved a delivery address yet. Add one to speed up checkout.\n </p>\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/addresses')}\n className=\"mt-2 flex items-center gap-1 text-xs font-medium text-text-secondary hover:text-text-primary transition-colors\"\n >\n <MapPin className=\"h-3 w-3\" />\n Manage Addresses\n <ChevronRight className=\"h-3 w-3\" />\n </button>\n </div>\n </div>\n\n {/* Emergency Contact */}\n <div>\n <h4 className=\"text-base font-semibold text-text-primary mb-3 flex items-center gap-2\">\n <AlertTriangle className=\"h-4 w-4 text-text-secondary\" />\n Emergency Contact\n </h4>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Name\n </label>\n <input\n type=\"text\"\n value={\n isEditing\n ? editedData.emergencyContact.name\n : profileData.emergencyContact.name\n }\n onChange={(e) => handleEmergencyContactChange('name', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone\n </label>\n <input\n type=\"tel\"\n value={\n isEditing\n ? editedData.emergencyContact.phone\n : profileData.emergencyContact.phone\n }\n onChange={(e) => handleEmergencyContactChange('phone', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Relationship\n </label>\n <input\n type=\"text\"\n value={\n isEditing\n ? editedData.emergencyContact.relationship\n : profileData.emergencyContact.relationship\n }\n onChange={(e) => handleEmergencyContactChange('relationship', e.target.value)}\n disabled={!isEditing}\n className={cn(\n 'w-full rounded-lg border border-border-subtle px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]',\n !isEditing && 'bg-bg-sunken cursor-not-allowed',\n isEditing && 'bg-bg-surface'\n )}\n />\n </div>\n </div>\n </div>\n\n {/* Save/Cancel at bottom when editing */}\n {isEditing && (\n <div className=\"flex gap-3 pt-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={handleSaveProfile}\n className=\"flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-4 w-4\" />\n Save Changes\n </button>\n <button\n type=\"button\"\n onClick={handleCancelEdit}\n className=\"flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Cancel\n </button>\n </div>\n )}\n </div>\n )}\n\n {/* Preferences Tab */}\n {activeTab === 'preferences' && (\n <div className=\"space-y-8\">\n {/* Notification Preferences */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Bell className=\"h-4 w-4 text-text-secondary\" />\n Notification Preferences\n </h3>\n <div className=\"space-y-3\">\n {[\n { key: 'orderUpdates', label: 'Order status updates' },\n { key: 'promotions', label: 'Promotional offers and discounts' },\n { key: 'newsletter', label: 'Newsletter and food recommendations' },\n { key: 'sms', label: 'SMS notifications' },\n ].map((item) => (\n <label key={item.key} className=\"flex items-center gap-3 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={\n editedData.notifications[\n item.key as keyof typeof editedData.notifications\n ]\n }\n onChange={(e) => handleNotificationChange(item.key, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary focus:ring-[var(--color-focus-ring)]\"\n />\n <span className=\"text-sm text-text-primary\">{item.label}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Dietary Preferences */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Heart className=\"h-4 w-4 text-text-secondary\" />\n Dietary Preferences\n </h3>\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n {dietaryOptions.map((diet) => (\n <label key={diet} className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={editedData.dietary.includes(diet)}\n onChange={(e) => handleArrayToggle('dietary', diet, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-text-primary focus:ring-[var(--color-focus-ring)]\"\n />\n <span className=\"text-sm text-text-primary capitalize\">{diet}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Food Allergies */}\n <div>\n <h3 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <AlertTriangle className=\"h-4 w-4 text-status-error-text\" />\n Food Allergies\n </h3>\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n {allergyOptions.map((allergy) => (\n <label key={allergy} className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={editedData.allergies.includes(allergy)}\n onChange={(e) => handleArrayToggle('allergies', allergy, e.target.checked)}\n className=\"h-4 w-4 rounded border-border-subtle text-status-error-text focus:ring-destructive\"\n />\n <span className=\"text-sm text-text-primary capitalize\">{allergy}</span>\n </label>\n ))}\n </div>\n </div>\n\n {/* Save Preferences */}\n <div className=\"pt-4 border-t border-border-subtle\">\n <button\n type=\"button\"\n onClick={handleSavePreferences}\n className=\"flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <Save className=\"h-4 w-4\" />\n Save Preferences\n </button>\n </div>\n </div>\n )}\n\n {/* Stats Tab */}\n {activeTab === 'stats' && (\n <div className=\"space-y-8\">\n {/* Top Stats Cards — derived from real orders only */}\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"rounded-lg bg-[var(--color-accent-soft)] p-5 border border-border-focus/20\">\n <div className=\"flex items-center gap-2 mb-2\">\n <ShoppingBag className=\"h-4 w-4 text-text-primary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Total Orders</h4>\n </div>\n <p className=\"text-3xl font-bold text-text-primary\">{stats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg bg-status-success-bg-subtle p-5 border border-status-success-text/20\">\n <div className=\"flex items-center gap-2 mb-2\">\n <IndianRupee className=\"h-4 w-4 text-status-success-text\" />\n <h4 className=\"text-sm font-medium text-status-success-text\">Total Spent</h4>\n </div>\n <p className=\"text-3xl font-bold text-status-success-text\">\n {formatCurrency(stats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg bg-bg-surface p-5 border border-border-subtle\">\n <div className=\"flex items-center gap-2 mb-2\">\n <BarChart3 className=\"h-4 w-4 text-text-primary\" />\n <h4 className=\"text-sm font-medium text-text-primary\">Avg Order Value</h4>\n </div>\n <p className=\"text-3xl font-bold text-text-primary\">\n {formatCurrency(stats.avgOrderValue, { minimumFractionDigits: 0 })}\n </p>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module kadaikodi/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n ArrowLeft,\n ArrowRight,\n MapPin,\n Calendar,\n Clock,\n CreditCard,\n Smartphone,\n Wallet,\n CheckCircle2,\n AlertCircle,\n Navigation,\n Phone,\n Home,\n Loader2,\n} from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useProvider, useOfferings, usePlaceOrder } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n location: 'Location',\n details: 'Details',\n payment: 'Payment',\n confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n address: string;\n landmark: string;\n instructions: string;\n phoneNumber: string;\n}\n\ninterface BookingDetails {\n preferredTime: string;\n specialInstructions: string;\n isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n bookingId: string;\n transactionId: string;\n estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n const slots: { value: string; label: string }[] = [];\n const now = new Date();\n const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n for (let i = 0; i < 8; i++) {\n const time = new Date(start.getTime() + i * 30 * 60000);\n const val = time.toTimeString().slice(0, 5);\n const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n slots.push({ value: val, label: lbl });\n }\n\n return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n const { cartId } = useParams<{ cartId: string }>();\n const { navigateTo, currentUser } = useKadaikodi();\n\n const { data: cart, isLoading: isLoadingCart } = useProvider(cartId);\n const { data: offerings = [] } = useOfferings(cartId);\n const placeOrder = usePlaceOrder();\n const bookedOffering = offerings[0];\n\n const [step, setStep] = useState<Step>('location');\n const [submitting, setSubmitting] = useState(false);\n\n // Location step\n const [location, setLocation] = useState<ServiceLocation>({\n address: '',\n landmark: '',\n instructions: '',\n phoneNumber: '',\n });\n\n // Details step\n const [details, setDetails] = useState<BookingDetails>({\n preferredTime: '',\n specialInstructions: '',\n isUrgent: false,\n });\n\n // Payment step\n const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n // Confirmation data\n const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n // Pricing derived from the real offering being booked. A 20% deposit confirms\n // the booking; the balance is settled when the cart arrives.\n const serviceFee = bookedOffering?.price ?? 0;\n const advancePayment = Math.round(serviceFee * 0.2);\n const balancePayment = serviceFee - advancePayment;\n const totalAmount = serviceFee;\n\n // --- Loading ---\n if (isLoadingCart) {\n return (\n <PageLayout title=\"Book Direct Service\">\n <div className=\"flex items-center justify-center py-20\">\n <div className=\"h-12 w-12 animate-spin rounded-full border-b-2 border-foreground\" />\n </div>\n </PageLayout>\n );\n }\n\n // --- Not found ---\n if (!cart) {\n return (\n <PageLayout title=\"Cart Not Found\">\n <EmptyState\n icon={<Home className=\"h-12 w-12\" />}\n title=\"Service not available\"\n description=\"Direct service is not available for this cart.\"\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Browse Carts\n </button>\n }\n />\n </PageLayout>\n );\n }\n\n const timeSlots = generateTimeSlots();\n const stepIndex = STEPS.indexOf(step);\n\n // --- Geolocation ---\n const handleGetLocation = () => {\n if (!navigator.geolocation) {\n alert('Geolocation is not supported by this browser.');\n return;\n }\n navigator.geolocation.getCurrentPosition(\n () => {\n setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n alert('Location detected successfully!');\n },\n () => {\n alert('Failed to get your location. Please enter address manually.');\n }\n );\n };\n\n // --- Validation ---\n const validateLocation = (): boolean => {\n if (!location.address.trim()) {\n alert('Please enter your address.');\n return false;\n }\n if (!location.phoneNumber.trim()) {\n alert('Please enter your phone number.');\n return false;\n }\n return true;\n };\n\n const validateDetails = (): boolean => {\n if (!details.preferredTime) {\n alert('Please select a preferred time slot.');\n return false;\n }\n return true;\n };\n\n // --- Navigation ---\n const nextStep = () => {\n if (step === 'location' && validateLocation()) setStep('details');\n else if (step === 'details' && validateDetails()) setStep('payment');\n else if (step === 'payment') handleBookingSubmit();\n };\n\n const prevStep = () => {\n if (step === 'details') setStep('location');\n else if (step === 'payment') setStep('details');\n };\n\n // --- Submit ---\n const handleBookingSubmit = () => {\n setSubmitting(true);\n const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n\n // Place a real order when we have a bookable offering and a signed-in customer.\n if (cart && bookedOffering && currentUser?.id) {\n placeOrder.mutate(\n {\n providerId: cart.id,\n customerId: currentUser.id,\n fulfillmentType: 'delivery',\n paymentMethod,\n tax: 0,\n items: [\n {\n name: bookedOffering.name,\n offeringId: bookedOffering.id,\n quantity: 1,\n unitPrice: serviceFee,\n },\n ],\n notes:\n [location.instructions, details.specialInstructions].filter(Boolean).join(' | ') ||\n undefined,\n deliveryAddress: { street: location.address, landmark: location.landmark },\n },\n {\n onSuccess: (order) => {\n setConfirmation({\n bookingId: order.orderNumber || order.id,\n transactionId: `TXN-${order.id}`,\n estimatedArrival,\n });\n setStep('confirmation');\n setSubmitting(false);\n },\n onError: () => {\n setSubmitting(false);\n alert('Could not place your booking. Please try again.');\n },\n }\n );\n return;\n }\n\n // No bookable offering available yet — confirm the request locally.\n const bookingId = `BK-${Date.now()}`;\n setConfirmation({ bookingId, transactionId: bookingId, estimatedArrival });\n setStep('confirmation');\n setSubmitting(false);\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/carts/${cart.id}`)}\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 <div>\n <span>Book Direct Service</span>\n <p className=\"text-xs font-normal text-text-secondary\">{cart.name}</p>\n </div>\n </div>\n }\n >\n <PagePurpose className=\"mb-6\">\n Book a service directly from this cart in a few guided steps — tell us where and when you\n need it, add any details, then confirm. Follow the progress bar below to know what's left.\n </PagePurpose>\n\n {/* Progress Indicator — the one emphasis zone */}\n <EmphasisPanel className=\"mb-6\">\n <div className=\"flex items-center justify-between px-2\">\n {STEPS.map((s, i) => {\n const isCompleted = i < stepIndex;\n const isCurrent = s === step;\n return (\n <div key={s} className=\"flex items-center\">\n <div className=\"flex flex-col items-center\">\n <div\n className={cn(\n 'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n isCompleted\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : isCurrent\n ? 'bg-foreground text-background'\n : 'bg-bg-sunken text-text-secondary'\n )}\n >\n {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n </div>\n <span\n className={cn(\n 'mt-1 text-[10px]',\n isCurrent ? 'font-medium text-text-primary' : 'text-text-secondary'\n )}\n >\n {STEP_LABELS[s]}\n </span>\n </div>\n {i < STEPS.length - 1 && (\n <div\n className={cn(\n 'mx-2 h-0.5 w-8 sm:w-16',\n isCompleted ? 'bg-status-success-bg-subtle' : 'bg-border'\n )}\n />\n )}\n </div>\n );\n })}\n </div>\n </EmphasisPanel>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Main Content */}\n <div className=\"lg:col-span-2\">\n {/* Step 1: Location */}\n {step === 'location' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <MapPin className=\"h-4 w-4\" />\n Service Location\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Where should the cart come?</p>\n\n <div className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Your Address <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n placeholder=\"Enter your full address\"\n value={location.address}\n onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n className=\"flex-1 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 <button\n type=\"button\"\n onClick={handleGetLocation}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap\"\n >\n <Navigation className=\"h-3.5 w-3.5\" />\n Use Current Location\n </button>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Nearby Landmark\n </label>\n <input\n type=\"text\"\n placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n value={location.landmark}\n onChange={(e) => setLocation((p) => ({ ...p, landmark: 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 <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Instructions for Cart Owner\n </label>\n <textarea\n rows={3}\n placeholder=\"Any specific instructions to help us find you...\"\n value={location.instructions}\n onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone Number <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"relative\">\n <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"tel\"\n placeholder=\"Enter your phone number\"\n value={location.phoneNumber}\n onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n </div>\n </div>\n )}\n\n {/* Step 2: Details */}\n {step === 'details' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <Calendar className=\"h-4 w-4\" />\n Booking Details\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Choose your preferred timing</p>\n\n <div className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Preferred Time Slot <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"grid grid-cols-4 gap-2\">\n {timeSlots.map((slot) => (\n <button\n key={slot.value}\n type=\"button\"\n onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n className={cn(\n 'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n details.preferredTime === slot.value\n ? 'border-foreground bg-accent text-text-primary'\n : 'border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary'\n )}\n >\n {slot.label}\n </button>\n ))}\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Special Instructions\n </label>\n <textarea\n rows={3}\n placeholder=\"Any special requests or dietary preferences...\"\n value={details.specialInstructions}\n onChange={(e) =>\n setDetails((p) => ({ ...p, specialInstructions: 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 placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={details.isUrgent}\n onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n <span className=\"text-sm text-text-secondary\">\n This is urgent (additional charges may apply)\n </span>\n </label>\n </div>\n </div>\n )}\n\n {/* Step 3: Payment */}\n {step === 'payment' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <CreditCard className=\"h-4 w-4\" />\n Advance Payment\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Select your payment method</p>\n\n <div className=\"space-y-4\">\n {/* Info callout */}\n <div className=\"flex items-start gap-2 rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-3\">\n <AlertCircle className=\"h-4 w-4 text-text-primary shrink-0 mt-0.5\" />\n <p className=\"text-xs text-text-primary\">\n You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n in advance to confirm your booking. Pay the remaining when the cart arrives.\n </p>\n </div>\n\n {/* Payment methods */}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n {[\n {\n value: 'upi' as const,\n label: 'UPI',\n sub: 'Instant payment',\n Icon: Smartphone,\n },\n {\n value: 'card' as const,\n label: 'Card',\n sub: 'Secure payment',\n Icon: CreditCard,\n },\n {\n value: 'wallet' as const,\n label: 'Wallet',\n sub: 'Quick payment',\n Icon: Wallet,\n },\n ].map(({ value, label, sub, Icon }) => (\n <button\n key={value}\n type=\"button\"\n onClick={() => setPaymentMethod(value)}\n className={cn(\n 'rounded-lg border p-3 text-center transition-colors',\n paymentMethod === value\n ? 'border-foreground bg-accent'\n : 'border-border-subtle hover:bg-accent'\n )}\n >\n <Icon className=\"mx-auto h-5 w-5 text-text-secondary mb-1\" />\n <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n <p className=\"text-[10px] text-text-secondary\">{sub}</p>\n </button>\n ))}\n </div>\n\n {/* Payment Summary */}\n <div className=\"rounded-lg bg-bg-sunken p-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-2\">Payment Summary</h3>\n <div className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Advance Payment:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Service Fee:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Balance Payment (at arrival):</span>\n <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n </div>\n <div className=\"flex justify-between border-t border-border-subtle pt-2 font-semibold\">\n <span className=\"text-text-primary\">Total Amount:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n )}\n\n {/* Step 4: Confirmation */}\n {step === 'confirmation' && confirmation && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n {/* Success header */}\n <div className=\"text-center mb-6\">\n <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg-subtle\">\n <CheckCircle2 className=\"h-7 w-7 text-status-success-text\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary mb-1\">Booking Confirmed!</h2>\n <p className=\"text-sm text-text-secondary\">\n Your direct service booking has been confirmed and payment processed.\n </p>\n </div>\n\n {/* Booking details */}\n <div className=\"rounded-lg bg-bg-sunken p-4 mb-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Booking Details</h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n <div>\n <span className=\"text-xs text-text-secondary\">Booking ID</span>\n <p className=\"font-mono text-xs text-text-primary\">{confirmation.bookingId}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Est. Arrival</span>\n <p className=\"text-text-primary\">\n {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit',\n })}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Location</span>\n <p className=\"text-text-primary truncate\">{location.address}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Phone</span>\n <p className=\"text-text-primary\">{location.phoneNumber}</p>\n </div>\n </div>\n </div>\n\n {/* Payment details */}\n <div className=\"rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4\">\n <h3 className=\"text-sm font-medium text-status-success-text mb-2 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n Payment Processed\n </h3>\n <div className=\"grid grid-cols-2 gap-3 text-sm\">\n <div>\n <span className=\"text-xs text-text-secondary\">Transaction ID</span>\n <p className=\"font-mono text-xs text-text-primary\">\n {confirmation.transactionId}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Advance Paid</span>\n <p className=\"font-medium text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Method</span>\n <p className=\"capitalize text-text-primary\">{paymentMethod}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Status</span>\n <p className=\"font-medium text-status-success-text\">Paid</p>\n </div>\n </div>\n </div>\n\n {/* Next Steps */}\n <div className=\"rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6\">\n <h3 className=\"text-sm font-medium text-text-primary mb-2\">Next Steps</h3>\n <div className=\"space-y-2 text-xs text-text-primary\">\n <div className=\"flex items-start gap-2\">\n <CheckCircle2 className=\"h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0\" />\n <span>\n Payment confirmed -{' '}\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n </span>\n </div>\n <div className=\"flex items-start gap-2\">\n <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n <span>\n Cart will arrive around{' '}\n {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit',\n })}\n </span>\n </div>\n <div className=\"flex items-start gap-2\">\n <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n <span>\n Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n when cart arrives\n </span>\n </div>\n </div>\n </div>\n\n {/* Action buttons */}\n <div className=\"flex gap-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n View Booking\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Browse More\n </button>\n </div>\n </div>\n )}\n\n {/* Navigation Buttons */}\n {step !== 'confirmation' && (\n <div className=\"flex justify-between mt-5\">\n <button\n type=\"button\"\n onClick={prevStep}\n disabled={step === 'location'}\n className={cn(\n 'flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors',\n step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n )}\n >\n <ArrowLeft className=\"h-4 w-4\" />\n Previous\n </button>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={submitting}\n className={cn(\n 'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n )}\n >\n {submitting ? (\n <>\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n </>\n ) : (\n <>\n {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n <ArrowRight className=\"h-4 w-4\" />\n </>\n )}\n </button>\n </div>\n )}\n </div>\n\n {/* Sidebar: Service Summary */}\n <div className=\"lg:col-span-1\">\n <div className=\"sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4\">Service Summary</h3>\n\n <div className=\"flex items-center gap-3 mb-4\">\n <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">{cart.name}</p>\n <p className=\"text-xs text-text-secondary\">{cart.category}</p>\n </div>\n </div>\n\n <div className=\"space-y-2 text-sm border-t border-border-subtle pt-3\">\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Service Fee:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Advance Payment:</span>\n <span className=\"font-medium text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-status-success-text\">\n <CheckCircle2 className=\"h-3.5 w-3.5\" />\n <span className=\"text-xs\">Pay remaining amount at cart</span>\n </div>\n </div>\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module kadaikodi/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n ArrowLeft,\n ArrowRight,\n MapPin,\n Calendar,\n Clock,\n CreditCard,\n Smartphone,\n Wallet,\n CheckCircle2,\n AlertCircle,\n Navigation,\n Phone,\n Home,\n Loader2,\n} from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useProvider, useOfferings, usePlaceOrder } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n location: 'Location',\n details: 'Details',\n payment: 'Payment',\n confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n address: string;\n landmark: string;\n instructions: string;\n phoneNumber: string;\n}\n\ninterface BookingDetails {\n preferredTime: string;\n specialInstructions: string;\n isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n bookingId: string;\n transactionId: string;\n estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n const slots: { value: string; label: string }[] = [];\n const now = new Date();\n const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n for (let i = 0; i < 8; i++) {\n const time = new Date(start.getTime() + i * 30 * 60000);\n const val = time.toTimeString().slice(0, 5);\n const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n slots.push({ value: val, label: lbl });\n }\n\n return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n const { cartId } = useParams<{ cartId: string }>();\n const { navigateTo, currentUser } = useKadaikodi();\n\n const { data: cart, isLoading: isLoadingCart } = useProvider(cartId);\n const { data: offerings = [] } = useOfferings(cartId);\n const placeOrder = usePlaceOrder();\n const bookedOffering = offerings[0];\n\n const [step, setStep] = useState<Step>('location');\n const [submitting, setSubmitting] = useState(false);\n\n // Location step\n const [location, setLocation] = useState<ServiceLocation>({\n address: '',\n landmark: '',\n instructions: '',\n phoneNumber: '',\n });\n\n // Details step\n const [details, setDetails] = useState<BookingDetails>({\n preferredTime: '',\n specialInstructions: '',\n isUrgent: false,\n });\n\n // Payment step\n const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n // Confirmation data\n const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n // Pricing derived from the real offering being booked. A 20% deposit confirms\n // the booking; the balance is settled when the cart arrives.\n const serviceFee = bookedOffering?.price ?? 0;\n const advancePayment = Math.round(serviceFee * 0.2);\n const balancePayment = serviceFee - advancePayment;\n const totalAmount = serviceFee;\n\n // --- Loading ---\n if (isLoadingCart) {\n return (\n <PageLayout title=\"Book Direct Service\">\n <div className=\"flex items-center justify-center py-20\">\n <div className=\"h-12 w-12 animate-spin rounded-full border-b-2 border-foreground\" />\n </div>\n </PageLayout>\n );\n }\n\n // --- Not found ---\n if (!cart) {\n return (\n <PageLayout title=\"Cart Not Found\">\n <EmptyState\n icon={<Home className=\"h-12 w-12\" />}\n title=\"Service not available\"\n description=\"Direct service is not available for this cart.\"\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Browse Carts\n </button>\n }\n />\n </PageLayout>\n );\n }\n\n const timeSlots = generateTimeSlots();\n const stepIndex = STEPS.indexOf(step);\n\n // --- Geolocation ---\n const handleGetLocation = () => {\n if (!navigator.geolocation) {\n alert('Geolocation is not supported by this browser.');\n return;\n }\n navigator.geolocation.getCurrentPosition(\n () => {\n setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n alert('Location detected successfully!');\n },\n () => {\n alert('Failed to get your location. Please enter address manually.');\n }\n );\n };\n\n // --- Validation ---\n const validateLocation = (): boolean => {\n if (!location.address.trim()) {\n alert('Please enter your address.');\n return false;\n }\n if (!location.phoneNumber.trim()) {\n alert('Please enter your phone number.');\n return false;\n }\n return true;\n };\n\n const validateDetails = (): boolean => {\n if (!details.preferredTime) {\n alert('Please select a preferred time slot.');\n return false;\n }\n return true;\n };\n\n // --- Navigation ---\n const nextStep = () => {\n if (step === 'location' && validateLocation()) setStep('details');\n else if (step === 'details' && validateDetails()) setStep('payment');\n else if (step === 'payment') handleBookingSubmit();\n };\n\n const prevStep = () => {\n if (step === 'details') setStep('location');\n else if (step === 'payment') setStep('details');\n };\n\n // --- Submit ---\n const handleBookingSubmit = () => {\n setSubmitting(true);\n const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n\n // Place a real order when we have a bookable offering and a signed-in customer.\n if (cart && bookedOffering && currentUser?.id) {\n placeOrder.mutate(\n {\n providerId: cart.id,\n customerId: currentUser.id,\n fulfillmentType: 'delivery',\n paymentMethod,\n tax: 0,\n items: [\n {\n name: bookedOffering.name,\n offeringId: bookedOffering.id,\n quantity: 1,\n unitPrice: serviceFee,\n },\n ],\n notes:\n [location.instructions, details.specialInstructions].filter(Boolean).join(' | ') ||\n undefined,\n deliveryAddress: { street: location.address, landmark: location.landmark },\n },\n {\n onSuccess: (order) => {\n setConfirmation({\n bookingId: order.orderNumber || order.id,\n transactionId: `TXN-${order.id}`,\n estimatedArrival,\n });\n setStep('confirmation');\n setSubmitting(false);\n },\n onError: () => {\n setSubmitting(false);\n alert('Could not place your booking. Please try again.');\n },\n }\n );\n return;\n }\n\n // No bookable offering available yet — confirm the request locally.\n const bookingId = `BK-${Date.now()}`;\n setConfirmation({ bookingId, transactionId: bookingId, estimatedArrival });\n setStep('confirmation');\n setSubmitting(false);\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/carts/${cart.id}`)}\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 <div>\n <span>Book Direct Service</span>\n <p className=\"text-xs font-normal text-text-secondary\">{cart.name}</p>\n </div>\n </div>\n }\n >\n <PagePurpose className=\"mb-6\">\n Book a service directly from this cart in a few guided steps — tell us where and when you\n need it, add any details, then confirm. Follow the progress bar below to know what's left.\n </PagePurpose>\n\n {/* Progress Indicator — the one emphasis zone */}\n <EmphasisPanel className=\"mb-6\">\n <div className=\"flex items-center justify-between px-2\">\n {STEPS.map((s, i) => {\n const isCompleted = i < stepIndex;\n const isCurrent = s === step;\n return (\n <div key={s} className=\"flex items-center\">\n <div className=\"flex flex-col items-center\">\n <div\n className={cn(\n 'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n isCompleted\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : isCurrent\n ? 'bg-foreground text-background'\n : 'bg-bg-sunken text-text-secondary'\n )}\n >\n {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n </div>\n <span\n className={cn(\n 'mt-1 text-[10px]',\n isCurrent ? 'font-medium text-text-primary' : 'text-text-secondary'\n )}\n >\n {STEP_LABELS[s]}\n </span>\n </div>\n {i < STEPS.length - 1 && (\n <div\n className={cn(\n 'mx-2 h-0.5 w-8 sm:w-16',\n isCompleted ? 'bg-status-success-bg-subtle' : 'bg-border'\n )}\n />\n )}\n </div>\n );\n })}\n </div>\n </EmphasisPanel>\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Main Content */}\n <div className=\"lg:col-span-2\">\n {/* Step 1: Location */}\n {step === 'location' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <MapPin className=\"h-4 w-4\" />\n Service Location\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Where should the cart come?</p>\n\n <div className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Your Address <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"flex gap-2\">\n <input\n type=\"text\"\n placeholder=\"Enter your full address\"\n value={location.address}\n onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n className=\"flex-1 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 <button\n type=\"button\"\n onClick={handleGetLocation}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap\"\n >\n <Navigation className=\"h-3.5 w-3.5\" />\n Use Current Location\n </button>\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Nearby Landmark\n </label>\n <input\n type=\"text\"\n placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n value={location.landmark}\n onChange={(e) => setLocation((p) => ({ ...p, landmark: 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 <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Instructions for Cart Owner\n </label>\n <textarea\n rows={3}\n placeholder=\"Any specific instructions to help us find you...\"\n value={location.instructions}\n onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Phone Number <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"relative\">\n <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"tel\"\n placeholder=\"Enter your phone number\"\n value={location.phoneNumber}\n onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: e.target.value }))}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n </div>\n </div>\n </div>\n )}\n\n {/* Step 2: Details */}\n {step === 'details' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <Calendar className=\"h-4 w-4\" />\n Booking Details\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Choose your preferred timing</p>\n\n <div className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Preferred Time Slot <span className=\"text-status-error-text\">*</span>\n </label>\n <div className=\"grid grid-cols-4 gap-2\">\n {timeSlots.map((slot) => (\n <button\n key={slot.value}\n type=\"button\"\n onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n className={cn(\n 'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n details.preferredTime === slot.value\n ? 'border-foreground bg-accent text-text-primary'\n : 'border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary'\n )}\n >\n {slot.label}\n </button>\n ))}\n </div>\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n Special Instructions\n </label>\n <textarea\n rows={3}\n placeholder=\"Any special requests or dietary preferences...\"\n value={details.specialInstructions}\n onChange={(e) =>\n setDetails((p) => ({ ...p, specialInstructions: 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 placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none\"\n />\n </div>\n\n <label className=\"flex items-center gap-2 cursor-pointer\">\n <input\n type=\"checkbox\"\n checked={details.isUrgent}\n onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n <span className=\"text-sm text-text-secondary\">\n This is urgent (additional charges may apply)\n </span>\n </label>\n </div>\n </div>\n )}\n\n {/* Step 3: Payment */}\n {step === 'payment' && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n <CreditCard className=\"h-4 w-4\" />\n Advance Payment\n </h2>\n <p className=\"text-xs text-text-secondary mb-5\">Select your payment method</p>\n\n <div className=\"space-y-4\">\n {/* Info callout */}\n <div className=\"flex items-start gap-2 rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-3\">\n <AlertCircle className=\"h-4 w-4 text-text-primary shrink-0 mt-0.5\" />\n <p className=\"text-xs text-text-primary\">\n You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n in advance to confirm your booking. Pay the remaining when the cart arrives.\n </p>\n </div>\n\n {/* Payment methods */}\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n {[\n {\n value: 'upi' as const,\n label: 'UPI',\n sub: 'Instant payment',\n Icon: Smartphone,\n },\n {\n value: 'card' as const,\n label: 'Card',\n sub: 'Secure payment',\n Icon: CreditCard,\n },\n {\n value: 'wallet' as const,\n label: 'Wallet',\n sub: 'Quick payment',\n Icon: Wallet,\n },\n ].map(({ value, label, sub, Icon }) => (\n <button\n key={value}\n type=\"button\"\n onClick={() => setPaymentMethod(value)}\n className={cn(\n 'rounded-lg border p-3 text-center transition-colors',\n paymentMethod === value\n ? 'border-foreground bg-accent'\n : 'border-border-subtle hover:bg-accent'\n )}\n >\n <Icon className=\"mx-auto h-5 w-5 text-text-secondary mb-1\" />\n <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n <p className=\"text-[10px] text-text-secondary\">{sub}</p>\n </button>\n ))}\n </div>\n\n {/* Payment Summary */}\n <div className=\"rounded-lg bg-bg-sunken p-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-2\">Payment Summary</h3>\n <div className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Advance Payment:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Service Fee:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between text-text-secondary\">\n <span>Balance Payment (at arrival):</span>\n <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n </div>\n <div className=\"flex justify-between border-t border-border-subtle pt-2 font-semibold\">\n <span className=\"text-text-primary\">Total Amount:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n )}\n\n {/* Step 4: Confirmation */}\n {step === 'confirmation' && confirmation && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n {/* Success header */}\n <div className=\"text-center mb-6\">\n <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-status-success-bg-subtle\">\n <CheckCircle2 className=\"h-7 w-7 text-status-success-text\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary mb-1\">Booking Confirmed!</h2>\n <p className=\"text-sm text-text-secondary\">\n Your direct service booking has been confirmed and payment processed.\n </p>\n </div>\n\n {/* Booking details */}\n <div className=\"rounded-lg bg-bg-sunken p-4 mb-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Booking Details</h3>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n <div>\n <span className=\"text-xs text-text-secondary\">Booking ID</span>\n <p className=\"font-mono text-xs text-text-primary\">{confirmation.bookingId}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Est. Arrival</span>\n <p className=\"text-text-primary\">\n {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit',\n })}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Location</span>\n <p className=\"text-text-primary truncate\">{location.address}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Phone</span>\n <p className=\"text-text-primary\">{location.phoneNumber}</p>\n </div>\n </div>\n </div>\n\n {/* Payment details */}\n <div className=\"rounded-lg border border-status-success-text/20 bg-status-success-bg-subtle p-4 mb-4\">\n <h3 className=\"text-sm font-medium text-status-success-text mb-2 flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4\" />\n Payment Processed\n </h3>\n <div className=\"grid grid-cols-2 gap-3 text-sm\">\n <div>\n <span className=\"text-xs text-text-secondary\">Transaction ID</span>\n <p className=\"font-mono text-xs text-text-primary\">\n {confirmation.transactionId}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Advance Paid</span>\n <p className=\"font-medium text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Method</span>\n <p className=\"capitalize text-text-primary\">{paymentMethod}</p>\n </div>\n <div>\n <span className=\"text-xs text-text-secondary\">Status</span>\n <p className=\"font-medium text-status-success-text\">Paid</p>\n </div>\n </div>\n </div>\n\n {/* Next Steps */}\n <div className=\"rounded-lg border border-border-focus/20 bg-[var(--color-accent-soft)] p-4 mb-6\">\n <h3 className=\"text-sm font-medium text-text-primary mb-2\">Next Steps</h3>\n <div className=\"space-y-2 text-xs text-text-primary\">\n <div className=\"flex items-start gap-2\">\n <CheckCircle2 className=\"h-3.5 w-3.5 text-status-success-text mt-0.5 shrink-0\" />\n <span>\n Payment confirmed -{' '}\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n </span>\n </div>\n <div className=\"flex items-start gap-2\">\n <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n <span>\n Cart will arrive around{' '}\n {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit',\n })}\n </span>\n </div>\n <div className=\"flex items-start gap-2\">\n <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n <span>\n Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n when cart arrives\n </span>\n </div>\n </div>\n </div>\n\n {/* Action buttons */}\n <div className=\"flex gap-3\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n View Booking\n </button>\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n Browse More\n </button>\n </div>\n </div>\n )}\n\n {/* Navigation Buttons */}\n {step !== 'confirmation' && (\n <div className=\"flex justify-between mt-5\">\n <button\n type=\"button\"\n onClick={prevStep}\n disabled={step === 'location'}\n className={cn(\n 'flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors',\n step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n )}\n >\n <ArrowLeft className=\"h-4 w-4\" />\n Previous\n </button>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={submitting}\n className={cn(\n 'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n )}\n >\n {submitting ? (\n <>\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n </>\n ) : (\n <>\n {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n <ArrowRight className=\"h-4 w-4\" />\n </>\n )}\n </button>\n </div>\n )}\n </div>\n\n {/* Sidebar: Service Summary */}\n <div className=\"lg:col-span-1\">\n <div className=\"sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4\">Service Summary</h3>\n\n <div className=\"flex items-center gap-3 mb-4\">\n <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n <div>\n <p className=\"text-sm font-medium text-text-primary\">{cart.name}</p>\n <p className=\"text-xs text-text-secondary\">{cart.category}</p>\n </div>\n </div>\n\n <div className=\"space-y-2 text-sm border-t border-border-subtle pt-3\">\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Service Fee:</span>\n <span className=\"text-text-primary\">\n {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n </span>\n </div>\n <div className=\"flex justify-between\">\n <span className=\"text-text-secondary\">Advance Payment:</span>\n <span className=\"font-medium text-text-primary\">\n {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n </span>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-status-success-text\">\n <CheckCircle2 className=\"h-3.5 w-3.5\" />\n <span className=\"text-xs\">Pay remaining amount at cart</span>\n </div>\n </div>\n </div>\n </div>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"OrderHistoryPage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/OrderHistoryPage.tsx"],"sourcesContent":["/**\n * Order History Page\n * @module kadaikodi/pages/customer\n *\n * Full list of customer orders with stats summary, search, status/date/sort\n * filters, rating display, reorder, cancellation reason, and Load More pagination.\n */\n\nimport { useState, useMemo, useCallback, useEffect } from 'react';\nimport {\n ShoppingBag,\n Search,\n Star,\n RotateCcw,\n Eye,\n ChevronDown,\n Package,\n IndianRupee,\n TrendingUp,\n Clock,\n Heart,\n CheckCircle2,\n XCircle,\n Truck,\n Loader2,\n AlertCircle,\n} from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useOrders } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency, formatDate } from '../../utils/formatters';\nimport type { OrderStatus, MockOrder } from '../../types';\n\ninterface OrderFilters {\n status: string;\n dateRange: string;\n searchQuery: string;\n sortBy: string;\n}\n\nconst PAGE_SIZE = 10;\n\nconst statusOptions = [\n { value: '', label: 'All Status' },\n { value: 'pending', label: 'Pending' },\n { value: 'confirmed', label: 'Confirmed' },\n { value: 'preparing', label: 'Preparing' },\n { value: 'ready', label: 'Ready' },\n { value: 'out_for_delivery', label: 'Out for Delivery' },\n { value: 'delivered', label: 'Delivered' },\n { value: 'cancelled', label: 'Cancelled' },\n];\n\nconst dateRangeOptions = [\n { value: '7days', label: 'Last 7 Days' },\n { value: '30days', label: 'Last 30 Days' },\n { value: '90days', label: 'Last 90 Days' },\n { value: 'all', label: 'All Time' },\n];\n\nconst sortOptions = [\n { value: 'recent', label: 'Most Recent' },\n { value: 'oldest', label: 'Oldest First' },\n { value: 'amount_high', label: 'Amount: High to Low' },\n { value: 'amount_low', label: 'Amount: Low to High' },\n];\n\nexport function OrderHistoryPage() {\n const { navigateTo, currentUser } = useKadaikodi();\n const [displayCount, setDisplayCount] = useState(PAGE_SIZE);\n const [filters, setFilters] = useState<OrderFilters>({\n status: '',\n dateRange: '30days',\n searchQuery: '',\n sortBy: 'recent',\n });\n\n const { data: allOrders = [], isLoading, isError } = useOrders({ customerId: currentUser?.id });\n\n // Calculate stats from all orders\n const orderStats = useMemo(() => {\n const totalOrders = allOrders.length;\n const totalSpent = allOrders.reduce((sum, o) => sum + o.total, 0);\n const averageOrderValue = totalOrders > 0 ? Math.round(totalSpent / totalOrders) : 0;\n const recentOrdersCount = allOrders.filter(\n (o) => new Date(o.orderDate) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)\n ).length;\n\n // Find favorite cart (most ordered from)\n const cartCounts: Record<string, number> = {};\n for (const o of allOrders) {\n cartCounts[o.cartName] = (cartCounts[o.cartName] || 0) + 1;\n }\n const favoriteCart =\n Object.entries(cartCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'No orders yet';\n\n return { totalOrders, totalSpent, averageOrderValue, recentOrdersCount, favoriteCart };\n }, [allOrders]);\n\n // Filter and sort orders\n const filteredOrders = useMemo(() => {\n let orders = [...allOrders];\n\n // Filter by status\n if (filters.status) {\n orders = orders.filter((o) => o.status === filters.status);\n }\n\n // Filter by date range\n if (filters.dateRange !== 'all') {\n const now = new Date();\n const dateLimit = new Date();\n switch (filters.dateRange) {\n case '7days':\n dateLimit.setDate(now.getDate() - 7);\n break;\n case '30days':\n dateLimit.setDate(now.getDate() - 30);\n break;\n case '90days':\n dateLimit.setDate(now.getDate() - 90);\n break;\n }\n orders = orders.filter((o) => new Date(o.orderDate) >= dateLimit);\n }\n\n // Search filter\n if (filters.searchQuery) {\n const query = filters.searchQuery.toLowerCase();\n orders = orders.filter(\n (o) =>\n o.id.toLowerCase().includes(query) ||\n o.cartName.toLowerCase().includes(query) ||\n o.items.some((item) => item.name.toLowerCase().includes(query))\n );\n }\n\n // Sort\n switch (filters.sortBy) {\n case 'recent':\n orders.sort((a, b) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime());\n break;\n case 'oldest':\n orders.sort((a, b) => new Date(a.orderDate).getTime() - new Date(b.orderDate).getTime());\n break;\n case 'amount_high':\n orders.sort((a, b) => b.total - a.total);\n break;\n case 'amount_low':\n orders.sort((a, b) => a.total - b.total);\n break;\n }\n\n return orders;\n }, [allOrders, filters]);\n\n const displayedOrders = useMemo(\n () => filteredOrders.slice(0, displayCount),\n [filteredOrders, displayCount]\n );\n\n const hasMore = displayCount < filteredOrders.length;\n\n const handleFilterChange = (key: keyof OrderFilters, value: string) => {\n setFilters((prev) => ({ ...prev, [key]: value }));\n setDisplayCount(PAGE_SIZE);\n };\n\n const handleReorder = (order: MockOrder) => {\n navigateTo(`/customer/cart/${order.cartId}`);\n alert('Add items to cart to reorder');\n };\n\n const handleLoadMore = () => {\n setDisplayCount((prev) => prev + PAGE_SIZE);\n };\n\n if (isLoading) {\n return (\n <PageLayout title=\"Order History\" description=\"Loading your orders...\">\n <div className=\"flex h-[60vh] items-center justify-center\">\n <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n </div>\n </PageLayout>\n );\n }\n\n if (isError) {\n return (\n <PageLayout title=\"Order History\" description=\"Error loading orders\">\n <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n <AlertCircle className=\"h-12 w-12 text-status-error-text\" />\n <h2 className=\"text-xl font-semibold\">Error loading your orders</h2>\n <button\n type=\"button\"\n onClick={() => window.location.reload()}\n className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n Retry\n </button>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PageLayout title=\"Order History\" description=\"View all your past and current orders\">\n <PagePurpose className=\"mb-6\">\n A complete record of everything you've ordered — search and filter past orders, reorder a\n favourite in one tap, track what's still on the way, and see how much you've spent over\n time.\n </PagePurpose>\n\n {/* Stats Summary — the one emphasis zone */}\n <EmphasisPanel className=\"mb-6\">\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3\">\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Package className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <IndianRupee className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Spent</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Average Order</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.averageOrderValue, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Clock className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Recent Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.recentOrdersCount}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5 col-span-2 md:col-span-1\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Heart className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Favorite Cart</p>\n </div>\n <p className=\"text-sm font-bold text-text-primary truncate\">{orderStats.favoriteCart}</p>\n </div>\n </div>\n </EmphasisPanel>\n\n {/* Filters */}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-3\">\n {/* Search */}\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"text\"\n placeholder=\"Search orders...\"\n value={filters.searchQuery}\n onChange={(e) => handleFilterChange('searchQuery', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface pl-9 pr-3 py-2.5 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 {/* Status Filter */}\n <select\n value={filters.status}\n onChange={(e) => handleFilterChange('status', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {statusOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n\n {/* Date Range */}\n <select\n value={filters.dateRange}\n onChange={(e) => handleFilterChange('dateRange', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {dateRangeOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n\n {/* Sort */}\n <select\n value={filters.sortBy}\n onChange={(e) => handleFilterChange('sortBy', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {sortOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </div>\n </div>\n\n {/* Orders List */}\n {isLoading ? (\n <div className=\"flex flex-col items-center justify-center py-12 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 orders...</p>\n </div>\n ) : displayedOrders.length === 0 ? (\n <EmptyState\n icon={<ShoppingBag className=\"h-12 w-12\" />}\n title=\"No orders found\"\n description={\n filters.searchQuery || filters.status\n ? 'Try adjusting your filters'\n : \"You haven't placed any orders yet\"\n }\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Start Ordering\n </button>\n }\n />\n ) : (\n <div className=\"space-y-4\">\n {displayedOrders.map((order) => (\n <div\n key={order.id}\n className=\"rounded-lg border border-border-subtle bg-bg-surface hover:shadow-md transition-shadow\"\n >\n <div className=\"p-4 md:p-5\">\n {/* Order Header */}\n <div className=\"flex flex-col md:flex-row md:items-center justify-between mb-3\">\n <div className=\"mb-3 md:mb-0\">\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {order.cartName}\n </h3>\n <StatusBadge status={order.status} />\n </div>\n <p className=\"text-xs text-text-secondary mt-1\">\n Order #{order.id} &middot; {formatDate(order.orderDate)}\n </p>\n </div>\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <p className=\"text-lg font-bold text-text-primary\">\n {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n </p>\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}`)}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Eye className=\"h-3 w-3\" />\n Track Order\n </button>\n {order.status === 'delivered' && (\n <button\n type=\"button\"\n onClick={() => handleReorder(order)}\n className=\"flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <RotateCcw className=\"h-3 w-3\" />\n Reorder\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/* Order Items Summary */}\n <div className=\"border-t border-border-subtle pt-3\">\n <div className=\"flex flex-wrap gap-1\">\n {order.items.slice(0, 3).map((item, index) => (\n <span key={index} className=\"text-xs text-text-secondary\">\n {item.name} ({item.quantity})\n {index < Math.min(2, order.items.length - 1) && ', '}\n </span>\n ))}\n {order.items.length > 3 && (\n <span className=\"text-xs text-text-secondary\">\n +{order.items.length - 3} more items\n </span>\n )}\n </div>\n </div>\n\n {/* Status Message */}\n <div className=\"mt-3\">\n {order.status === 'delivered' && (\n <div className=\"flex items-center gap-1.5 text-xs text-status-success-text\">\n <CheckCircle2 className=\"h-3 w-3\" />\n <span>Order delivered successfully</span>\n </div>\n )}\n {order.status === 'cancelled' && (\n <div className=\"flex items-center gap-1.5 text-xs text-status-error-text\">\n <XCircle className=\"h-3 w-3\" />\n <span>\n Cancelled{order.cancellationReason && ` - ${order.cancellationReason}`}\n </span>\n </div>\n )}\n {['pending', 'confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(\n order.status\n ) && (\n <div className=\"flex items-center gap-1.5 text-xs text-text-primary\">\n <Truck className=\"h-3 w-3\" />\n <span>\n Estimated delivery by{' '}\n {order.estimatedDeliveryTime\n ? formatDate(order.estimatedDeliveryTime)\n : 'TBD'}\n </span>\n </div>\n )}\n </div>\n\n {/* Rating Section */}\n {order.status === 'delivered' && (\n <div className=\"mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2\">\n {order.rating ? (\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <RatingDisplay value={order.rating} />\n {order.review && (\n <p className=\"text-xs text-text-secondary italic\">\n &ldquo;{order.review}&rdquo;\n </p>\n )}\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}/rate`)}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Star className=\"h-3 w-3\" />\n Rate Order\n </button>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n )}\n\n {/* Load More */}\n {hasMore && !isLoading && (\n <div className=\"text-center mt-8\">\n <button\n type=\"button\"\n onClick={handleLoadMore}\n className=\"inline-flex items-center gap-2 rounded-lg border border-border-subtle px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <ChevronDown className=\"h-4 w-4\" />\n Load More Orders\n </button>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"OrderHistoryPage.js","names":[],"sources":["../../../../src/kadaikodi/pages/customer/OrderHistoryPage.tsx"],"sourcesContent":["/**\n * Order History Page\n * @module kadaikodi/pages/customer\n *\n * Full list of customer orders with stats summary, search, status/date/sort\n * filters, rating display, reorder, cancellation reason, and Load More pagination.\n */\n\nimport { useState, useMemo, useCallback, useEffect } from 'react';\nimport {\n ShoppingBag,\n Search,\n Star,\n RotateCcw,\n Eye,\n ChevronDown,\n Package,\n IndianRupee,\n TrendingUp,\n Clock,\n Heart,\n CheckCircle2,\n XCircle,\n Truck,\n Loader2,\n AlertCircle,\n} from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { useKadaikodi } from '../../context/KadaikodiContext';\nimport { useOrders } from '../../hooks/useKadaikodiApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency, formatDate } from '../../utils/formatters';\nimport type { OrderStatus, MockOrder } from '../../types';\n\ninterface OrderFilters {\n status: string;\n dateRange: string;\n searchQuery: string;\n sortBy: string;\n}\n\nconst PAGE_SIZE = 10;\n\nconst statusOptions = [\n { value: '', label: 'All Status' },\n { value: 'pending', label: 'Pending' },\n { value: 'confirmed', label: 'Confirmed' },\n { value: 'preparing', label: 'Preparing' },\n { value: 'ready', label: 'Ready' },\n { value: 'out_for_delivery', label: 'Out for Delivery' },\n { value: 'delivered', label: 'Delivered' },\n { value: 'cancelled', label: 'Cancelled' },\n];\n\nconst dateRangeOptions = [\n { value: '7days', label: 'Last 7 Days' },\n { value: '30days', label: 'Last 30 Days' },\n { value: '90days', label: 'Last 90 Days' },\n { value: 'all', label: 'All Time' },\n];\n\nconst sortOptions = [\n { value: 'recent', label: 'Most Recent' },\n { value: 'oldest', label: 'Oldest First' },\n { value: 'amount_high', label: 'Amount: High to Low' },\n { value: 'amount_low', label: 'Amount: Low to High' },\n];\n\nexport function OrderHistoryPage() {\n const { navigateTo, currentUser } = useKadaikodi();\n const [displayCount, setDisplayCount] = useState(PAGE_SIZE);\n const [filters, setFilters] = useState<OrderFilters>({\n status: '',\n dateRange: '30days',\n searchQuery: '',\n sortBy: 'recent',\n });\n\n const { data: allOrders = [], isLoading, isError } = useOrders({ customerId: currentUser?.id });\n\n // Calculate stats from all orders\n const orderStats = useMemo(() => {\n const totalOrders = allOrders.length;\n const totalSpent = allOrders.reduce((sum, o) => sum + o.total, 0);\n const averageOrderValue = totalOrders > 0 ? Math.round(totalSpent / totalOrders) : 0;\n const recentOrdersCount = allOrders.filter(\n (o) => new Date(o.orderDate) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)\n ).length;\n\n // Find favorite cart (most ordered from)\n const cartCounts: Record<string, number> = {};\n for (const o of allOrders) {\n cartCounts[o.cartName] = (cartCounts[o.cartName] || 0) + 1;\n }\n const favoriteCart =\n Object.entries(cartCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'No orders yet';\n\n return { totalOrders, totalSpent, averageOrderValue, recentOrdersCount, favoriteCart };\n }, [allOrders]);\n\n // Filter and sort orders\n const filteredOrders = useMemo(() => {\n let orders = [...allOrders];\n\n // Filter by status\n if (filters.status) {\n orders = orders.filter((o) => o.status === filters.status);\n }\n\n // Filter by date range\n if (filters.dateRange !== 'all') {\n const now = new Date();\n const dateLimit = new Date();\n switch (filters.dateRange) {\n case '7days':\n dateLimit.setDate(now.getDate() - 7);\n break;\n case '30days':\n dateLimit.setDate(now.getDate() - 30);\n break;\n case '90days':\n dateLimit.setDate(now.getDate() - 90);\n break;\n }\n orders = orders.filter((o) => new Date(o.orderDate) >= dateLimit);\n }\n\n // Search filter\n if (filters.searchQuery) {\n const query = filters.searchQuery.toLowerCase();\n orders = orders.filter(\n (o) =>\n o.id.toLowerCase().includes(query) ||\n o.cartName.toLowerCase().includes(query) ||\n o.items.some((item) => item.name.toLowerCase().includes(query))\n );\n }\n\n // Sort\n switch (filters.sortBy) {\n case 'recent':\n orders.sort((a, b) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime());\n break;\n case 'oldest':\n orders.sort((a, b) => new Date(a.orderDate).getTime() - new Date(b.orderDate).getTime());\n break;\n case 'amount_high':\n orders.sort((a, b) => b.total - a.total);\n break;\n case 'amount_low':\n orders.sort((a, b) => a.total - b.total);\n break;\n }\n\n return orders;\n }, [allOrders, filters]);\n\n const displayedOrders = useMemo(\n () => filteredOrders.slice(0, displayCount),\n [filteredOrders, displayCount]\n );\n\n const hasMore = displayCount < filteredOrders.length;\n\n const handleFilterChange = (key: keyof OrderFilters, value: string) => {\n setFilters((prev) => ({ ...prev, [key]: value }));\n setDisplayCount(PAGE_SIZE);\n };\n\n const handleReorder = (order: MockOrder) => {\n navigateTo(`/customer/cart/${order.cartId}`);\n alert('Add items to cart to reorder');\n };\n\n const handleLoadMore = () => {\n setDisplayCount((prev) => prev + PAGE_SIZE);\n };\n\n if (isLoading) {\n return (\n <PageLayout title=\"Order History\" description=\"Loading your orders...\">\n <div className=\"flex h-[60vh] items-center justify-center\">\n <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n </div>\n </PageLayout>\n );\n }\n\n if (isError) {\n return (\n <PageLayout title=\"Order History\" description=\"Error loading orders\">\n <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n <AlertCircle className=\"h-12 w-12 text-status-error-text\" />\n <h2 className=\"text-xl font-semibold\">Error loading your orders</h2>\n <button\n type=\"button\"\n onClick={() => window.location.reload()}\n className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n Retry\n </button>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PageLayout title=\"Order History\" description=\"View all your past and current orders\">\n <PagePurpose className=\"mb-6\">\n A complete record of everything you've ordered — search and filter past orders, reorder a\n favourite in one tap, track what's still on the way, and see how much you've spent over\n time.\n </PagePurpose>\n\n {/* Stats Summary — the one emphasis zone */}\n <EmphasisPanel className=\"mb-6\">\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3\">\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Package className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <IndianRupee className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Spent</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Average Order</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.averageOrderValue, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Clock className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Recent Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.recentOrdersCount}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5 col-span-2 md:col-span-1\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Heart className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Favorite Cart</p>\n </div>\n <p className=\"text-sm font-bold text-text-primary truncate\">\n {orderStats.favoriteCart}\n </p>\n </div>\n </div>\n </EmphasisPanel>\n\n {/* Filters */}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-3\">\n {/* Search */}\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n <input\n type=\"text\"\n placeholder=\"Search orders...\"\n value={filters.searchQuery}\n onChange={(e) => handleFilterChange('searchQuery', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface pl-9 pr-3 py-2.5 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 {/* Status Filter */}\n <select\n value={filters.status}\n onChange={(e) => handleFilterChange('status', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {statusOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n\n {/* Date Range */}\n <select\n value={filters.dateRange}\n onChange={(e) => handleFilterChange('dateRange', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {dateRangeOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n\n {/* Sort */}\n <select\n value={filters.sortBy}\n onChange={(e) => handleFilterChange('sortBy', e.target.value)}\n className=\"w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n >\n {sortOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </div>\n </div>\n\n {/* Orders List */}\n {isLoading ? (\n <div className=\"flex flex-col items-center justify-center py-12 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 orders...</p>\n </div>\n ) : displayedOrders.length === 0 ? (\n <EmptyState\n icon={<ShoppingBag className=\"h-12 w-12\" />}\n title=\"No orders found\"\n description={\n filters.searchQuery || filters.status\n ? 'Try adjusting your filters'\n : \"You haven't placed any orders yet\"\n }\n action={\n <button\n type=\"button\"\n onClick={() => navigateTo('/customer/carts')}\n className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n >\n Start Ordering\n </button>\n }\n />\n ) : (\n <div className=\"space-y-4\">\n {displayedOrders.map((order) => (\n <div\n key={order.id}\n className=\"rounded-lg border border-border-subtle bg-bg-surface hover:shadow-md transition-shadow\"\n >\n <div className=\"p-4 md:p-5\">\n {/* Order Header */}\n <div className=\"flex flex-col md:flex-row md:items-center justify-between mb-3\">\n <div className=\"mb-3 md:mb-0\">\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {order.cartName}\n </h3>\n <StatusBadge status={order.status} />\n </div>\n <p className=\"text-xs text-text-secondary mt-1\">\n Order #{order.id} &middot; {formatDate(order.orderDate)}\n </p>\n </div>\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <p className=\"text-lg font-bold text-text-primary\">\n {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n </p>\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}`)}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Eye className=\"h-3 w-3\" />\n Track Order\n </button>\n {order.status === 'delivered' && (\n <button\n type=\"button\"\n onClick={() => handleReorder(order)}\n className=\"flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n >\n <RotateCcw className=\"h-3 w-3\" />\n Reorder\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/* Order Items Summary */}\n <div className=\"border-t border-border-subtle pt-3\">\n <div className=\"flex flex-wrap gap-1\">\n {order.items.slice(0, 3).map((item, index) => (\n <span key={index} className=\"text-xs text-text-secondary\">\n {item.name} ({item.quantity})\n {index < Math.min(2, order.items.length - 1) && ', '}\n </span>\n ))}\n {order.items.length > 3 && (\n <span className=\"text-xs text-text-secondary\">\n +{order.items.length - 3} more items\n </span>\n )}\n </div>\n </div>\n\n {/* Status Message */}\n <div className=\"mt-3\">\n {order.status === 'delivered' && (\n <div className=\"flex items-center gap-1.5 text-xs text-status-success-text\">\n <CheckCircle2 className=\"h-3 w-3\" />\n <span>Order delivered successfully</span>\n </div>\n )}\n {order.status === 'cancelled' && (\n <div className=\"flex items-center gap-1.5 text-xs text-status-error-text\">\n <XCircle className=\"h-3 w-3\" />\n <span>\n Cancelled{order.cancellationReason && ` - ${order.cancellationReason}`}\n </span>\n </div>\n )}\n {['pending', 'confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(\n order.status\n ) && (\n <div className=\"flex items-center gap-1.5 text-xs text-text-primary\">\n <Truck className=\"h-3 w-3\" />\n <span>\n Estimated delivery by{' '}\n {order.estimatedDeliveryTime\n ? formatDate(order.estimatedDeliveryTime)\n : 'TBD'}\n </span>\n </div>\n )}\n </div>\n\n {/* Rating Section */}\n {order.status === 'delivered' && (\n <div className=\"mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2\">\n {order.rating ? (\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n <RatingDisplay value={order.rating} />\n {order.review && (\n <p className=\"text-xs text-text-secondary italic\">\n &ldquo;{order.review}&rdquo;\n </p>\n )}\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/customer/orders/${order.id}/rate`)}\n className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <Star className=\"h-3 w-3\" />\n Rate Order\n </button>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n )}\n\n {/* Load More */}\n {hasMore && !isLoading && (\n <div className=\"text-center mt-8\">\n <button\n type=\"button\"\n onClick={handleLoadMore}\n className=\"inline-flex items-center gap-2 rounded-lg border border-border-subtle px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n >\n <ChevronDown className=\"h-4 w-4\" />\n Load More Orders\n </button>\n </div>\n )}\n </PageLayout>\n );\n}\n"],"mappings":"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"}