@burdenoff/microfe-store 2026.705.1 → 2026.706.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n Package,\n ArrowLeft,\n ShoppingBag,\n Download,\n CheckCircle,\n Clock,\n XCircle,\n RefreshCw,\n Loader2,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components/InstallAppModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n id: string;\n productId: string;\n productName: string;\n productIcon?: string;\n productType: string;\n version?: string;\n quantity: number;\n unitPrice: number;\n totalPrice: number;\n installed?: boolean;\n}\n\ninterface UIOrder {\n id: string;\n orderNumber: string;\n items: OrderItem[];\n subtotal: number;\n tax: number;\n total: number;\n status:\n | 'PENDING'\n | 'PROCESSING'\n | 'COMPLETED'\n | 'FAILED'\n | 'CANCELLED'\n | 'FULFILLED'\n | 'PROCESSED'\n | 'REFUNDED';\n createdAt: string;\n}\n\n/**\n * Get status icon and color\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n switch (status) {\n case 'COMPLETED':\n case 'FULFILLED':\n case 'PROCESSED':\n return {\n icon: CheckCircle,\n color: 'text-status-success-text bg-status-success-bg-subtle/10',\n label: 'Completed',\n };\n case 'PROCESSING':\n return {\n icon: Clock,\n color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n label: 'Processing',\n };\n case 'PENDING':\n return {\n icon: Clock,\n color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n label: 'Pending',\n };\n case 'FAILED':\n return {\n icon: XCircle,\n color: 'text-status-error-text bg-status-error-bg-subtle/10',\n label: 'Failed',\n };\n case 'REFUNDED':\n return {\n icon: RefreshCw,\n color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n label: 'Refunded',\n };\n case 'CANCELLED':\n return { icon: RefreshCw, color: 'text-text-muted bg-bg-sunken', label: 'Cancelled' };\n default:\n return { icon: Clock, color: 'text-text-muted', label: status };\n }\n};\n\n/**\n * Order item card with Install App button\n */\nconst OrderItemCard: FC<{\n item: OrderItem;\n orderId: string;\n orderStatus: UIOrder['status'];\n onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n installing: boolean;\n}> = ({ item, orderId, orderStatus, onOpenInstallModal, installing }) => {\n const isOrderSuccessful =\n orderStatus === 'COMPLETED' || orderStatus === 'FULFILLED' || orderStatus === 'PROCESSED';\n const isInstallable = item.productType !== 'PHYSICAL' && item.productType !== 'MERCHANDISE';\n return (\n <div className=\"flex items-center gap-4 rounded-lg border border-border-seam bg-bg-sunken/50 p-4\">\n {/* Product Icon */}\n <div className=\"size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n {item.productIcon ? (\n <img src={item.productIcon} alt={item.productName} className=\"size-full object-cover\" />\n ) : (\n <div className=\"flex size-full items-center justify-center text-lg font-bold text-text-muted\">\n {item.productName.charAt(0)}\n </div>\n )}\n </div>\n\n {/* Product Info */}\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-medium text-text-primary truncate\">{item.productName}</h4>\n <div className=\"flex items-center gap-2 mt-1\">\n <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n {item.productType}\n </span>\n <span className=\"text-sm text-text-muted\">\n {item.quantity} x {formatPrice(item.unitPrice)}\n </span>\n </div>\n </div>\n\n {/* Price */}\n <div className=\"text-right\">\n <p className=\"font-semibold tabular-nums text-text-primary\">\n {formatPrice(item.totalPrice)}\n </p>\n </div>\n\n {/* Install Button - only show when order is successfully processed */}\n <div className=\"flex-shrink-0\">\n {item.installed ? (\n <span className=\"inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle/10 px-4 py-2 text-sm font-medium text-status-success-text\">\n <CheckCircle className=\"size-4\" />\n Installed\n </span>\n ) : isOrderSuccessful && isInstallable ? (\n <button\n type=\"button\"\n onClick={() => onOpenInstallModal(orderId, item)}\n disabled={installing}\n className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50\"\n >\n {installing ? (\n <>\n <Loader2 className=\"size-4 animate-spin\" />\n Installing…\n </>\n ) : (\n <>\n <Download className=\"size-4\" />\n Install App\n </>\n )}\n </button>\n ) : null}\n </div>\n </div>\n );\n};\n\n/**\n * Order card component\n */\nconst OrderCard: FC<{\n order: UIOrder;\n onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n installingItem: string | null;\n}> = ({ order, onOpenInstallModal, installingItem }) => {\n const statusDisplay = getStatusDisplay(order.status);\n const StatusIcon = statusDisplay.icon;\n\n return (\n <GlassCard className=\"p-6\">\n {/* Order Header */}\n <div className=\"flex items-start justify-between mb-4\">\n <div>\n <div className=\"flex items-center gap-3\">\n <h3 className=\"text-lg font-semibold text-text-primary\">{order.orderNumber}</h3>\n <span\n className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusDisplay.color}`}\n >\n <StatusIcon className=\"size-4\" />\n {statusDisplay.label}\n </span>\n </div>\n <p className=\"text-sm text-text-muted mt-1\">\n {new Date(order.createdAt).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n })}\n </p>\n </div>\n <div className=\"text-right\">\n <p className=\"text-xl font-bold tabular-nums text-text-primary\">\n {formatPrice(order.total)}\n </p>\n <p className=\"text-xs text-text-muted\">\n {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n </p>\n </div>\n </div>\n\n {/* Order Items */}\n <div className=\"space-y-3\">\n {order.items.map((item) => (\n <OrderItemCard\n key={item.id}\n item={item}\n orderId={order.id}\n orderStatus={order.status}\n onOpenInstallModal={onOpenInstallModal}\n installing={installingItem === item.id}\n />\n ))}\n </div>\n\n {/* Order Summary */}\n {/* TODO(ux-sweep): no order-details modal exists; tax + shipping live inline. When a modal lands, wrap \"Tax + shipping advanced\" in OptionalFields. */}\n <div className=\"mt-4 pt-4 border-t border-border-seam\">\n <div className=\"flex justify-between text-sm\">\n <span className=\"text-text-muted\">Subtotal</span>\n <span className=\"tabular-nums text-text-primary\">{formatPrice(order.subtotal)}</span>\n </div>\n <div className=\"flex justify-between text-sm mt-1\">\n <span className=\"text-text-muted\">Tax</span>\n <span className=\"tabular-nums text-text-primary\">{formatPrice(order.tax)}</span>\n </div>\n </div>\n </GlassCard>\n );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a list of all orders with their items and Install App buttons\n */\nexport const OrdersPage: FC = () => {\n const navigate = useNavigate();\n const { basePath } = useStore();\n const { t } = useI18n();\n const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n const { installations, refetch: refetchInstallations } = useInstallations();\n\n useOrderStatusUpdatedSubscription({\n onData: () => {\n void refetchOrders();\n },\n onError: (err) => {\n console.warn('OrderStatusUpdated subscription error:', err.message);\n },\n });\n\n // Modal state\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n const installedProductIds = useMemo(\n () =>\n new Set(\n installations.flatMap((installation) =>\n installation.status === 'ACTIVE' ? [installation.productId] : []\n )\n ),\n [installations]\n );\n\n // Map backend orders to UI format\n const orders: UIOrder[] = backendOrders.map((order) => {\n // Calculate subtotal from line items (with safety check)\n const lineItems = order.lineItems || [];\n const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n // Estimate tax (backend doesn't store separate tax amount)\n const tax = order.total - subtotal;\n\n // Map lineItems to items with unique IDs\n const items: OrderItem[] = lineItems.map((item, index) => ({\n id: `${order.id}-${index}`, // Generate unique ID for each line item\n productId: item.productId,\n productName: item.name, // Backend uses 'name', UI expects 'productName'\n productIcon: item.productIcon,\n productType:\n item.productType ||\n (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n version: item.version,\n quantity: item.quantity,\n unitPrice: item.unitPrice,\n totalPrice: item.subtotal, // Backend uses 'subtotal', UI expects 'totalPrice'\n installed: installedProductIds.has(item.productId),\n }));\n\n return {\n id: order.id,\n orderNumber: `#${order.id.slice(-8).toUpperCase()}`, // Generate order number from ID\n items,\n subtotal,\n tax,\n total: order.total,\n status: order.status as UIOrder['status'], // Cast to union type\n createdAt: order.createdAt,\n };\n });\n\n const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n setSelectedOrderId(orderId);\n setSelectedItemId(item.id);\n setSelectedApp({\n id: item.productId,\n name: item.productName,\n icon: item.productIcon,\n type: item.productType,\n version: item.version,\n });\n setIsModalOpen(true);\n };\n\n const handleCloseModal = () => {\n setIsModalOpen(false);\n setSelectedOrderId(null);\n setSelectedApp(null);\n setSelectedItemId(null);\n };\n\n const handleInstallSuccess = (workspaceId: string, workspaceName: string) => {\n if (!selectedOrderId || !selectedItemId) return;\n\n console.log(\n `Successfully installed ${selectedApp?.name} to workspace ${workspaceName} (${workspaceId})`\n );\n\n // Reset modal state\n handleCloseModal();\n void refetchInstallations();\n };\n\n const handleInstallError = (error: Error) => {\n console.error('Installation failed:', error.message);\n // Error is displayed in modal, no need to close it\n };\n\n const handleBrowseMarketplace = () => {\n navigate(`${basePath}/marketplace`);\n };\n\n return (\n <div className=\"h-full overflow-y-auto\">\n {/* Header */}\n <header className=\"sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4\">\n <div className=\"mx-auto max-w-4xl\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate(-1)}\n aria-label=\"Go back\"\n className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <div className=\"flex items-center gap-3\">\n <Package className=\"size-6 text-text-primary\" />\n <h1 className=\"text-xl font-bold text-text-primary\">\n {t('pages.orders.title', { defaultValue: 'My Orders' })}\n </h1>\n {orders.length > 0 && (\n <span className=\"rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text\">\n {orders.length}\n </span>\n )}\n </div>\n </div>\n </div>\n </header>\n\n <main className=\"mx-auto max-w-4xl p-6\">\n <PagePurpose className=\"mb-6\">\n A record of everything you've purchased from the marketplace. Track each order's status,\n review what you paid, and — once an order is complete — install the apps you bought into a\n workspace right from here. Come back to re-install on a new workspace or check a past\n receipt.\n </PagePurpose>\n {loading ? (\n // Loading State\n <output\n aria-label=\"Loading orders\"\n className=\"flex flex-col items-center justify-center py-16\"\n >\n <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n <p className=\"text-text-muted\">Loading your orders…</p>\n </output>\n ) : error ? (\n // Error State\n <div role=\"alert\" className=\"flex flex-col items-center justify-center py-16 text-center\">\n <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n <XCircle className=\"size-16 text-status-error-text\" />\n </div>\n <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n </h2>\n <p className=\"mb-6 max-w-md text-text-muted\">\n {error.message || 'An error occurred while loading your orders. Please try again.'}\n </p>\n <button\n type=\"button\"\n onClick={handleBrowseMarketplace}\n className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n >\n <ShoppingBag className=\"size-5\" />\n Browse Marketplace\n </button>\n </div>\n ) : orders.length === 0 ? (\n // Empty State\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title={t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n description=\"You have not placed any orders yet. Browse the marketplace to discover apps and products!\"\n action={\n <button\n type=\"button\"\n onClick={handleBrowseMarketplace}\n className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n >\n <ShoppingBag className=\"size-5\" />\n Browse Marketplace\n </button>\n }\n />\n ) : (\n // Orders List\n <ul className=\"space-y-6\">\n {orders.map((order) => (\n <li key={order.id}>\n <OrderCard\n order={order}\n onOpenInstallModal={handleOpenInstallModal}\n installingItem={isModalOpen ? selectedItemId : null}\n />\n </li>\n ))}\n {hasMore && (\n <li className=\"flex justify-center pt-4 list-none\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n >\n {loading ? <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n {t('common.loadMore', { defaultValue: 'Load more' })}\n </button>\n </li>\n )}\n </ul>\n )}\n </main>\n\n {/* Install App Modal */}\n {selectedApp && (\n <InstallAppModal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n app={selectedApp}\n orderId={selectedOrderId}\n onInstallSuccess={handleInstallSuccess}\n onInstallError={handleInstallError}\n />\n )}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n Package,\n ArrowLeft,\n ShoppingBag,\n Download,\n CheckCircle,\n Clock,\n XCircle,\n RefreshCw,\n Loader2,\n ChevronRight,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components/InstallAppModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n id: string;\n productId: string;\n productName: string;\n productIcon?: string;\n productType: string;\n version?: string;\n quantity: number;\n unitPrice: number;\n totalPrice: number;\n installed?: boolean;\n}\n\ninterface UIOrder {\n id: string;\n orderNumber: string;\n items: OrderItem[];\n subtotal: number;\n tax: number;\n total: number;\n status:\n | 'PENDING'\n | 'PROCESSING'\n | 'COMPLETED'\n | 'FAILED'\n | 'CANCELLED'\n | 'FULFILLED'\n | 'PROCESSED'\n | 'REFUNDED';\n createdAt: string;\n}\n\ntype OrdersTab = 'completed' | 'pending';\n\nconst SUCCESSFUL_ORDER_STATUSES: UIOrder['status'][] = ['COMPLETED', 'FULFILLED', 'PROCESSED'];\n\n/**\n * Get status badge config\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n switch (status) {\n case 'COMPLETED':\n case 'FULFILLED':\n case 'PROCESSED':\n return {\n icon: CheckCircle,\n classes:\n 'bg-status-success-bg-subtle/15 text-status-success-text border-status-success-text/20',\n label: 'Completed',\n };\n case 'PROCESSING':\n return {\n icon: Clock,\n classes:\n 'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n label: 'Processing',\n };\n case 'PENDING':\n return {\n icon: Clock,\n classes:\n 'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n label: 'Pending',\n };\n case 'FAILED':\n return {\n icon: XCircle,\n classes: 'bg-status-error-bg-subtle/15 text-status-error-text border-status-error-text/20',\n label: 'Failed',\n };\n case 'REFUNDED':\n return {\n icon: RefreshCw,\n classes:\n 'bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20',\n label: 'Refunded',\n };\n case 'CANCELLED':\n return {\n icon: RefreshCw,\n classes: 'bg-bg-sunken text-text-muted border-border-default',\n label: 'Cancelled',\n };\n default:\n return {\n icon: Clock,\n classes: 'bg-bg-sunken text-text-muted border-border-default',\n label: status,\n };\n }\n};\n\n/**\n * Status badge component\n */\nconst StatusBadge: FC<{ status: UIOrder['status'] }> = ({ status }) => {\n const display = getStatusDisplay(status);\n const Icon = display.icon;\n return (\n <span\n className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${display.classes}`}\n >\n <Icon className=\"size-3.5\" />\n {display.label}\n </span>\n );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a table of all orders with expandable rows showing line items\n * and Install App buttons for digital products.\n */\nexport const OrdersPage: FC = () => {\n const navigate = useNavigate();\n const { basePath } = useStore();\n const { t } = useI18n();\n const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n const { installations, refetch: refetchInstallations } = useInstallations();\n\n useOrderStatusUpdatedSubscription({\n onData: () => {\n void refetchOrders();\n },\n onError: (err) => {\n console.warn('OrderStatusUpdated subscription error:', err.message);\n },\n });\n\n // Expanded rows tracking\n const [expandedOrders, setExpandedOrders] = useState<Set<string>>(new Set());\n const [activeTab, setActiveTab] = useState<OrdersTab>('completed');\n\n // Modal state\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n const installedProductIds = useMemo(\n () =>\n new Set(\n installations.flatMap((installation) =>\n installation.status === 'ACTIVE' ? [installation.productId] : []\n )\n ),\n [installations]\n );\n\n // Map backend orders to UI format\n const orders: UIOrder[] = backendOrders.map((order) => {\n const lineItems = order.lineItems || [];\n const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n const tax = order.total - subtotal;\n\n const items: OrderItem[] = lineItems.map((item, index) => ({\n id: `${order.id}-${index}`,\n productId: item.productId,\n productName: item.name,\n productIcon: item.productIcon,\n productType:\n item.productType ||\n (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n version: item.version,\n quantity: item.quantity,\n unitPrice: item.unitPrice,\n totalPrice: item.subtotal,\n installed: installedProductIds.has(item.productId),\n }));\n\n return {\n id: order.id,\n orderNumber: `#${order.id.slice(-8).toUpperCase()}`,\n items,\n subtotal,\n tax,\n total: order.total,\n status: order.status as UIOrder['status'],\n createdAt: order.createdAt,\n };\n });\n\n const completedOrders = useMemo(\n () => orders.filter((order) => SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n [orders]\n );\n\n const pendingOrders = useMemo(\n () => orders.filter((order) => !SUCCESSFUL_ORDER_STATUSES.includes(order.status)),\n [orders]\n );\n\n const visibleOrders = activeTab === 'completed' ? completedOrders : pendingOrders;\n\n const toggleExpand = useCallback((orderId: string) => {\n setExpandedOrders((prev) => {\n const next = new Set(prev);\n if (next.has(orderId)) {\n next.delete(orderId);\n } else {\n next.add(orderId);\n }\n return next;\n });\n }, []);\n\n const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n setSelectedOrderId(orderId);\n setSelectedItemId(item.id);\n setSelectedApp({\n id: item.productId,\n name: item.productName,\n icon: item.productIcon,\n type: item.productType,\n version: item.version,\n });\n setIsModalOpen(true);\n };\n\n const handleCloseModal = () => {\n setIsModalOpen(false);\n setSelectedOrderId(null);\n setSelectedApp(null);\n setSelectedItemId(null);\n };\n\n const handleInstallSuccess = (_workspaceId: string, _workspaceName: string) => {\n handleCloseModal();\n void refetchInstallations();\n };\n\n const handleInstallError = (_error: Error) => {\n // Error is displayed in modal\n };\n\n const handleBrowseMarketplace = () => {\n navigate(`${basePath}/marketplace`);\n };\n\n // ──── Shared table cell classes ────\n const cellCls = 'px-4 py-3 text-sm';\n const headerCls =\n 'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted';\n\n return (\n <div className=\"flex h-full flex-col\">\n {/* Header */}\n <header className=\"flex-shrink-0 border-b border-border-seam bg-bg-surface px-6 py-4\">\n <div className=\"mx-auto max-w-6xl\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate(-1)}\n aria-label=\"Go back\"\n className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <div className=\"flex items-center gap-3\">\n <Package className=\"size-6 text-text-primary\" />\n <h1 className=\"text-xl font-bold text-text-primary\">\n {t('pages.orders.title', { defaultValue: 'My Orders' })}\n </h1>\n {orders.length > 0 && (\n <span className=\"rounded-full bg-action-primary-bg/10 px-2.5 py-0.5 text-sm font-medium text-action-primary-bg\">\n {orders.length}\n </span>\n )}\n </div>\n </div>\n </div>\n </div>\n </header>\n\n {/* Scrollable content area */}\n <div className=\"flex-1 overflow-y-auto\">\n <div className=\"mx-auto max-w-6xl p-6\">\n <PagePurpose className=\"mb-6\">\n A record of everything you've purchased from the marketplace. Track each order's status,\n review what you paid, and — once an order is complete — install the apps you bought into\n a workspace right from here. Come back to re-install on a new workspace or check a past\n receipt.\n </PagePurpose>\n\n {loading && orders.length === 0 ? (\n // ── Loading state ──\n <div className=\"flex flex-col items-center justify-center py-24\">\n <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n <p className=\"text-text-muted\">Loading your orders…</p>\n </div>\n ) : error ? (\n // ── Error state ──\n <div className=\"flex flex-col items-center justify-center py-24 text-center\">\n <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n <XCircle className=\"size-16 text-status-error-text\" />\n </div>\n <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n </h2>\n <p className=\"mb-6 max-w-md text-text-muted\">\n {error.message || 'An error occurred while loading your orders. Please try again.'}\n </p>\n <button\n type=\"button\"\n onClick={handleBrowseMarketplace}\n className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n >\n <ShoppingBag className=\"size-5\" />\n Browse Marketplace\n </button>\n </div>\n ) : orders.length === 0 ? (\n // ── Empty state ──\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title={t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n description=\"You have not placed any orders yet. Browse the marketplace to discover apps and products!\"\n action={\n <button\n type=\"button\"\n onClick={handleBrowseMarketplace}\n className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n >\n <ShoppingBag className=\"size-5\" />\n Browse Marketplace\n </button>\n }\n />\n ) : (\n // ── Table ──\n <div className=\"space-y-4\">\n <div className=\"inline-flex rounded-xl border border-border-seam bg-bg-surface p-1\">\n <button\n type=\"button\"\n onClick={() => setActiveTab('completed')}\n className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n activeTab === 'completed'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n }`}\n >\n Completed\n <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n {completedOrders.length}\n </span>\n </button>\n <button\n type=\"button\"\n onClick={() => setActiveTab('pending')}\n className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n activeTab === 'pending'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'text-text-muted hover:bg-bg-sunken hover:text-text-primary'\n }`}\n >\n Pending\n <span className=\"ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs\">\n {pendingOrders.length}\n </span>\n </button>\n </div>\n\n {visibleOrders.length === 0 ? (\n <GlassCard className=\"p-10 text-center\">\n <div className=\"mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-bg-sunken text-text-muted\">\n <Package className=\"size-6\" />\n </div>\n <h2 className=\"mb-2 text-lg font-semibold text-text-primary\">\n {activeTab === 'completed' ? 'No completed orders yet' : 'No pending orders'}\n </h2>\n <p className=\"text-sm text-text-muted\">\n {activeTab === 'completed'\n ? 'Completed purchases will appear here once payment is successful.'\n : 'Orders that are pending, processing, failed, refunded, or cancelled will appear here.'}\n </p>\n </GlassCard>\n ) : (\n <div className=\"overflow-hidden rounded-xl border border-border-seam bg-bg-surface\">\n {/* Table Header */}\n <div className=\"hidden border-b border-border-seam bg-bg-sunken/50 md:grid md:grid-cols-[40px_1fr_180px_140px_120px_160px]\">\n <div className={headerCls} />\n <div className={headerCls}>Order</div>\n <div className={headerCls}>Date</div>\n <div className={headerCls}>Items</div>\n <div className={`${headerCls} text-right`}>Total</div>\n <div className={`${headerCls} text-center`}>Status</div>\n </div>\n\n {/* Table Body */}\n {visibleOrders.map((order) => {\n const isExpanded = expandedOrders.has(order.id);\n const isSuccessful =\n order.status === 'COMPLETED' ||\n order.status === 'FULFILLED' ||\n order.status === 'PROCESSED';\n\n return (\n <div key={order.id} className=\"border-b border-border-seam last:border-b-0\">\n {/* Order Row */}\n <button\n type=\"button\"\n onClick={() => toggleExpand(order.id)}\n className=\"grid w-full cursor-pointer grid-cols-[40px_1fr_180px_140px_120px_160px] items-center transition-colors hover:bg-bg-sunken/50 md:grid\"\n >\n {/* Expand/collapse chevron */}\n <div className={`${cellCls} flex justify-center`}>\n <ChevronRight\n className={`size-4 text-text-muted transition-transform duration-200 ${\n isExpanded ? 'rotate-90' : ''\n }`}\n />\n </div>\n\n {/* Order number */}\n <div className={`${cellCls} font-medium text-text-primary`}>\n {order.orderNumber}\n </div>\n\n {/* Date */}\n <div className={`${cellCls} text-text-muted`}>\n {new Date(order.createdAt).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n })}\n </div>\n\n {/* Items summary */}\n <div className={`${cellCls} text-text-muted`}>\n {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n <span className=\"block text-xs text-text-muted/70\">\n {order.items.map((i) => i.productName).join(', ')}\n </span>\n </div>\n\n {/* Total */}\n <div\n className={`${cellCls} text-right font-semibold tabular-nums text-text-primary`}\n >\n {formatPrice(order.total)}\n </div>\n\n {/* Status */}\n <div className={`${cellCls} flex justify-center`}>\n <StatusBadge status={order.status} />\n </div>\n </button>\n\n {/* Expanded: Line items */}\n {isExpanded && (\n <div className=\"border-t border-border-seam bg-bg-sunken/30\">\n {/* Column headers for items */}\n <div className=\"hidden grid-cols-[1fr_100px_120px_160px] gap-4 px-12 py-2 md:grid\">\n <span className=\"text-xs font-medium text-text-muted\">Product</span>\n <span className=\"text-xs font-medium text-text-muted text-right\">\n Qty\n </span>\n <span className=\"text-xs font-medium text-text-muted text-right\">\n Price\n </span>\n <span className=\"text-xs font-medium text-text-muted text-center\">\n Action\n </span>\n </div>\n\n {order.items.map((item) => {\n const isInstallable =\n item.productType !== 'PHYSICAL' &&\n item.productType !== 'MERCHANDISE';\n\n return (\n <div\n key={item.id}\n className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-3 md:px-12 md:grid-cols-[1fr_100px_120px_160px]\"\n >\n {/* Product info */}\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"size-10 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n {item.productIcon ? (\n <img\n src={item.productIcon}\n alt={item.productName}\n className=\"size-full object-cover\"\n />\n ) : (\n <div className=\"flex size-full items-center justify-center text-sm font-bold text-text-muted\">\n {item.productName.charAt(0)}\n </div>\n )}\n </div>\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {item.productName}\n </p>\n <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n {item.productType}\n </span>\n </div>\n </div>\n\n {/* Quantity */}\n <div className=\"hidden text-right text-sm text-text-muted md:block\">\n {item.quantity}\n </div>\n\n {/* Price */}\n <div className=\"hidden text-right text-sm font-semibold tabular-nums text-text-primary md:block\">\n {formatPrice(item.totalPrice)}\n </div>\n\n {/* Mobile price + qty */}\n <div className=\"text-right text-sm text-text-muted md:hidden\">\n <span className=\"tabular-nums\">{item.quantity} × </span>\n <span className=\"font-semibold text-text-primary tabular-nums\">\n {formatPrice(item.unitPrice)}\n </span>\n </div>\n\n {/* Install button */}\n <div className=\"flex justify-end md:justify-center\">\n {item.installed ? (\n <span className=\"inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium text-status-success-text\">\n <CheckCircle className=\"size-3.5\" />\n Installed\n </span>\n ) : isSuccessful && isInstallable ? (\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n handleOpenInstallModal(order.id, item);\n }}\n className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text transition-all hover:opacity-90 active:scale-95\"\n >\n <Download className=\"size-3.5\" />\n Install App\n </button>\n ) : null}\n </div>\n </div>\n );\n })}\n\n {/* Order summary footer */}\n <div className=\"border-t border-border-seam/50 px-4 py-2 md:px-12\">\n <div className=\"flex justify-end gap-6 text-xs text-text-muted\">\n <span>\n Subtotal:{' '}\n <span className=\"tabular-nums text-text-primary\">\n {formatPrice(order.subtotal)}\n </span>\n </span>\n <span>\n Tax:{' '}\n <span className=\"tabular-nums text-text-primary\">\n {formatPrice(order.tax)}\n </span>\n </span>\n <span className=\"font-semibold\">\n Total:{' '}\n <span className=\"tabular-nums text-text-primary\">\n {formatPrice(order.total)}\n </span>\n </span>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n })}\n\n {/* Load More */}\n {hasMore && (\n <div className=\"flex justify-center px-4 py-5\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle disabled:opacity-50\"\n aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n >\n {loading ? (\n <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n ) : null}\n {t('common.loadMore', { defaultValue: 'Load more' })}\n </button>\n </div>\n )}\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n\n {/* Install App Modal */}\n {selectedApp && (\n <InstallAppModal\n isOpen={isModalOpen}\n onClose={handleCloseModal}\n app={selectedApp}\n orderId={selectedOrderId}\n onInstallSuccess={handleInstallSuccess}\n onInstallError={handleInstallError}\n />\n )}\n </div>\n );\n};\n"],"mappings":"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"}
|