@mohasinac/appkit 2.6.6 → 2.6.7

package/dist/client.d.ts

@@ -151,8 +151,8 @@ export type { SellerDashboardViewProps as StoreDashboardViewProps, SellerDashboa
 export { SellerPayoutSettingsView, SellerShippingView, SellerReviewsView, SellerPayoutRequestView, SellerAnalyticsStats, SellerTopProducts, SellerAnalyticsView, SellerPayoutsView, SellerCouponEditorView, SellerBidsView, SellerAddressesView, SellerPreOrdersView, SellerPrizeDrawsView } from "./features/seller/components/index";
 export type { SellerPayoutSettingsViewProps, SellerShippingViewProps, SellerReviewsViewProps, SellerPayoutRequestViewProps, SellerAnalyticsViewProps, SellerPayoutsViewProps, SellerCouponEditorViewProps, CouponEditorDraft, SellerBidsViewProps, SellerAddressesViewProps, SellerPreOrdersViewProps, SellerPrizeDrawsViewProps } from "./features/seller/components/index";
 export type { SellerAnalyticsSummary, SellerAnalyticsTopProduct } from "./features/seller/types/index";
-export { UserAccountHubView, UserOrdersView, OrderDetailView, UserNotificationsView, UserReturnsView } from "./features/account/index";
-export type { UserAccountHubViewProps, UserAccountHubViewLabels, UserOrdersViewProps, UserOrdersViewLabels, OrderDetailViewProps, OrderDetailViewLabels, UserNotificationsViewProps, UserNotificationsViewLabels, UserReturnsViewProps, UserReturnsViewLabels } from "./features/account/index";
+export { UserAccountHubView, UserOrdersView, OrderDetailView, UserNotificationsView, UserReturnsView, UserSupportView } from "./features/account/index";
+export type { UserAccountHubViewProps, UserAccountHubViewLabels, UserOrdersViewProps, UserOrdersViewLabels, OrderDetailViewProps, OrderDetailViewLabels, UserNotificationsViewProps, UserNotificationsViewLabels, UserReturnsViewProps, UserReturnsViewLabels, UserSupportViewProps } from "./features/account/index";
 export { useOrders, useOrder, OrdersList } from "./features/orders/index";
 export { useCouponValidate } from "./features/promotions/hooks/useCouponValidate";
 export { BlogPostView } from "./features/blog/components/BlogPostView";

package/dist/client.js

@@ -181,7 +181,7 @@ export { SellerOffersPanel } from "./features/seller/components/SellerOffersPane
 export { UserOffersPanel } from "./features/account/components/UserOffersPanel";
 export { SellerDashboardView as StoreDashboardView, SellerDashboardView, useSellerDashboard as useStoreDashboard, useSellerDashboard } from "./features/seller/index";
 export { SellerPayoutSettingsView, SellerShippingView, SellerReviewsView, SellerPayoutRequestView, SellerAnalyticsStats, SellerTopProducts, SellerAnalyticsView, SellerPayoutsView, SellerCouponEditorView, SellerBidsView, SellerAddressesView, SellerPreOrdersView, SellerPrizeDrawsView } from "./features/seller/components/index";
-export { UserAccountHubView, UserOrdersView, OrderDetailView, UserNotificationsView, UserReturnsView } from "./features/account/index";
+export { UserAccountHubView, UserOrdersView, OrderDetailView, UserNotificationsView, UserReturnsView, UserSupportView } from "./features/account/index";
 export { useOrders, useOrder, OrdersList } from "./features/orders/index";
 export { useCouponValidate } from "./features/promotions/hooks/useCouponValidate";
 export { BlogPostView } from "./features/blog/components/BlogPostView";

package/dist/features/account/components/UserSupportView.d.ts

@@ -0,0 +1,3 @@
+export interface UserSupportViewProps {
+}
+export declare function UserSupportView(_props: UserSupportViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/account/components/UserSupportView.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Div, FormActions, Select, SideDrawer, Text, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { SUPPORT_ENDPOINTS } from "../../../constants/api-endpoints";
+// --- Constants ---------------------------------------------------------------
+const CATEGORY_OPTIONS = [
+    { label: "Order Issue", value: "order_issue" },
+    { label: "Billing / Payment", value: "billing_payment" },
+    { label: "Account", value: "account" },
+    { label: "Listing Dispute", value: "listing_dispute" },
+    { label: "Refund Request", value: "refund_request" },
+    { label: "Auction Dispute", value: "auction_dispute" },
+    { label: "General", value: "general" },
+];
+const STATUS_BADGE = {
+    open: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300",
+    in_progress: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300",
+    waiting_on_user: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300",
+    resolved: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300",
+    closed: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
+};
+const ROLE_LABEL = {
+    user: "You",
+    support: "Support",
+    admin: "Admin",
+};
+export function UserSupportView(_props) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [detailOpen, setDetailOpen] = useState(false);
+    const [selectedTicket, setSelectedTicket] = useState(null);
+    const [newTicketOpen, setNewTicketOpen] = useState(false);
+    // New ticket form state
+    const [newSubject, setNewSubject] = useState("");
+    const [newCategory, setNewCategory] = useState("general");
+    const [newDescription, setNewDescription] = useState("");
+    const [newOrderId, setNewOrderId] = useState("");
+    // Reply state
+    const [replyBody, setReplyBody] = useState("");
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["user", "support-tickets"],
+        queryFn: () => apiClient.get(SUPPORT_ENDPOINTS.TICKETS),
+    });
+    const tickets = data?.tickets ?? [];
+    const invalidate = () => queryClient.invalidateQueries({ queryKey: ["user", "support-tickets"] });
+    const createMutation = useMutation({
+        mutationFn: async () => {
+            await apiClient.post(SUPPORT_ENDPOINTS.TICKETS, {
+                subject: newSubject.trim(),
+                category: newCategory,
+                description: newDescription.trim(),
+                orderId: newOrderId.trim() || undefined,
+            });
+        },
+        onSuccess: () => {
+            showToast("Support ticket created.", "success");
+            setNewTicketOpen(false);
+            setNewSubject("");
+            setNewCategory("general");
+            setNewDescription("");
+            setNewOrderId("");
+            invalidate();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to create ticket.", "error");
+        },
+    });
+    const replyMutation = useMutation({
+        mutationFn: async () => {
+            await apiClient.post(SUPPORT_ENDPOINTS.TICKET_MESSAGES(selectedTicket.id), { body: replyBody.trim() });
+        },
+        onSuccess: () => {
+            showToast("Reply sent.", "success");
+            setReplyBody("");
+            invalidate();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to send reply.", "error");
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "mx-auto max-w-2xl px-4 py-6", children: [_jsxs(Div, { className: "mb-4 flex items-center justify-between", children: [_jsx(Text, { className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: "Support Tickets" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setNewTicketOpen(true), children: "New ticket" })] }), isLoading && (_jsx(Div, { className: "space-y-3", children: [1, 2, 3].map((i) => (_jsx("div", { className: "h-16 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" }, i))) })), error && (_jsx(Div, { className: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: "Failed to load support tickets." })), !isLoading && tickets.length === 0 && (_jsx(Div, { className: "rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-10 text-center dark:border-zinc-700 dark:bg-zinc-900/40", children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "You haven't opened any support tickets yet." }) })), _jsx("ul", { className: "space-y-3", children: tickets.map((ticket) => (_jsx("li", { children: _jsx("button", { type: "button", className: "w-full rounded-xl border border-zinc-200 bg-white p-4 text-left shadow-sm hover:border-primary-300 transition-colors dark:border-zinc-700 dark:bg-zinc-900", onClick: () => {
+                                    setSelectedTicket(ticket);
+                                    setDetailOpen(true);
+                                }, children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-medium text-zinc-900 dark:text-zinc-100 truncate", children: ticket.subject }), _jsxs("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [ticket.category.replace(/_/g, " "), ticket.orderId ? ` · Order: ${ticket.orderId}` : ""] })] }), _jsx("span", { className: `shrink-0 inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_BADGE[ticket.status] ?? STATUS_BADGE.open}`, children: ticket.status.replace(/_/g, " ") })] }) }) }, ticket.id))) })] }), _jsx(SideDrawer, { isOpen: newTicketOpen, onClose: () => setNewTicketOpen(false), title: "Open a support ticket", children: _jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: newCategory, onValueChange: setNewCategory }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Subject" }), _jsx("input", { type: "text", value: newSubject, onChange: (e) => setNewSubject(e.target.value), placeholder: "Brief description of the issue", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), newCategory === "order_issue" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Order ID" }), _jsx("input", { type: "text", value: newOrderId, onChange: (e) => setNewOrderId(e.target.value), placeholder: "e.g. order-3-20260508-a1b2c3", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Description" }), _jsx("textarea", { value: newDescription, onChange: (e) => setNewDescription(e.target.value), rows: 4, placeholder: "Describe the issue in detail\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => setNewTicketOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", isLoading: createMutation.isPending, disabled: !newSubject.trim() || !newDescription.trim() || createMutation.isPending, onClick: () => createMutation.mutate(), children: "Submit ticket" })] })] }) }), _jsx(SideDrawer, { isOpen: detailOpen, onClose: () => setDetailOpen(false), title: selectedTicket?.subject ?? "Ticket", children: selectedTicket && (_jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsxs(Div, { className: "flex flex-wrap gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_BADGE[selectedTicket.status] ?? STATUS_BADGE.open}`, children: selectedTicket.status.replace(/_/g, " ") }), _jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: selectedTicket.category.replace(/_/g, " ") }), selectedTicket.orderId && (_jsxs("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: ["Order: ", selectedTicket.orderId] }))] }), selectedTicket.description && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [_jsx(Text, { className: "mb-1 text-xs font-semibold text-zinc-500 uppercase tracking-wide", children: "Your description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: selectedTicket.description })] })), (selectedTicket.messages ?? []).length > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold text-zinc-500 uppercase tracking-wide", children: "Messages" }), _jsx("div", { className: "space-y-2 max-h-72 overflow-y-auto", children: (selectedTicket.messages ?? []).map((msg, i) => (_jsxs("div", { className: `rounded-lg p-3 text-sm ${msg.authorRole === "user"
+                                            ? "bg-zinc-50 border border-zinc-200 dark:bg-zinc-900/40 dark:border-zinc-700"
+                                            : "bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800"}`, children: [_jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-zinc-400 dark:text-zinc-500", children: [_jsx("span", { className: "font-medium text-zinc-600 dark:text-zinc-300", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && (_jsx("span", { children: new Date(msg.createdAt).toLocaleString() }))] }), _jsx("p", { className: "whitespace-pre-wrap text-zinc-700 dark:text-zinc-200", children: msg.body })] }, msg.id ?? i))) })] })), selectedTicket.status !== "closed" && selectedTicket.status !== "resolved" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Reply" }), _jsx("textarea", { value: replyBody, onChange: (e) => setReplyBody(e.target.value), rows: 3, placeholder: "Add a message to your ticket\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }))] })) })] }));
+}

package/dist/features/account/components/index.d.ts

@@ -38,3 +38,5 @@ export { UserOrderTrackView } from "./UserOrderTrackView";
 export type { UserOrderTrackViewProps, UserOrderTrackViewLabels, } from "./UserOrderTrackView";
 export { UserReturnsView } from "./UserReturnsView";
 export type { UserReturnsViewProps, UserReturnsViewLabels, } from "./UserReturnsView";
+export { UserSupportView } from "./UserSupportView";
+export type { UserSupportViewProps } from "./UserSupportView";

package/dist/features/account/components/index.js

@@ -18,3 +18,4 @@ export { ChatWindow } from "./ChatWindow";
 export { BecomeSellerView } from "./BecomeSellerView";
 export { UserOrderTrackView } from "./UserOrderTrackView";
 export { UserReturnsView } from "./UserReturnsView";
+export { UserSupportView } from "./UserSupportView";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "license": "MIT",
   "publishConfig": {
     "access": "public"