@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/features/classified/components/ClassifiedDetailPageView.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { getClassifiedForDetail } from "../../../_internal/server/features/classified/data";
+import { startClassifiedConversationAction } from "../../../_internal/server/features/classified/actions";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_CLASSIFIED_BADGE = "inline-block rounded-full bg-cyan-100 dark:bg-cyan-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-cyan-700 dark:text-cyan-300";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Container, Div, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, Dl, Dt, Dd, } from "../../../ui";
+import { PreOrderDetailView } from "../../products/components/PreOrderDetailView";
+import { ProductGalleryClient } from "../../products/components/ProductGalleryClient";
+import { ProductTabsShell } from "../../products/components/ProductTabsShell";
+import { CustomSectionTabContent } from "../../products/components/CustomSectionTabContent";
+import { ShareButton } from "../../products/components/ShareButton";
+import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
+import { computeRelatedItems } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
+import { ClassifiedContactSellerPanel } from "./ClassifiedContactSellerPanel";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+export async function ClassifiedDetailPageView({ slug, initialProduct }) {
+    const product = initialProduct !== undefined
+        ? (initialProduct ?? undefined)
+        : await getClassifiedForDetail(slug).catch(() => undefined);
+    if (!product) {
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "start", gap: "md", className: "text-left", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: "Classified Listing Not Found" }), _jsx(Text, { color: "muted", children: "The classified listing you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Classifieds" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Classified Listing");
+    const price = typeof p.price === "number" ? p.price : null;
+    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    const meta = product.classified;
+    const location = meta?.meetupArea ? [meta.meetupArea.locality, meta.meetupArea.city].filter(Boolean).join(", ") : null;
+    const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
+    const categoryName = Array.isArray(p.categoryNames) && p.categoryNames.length > 0 ? String(p.categoryNames[0]) : (typeof p.categoryName === "string" ? p.categoryName : null);
+    const brand = typeof p.brand === "string" ? p.brand : undefined;
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const safeSeller = storeName ? safeDisplayName(storeName, "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
+    const specs = Array.isArray(p.specifications) ? p.specifications : [];
+    const customSections = Array.isArray(p.customSections) ? p.customSections : [];
+    const descriptionHtml = toDescriptionHtml(p.description);
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups] = await Promise.all([
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
+    ]);
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+                    title,
+                    thumb: images[0],
+                    price: price ?? undefined,
+                    storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                    storeName: storeName ?? undefined,
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: CLS_BREADCRUMB_LINK, children: "Classifieds" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_CLASSIFIED_BADGE, children: "Classified" }), meta?.negotiable && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Negotiable" })), meta?.acceptsShipping && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Shipping available" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), location && (_jsxs(Row, { color: "muted", textSize: "sm", align: "center", gap: "xs", children: [_jsx(Span, { children: "\uD83D\uDCCD" }), _jsx(Span, { children: location }), meta?.meetupArea?.pincode && _jsxs(Span, { children: ["\u00B7 ", meta.meetupArea.pincode] })] })), meta?.contactMethod && (_jsxs(Text, { size: "xs", color: "muted", children: ["Contact via: ", meta.contactMethod === "both" ? "chat or phone" : meta.contactMethod] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, customTabs: customSections.map((s) => ({
+                                id: s.id,
+                                label: s.title,
+                                content: _jsx(CustomSectionTabContent, { section: s }),
+                            })) })), renderBuyBar: () => (_jsx(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: _jsx(ClassifiedContactSellerPanel, { productId: String(product.id), onContactSeller: startClassifiedConversationAction }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) })] })] }));
+}

package/dist/features/contact/components/ContactForm.js

@@ -1,8 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useState, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
+import { z } from "zod";
 import { Button, Div, Form, Heading, Input, Span, Stack, Text, Textarea } from "../../../ui";
+import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
+const contactFormSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    email: z.string().email("Enter a valid email address"),
+    subject: z.string().min(1, "Subject is required"),
+    message: z.string().min(10, "Message must be at least 10 characters"),
+});
 const CLS_FIELD_ERROR = "text-error";
 const CLS_ERROR_BANNER = "rounded-lg bg-error-surface dark:bg-error-surface border border-error dark:border-error px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] text-error dark:text-error";
 const INITIAL_FORM = {
@@ -17,6 +25,11 @@ export function ContactForm({ onSubmit, labels = {}, className = "", }) {
     const [submitted, setSubmitted] = useState(false);
     const [errors, setErrors] = useState({});
     const [submitError, setSubmitError] = useState(null);
+    const { shellCtx, validate: validateSchema } = useFormShellState(contactFormSchema);
+    useEffect(() => {
+        validateSchema(form);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [form, validateSchema]);
     const validate = () => {
         const newErrors = {};
         if (!form.name.trim())
@@ -56,7 +69,7 @@ export function ContactForm({ onSubmit, labels = {}, className = "", }) {
         return (_jsxs(Div, { className: `text-center ${className}`, padding: "y-3xl", children: [_jsx(Div, { textSize: "5xl", className: "mb-4", children: "\u2705" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.successTitle ?? "Message Sent!" }), _jsx(Text, { variant: "secondary", className: "mb-6", children: labels.successDescription ?? "We'll get back to you shortly." }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setSubmitted(false), children: labels.sendAnotherButton ?? "Send another message" })] }));
     }
     const field = (id, label, placeholder, multiline) => (_jsxs(Stack, { gap: "xs", children: [_jsx("label", { htmlFor: id, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)]", children: label }), multiline ? (_jsx(Textarea, { id: id, value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, rows: 5, className: "w-full rounded-lg border border-neutral-200 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] outline-none focus:ring-2 ring-primary/20 transition" })) : (_jsx(Input, { id: id, type: id === "email" ? "email" : "text", value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, className: "h-10" })), errors[id] && _jsx(Span, { size: "xs", className: CLS_FIELD_ERROR, children: errors[id] })] }));
-    return (_jsxs(Form, { onSubmit: handleSubmit, noValidate: true, className: className, spacing: "md", children: [_jsx(Heading, { level: 2, className: "mb-6", children: labels.title ?? "Send us a message" }), submitError && (_jsx(Div, { className: CLS_ERROR_BANNER, children: submitError })), field("name", labels.nameLabel ?? "Your Name", labels.namePlaceholder ?? "Enter your name"), field("email", labels.emailLabel ?? "Email", labels.emailPlaceholder ?? "your@email.com"), field("subject", labels.subjectLabel ?? "Subject", labels.subjectPlaceholder ?? "How can we help?"), field("message", labels.messageLabel ?? "Message", labels.messagePlaceholder ?? "Tell us more…", true), _jsx(Button, { type: "submit", variant: "primary", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting
-                    ? (labels.submittingButton ?? "Sending…")
-                    : (labels.submitButton ?? "Send Message") })] }));
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Form, { onSubmit: handleSubmit, noValidate: true, className: className, spacing: "md", children: [_jsx(Heading, { level: 2, className: "mb-6", children: labels.title ?? "Send us a message" }), submitError && (_jsx(Div, { className: CLS_ERROR_BANNER, children: submitError })), field("name", labels.nameLabel ?? "Your Name", labels.namePlaceholder ?? "Enter your name"), field("email", labels.emailLabel ?? "Email", labels.emailPlaceholder ?? "your@email.com"), field("subject", labels.subjectLabel ?? "Subject", labels.subjectPlaceholder ?? "How can we help?"), field("message", labels.messageLabel ?? "Message", labels.messagePlaceholder ?? "Tell us more…", true), _jsx(FormErrorSummary, {}), _jsx(Button, { type: "submit", variant: "primary", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting
+                        ? (labels.submittingButton ?? "Sending…")
+                        : (labels.submitButton ?? "Send Message") })] }) }));
 }

package/dist/features/contact/components/ContactPageView.js

@@ -27,8 +27,14 @@ export function ContactPageView() {
                                             {
                                                 icon: "💬",
                                                 label: "WhatsApp",
-                                                value: "+91 70000 00000",
-                                                href: "https://wa.me/917000000000",
+                                                value: "+91 89196 65811",
+                                                href: "https://wa.me/918919665811",
+                                            },
+                                            {
+                                                icon: "👥",
+                                                label: "WhatsApp Community",
+                                                value: "Join the group",
+                                                href: "https://chat.whatsapp.com/JOlbdSwhVWYDKujolcBZDr",
                                             },
                                         ], labels: {
                                             title: "Support",

package/dist/features/contact/email.d.ts

@@ -6,6 +6,7 @@ type SendEmailOptions = Record<string, JsonValue> & {
     html?: string;
     text?: string;
     from?: string;
+    cc?: string | string[];
     replyTo?: string;
 };
 export declare function sendEmail(opts: SendEmailOptions): Promise<{

package/dist/features/contact/email.js

@@ -33,6 +33,9 @@ export async function sendEmail(opts) {
             html: typeof opts.html === "string" ? opts.html : "",
             text: typeof opts.text === "string" ? opts.text : undefined,
             from: typeof opts.from === "string" ? opts.from : undefined,
+            cc: typeof opts.cc === "string" || Array.isArray(opts.cc)
+                ? opts.cc
+                : undefined,
             replyTo: typeof opts.replyTo === "string" ? opts.replyTo : undefined,
             headers: typeof opts.headers === "object" && opts.headers
                 ? opts.headers

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

@@ -0,0 +1,19 @@
+import type { ProductDocument } from "../../products/schemas/firestore";
+export interface DigitalCodeDetailPageViewProps {
+    slug: string;
+    /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
+    initialProduct?: ProductDocument | null;
+    /** Render-prop for the buy bar (Add to Cart / Buy Now / Wishlist) — wired by the page shim, same component standard products use. */
+    renderPrimaryActions?: (ctx: {
+        productId: string;
+        productSlug: string;
+        productTitle: string;
+        productImage?: string;
+        price: number | null;
+        currency: string;
+        storeId?: string;
+        storeName?: string;
+        inStock: boolean;
+    }) => React.ReactNode;
+}
+export declare function DigitalCodeDetailPageView({ slug, initialProduct, renderPrimaryActions }: DigitalCodeDetailPageViewProps): Promise<import("react").JSX.Element>;

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { getDigitalCodeForDetail } from "../../../_internal/server/features/digital-code/data";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_DIGITALCODE_BADGE = "inline-block rounded-full bg-violet-100 dark:bg-violet-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-violet-700 dark:text-violet-300";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+import { Div, Container, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, Dl, Dt, Dd, } from "../../../ui";
+import { PreOrderDetailView } from "../../products/components/PreOrderDetailView";
+import { ProductGalleryClient } from "../../products/components/ProductGalleryClient";
+import { ProductTabsShell } from "../../products/components/ProductTabsShell";
+import { CustomSectionTabContent } from "../../products/components/CustomSectionTabContent";
+import { ShareButton } from "../../products/components/ShareButton";
+import { HistoryTracker } from "../../history/components/HistoryTracker";
+import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
+import { computeRelatedItems, getReviewItemsForProduct } from "../../../_internal/server/features/products/data";
+import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
+import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
+import { ReviewsList } from "../../reviews/components/ReviewsList";
+function toDescriptionHtml(raw) {
+    if (!raw)
+        return "";
+    const s = typeof raw === "string" ? raw : JSON.stringify(raw);
+    return normalizeRichTextHtml(s);
+}
+export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPrimaryActions }) {
+    const product = initialProduct !== undefined
+        ? (initialProduct ?? undefined)
+        : await getDigitalCodeForDetail(slug).catch(() => undefined);
+    if (!product) {
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "start", gap: "md", className: "text-left", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: "Digital Code Listing Not Found" }), _jsx(Text, { color: "muted", children: "The digital code listing you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Digital Codes" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const title = String(p.title ?? p.name ?? "Digital Code");
+    const price = typeof p.price === "number" ? p.price : null;
+    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    const meta = product.digitalCode;
+    const codesLeft = meta?.codesAvailable ?? 0;
+    const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
+    const categoryName = Array.isArray(p.categoryNames) && p.categoryNames.length > 0 ? String(p.categoryNames[0]) : (typeof p.categoryName === "string" ? p.categoryName : null);
+    const brand = typeof p.brand === "string" ? p.brand : undefined;
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
+    const safeSeller = storeName ? safeDisplayName(storeName, "") : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
+    const specs = Array.isArray(p.specifications) ? p.specifications : [];
+    const customSections = Array.isArray(p.customSections) ? p.customSections : [];
+    const descriptionHtml = toDescriptionHtml(p.description);
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, reviews] = await Promise.all([
+        computeRelatedItems(product),
+        getGroupsWithItemsForProduct(product.id),
+        getReviewItemsForProduct(product.id),
+    ]);
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+                    title,
+                    thumb: images[0],
+                    price: price ?? undefined,
+                    storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                    storeName: storeName ?? undefined,
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                                id: s.id,
+                                label: s.title,
+                                content: _jsx(CustomSectionTabContent, { section: s }),
+                            })) })), renderBuyBar: () => renderPrimaryActions?.({
+                            productId: String(product.id),
+                            productSlug: String(p.slug ?? product.id),
+                            productTitle: title,
+                            productImage: images[0],
+                            price,
+                            currency,
+                            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                            storeName: storeName ?? undefined,
+                            inStock: codesLeft > 0,
+                        }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) })] })] }));
+}

package/dist/features/events/components/AdminEventEditorView.js

@@ -2,14 +2,44 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
-import React from "react";
+import React, { useEffect, useMemo } from "react";
+import { z } from "zod";
 import { useQuery } from "@tanstack/react-query";
 import { Alert, Button, Div, Grid, Heading, Input, Label, RichTextEditor, Row, Select, Stack, StackedViewShell, TagInput, Text, Textarea, Toggle, } from "../../../ui";
+import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { StepForm } from "../../shell";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
 import { CouponInlineSelect } from "../../seller/components/CouponInlineSelect";
+// Covers the cross-type required fields plus the two conditional rules the
+// "Settings" step already hand-enforces (offer coupon/code, poll min-2
+// options) — mirrored here as Zod so they're also live/summary-visible, not
+// just a submit-time gate. The many other per-type fields (survey/feedback
+// form-builder arrays, raffle/spin config) are deliberately left unvalidated
+// — modeling their full conditional shape correctly would need much deeper
+// per-type domain rules than this pass is scoped for.
+const eventDraftSchema = z.object({
+    type: z.string(),
+    title: z.string().min(1, "Title is required"),
+    startsAt: z.string().min(1, "Start date is required"),
+    endsAt: z.string().min(1, "End date is required"),
+    couponId: z.string(),
+    displayCode: z.string(),
+    pollOptions: z.array(z.object({ id: z.string(), label: z.string() })),
+}).passthrough().superRefine((v, ctx) => {
+    if (v.type === "offer") {
+        if (!v.couponId.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["couponId"], message: "Coupon is required for offer events" });
+        }
+        if (!v.displayCode.trim()) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["displayCode"], message: "Display code is required for offer events" });
+        }
+    }
+    if (v.type === "poll" && v.pollOptions.filter((o) => o.label.trim()).length < 2) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["pollOptions"], message: "Poll events require at least 2 options" });
+    }
+});
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -202,6 +232,11 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
     const [raffleWinnerName, setRaffleWinnerName] = React.useState("");
     const [raffleEntryCount, setRaffleEntryCount] = React.useState(null);
     const [raffleGithubUrl, setRaffleGithubUrl] = React.useState("");
+    const { shellCtx, setFieldError, validate } = useFormShellState(eventDraftSchema);
+    useEffect(() => {
+        validate(draft);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft, validate]);
     const update = React.useCallback((partial) => {
         setDraft((prev) => ({ ...prev, ...partial }));
         setSaveMessage(null);
@@ -295,6 +330,10 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
                 onSaved?.(savedId);
         },
         onError: (error) => {
+            const issues = error?.issues;
+            if (issues && issues.length > 0) {
+                applyZodIssues(issues, setFieldError);
+            }
             setSaveMessage(error instanceof Error ? error.message : "Save failed");
         },
     });
@@ -322,6 +361,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
     const steps = [
         {
             label: "Details",
+            fields: ["type", "title", "slug", "description", "startsAt", "endsAt", "tags"],
             validate: (values) => {
                 if (!values.title.trim())
                     return "Title is required";
@@ -338,10 +378,12 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
         },
         {
             label: "Media",
+            fields: ["coverImageUrl"],
             render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Media" }), _jsx(Input, { label: "Cover Image URL (optional)", value: values.coverImageUrl, onChange: (e) => onChange({ coverImageUrl: e.target.value }), placeholder: "https://\u2026", helperText: "Direct link to the event cover image." })] })),
         },
         {
             label: "Settings",
+            fields: ["status", "allowGuestParticipation", "discountPercent", "saleBannerText", "couponId", "displayCode", "offerBannerText", "pollOptions", "resultsVisibility", "allowMultiSelect", "allowComment", "maxEntriesPerUser", "hasLeaderboard", "hasPointSystem", "pointsLabel", "entryReviewRequired", "surveyFields", "anonymous", "feedbackFields"],
             validate: (values) => {
                 if (values.type === "offer" && !values.couponId.trim())
                     return "Coupon ID is required for offer events";
@@ -355,6 +397,7 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
         },
         {
             label: "Raffle / Spin",
+            fields: ["hasRaffle", "raffleType", "raffleTopN", "rafflePrize", "rafflePrizeCouponId", "rafflePrizeProductIds", "spinPrizes", "spinMaxPerUser", "spinWindowStart", "spinWindowEnd"],
             render: ({ values, onChange }) => {
                 const isRaffleType = values.type === "raffle" || values.type === "spin_wheel";
                 const showRaffleConfig = isRaffleType || values.hasRaffle;
@@ -364,7 +407,16 @@ export function AdminEventEditorView({ eventId, onSaved, embedded, allowedTypes,
         },
     ];
     const alertSection = eventQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event", children: eventQuery.error instanceof Error ? eventQuery.error.message : "Unknown error" })) : null;
-    const formContent = (_jsxs(Stack, { gap: "sm", children: [alertSection, _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-event", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Event", isLoading: isLoading }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") || saveMessage.toLowerCase().includes("error") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
+    const fieldToStepIndex = useMemo(() => {
+        const map = {};
+        steps.forEach((step, i) => {
+            step.fields?.forEach((field) => { map[field] = i; });
+        });
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [steps.length]);
+    const wizardShellCtx = useMemo(() => ({ ...shellCtx, fieldToStepIndex, goToStep: (n) => setCurrentStep(n) }), [shellCtx, fieldToStepIndex, setCurrentStep]);
+    const formContent = (_jsxs(Stack, { gap: "sm", children: [alertSection, _jsxs(FormShellContext.Provider, { value: wizardShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: () => { saveMutation.mutate(); }, formId: "admin-event", currentStep: currentStep, onStepChange: setCurrentStep, completeLabel: isEdit ? "Save Changes" : "Create Event", isLoading: isLoading })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") || saveMessage.toLowerCase().includes("error") ? "error" : "success", title: "Save status", children: saveMessage }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }

package/dist/features/events/components/AdminEventEntriesView.d.ts

@@ -1,22 +1,8 @@
 import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface AdminEventEntriesViewProps extends Omit<StackedViewShellProps, "sections"> {
+export interface AdminEventEntriesViewProps {
     eventId?: string;
     entriesEndpoint?: (eventId: string) => string;
     entryReviewEndpoint?: (eventId: string, entryId: string) => string;
     statsEndpoint?: (eventId: string) => string;
-    children?: React.ReactNode;
-    /** Back-link and event title header */
-    renderHeader?: () => React.ReactNode;
-    /** Stats banner (total / approved / flagged counts) */
-    renderStats?: () => React.ReactNode;
-    /** Filter bar (status dropdown, sort, search) */
-    renderFilters?: () => React.ReactNode;
-    /** Entries data table */
-    renderTable?: () => React.ReactNode;
-    /** Pagination footer */
-    renderPagination?: () => React.ReactNode;
-    /** Entry review side-drawer */
-    renderReviewDrawer?: () => React.ReactNode;
 }
-export declare function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEndpoint, statsEndpoint, renderHeader, renderStats, renderFilters, renderTable, renderPagination, renderReviewDrawer, ...rest }: AdminEventEntriesViewProps): React.JSX.Element;
+export declare function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEndpoint, statsEndpoint, }: AdminEventEntriesViewProps): React.JSX.Element;