@mohasinac/appkit 4.7.1 → 4.7.3

package/dist/_internal/client/features/layout/DashboardLayoutClient.js

@@ -22,8 +22,9 @@ import { normalizeError } from "../../../../errors/normalize";
  * the underlying *Sidebar components.
  */
 import { useCallback, useEffect, useState, startTransition } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import Link from "next/link";
+import { useQueryClient } from "@tanstack/react-query";
 import { useDashboardNav } from "../../../../features/layout/DashboardNavContext";
 import { AdminSidebar } from "../../../../features/admin/components/AdminSidebar";
 import { StoreSidebar } from "../../../../features/seller/components/SellerSidebar";
@@ -33,7 +34,10 @@ import { filterNavItems } from "./filterNavItems";
 import { useSiteSettings } from "../../../../core/hooks/useSiteSettings";
 import { useTheme } from "../../theme";
 import { BackgroundRenderer, Div, Nav, Span } from "../../../../ui";
+import { useToast } from "../../../../ui/components/Toast";
 import { useVisualViewportInset } from "../../../../react/hooks/useVisualViewportInset";
+import { useSession } from "../../../../react/contexts/SessionContext";
+import { ROUTES } from "../../../../next/routing/route-map";
 /**
  * Hoisted drawer-state hook — the matchMedia-aware open/close logic that was
  * triplicated across admin/store/user layouts. Used internally by
@@ -153,6 +157,24 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
     const storageKey = `appkit:sidebar-open:${variant}`;
     const { desktopOpen, mobileOpen, close, closeMobile, toggle } = useResponsiveDrawer(storageKey);
     useEffect(() => { closeMobile(); }, [pathname, closeMobile]);
+    const router = useRouter();
+    const { signOut } = useSession();
+    const { showToast } = useToast();
+    const queryClient = useQueryClient();
+    const handleLogout = useCallback(async () => {
+        try {
+            await signOut();
+            void queryClient.invalidateQueries({ queryKey: ["wishlist"] });
+            void queryClient.invalidateQueries({ queryKey: ["cart"] });
+            void queryClient.invalidateQueries({ queryKey: ["notifications"] });
+            showToast("Signed out successfully", "info");
+        }
+        catch (_err) {
+            void normalizeError(_err);
+            showToast("Signed out", "info");
+        }
+        router.push(String(ROUTES.AUTH.LOGIN));
+    }, [signOut, queryClient, router, showToast]);
     const { data: settings } = useSiteSettings();
     const navConfig = settings?.navConfig;
     const { theme } = useTheme();
@@ -166,10 +188,8 @@ export function DashboardLayoutClient({ variant, groups, permissions, activeHref
         ? filteredGroups
         : groups;
     const crossNavLinkClass = "flex items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]/60 hover:text-[var(--appkit-color-text)] transition-colors";
-    const hasCrossNav = Boolean(crossNav?.profileHref || crossNav?.storeHref || crossNav?.adminHref);
-    const renderCrossNavFooter = hasCrossNav
-        ? () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" }))] }))
-        : undefined;
+    const logoutBtnClass = "flex w-full items-center gap-[var(--appkit-space-2)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium text-error transition-colors hover:bg-error-surface hover:text-error";
+    const renderCrossNavFooter = () => (_jsxs(Nav, { "aria-label": "Cross-dashboard links", padding: "y-xs", children: [crossNav?.storeHref && (_jsx(Link, { href: crossNav.storeHref, onClick: closeMobile, className: crossNavLinkClass, children: "Go to my Store" })), crossNav?.adminHref && (_jsx(Link, { href: crossNav.adminHref, onClick: closeMobile, className: crossNavLinkClass, children: "Back to Admin" })), crossNav?.profileHref && (_jsx(Link, { href: crossNav.profileHref, onClick: closeMobile, className: crossNavLinkClass, children: "My Profile" })), _jsx("button", { type: "button", onClick: () => { closeMobile(); void handleLogout(); }, className: logoutBtnClass, children: "Log out" })] }));
     return (_jsxs(_Fragment, { children: [hasBackground && (_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: resolvedLightBackground ?? { type: "color", value: "" }, darkMode: resolvedDarkBackground ?? { type: "color", value: "" } })), variant === "admin" && (_jsx(AdminSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activePath: activeHref, groups: adminGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "store" && (_jsx(StoreSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, activeHref: activeHref, items: [], groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), variant === "user" && (_jsx(UserSidebar, { variant: "sidebar", desktopOpen: desktopOpen, mobileOpen: mobileOpen, items: filteredGroups.flatMap((g) => g.items), groups: filteredGroups, onCloseMobile: close, onToggle: toggle, className: className, renderFooter: renderCrossNavFooter })), _jsx(Div, { className: [
                     "w-full flex-1 flex flex-col min-h-[calc(100dvh-var(--header-height,3.5rem))]",
                     "pb-[var(--appkit-space-16)] lg:pb-[0]", // clears the fixed mobile bottom-nav

package/dist/features/auth/checkout-value-otp.d.ts

@@ -35,7 +35,13 @@ export interface CheckoutValueOtpDoc {
 }
 /**
  * Enforce the per-user send rate-limit.
- * Throws AuthorizationError("checkoutValueOtpRateLimit") when throttled.
+ * Throws AuthorizationError with a user-facing "already sent, retry in N
+ * minutes" message when throttled — root-caused 2026-08-20: this used to
+ * throw the bare internal string "checkoutValueOtpRateLimit", which the
+ * client showed verbatim in a toast. A buyer who retried "Send code"
+ * within the cooldown (e.g. after not seeing the first email land) saw a
+ * cryptic error instead of being told a code was already on its way,
+ * making the whole feature look broken.
  */
 export declare function enforceCheckoutValueOtpRateLimit(db: Db, uid: string): Promise<void>;
 /** Build the checkout-value OTP WhatsApp/SMS message body. */

package/dist/features/auth/checkout-value-otp.js

@@ -51,7 +51,13 @@ export function checkoutValueOtpRateLimitRef(db, uid) {
 }
 /**
  * Enforce the per-user send rate-limit.
- * Throws AuthorizationError("checkoutValueOtpRateLimit") when throttled.
+ * Throws AuthorizationError with a user-facing "already sent, retry in N
+ * minutes" message when throttled — root-caused 2026-08-20: this used to
+ * throw the bare internal string "checkoutValueOtpRateLimit", which the
+ * client showed verbatim in a toast. A buyer who retried "Send code"
+ * within the cooldown (e.g. after not seeing the first email land) saw a
+ * cryptic error instead of being told a code was already on its way,
+ * making the whole feature look broken.
  */
 export async function enforceCheckoutValueOtpRateLimit(db, uid) {
     const metaRef = checkoutValueOtpRateLimitRef(db, uid);
@@ -63,7 +69,8 @@ export async function enforceCheckoutValueOtpRateLimit(db, uid) {
         const lastSentMs = resolveDate(meta?.lastSentAt)?.getTime() ?? 0;
         const elapsed = Date.now() - lastSentMs;
         if (elapsed < CHECKOUT_VALUE_OTP_COOLDOWN_MS) {
-            throw new AuthorizationError("checkoutValueOtpRateLimit");
+            const remainingMinutes = Math.max(1, Math.ceil((CHECKOUT_VALUE_OTP_COOLDOWN_MS - elapsed) / 60000));
+            throw new AuthorizationError(`We already sent a code — check your inbox (and spam folder). You can request a new one in ${remainingMinutes} minute${remainingMinutes === 1 ? "" : "s"}.`);
         }
         tx.set(metaRef, { lastSentAt: new Date() }, { merge: true });
     });

package/dist/features/cart/components/CartDrawer.js

@@ -12,8 +12,8 @@ const __O = {
 };
 const CLS_REMOVE_BTN = "self-start text-[var(--appkit-color-text-faint)] transition hover:text-error";
 export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock = false }) {
-    return (_jsxs(Div, { layout: "flex", gap: "4", surface: "card", padding: "sm", className: `transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `relative h-20 w-20 flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx(MediaImage, { src: item.meta.image, alt: item.meta.title, size: "thumbnail" })) }), _jsxs(Stack, { justify: "between", className: "flex-1", children: [_jsxs(Row, { gap: "xs", className: "", align: "start", children: [href ? (_jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", weight: "medium", className: "text-[var(--appkit-color-text)] hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
-                        Object.keys(item.meta.attributes).length > 0 && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: Object.entries(item.meta.attributes)
+    return (_jsxs(Div, { layout: "flex", gap: "4", surface: "card", padding: "sm", className: `transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `relative h-20 w-20 flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx(MediaImage, { src: item.meta.image, alt: item.meta.title, size: "thumbnail" })) }), _jsxs(Stack, { justify: "between", className: "flex-1 min-w-0", children: [_jsxs(Row, { gap: "xs", className: "", align: "start", children: [href ? (_jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", weight: "medium", className: "text-[var(--appkit-color-text)] hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
+                        Object.keys(item.meta.attributes).length > 0 && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", truncate: 1, children: Object.entries(item.meta.attributes)
                             .map(([k, v]) => `${k}: ${v}`)
                             .join(", ") })), _jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: formatCurrency(item.meta.price * item.quantity, item.meta.currency) }), onQtyChange && !isOutOfStock && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity - 1), disabled: item.quantity <= 1, variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)] disabled:opacity-40", children: "\u2212" }), _jsx(Span, { size: "sm", className: "min-w-[1.5rem]", align: "center", children: item.quantity }), _jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity + 1), variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)]", children: "+" })] })), isOutOfStock && (_jsxs(Span, { size: "xs", color: "muted", children: ["Qty: ", item.quantity] }))] })] }), onRemove && (_jsx(Button, { onClick: () => onRemove(item.id), variant: "ghost", size: "sm", "aria-label": ACTIONS.CART["remove-item"].ariaLabel, className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
 }

package/dist/features/checkout/actions/checkout-value-otp-actions.js

@@ -32,7 +32,7 @@ export async function sendCheckoutValueOtp(userId, userEmail) {
     const maskedEmail = domain
         ? `${local.length <= 2 ? "*".repeat(local.length) : local[0] + "*".repeat(local.length - 2) + local[local.length - 1]}@${domain}`
         : "***";
-    await sendEmail({
+    const { error } = await sendEmail({
         to: userEmail,
         subject: `${siteName}: Verify your order`,
         html: `
@@ -44,6 +44,17 @@ export async function sendCheckoutValueOtp(userId, userEmail) {
       </div>
     `,
     });
+    if (error) {
+        // Root-caused 2026-08-20: this used to be fire-and-forget — the
+        // Firestore OTP doc was written and the caller always got back a
+        // success response ("code sent") regardless of whether the email
+        // actually went out. Any Resend-side failure (bad API key,
+        // unverified sending domain, outage) silently stranded the buyer
+        // with a checkout they could never complete, since the OTP gate
+        // gave no indication anything had gone wrong.
+        serverLogger.error("Failed to send checkout value OTP email", { uid: userId, error });
+        throw new ValidationError("We couldn't send the verification code — please try again in a moment, or contact support if this keeps happening.");
+    }
     serverLogger.info(`Checkout value OTP sent: uid=${userId}`);
     return { maskedEmail };
 }

package/package.json

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