@mohasinac/appkit 2.7.27 → 2.7.31

package/dist/features/consultation/schemas/index.d.ts

@@ -33,9 +33,9 @@ export declare const consultationBookingSchema: z.ZodObject<{
     createdAt?: string | undefined;
     adminNote?: string | undefined;
     message?: string | undefined;
-    mode?: "online" | "phone" | "in_person" | undefined;
-    userId?: string | undefined;
     phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
+    userId?: string | undefined;
     concern?: string[] | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
@@ -47,9 +47,9 @@ export declare const consultationBookingSchema: z.ZodObject<{
     status?: "pending" | "completed" | "confirmed" | "cancelled" | "no_show" | undefined;
     adminNote?: string | undefined;
     message?: string | undefined;
-    mode?: "online" | "phone" | "in_person" | undefined;
-    userId?: string | undefined;
     phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
+    userId?: string | undefined;
     concern?: string[] | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
@@ -71,8 +71,8 @@ export declare const bookConsultationSchema: z.ZodObject<{
     name: string;
     concern: string[];
     message?: string | undefined;
-    mode?: "online" | "phone" | "in_person" | undefined;
     phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
 }, {
@@ -80,8 +80,8 @@ export declare const bookConsultationSchema: z.ZodObject<{
     name: string;
     concern: string[];
     message?: string | undefined;
-    mode?: "online" | "phone" | "in_person" | undefined;
     phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
 }>;

package/dist/features/contact/email.js

@@ -1,6 +1,8 @@
 import { getProviders } from "../../contracts";
 import { serverLogger } from "../../monitoring";
 import { currentYear, formatCurrency, formatDateTime, nowMs, } from "../../utils";
+const EMAIL_STYLE_MUTED = "color: #666; font-size: 14px;";
+const EMAIL_STYLE_BODY = "color: #333; font-size: 14px;";
 function getSiteName() {
     return process.env.NEXT_PUBLIC_SITE_NAME?.trim() || "App";
 }
@@ -74,134 +76,93 @@ export async function sendPasswordResetEmailWithLink(email, resetLink) {
         throw error;
     }
 }
+function buildOrderItemsHtml(items, productTitle, quantity, currency) {
+    if (items && items.length > 1) {
+        return `
+      <table width="100%" cellpadding="8" cellspacing="0" border="0" style="border-collapse: collapse; margin-bottom: 8px;">
+        <thead>
+          <tr style="background-color: #e9ecef;">
+            <th style="text-align: left; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Product</th>
+            <th style="text-align: center; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Qty</th>
+            <th style="text-align: right; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${items.map((item, index) => `
+            <tr style="background-color: ${index % 2 === 0 ? "#ffffff" : "#f8f9fa"}; border-top: 1px solid #e9ecef;">
+              <td style="font-size: 14px; color: #333; padding: 8px 12px;">${item.productTitle}</td>
+              <td style="font-size: 14px; color: #333; text-align: center; padding: 8px 12px;">${item.quantity}</td>
+              <td style="font-size: 14px; color: #333; text-align: right; padding: 8px 12px;">${formatCurrency(item.totalPrice, currency)}</td>
+            </tr>`).join("")}
+        </tbody>
+      </table>`;
+    }
+    return `
+    <tr>
+      <td style="${EMAIL_STYLE_MUTED}">Product</td>
+      <td style="${EMAIL_STYLE_BODY}">${productTitle}</td>
+    </tr>
+    <tr>
+      <td style="${EMAIL_STYLE_MUTED}">Quantity</td>
+      <td style="${EMAIL_STYLE_BODY}">${quantity}</td>
+    </tr>`;
+}
+function buildOrderConfirmationHtml(params) {
+    const { userName, orderId, formattedTotal, shippingAddress, paymentMethod, orderUrl, itemsHtml, siteName, items } = params;
+    return `
+    <!DOCTYPE html><html>
+    <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Order Confirmation</title></head>
+    <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5;">
+      <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 40px 0;">
+        <tr><td align="center">
+          <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+            <tr><td style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px; text-align: center;">
+              <p style="font-size: 48px; margin: 0 0 12px;">✅</p>
+              <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600;">Order Confirmed!</h1>
+            </td></tr>
+            <tr><td style="padding: 40px;">
+              <p style="color: #333; font-size: 16px; line-height: 1.6; margin: 0 0 20px;">Hi ${userName},</p>
+              <p style="color: #333; font-size: 16px; line-height: 1.6; margin: 0 0 24px;">Thank you for your order! We've received it and will process it shortly.</p>
+              <table width="100%" cellpadding="12" cellspacing="0" border="0" style="background-color: #f8f9fa; border-radius: 8px; margin-bottom: 24px;">
+                <tr><td style="color: #666; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e9ecef;" colspan="2">Order Details</td></tr>
+                <tr><td style="color: #666; font-size: 14px; width: 40%;">Order ID</td><td style="color: #333; font-size: 14px; font-weight: 600;">${orderId}</td></tr>
+                ${items && items.length > 1
+        ? `<tr><td style="color: #666; font-size: 14px; vertical-align: top;" colspan="2"><div style="font-weight: 600; margin-bottom: 8px;">Items (${items.length})</div>${itemsHtml}</td></tr>`
+        : itemsHtml}
+                <tr><td style="${EMAIL_STYLE_MUTED}">Total</td><td style="color: #333; font-size: 14px; font-weight: 700;">${formattedTotal}</td></tr>
+                <tr><td style="${EMAIL_STYLE_MUTED}">Payment</td><td style="${EMAIL_STYLE_BODY}">${paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment"}</td></tr>
+                <tr><td style="color: #666; font-size: 14px; vertical-align: top;">Ship to</td><td style="${EMAIL_STYLE_BODY}">${shippingAddress}</td></tr>
+              </table>
+              <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
+                <tr><td align="center">
+                  <a href="${orderUrl}" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: 600;">View Order</a>
+                </td></tr>
+              </table>
+              <p style="color: #999; font-size: 13px; line-height: 1.6; margin: 0;">We'll send you another email when your order is shipped.</p>
+            </td></tr>
+            <tr><td style="background-color: #f8f9fa; padding: 24px; text-align: center; border-top: 1px solid #eee;">
+              <p style="color: #999; font-size: 12px; margin: 0;">© ${currentYear()} ${siteName}. All rights reserved.</p>
+            </td></tr>
+          </table>
+        </td></tr>
+      </table>
+    </body></html>`;
+}
 export async function sendOrderConfirmationEmail(params) {
     const siteName = getSiteName();
     const siteUrl = getSiteUrl();
     const { to, userName, orderId, productTitle, quantity, totalPrice, currency, shippingAddress, paymentMethod, items, } = params;
     const orderUrl = `${siteUrl}/user/orders/view/${orderId}`;
     const formattedTotal = formatCurrency(totalPrice, currency);
-    const itemsHtml = items && items.length > 1
-        ? `
-        <table width="100%" cellpadding="8" cellspacing="0" border="0" style="border-collapse: collapse; margin-bottom: 8px;">
-          <thead>
-            <tr style="background-color: #e9ecef;">
-              <th style="text-align: left; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Product</th>
-              <th style="text-align: center; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Qty</th>
-              <th style="text-align: right; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px;">Amount</th>
-            </tr>
-          </thead>
-          <tbody>
-            ${items
-            .map((item, index) => `
-              <tr style="background-color: ${index % 2 === 0 ? "#ffffff" : "#f8f9fa"}; border-top: 1px solid #e9ecef;">
-                <td style="font-size: 14px; color: #333; padding: 8px 12px;">${item.productTitle}</td>
-                <td style="font-size: 14px; color: #333; text-align: center; padding: 8px 12px;">${item.quantity}</td>
-                <td style="font-size: 14px; color: #333; text-align: right; padding: 8px 12px;">${formatCurrency(item.totalPrice, currency)}</td>
-              </tr>`)
-            .join("")}
-          </tbody>
-        </table>`
-        : `
-        <tr>
-          <td style="color: #666; font-size: 14px;">Product</td>
-          <td style="color: #333; font-size: 14px;">${productTitle}</td>
-        </tr>
-        <tr>
-          <td style="color: #666; font-size: 14px;">Quantity</td>
-          <td style="color: #333; font-size: 14px;">${quantity}</td>
-        </tr>`;
+    const itemsHtml = buildOrderItemsHtml(items, productTitle, quantity, currency);
     const itemsText = items && items.length > 1
-        ? items
-            .map((item) => `  • ${item.productTitle} × ${item.quantity} — ${formatCurrency(item.totalPrice, currency)}`)
-            .join("\n")
+        ? items.map((item) => `  • ${item.productTitle} × ${item.quantity} — ${formatCurrency(item.totalPrice, currency)}`).join("\n")
         : `  Product: ${productTitle}\n  Quantity: ${quantity}`;
     try {
         const { data, error } = await sendConfiguredEmail({
             to,
             subject: `Order Confirmed — ${orderId}`,
-            html: `
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <meta charset="utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Order Confirmation</title>
-        </head>
-        <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5;">
-          <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 40px 0;">
-            <tr>
-              <td align="center">
-                <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                  <tr>
-                    <td style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px; text-align: center;">
-                      <p style="font-size: 48px; margin: 0 0 12px;">✅</p>
-                      <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600;">Order Confirmed!</h1>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="padding: 40px;">
-                      <p style="color: #333; font-size: 16px; line-height: 1.6; margin: 0 0 20px;">Hi ${userName},</p>
-                      <p style="color: #333; font-size: 16px; line-height: 1.6; margin: 0 0 24px;">
-                        Thank you for your order! We've received it and will process it shortly.
-                      </p>
-                      <table width="100%" cellpadding="12" cellspacing="0" border="0" style="background-color: #f8f9fa; border-radius: 8px; margin-bottom: 24px;">
-                        <tr>
-                          <td style="color: #666; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e9ecef;" colspan="2">Order Details</td>
-                        </tr>
-                        <tr>
-                          <td style="color: #666; font-size: 14px; width: 40%;">Order ID</td>
-                          <td style="color: #333; font-size: 14px; font-weight: 600;">${orderId}</td>
-                        </tr>
-                        ${items && items.length > 1
-                ? `
-                        <tr>
-                          <td style="color: #666; font-size: 14px; vertical-align: top;" colspan="2">
-                            <div style="font-weight: 600; margin-bottom: 8px;">Items (${items.length})</div>
-                            ${itemsHtml}
-                          </td>
-                        </tr>`
-                : itemsHtml}
-                        <tr>
-                          <td style="color: #666; font-size: 14px;">Total</td>
-                          <td style="color: #333; font-size: 14px; font-weight: 700;">${formattedTotal}</td>
-                        </tr>
-                        <tr>
-                          <td style="color: #666; font-size: 14px;">Payment</td>
-                          <td style="color: #333; font-size: 14px;">${paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment"}</td>
-                        </tr>
-                        <tr>
-                          <td style="color: #666; font-size: 14px; vertical-align: top;">Ship to</td>
-                          <td style="color: #333; font-size: 14px;">${shippingAddress}</td>
-                        </tr>
-                      </table>
-                      <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
-                        <tr>
-                          <td align="center">
-                            <a href="${orderUrl}" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: 600;">
-                              View Order
-                            </a>
-                          </td>
-                        </tr>
-                      </table>
-                      <p style="color: #999; font-size: 13px; line-height: 1.6; margin: 0;">
-                        We'll send you another email when your order is shipped.
-                      </p>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td style="background-color: #f8f9fa; padding: 24px; text-align: center; border-top: 1px solid #eee;">
-                      <p style="color: #999; font-size: 12px; margin: 0;">
-                        © ${currentYear()} ${siteName}. All rights reserved.
-                      </p>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </body>
-        </html>
-      `,
+            html: buildOrderConfirmationHtml({ userName, orderId, formattedTotal, shippingAddress, paymentMethod, orderUrl, itemsHtml, siteName, items }),
             text: `Hi ${userName},\n\nYour order ${orderId} has been confirmed!\n\n${itemsText}\nTotal: ${formattedTotal}\nPayment: ${paymentMethod === "cod" ? "Cash on Delivery" : "Online Payment"}\nShip to: ${shippingAddress}\n\nView your order: ${orderUrl}\n\n© ${currentYear()} ${siteName}`,
         });
         if (error) {

package/dist/features/copilot/components/AdminCopilotView.js

@@ -6,12 +6,22 @@ import { Alert, Button, Div, Heading, Input, Span, StackedViewShell, Text, } fro
 import { apiClient } from "../../../http";
 import { useCopilotChat } from "../hooks/useCopilotChat";
 import { THEME_CONSTANTS } from "../../../tokens";
+const LBL_CONVERSATION_ID = "Conversation ID";
 function MessageBubble({ msg }) {
     const isUser = msg.role === "user";
     return (_jsx(Div, { className: `flex ${isUser ? "justify-end" : "justify-start"}`, children: _jsxs(Div, { className: `max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${isUser
                 ? "bg-primary text-white rounded-tr-sm"
                 : "bg-neutral-100 dark:bg-slate-700 text-neutral-900 dark:text-neutral-100 rounded-tl-sm"}`, children: [_jsx(Text, { className: "whitespace-pre-wrap text-sm leading-relaxed", children: msg.content }), msg.durationMs ? (_jsxs(Span, { className: "mt-1 block text-xs opacity-60", children: [(msg.durationMs / 1000).toFixed(1), "s"] })) : null] }) }));
 }
+function renderCopilotChatPanel(props) {
+    const { messages, conversationId, isLoading, error, input, setInput, labels, messagesEndRef, handleSubmit } = props;
+    return (_jsxs(Div, { className: "flex flex-col rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 h-[calc(100vh-300px)]", children: [_jsx(Div, { className: "border-b border-neutral-200 dark:border-slate-700 p-3", children: _jsxs(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: [labels?.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Div, { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 ? (_jsxs(Div, { className: "flex flex-col items-center justify-center h-full text-center", children: [_jsx(Text, { className: "font-medium", children: labels?.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "text-sm mt-1", children: labels?.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => _jsx(MessageBubble, { msg: msg }, msg.id)), isLoading ? (_jsx(Div, { className: "flex justify-start", children: _jsx(Div, { className: "rounded-2xl rounded-tl-sm bg-neutral-100 dark:bg-slate-700 px-4 py-2.5", children: _jsx(Span, { className: "text-sm opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? _jsx(Text, { className: "text-center text-sm text-red-500", children: labels?.errorLabel ?? "An error occurred. Please try again." }) : null, _jsx("div", { ref: messagesEndRef })] }), _jsx(Div, { className: "border-t border-neutral-200 dark:border-slate-700 p-3", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: labels?.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels?.sendingButton ?? "Sending..." : labels?.sendButton ?? "Send" })] }) })] }));
+}
+function renderCopilotHistoryPanel(props) {
+    const { historyQuery, conversationInput, setConversationInput, loadConversation, labels } = props;
+    return (_jsxs(Div, { className: "rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 space-y-3", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold", children: labels?.historyTitle ?? "Conversation History" }), _jsxs("form", { className: "space-y-2", onSubmit: (e) => { e.preventDefault(); if (!conversationInput.trim())
+                    return; loadConversation(conversationInput.trim()); }, children: [_jsx(Input, { label: labels?.conversationId ?? LBL_CONVERSATION_ID, value: conversationInput, onChange: (e) => setConversationInput(e.target.value), placeholder: "conv_..." }), _jsx(Button, { type: "submit", variant: "secondary", size: "sm", className: "w-full", children: labels?.loadConversation ?? "Load conversation" })] }), historyQuery.error ? (_jsx(Alert, { variant: "warning", title: "History unavailable", children: historyQuery.error instanceof Error ? historyQuery.error.message : "Could not load history" })) : null, _jsxs(Div, { className: "max-h-72 overflow-y-auto space-y-2", children: [(historyQuery.data?.messages ?? []).map((log, index) => (_jsxs(Div, { className: "rounded-lg border border-neutral-200 dark:border-slate-700 p-2", children: [_jsx(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: new Date(log.createdAt).toLocaleString() }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3}`, children: ["Q: ", log.prompt] }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3} text-neutral-600 dark:text-zinc-300`, children: ["A: ", log.response] })] }, `${log.createdAt}-${index}`))), !historyQuery.isLoading && (historyQuery.data?.messages?.length ?? 0) === 0 ? (_jsx(Text, { variant: "secondary", className: "text-sm", children: "No server history found for this conversation yet." })) : null] })] }));
+}
 export function AdminCopilotView({ endpoint, historyEndpoint = "/api/copilot/history", renderHeader, labels = {}, className = "", }) {
     const [input, setInput] = useState("");
     const [conversationInput, setConversationInput] = useState("");
@@ -34,11 +44,11 @@ export function AdminCopilotView({ endpoint, historyEndpoint = "/api/copilot/his
     };
     return (_jsx(StackedViewShell, { portal: "admin", title: labels.title ?? "AI Copilot", className: className, sections: [
             renderHeader ? (renderHeader(startNewConversation)) : (_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsx(Heading, { level: 2, children: labels.title ?? "AI Copilot" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: startNewConversation, children: labels.newConversation ?? "New Conversation" })] })),
-            _jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-4", children: [_jsxs(Div, { className: "flex flex-col rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 h-[calc(100vh-300px)]", children: [_jsx(Div, { className: "border-b border-neutral-200 dark:border-slate-700 p-3", children: _jsxs(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: [labels.conversationId ?? "Conversation ID", ": ", conversationId] }) }), _jsxs(Div, { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 ? (_jsxs(Div, { className: "flex flex-col items-center justify-center h-full text-center", children: [_jsx(Text, { className: "font-medium", children: labels.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "text-sm mt-1", children: labels.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => (_jsx(MessageBubble, { msg: msg }, msg.id))), isLoading ? (_jsx(Div, { className: "flex justify-start", children: _jsx(Div, { className: "rounded-2xl rounded-tl-sm bg-neutral-100 dark:bg-slate-700 px-4 py-2.5", children: _jsx(Span, { className: "text-sm opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? (_jsx(Text, { className: "text-center text-sm text-red-500", children: labels.errorLabel ?? "An error occurred. Please try again." })) : null, _jsx("div", { ref: messagesEndRef })] }), _jsx(Div, { className: "border-t border-neutral-200 dark:border-slate-700 p-3", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (event) => setInput(event.target.value), placeholder: labels.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels.sendingButton ?? "Sending..." : labels.sendButton ?? "Send" })] }) })] }), _jsxs(Div, { className: "rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 space-y-3", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold", children: labels.historyTitle ?? "Conversation History" }), _jsxs("form", { className: "space-y-2", onSubmit: (event) => {
+            _jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-4", children: [_jsxs(Div, { className: "flex flex-col rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 h-[calc(100vh-300px)]", children: [_jsx(Div, { className: "border-b border-neutral-200 dark:border-slate-700 p-3", children: _jsxs(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: [labels.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Div, { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 ? (_jsxs(Div, { className: "flex flex-col items-center justify-center h-full text-center", children: [_jsx(Text, { className: "font-medium", children: labels.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "text-sm mt-1", children: labels.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => (_jsx(MessageBubble, { msg: msg }, msg.id))), isLoading ? (_jsx(Div, { className: "flex justify-start", children: _jsx(Div, { className: "rounded-2xl rounded-tl-sm bg-neutral-100 dark:bg-slate-700 px-4 py-2.5", children: _jsx(Span, { className: "text-sm opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? (_jsx(Text, { className: "text-center text-sm text-red-500", children: labels.errorLabel ?? "An error occurred. Please try again." })) : null, _jsx("div", { ref: messagesEndRef })] }), _jsx(Div, { className: "border-t border-neutral-200 dark:border-slate-700 p-3", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (event) => setInput(event.target.value), placeholder: labels.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels.sendingButton ?? "Sending..." : labels.sendButton ?? "Send" })] }) })] }), _jsxs(Div, { className: "rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 space-y-3", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold", children: labels.historyTitle ?? "Conversation History" }), _jsxs("form", { className: "space-y-2", onSubmit: (event) => {
                                     event.preventDefault();
                                     if (!conversationInput.trim())
                                         return;
                                     loadConversation(conversationInput.trim());
-                                }, children: [_jsx(Input, { label: labels.conversationId ?? "Conversation ID", value: conversationInput, onChange: (event) => setConversationInput(event.target.value), placeholder: "conv_..." }), _jsx(Button, { type: "submit", variant: "secondary", size: "sm", className: "w-full", children: labels.loadConversation ?? "Load conversation" })] }), historyQuery.error ? (_jsx(Alert, { variant: "warning", title: "History unavailable", children: historyQuery.error instanceof Error ? historyQuery.error.message : "Could not load history" })) : null, _jsxs(Div, { className: "max-h-72 overflow-y-auto space-y-2", children: [(historyQuery.data?.messages ?? []).map((log, index) => (_jsxs(Div, { className: "rounded-lg border border-neutral-200 dark:border-slate-700 p-2", children: [_jsx(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: new Date(log.createdAt).toLocaleString() }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3}`, children: ["Q: ", log.prompt] }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3} text-neutral-600 dark:text-zinc-300`, children: ["A: ", log.response] })] }, `${log.createdAt}-${index}`))), !historyQuery.isLoading && (historyQuery.data?.messages?.length ?? 0) === 0 ? (_jsx(Text, { variant: "secondary", className: "text-sm", children: "No server history found for this conversation yet." })) : null] })] })] }),
+                                }, children: [_jsx(Input, { label: labels.conversationId ?? LBL_CONVERSATION_ID, value: conversationInput, onChange: (event) => setConversationInput(event.target.value), placeholder: "conv_..." }), _jsx(Button, { type: "submit", variant: "secondary", size: "sm", className: "w-full", children: labels.loadConversation ?? "Load conversation" })] }), historyQuery.error ? (_jsx(Alert, { variant: "warning", title: "History unavailable", children: historyQuery.error instanceof Error ? historyQuery.error.message : "Could not load history" })) : null, _jsxs(Div, { className: "max-h-72 overflow-y-auto space-y-2", children: [(historyQuery.data?.messages ?? []).map((log, index) => (_jsxs(Div, { className: "rounded-lg border border-neutral-200 dark:border-slate-700 p-2", children: [_jsx(Text, { className: "text-xs font-medium text-neutral-500 dark:text-zinc-400", children: new Date(log.createdAt).toLocaleString() }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3}`, children: ["Q: ", log.prompt] }), _jsxs(Text, { className: `text-sm mt-1 ${THEME_CONSTANTS.utilities.textClamp3} text-neutral-600 dark:text-zinc-300`, children: ["A: ", log.response] })] }, `${log.createdAt}-${index}`))), !historyQuery.isLoading && (historyQuery.data?.messages?.length ?? 0) === 0 ? (_jsx(Text, { variant: "secondary", className: "text-sm", children: "No server history found for this conversation yet." })) : null] })] })] }),
         ] }));
 }

package/dist/features/corporate/api/[id]/route.js

@@ -10,15 +10,18 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../contracts";
+const ERR_INQUIRY_ID_REQUIRED = "Inquiry ID is required";
+const ERR_DB_NOT_CONFIGURED = "Database provider not configured";
+const ERR_INTERNAL_SERVER_ERROR = "Internal server error";
 export async function GET(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Inquiry ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_INQUIRY_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("corporate_inquiries");
         const inquiry = await repo.findById(id);
         if (!inquiry) {
@@ -32,7 +35,7 @@ export async function GET(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -40,12 +43,12 @@ export async function PATCH(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Inquiry ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_INQUIRY_ID_REQUIRED }, { status: 400 });
         }
         const body = await request.json();
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("corporate_inquiries");
         const updated = await repo.update(id, body);
         if (!updated) {
@@ -59,7 +62,7 @@ export async function PATCH(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -67,11 +70,11 @@ export async function DELETE(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Inquiry ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_INQUIRY_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("corporate_inquiries");
         await repo.delete(id);
         return NextResponse.json({
@@ -82,7 +85,7 @@ export async function DELETE(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }

package/dist/features/corporate/components/CorporateInquiryForm.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button, Div, Input, Text, Textarea } from "../../../ui";
+const CLS_INPUT = "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm";
 export function CorporateInquiryForm({ onSubmit, isPending, }) {
     const [form, setForm] = React.useState({
         companyName: "",
@@ -32,5 +33,5 @@ export function CorporateInquiryForm({ onSubmit, isPending, }) {
         e.preventDefault();
         await onSubmit(form);
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsx(Input, { name: "companyName", type: "text", placeholder: "Company name", value: form.companyName, onChange: handleChange, required: true, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "contactPerson", type: "text", placeholder: "Contact person", value: form.contactPerson, onChange: handleChange, required: true, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "designation", type: "text", placeholder: "Designation (optional)", value: form.designation ?? "", onChange: handleChange, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "email", type: "email", placeholder: "Business email", value: form.email, onChange: handleChange, required: true, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "phone", type: "tel", placeholder: "Phone number", value: form.phone, onChange: handleChange, required: true, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "units", type: "number", placeholder: "Number of units", value: form.units, onChange: handleChange, min: 1, required: true, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "budgetPerUnit", type: "number", placeholder: "Budget per unit (optional)", value: form.budgetPerUnit ?? "", onChange: handleChange, min: 0, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Input, { name: "deliveryDateRequired", type: "date", placeholder: "Required by (optional)", value: form.deliveryDateRequired ?? "", onChange: handleChange, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" })] }), _jsxs(Div, { className: "flex items-center gap-2 text-sm text-neutral-700", children: [_jsx("input", { name: "customBranding", type: "checkbox", checked: form.customBranding, onChange: handleChange, className: "h-4 w-4 rounded border-neutral-300" }), _jsx(Text, { className: "text-sm text-neutral-700", children: "Custom branding required" })] }), _jsx(Textarea, { name: "message", placeholder: "Additional requirements (optional)", value: form.message ?? "", onChange: handleChange, rows: 4, className: "w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" }), _jsx(Button, { type: "submit", disabled: isPending, variant: "primary", className: "w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary/90 disabled:opacity-60", children: isPending ? "Submitting..." : "Submit Inquiry" })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsx(Input, { name: "companyName", type: "text", placeholder: "Company name", value: form.companyName, onChange: handleChange, required: true, className: CLS_INPUT }), _jsx(Input, { name: "contactPerson", type: "text", placeholder: "Contact person", value: form.contactPerson, onChange: handleChange, required: true, className: CLS_INPUT }), _jsx(Input, { name: "designation", type: "text", placeholder: "Designation (optional)", value: form.designation ?? "", onChange: handleChange, className: CLS_INPUT }), _jsx(Input, { name: "email", type: "email", placeholder: "Business email", value: form.email, onChange: handleChange, required: true, className: CLS_INPUT }), _jsx(Input, { name: "phone", type: "tel", placeholder: "Phone number", value: form.phone, onChange: handleChange, required: true, className: CLS_INPUT }), _jsx(Input, { name: "units", type: "number", placeholder: "Number of units", value: form.units, onChange: handleChange, min: 1, required: true, className: CLS_INPUT }), _jsx(Input, { name: "budgetPerUnit", type: "number", placeholder: "Budget per unit (optional)", value: form.budgetPerUnit ?? "", onChange: handleChange, min: 0, className: CLS_INPUT }), _jsx(Input, { name: "deliveryDateRequired", type: "date", placeholder: "Required by (optional)", value: form.deliveryDateRequired ?? "", onChange: handleChange, className: CLS_INPUT })] }), _jsxs(Div, { className: "flex items-center gap-2 text-sm text-neutral-700", children: [_jsx("input", { name: "customBranding", type: "checkbox", checked: form.customBranding, onChange: handleChange, className: "h-4 w-4 rounded border-neutral-300" }), _jsx(Text, { className: "text-sm text-neutral-700", children: "Custom branding required" })] }), _jsx(Textarea, { name: "message", placeholder: "Additional requirements (optional)", value: form.message ?? "", onChange: handleChange, rows: 4, className: CLS_INPUT }), _jsx(Button, { type: "submit", disabled: isPending, variant: "primary", className: "w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary/90 disabled:opacity-60", children: isPending ? "Submitting..." : "Submit Inquiry" })] }));
 }

package/dist/features/digital-codes/components/DigitalCodeFilters.d.ts

@@ -0,0 +1,12 @@
+import type { FacetOption } from "../../filters/FilterFacetSection";
+import type { UrlTable } from "../../filters/FilterPanel";
+import type { AsyncFacetSectionProps } from "../../filters/AsyncFacetSection";
+type LoadOptionsFn = AsyncFacetSectionProps["loadOptions"];
+export interface DigitalCodeFiltersProps {
+    table: UrlTable;
+    categoryOptions?: FacetOption[];
+    loadCategoryOptions?: LoadOptionsFn;
+    currencyPrefix?: string;
+}
+export declare function DigitalCodeFilters({ table, categoryOptions, loadCategoryOptions, currencyPrefix, }: DigitalCodeFiltersProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/digital-codes/components/DigitalCodeFilters.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterFacetSection } from "../../filters/FilterFacetSection";
+import { AsyncFacetSection } from "../../filters/AsyncFacetSection";
+import { RangeFilter } from "../../filters/RangeFilter";
+import { Div } from "../../../ui";
+const DELIVERY_OPTIONS = [
+    { value: "auto-claim", label: "Instant (auto-claim)" },
+    { value: "manual-email", label: "Manual (sent by seller)" },
+];
+export function DigitalCodeFilters({ table, categoryOptions = [], loadCategoryOptions, currencyPrefix = "₹", }) {
+    const selectedCategories = table.get("category")
+        ? table.get("category").split("|").filter(Boolean)
+        : [];
+    const selectedDelivery = table.get("deliveryMethod") ? [table.get("deliveryMethod")] : [];
+    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: "Category", loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: "Category", options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, _jsx(FilterFacetSection, { title: "Delivery Method", options: DELIVERY_OPTIONS, selected: selectedDelivery, onChange: (vals) => table.set("deliveryMethod", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: "Price per Code", minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 50000, step: 50, minPlaceholder: "Min price", maxPlaceholder: "Max price", defaultCollapsed: false })] }));
+}

package/dist/features/digital-codes/components/DigitalCodesIndexListing.d.ts

@@ -0,0 +1,4 @@
+export interface DigitalCodesIndexListingProps {
+    initialData?: any;
+}
+export declare function DigitalCodesIndexListing({ initialData }: DigitalCodesIndexListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/digital-codes/components/DigitalCodesIndexListing.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../../products/hooks/useProducts";
+import { BulkActionBar, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
+import { useAuthGate } from "../../../react/hooks/useAuthGate";
+import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
+import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
+import { pushWishlistOp } from "../../cart/utils/pending-ops";
+import { useCategoryTree, categoriesToFacetOptions } from "../../categories/hooks/useCategoryTree";
+import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+import { ROUTES } from "../../../next";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { DigitalCodeFilters } from "./DigitalCodeFilters";
+import { ACTION_ID } from "../../products/constants/action-defs";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
+const SORT_OPTIONS = [
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE, "ASC"), label: "Price: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE), label: "Price: High to Low" },
+];
+const FILTER_KEYS = [
+    TABLE_KEYS.CATEGORY,
+    TABLE_KEYS.DELIVERY_METHOD,
+    TABLE_KEYS.MIN_PRICE,
+    TABLE_KEYS.MAX_PRICE,
+];
+export function DigitalCodesIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
+    const { showToast } = useToast();
+    const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
+    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    const localWishlist = useGuestWishlist();
+    const { categories } = useCategoryTree();
+    const categoryOptions = categoriesToFacetOptions(categories);
+    const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "digital-code").map((i) => i.itemId));
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const openFilters = useCallback(() => {
+        onFilterReset();
+        setFilterOpen(true);
+    }, [onFilterReset]);
+    const applyFilters = useCallback(() => {
+        onFilterApply();
+        setFilterOpen(false);
+    }, [onFilterApply]);
+    const resetAll = useCallback(() => {
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "" });
+        onFilterClear();
+        setSearchInput("");
+    }, [table, onFilterClear]);
+    const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
+        table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
+        filterActiveCount > 0;
+    const params = {
+        q: table.get(TABLE_KEYS.QUERY) || undefined,
+        category: table.get(TABLE_KEYS.CATEGORY) || undefined,
+        minPrice: table.get(TABLE_KEYS.MIN_PRICE) ? Number(table.get(TABLE_KEYS.MIN_PRICE)) : undefined,
+        maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
+        sort: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT,
+        page: table.getNumber(TABLE_KEYS.PAGE, 1),
+        perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
+        listingType: "digital-code",
+    };
+    const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const commitSearch = useCallback(() => {
+        table.set(TABLE_KEYS.QUERY, searchInput.trim());
+    }, [searchInput, table]);
+    const selection = useBulkSelection({ items: products, keyExtractor: (p) => p.id });
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const wishlistActions = {
+        addToWishlist: (productId) => {
+            requireAuth(ACTION_ID.ADD_TO_WISHLIST, () => {
+                localWishlist.add(productId, "digital-code");
+                pushWishlistOp({ op: "add", itemId: productId, type: "digital-code" });
+                showToast("Added to wishlist", "success");
+            });
+            return Promise.resolve();
+        },
+        removeFromWishlist: (productId) => {
+            requireAuth(ACTION_ID.REMOVE_FROM_WISHLIST, () => {
+                localWishlist.remove(productId, "digital-code");
+                pushWishlistOp({ op: "remove", itemId: productId, type: "digital-code" });
+                showToast("Removed from wishlist", "info");
+            });
+            return Promise.resolve();
+        },
+        isWishlisted: (productId) => wishlistedIds.has(productId),
+    };
+    function handleToggleWishlist(id) {
+        if (wishlistActions.isWishlisted(id)) {
+            wishlistActions.removeFromWishlist(id);
+        }
+        else {
+            wishlistActions.addToWishlist(id);
+        }
+    }
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search digital codes\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
+                    commitSearch(); }, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: (v) => { if (v !== "table")
+                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No digital code listings found." })) : (_jsx("div", { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.DIGITAL_CODE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(DigitalCodeFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+}

package/dist/features/digital-codes/components/DigitalCodesListView.d.ts

@@ -0,0 +1,6 @@
+type SearchParams = Record<string, string | string[]>;
+export interface DigitalCodesListViewProps {
+    searchParams?: SearchParams;
+}
+export declare function DigitalCodesListView({ searchParams }: DigitalCodesListViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};