@mohasinac/appkit 4.11.3 → 4.12.0

package/dist/features/cart/components/StoreAddonsPicker.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+/**
+ * Paid add-on checkboxes for ONE store.
+ *
+ * Add-on fees are billed per order group (= per store), so they are chosen per
+ * store: ticking "WhatsApp updates" for one seller must not bill it for every
+ * seller in the cart. Rendered inside that store's card in the cart, and inside
+ * that store's row of the checkout summary — Buy Now skips the cart entirely,
+ * so both surfaces have to be able to edit them.
+ */
+export interface StoreAddonsValue {
+    whatsappNotifyAddon?: boolean;
+    giftWrapAddon?: boolean;
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
+}
+/** The subset of `siteSettings.commissions` that gates and prices the add-ons. */
+export interface StoreAddonsRates {
+    whatsappNotifyFeeEnabled?: boolean;
+    whatsappNotifyFee?: number;
+    giftWrapFeeEnabled?: boolean;
+    giftWrapFee?: number;
+    shipmentProtectionFeeEnabled?: boolean;
+    shipmentProtectionFeePercent?: number;
+    shipmentProtectionFeeMin?: number;
+}
+export interface StoreAddonsPickerProps {
+    storeId: string;
+    /** This store's subtotal — shipment protection is a percentage of it. */
+    storeSubtotal: number;
+    value: StoreAddonsValue;
+    onChange: (storeId: string, next: StoreAddonsValue) => void;
+    rates: StoreAddonsRates | null;
+    /**
+     * When true the controls render disabled with `disabledReason`. Used in the
+     * cart when none of this store's items are selected — the fees genuinely
+     * aren't being charged, and silently hiding the controls would read as the
+     * add-ons having vanished.
+     */
+    disabled?: boolean;
+    disabledReason?: string;
+    /** Gift messages don't belong in a collapsed cart sheet — checkout only. */
+    showGiftMessage?: boolean;
+    currency?: string;
+    className?: string;
+}
+export declare function StoreAddonsPicker({ storeId, storeSubtotal, value, onChange, rates, disabled, disabledReason, showGiftMessage, currency, className, }: StoreAddonsPickerProps): React.JSX.Element | null;

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gift, MessageCircle, ShieldCheck } from "lucide-react";
+import { Div, Row, Stack, Text } from "../../../ui";
+import { IconBox } from "../../../ui/components/IconBox";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
+import { FieldTextarea } from "../../../ui/forms/FieldTextarea";
+import { formatCurrency } from "../../../utils/number.formatter";
+export function StoreAddonsPicker({ storeId, storeSubtotal, value, onChange, rates, disabled = false, disabledReason, showGiftMessage = false, currency = "INR", className = "", }) {
+    const anyEnabled = !!rates &&
+        (rates.whatsappNotifyFeeEnabled ||
+            rates.giftWrapFeeEnabled ||
+            rates.shipmentProtectionFeeEnabled);
+    if (!anyEnabled)
+        return null;
+    const money = (value) => formatCurrency(value, currency);
+    const set = (patch) => onChange(storeId, { ...value, ...patch });
+    // Mirrors computeShipmentProtectionFee so the label states the real charge.
+    const protectionFee = Math.max(rates.shipmentProtectionFeeMin ?? 30, Math.round(storeSubtotal * ((rates.shipmentProtectionFeePercent ?? 2) / 100) * 100) / 100);
+    return (_jsxs(Stack, { gap: "xs", className: `min-w-0 ${className}`, children: [disabled && disabledReason && (_jsx(Text, { size: "xs", color: "muted", children: disabledReason })), rates.whatsappNotifyFeeEnabled && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(MessageCircle, { size: 14 }) }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(FieldCheckbox, { name: `whatsappNotifyAddon-${storeId}`, label: `WhatsApp order updates (+${money(rates.whatsappNotifyFee ?? 10)})`, checked: !!value.whatsappNotifyAddon, onChange: (checked) => set({ whatsappNotifyAddon: checked }), disabled: disabled }) })] })), rates.giftWrapFeeEnabled && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(Gift, { size: 14 }) }), _jsxs(Stack, { gap: "xs", className: "flex-1 min-w-0", children: [_jsx(FieldCheckbox, { name: `giftWrapAddon-${storeId}`, label: `Gift wrap (+${money(rates.giftWrapFee ?? 49)})`, checked: !!value.giftWrapAddon, onChange: (checked) => set({ giftWrapAddon: checked }), disabled: disabled }), showGiftMessage && value.giftWrapAddon && (_jsx(FieldTextarea, { name: `giftWrapMessage-${storeId}`, label: "Gift message (optional)", value: value.giftWrapMessage ?? "", onChange: (next) => set({ giftWrapMessage: next.slice(0, 500) }), rows: 2, maxLength: 500, showCharCount: true, placeholder: "Add a note for the recipient\u2026", disabled: disabled }))] })] })), rates.shipmentProtectionFeeEnabled && storeSubtotal > 0 && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(ShieldCheck, { size: 14 }) }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(FieldCheckbox, { name: `shipmentProtectionAddon-${storeId}`, label: `Shipment protection (+${money(protectionFee)})`, checked: !!value.shipmentProtectionAddon, onChange: (checked) => set({ shipmentProtectionAddon: checked }), disabled: disabled }) })] }))] }));
+}

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

@@ -3,6 +3,10 @@ export { CartView } from "./CartView";
 export type { CartViewProps, CartOrderGroup } from "./CartView";
 export { CartSummary } from "./CartSummary";
 export type { CartSummaryProps } from "./CartSummary";
+export { StoreAddonsPicker } from "./StoreAddonsPicker";
+export type { StoreAddonsPickerProps, StoreAddonsValue, StoreAddonsRates, } from "./StoreAddonsPicker";
+export { CartPriceBreakdown } from "./CartPriceBreakdown";
+export type { CartPriceBreakdownProps, CartPriceBreakdownData, CartPriceBreakdownStore, } from "./CartPriceBreakdown";
 export { CheckoutView } from "./CheckoutView";
 export type { CheckoutViewProps } from "./CheckoutView";
 export { CheckoutAddressStep } from "./CheckoutAddressStep";

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

@@ -1,6 +1,8 @@
 export { CartItemRow, CartDrawer } from "./CartDrawer";
 export { CartView } from "./CartView";
 export { CartSummary } from "./CartSummary";
+export { StoreAddonsPicker } from "./StoreAddonsPicker";
+export { CartPriceBreakdown } from "./CartPriceBreakdown";
 export { CheckoutView } from "./CheckoutView";
 export { CheckoutAddressStep } from "./CheckoutAddressStep";
 export { CheckoutSuccessView } from "./CheckoutSuccessView";

package/dist/features/cart/repository/cart.repository.d.ts

@@ -1,7 +1,7 @@
-import type { DocumentReference } from "firebase-admin/firestore";
+import { type DocumentReference } from "firebase-admin/firestore";
 import type { DocumentSnapshot } from "../../../providers/db-firebase";
 import { BaseRepository, type FirebaseSieveResult, type SieveModel } from "../../../providers/db-firebase";
-import { type AddToCartInput, type CartAppliedCoupon, type CartDocument, type CartItemDocument, type UpdateCartItemInput } from "../schemas";
+import { type AddToCartInput, type CartAppliedCoupon, type CartDocument, type CartStoreAddons, type CartItemDocument, type UpdateCartItemInput } from "../schemas";
 export declare class CartRepository extends BaseRepository<CartDocument> {
     private static readonly SIEVE_FIELDS;
     constructor();
@@ -45,6 +45,24 @@ export declare class CartRepository extends BaseRepository<CartDocument> {
     updateItemShipping(userId: string, itemId: string, providerId: string, fee: number): Promise<CartDocument>;
     clearAllCoupons(userId: string): Promise<void>;
     setSelectedItems(userId: string, itemIds: string[] | null): Promise<void>;
+    /**
+     * Set (or clear) one store's add-on selections.
+     *
+     * Scoped to a single storeId so two stores' selections can't clobber each
+     * other, and written with a dotted field path so a concurrent write to a
+     * different store merges rather than overwriting the whole map.
+     *
+     * Passing an empty selection deletes the entry outright instead of leaving
+     * `{}` behind — an all-false record and an absent record mean the same thing,
+     * and keeping both shapes around invites readers that handle only one.
+     */
+    setStoreAddons(userId: string, storeId: string, addons: CartStoreAddons | null): Promise<void>;
+    /**
+     * Drop a store's add-on entry once its last item leaves the cart, so the map
+     * doesn't accumulate orphans. Cosmetic — an orphan is already unreachable,
+     * because a store with no items forms no order group.
+     */
+    pruneStoreAddons(userId: string, keepStoreIds: string[]): Promise<void>;
     /**
      * Cloud Functions: return refs of stale carts not updated within TTL.
      */

package/dist/features/cart/repository/cart.repository.js

@@ -1,4 +1,5 @@
 import { randomUUID } from "crypto";
+import { FieldValue } from "firebase-admin/firestore";
 import { DatabaseError, NotFoundError, ValidationError } from "../../../errors";
 import { CART_FIELDS } from "../../../constants/field-names";
 import { normalizeError } from "../../../errors/normalize";
@@ -337,6 +338,54 @@ export class CartRepository extends BaseRepository {
             .doc(userId)
             .set({ selectedItemIds: itemIds ?? null, updatedAt: new Date() }, { merge: true });
     }
+    /**
+     * Set (or clear) one store's add-on selections.
+     *
+     * Scoped to a single storeId so two stores' selections can't clobber each
+     * other, and written with a dotted field path so a concurrent write to a
+     * different store merges rather than overwriting the whole map.
+     *
+     * Passing an empty selection deletes the entry outright instead of leaving
+     * `{}` behind — an all-false record and an absent record mean the same thing,
+     * and keeping both shapes around invites readers that handle only one.
+     */
+    async setStoreAddons(userId, storeId, addons) {
+        const isEmpty = !addons ||
+            (!addons.whatsappNotifyAddon &&
+                !addons.giftWrapAddon &&
+                !addons.shipmentProtectionAddon);
+        await this.db
+            .collection(this.collection)
+            .doc(userId)
+            .set({
+            storeAddons: {
+                [storeId]: isEmpty ? FieldValue.delete() : addons,
+            },
+            updatedAt: new Date(),
+        }, { merge: true });
+    }
+    /**
+     * Drop a store's add-on entry once its last item leaves the cart, so the map
+     * doesn't accumulate orphans. Cosmetic — an orphan is already unreachable,
+     * because a store with no items forms no order group.
+     */
+    async pruneStoreAddons(userId, keepStoreIds) {
+        const cart = await this.findByUserId(userId);
+        const existing = cart?.storeAddons;
+        if (!existing)
+            return;
+        const keep = new Set(keepStoreIds);
+        const stale = Object.keys(existing).filter((storeId) => !keep.has(storeId));
+        if (stale.length === 0)
+            return;
+        await this.db
+            .collection(this.collection)
+            .doc(userId)
+            .set({
+            storeAddons: Object.fromEntries(stale.map((storeId) => [storeId, FieldValue.delete()])),
+            updatedAt: new Date(),
+        }, { merge: true });
+    }
     /**
      * Cloud Functions: return refs of stale carts not updated within TTL.
      */

package/dist/features/cart/schemas/firestore.d.ts

@@ -83,6 +83,21 @@ export interface CartAppliedCoupon {
     /** Item IDs (CartItemDocument.itemId) this coupon was calculated against */
     applicableItemIds?: string[];
 }
+/**
+ * Paid add-ons the buyer opted into, for ONE store.
+ *
+ * Add-on fees have always been billed per order group (= per store) by
+ * `createOrderForGroup` / `previewCheckoutPricing`, but the selection used to be
+ * a single cart-wide boolean — so one tick on "WhatsApp updates" quietly billed
+ * ₹10 × every store in the cart, with no way to opt in for just one seller.
+ * Keying the selection by storeId makes the choice match the billing.
+ */
+export interface CartStoreAddons {
+    whatsappNotifyAddon?: boolean;
+    giftWrapAddon?: boolean;
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
+}
 export interface CartDocument extends BaseDocument {
     userId: string;
     items: CartItemDocument[];
@@ -90,6 +105,17 @@ export interface CartDocument extends BaseDocument {
     appliedCoupons?: CartAppliedCoupon[];
     /** Item IDs the user has selected for the next checkout (undefined = all items) */
     selectedItemIds?: string[];
+    /**
+     * Per-store add-on selections, keyed by `storeId` — the same key
+     * `splitCartIntoOrderGroups` groups on.
+     *
+     * This map is the source of truth for what gets charged; the checkout request
+     * no longer carries addon booleans. A store with no selected items forms no
+     * order group, so its entry is simply never read — that is what makes
+     * "only charge a store whose items are actually checking out" structural
+     * rather than a flag someone has to remember to check.
+     */
+    storeAddons?: Record<string, CartStoreAddons>;
 }
 export declare const CART_COLLECTION: "carts";
 export declare const CART_INDEXED_FIELDS: string[];

package/dist/features/layout/BottomActions.js

@@ -29,7 +29,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * // Automatically rendered by LayoutClient — no manual usage required.
  * // Features use `useBottomActions` to register their actions.
  */
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useId } from "react";
 import { X, ChevronUp, ChevronDown, Check } from "lucide-react";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import { useClickOutside } from "../../react";
@@ -68,6 +68,27 @@ function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect,
                     .join(" "), children: [action.icon && (_jsx(Span, { className: `flex-shrink-0 w-5 h-5 ${FLEX_CENTER}`, "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "flex-1 truncate", children: action.label }), isSelected && (_jsx(Check, { className: "w-4 h-4 flex-shrink-0 text-primary-600 dark:text-primary-400", "aria-hidden": "true" }))] }, action.id));
         }) }));
 }
+/**
+ * Expandable detail that opens UPWARD from the bar.
+ *
+ * Same recipe as BulkPickerPanel above — absolutely positioned at `bottom-full`
+ * so it grows into the space above the bar rather than pushing the page, and
+ * animated on max-height/opacity so it can't be tabbed into while closed.
+ * Scrolls internally, since a many-store cart's breakdown can outgrow the
+ * screen.
+ */
+function InfoPanel({ id, open, children, }) {
+    return (_jsx(Div, { id: id, className: [
+            "absolute bottom-full left-0 right-0 overflow-hidden",
+            BOTTOM_NAV_BG,
+            "border-t border-zinc-200/80 border-[var(--appkit-color-border)]/80",
+            "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "transition-[max-height,opacity] duration-200 ease-out",
+            open ? "max-h-[60vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none",
+        ]
+            .filter(Boolean)
+            .join(" "), "aria-hidden": !open, children: _jsx(Div, { className: "max-h-[60vh]", overflow: "y-auto", padding: "md", children: children }) }));
+}
 function PageActionsRow({ pageActions, dispatchAction, }) {
     return (_jsx(_Fragment, { children: pageActions.map((action) => {
             const isIconOnly = !action.label;
@@ -86,10 +107,15 @@ function PageActionsRow({ pageActions, dispatchAction, }) {
 export default function BottomActions() {
     const { state, actionCallbacksRef, bulkCallbacksRef, bulkClearRef } = useBottomActionsContext();
     const [pickerOpen, setPickerOpen] = useState(false);
+    const [infoOpen, setInfoOpen] = useState(false);
     const [selectedActionId, setSelectedActionId] = useState(null);
     const containerRef = useRef(null);
-    useClickOutside(containerRef, () => setPickerOpen(false));
-    const { actions, bulk, infoLabel, secondaryLabel, desktop } = state;
+    const infoPanelId = useId();
+    useClickOutside(containerRef, () => {
+        setPickerOpen(false);
+        setInfoOpen(false);
+    });
+    const { actions, bulk, infoLabel, secondaryLabel, infoPanel, desktop } = state;
     // Desktop reveal-on-scroll. Kept as a plain passive listener to match BackToTop —
     // there is no shared scroll-position hook in the codebase and one consumer doesn't
     // justify inventing one. Only armed when a page actually opts into "after-scroll".
@@ -107,11 +133,18 @@ export default function BottomActions() {
     }, [wantsScrollGate]);
     const showOnDesktop = desktop === "always" || (wantsScrollGate && scrolledPastFold);
     const isBulkMode = !!(bulk && bulk.selectedCount > 0);
+    const hasInfoPanel = infoPanel != null && !isBulkMode;
     const bulkActions = bulk?.actions ?? [];
     const pageActions = actions;
     const isVisible = (isBulkMode ? bulkActions.length > 0 || !!bulk : pageActions.length > 0) ||
         !!infoLabel ||
         !!secondaryLabel;
+    // A panel left open after its content is withdrawn (bulk mode taking over, or
+    // the page clearing it) would sit there as an empty sheet.
+    useEffect(() => {
+        if (!hasInfoPanel)
+            setInfoOpen(false);
+    }, [hasInfoPanel]);
     // Keep selectedActionId in sync with available bulk actions
     useEffect(() => {
         if (!isBulkMode) {
@@ -151,7 +184,7 @@ export default function BottomActions() {
             isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), hasInfoPanel && !isBulkMode && (_jsx(InfoPanel, { id: infoPanelId, open: infoOpen, children: infoPanel })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { border: "subtle", className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b /80", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `${BOTTOM_NAV_HEIGHT}`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                 "flex-1 min-w-0 h-10 flex items-center gap-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",

package/dist/features/layout/BottomActionsContext.d.ts

@@ -99,6 +99,16 @@ export interface BottomActionsState {
      * the auction detail page's live countdown ("Ends in 2d 5h").
      */
     secondaryLabel?: string;
+    /**
+     * Optional expandable content revealed ABOVE the bar when the buyer taps the
+     * `infoLabel` row, which becomes a disclosure toggle while this is set.
+     *
+     * Exists so a summarised figure in `infoLabel` ("Total: ₹777.00") can be
+     * opened up into the detail behind it without navigating away — the mobile
+     * counterpart of a "Show details" expander in a desktop sidebar. Ignored in
+     * bulk mode, which owns the same space for its action picker.
+     */
+    infoPanel?: React.ReactNode;
 }
 interface BottomActionsContextValue {
     state: BottomActionsState;
@@ -119,6 +129,8 @@ interface BottomActionsContextValue {
     setInfoLabel: (label: string | undefined) => void;
     /** Set or clear the secondary label (rendered above infoLabel). */
     setSecondaryLabel: (label: string | undefined) => void;
+    /** Set or clear the expandable panel revealed above the bar. */
+    setInfoPanel: (panel: React.ReactNode | undefined) => void;
     /** Set the desktop visibility policy. */
     setDesktopMode: (mode: BottomActionsDesktopMode | undefined) => void;
     /** Clear all state (called on feature unmount). */

package/dist/features/layout/BottomActionsContext.js

@@ -87,6 +87,9 @@ export function BottomActionsProvider({ children, }) {
     const setSecondaryLabel = useCallback((secondaryLabel) => {
         setState((prev) => ({ ...prev, secondaryLabel }));
     }, []);
+    const setInfoPanel = useCallback((infoPanel) => {
+        setState((prev) => ({ ...prev, infoPanel }));
+    }, []);
     const setDesktopMode = useCallback((desktop) => {
         setState((prev) => (prev.desktop === desktop ? prev : { ...prev, desktop }));
     }, []);
@@ -105,6 +108,7 @@ export function BottomActionsProvider({ children, }) {
         bulkClearRef,
         setInfoLabel,
         setSecondaryLabel,
+        setInfoPanel,
         setDesktopMode,
         clearAll,
     }), [
@@ -113,6 +117,7 @@ export function BottomActionsProvider({ children, }) {
         setBulkConfig,
         setInfoLabel,
         setSecondaryLabel,
+        setInfoPanel,
         setDesktopMode,
         clearAll,
     ]);

package/dist/features/layout/hooks/useBottomActions.d.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import { type BottomAction, type BottomActionsDesktopMode, type BottomBulkConfig } from "../BottomActionsContext";
 export interface UseBottomActionsOptions {
     actions?: BottomAction[];
@@ -5,6 +6,11 @@ export interface UseBottomActionsOptions {
     infoLabel?: string;
     /** Rendered as its own row above infoLabel. See BottomActionsState.secondaryLabel. */
     secondaryLabel?: string;
+    /**
+     * Expandable detail revealed above the bar when the infoLabel row is tapped.
+     * See BottomActionsState.infoPanel.
+     */
+    infoPanel?: React.ReactNode;
     /**
      * Whether the bar may also show on desktop. Defaults to "hidden" (mobile/tablet only),
      * so pages that don't opt in behave exactly as before.

package/dist/features/layout/hooks/useBottomActions.js

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from "react";
 import { useBottomActionsContext, } from "../BottomActionsContext";
 export function useBottomActions(options = {}) {
-    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setDesktopMode, clearAll, } = useBottomActionsContext();
+    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setInfoPanel, setDesktopMode, clearAll, } = useBottomActionsContext();
     const actionsRef = useRef(options.actions ?? []);
     actionsRef.current = options.actions ?? [];
     const bulkRef = useRef(options.bulk);
@@ -25,6 +25,16 @@ export function useBottomActions(options = {}) {
     useEffect(() => {
         setSecondaryLabel(options.secondaryLabel);
     }, [setSecondaryLabel, options.secondaryLabel]);
+    // A ReactNode is a fresh object on every render, so it can't be a dependency
+    // without looping. Mirror it through a ref and re-publish whenever anything
+    // the panel actually derives from changes — callers pass `infoLabel`, which
+    // moves with the same data the panel shows.
+    const infoPanelRef = useRef(options.infoPanel);
+    infoPanelRef.current = options.infoPanel;
+    const hasInfoPanel = options.infoPanel != null;
+    useEffect(() => {
+        setInfoPanel(infoPanelRef.current);
+    }, [setInfoPanel, hasInfoPanel, options.infoLabel, options.secondaryLabel]);
     useEffect(() => {
         setDesktopMode(options.desktop);
     }, [setDesktopMode, options.desktop]);

package/dist/features/orders/components/OrderAddonBadges.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+/**
+ * Icon badges for an order's paid add-ons and applied coupon.
+ *
+ * These are fulfilment instructions, not decoration: WhatsApp tells the
+ * status-change notifier to message this buyer, gift wrap tells the packer to
+ * wrap the parcel and enclose the message, shipment protection changes how a
+ * loss claim is handled. They are recorded on the order (and filterable in the
+ * `orders` Sieve config) so nobody has to keep a separate list of who asked for
+ * what — the order IS the record.
+ *
+ * Rendered on every order surface — buyer detail, seller list + detail, admin
+ * list + detail — from one implementation, so a new add-on shows up everywhere
+ * at once instead of being wired per screen.
+ */
+export interface OrderAddonBadgesOrder {
+    whatsappNotifyAddon?: boolean;
+    whatsappNotifyFee?: number;
+    giftWrapAddon?: boolean;
+    giftWrapFee?: number;
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
+    shipmentProtectionFee?: number;
+    couponCode?: string;
+    couponDiscount?: number;
+}
+export interface OrderAddonBadgesProps {
+    order: OrderAddonBadgesOrder;
+    /** `"compact"` — icon chips only, for list rows. `"detail"` — chips + the gift message and fees. */
+    variant?: "compact" | "detail";
+    /** Hide the coupon chip where the coupon is already shown in a price breakdown. */
+    showCoupon?: boolean;
+    currency?: string;
+    className?: string;
+}
+export declare function OrderAddonBadges({ order, variant, showCoupon, currency, className, }: OrderAddonBadgesProps): React.JSX.Element | null;

package/dist/features/orders/components/OrderAddonBadges.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gift, MessageCircle, ShieldCheck, Tag } from "lucide-react";
+import { Row, Span, Stack, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+const CHIP_BASE = "inline-flex items-center gap-[var(--appkit-space-1)] rounded-full px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-medium";
+function Chip({ icon, label, tone, title, }) {
+    const toneCls = tone === "success"
+        ? "bg-success-surface text-success"
+        : tone === "info"
+            ? "bg-info-surface text-info"
+            : "bg-primary-50 text-primary-700 dark:bg-primary-950/40 dark:text-primary-300";
+    return (_jsxs(Span, { className: `${CHIP_BASE} ${toneCls}`, title: title, children: [_jsx(Span, { className: "flex-shrink-0", "aria-hidden": "true", children: icon }), label] }));
+}
+export function OrderAddonBadges({ order, variant = "compact", showCoupon = true, currency = "INR", className = "", }) {
+    const money = (v) => (typeof v === "number" && v > 0 ? formatCurrency(v, currency) : undefined);
+    const hasCoupon = showCoupon && !!order.couponCode;
+    const hasAny = order.whatsappNotifyAddon ||
+        order.giftWrapAddon ||
+        order.shipmentProtectionAddon ||
+        hasCoupon;
+    if (!hasAny)
+        return null;
+    const isDetail = variant === "detail";
+    return (_jsxs(Stack, { gap: "xs", className: `min-w-0 ${className}`, children: [_jsxs(Row, { gap: "xs", align: "center", wrap: true, className: "min-w-0", children: [order.whatsappNotifyAddon && (_jsx(Chip, { icon: _jsx(MessageCircle, { size: 12 }), label: isDetail && money(order.whatsappNotifyFee) ? `WhatsApp updates · ${money(order.whatsappNotifyFee)}` : "WhatsApp updates", tone: "success", title: "Buyer opted into WhatsApp order-status updates \u2014 status changes on this order should notify them on WhatsApp." })), order.giftWrapAddon && (_jsx(Chip, { icon: _jsx(Gift, { size: 12 }), label: isDetail && money(order.giftWrapFee) ? `Gift wrap · ${money(order.giftWrapFee)}` : "Gift wrap", tone: "brand", title: "This parcel must be gift-wrapped before dispatch." })), order.shipmentProtectionAddon && (_jsx(Chip, { icon: _jsx(ShieldCheck, { size: 12 }), label: isDetail && money(order.shipmentProtectionFee) ? `Protected · ${money(order.shipmentProtectionFee)}` : "Protected", tone: "info", title: "Shipment protection purchased \u2014 loss or damage in transit is covered." })), hasCoupon && (_jsx(Chip, { icon: _jsx(Tag, { size: 12 }), label: isDetail && money(order.couponDiscount)
+                            ? `${order.couponCode} · −${money(order.couponDiscount)}`
+                            : order.couponCode, tone: "success", title: `Coupon ${order.couponCode} applied to this order.` }))] }), isDetail && order.giftWrapAddon && order.giftWrapMessage && (_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Text, { size: "xs", color: "muted", weight: "semibold", transform: "uppercase", className: "tracking-wide", children: "Gift message" }), _jsx(Text, { size: "sm", color: "primary", className: "min-w-0 whitespace-pre-wrap break-words", children: order.giftWrapMessage })] }))] }));
+}

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

@@ -1,4 +1,5 @@
 export { OrderCard, OrdersList } from "./OrdersList";
+export { OrderAddonBadges, type OrderAddonBadgesOrder, type OrderAddonBadgesProps, } from "./OrderAddonBadges";
 export { MarketplaceOrderCard, type MarketplaceOrderCardLabels, type MarketplaceOrderCardLinks, type MarketplaceOrderCardOrder, type MarketplaceOrderCardProps, } from "./MarketplaceOrderCard";
 export { OrderFilters, ORDER_FILTER_KEYS, ORDER_ADMIN_SORT_OPTIONS, ORDER_SELLER_SORT_OPTIONS, ORDER_USER_SORT_OPTIONS, getOrderFilterKeys, getOrderSortOptions, } from "./OrderFilters";
 export type { OrderFiltersProps, OrderFilterVariant } from "./OrderFilters";

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

@@ -1,4 +1,5 @@
 export { OrderCard, OrdersList } from "./OrdersList";
+export { OrderAddonBadges, } from "./OrderAddonBadges";
 export { MarketplaceOrderCard, } from "./MarketplaceOrderCard";
 export { OrderFilters, ORDER_FILTER_KEYS, ORDER_ADMIN_SORT_OPTIONS, ORDER_SELLER_SORT_OPTIONS, ORDER_USER_SORT_OPTIONS, getOrderFilterKeys, getOrderSortOptions, } from "./OrderFilters";
 export { OrderSiblingPayments } from "./OrderSiblingPayments";

package/dist/features/orders/repository/orders.repository.d.ts

@@ -101,6 +101,22 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        whatsappNotifyAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        giftWrapAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        shipmentProtectionAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        couponCode: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     listForSeller(productIds: string[], model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
     listForUser(userId: string, model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
@@ -179,6 +195,22 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        whatsappNotifyAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        giftWrapAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        shipmentProtectionAddon: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
+        couponCode: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     listAll(model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
     /**

package/dist/features/orders/repository/orders.repository.js

@@ -496,6 +496,13 @@ OrderRepository.SELLER_SIEVE_FIELDS = {
     orderDate: { canFilter: true, canSort: true, parseValue: parseSieveDateValue },
     createdAt: { canFilter: true, canSort: true, parseValue: parseSieveDateValue },
     contestable: { canFilter: true, canSort: false },
+    // Fulfilment flags. Filterable so "which of my orders need gift wrap?" is a
+    // query against the orders themselves — the whole point of recording the
+    // add-on on the order rather than keeping a side list of who asked for what.
+    whatsappNotifyAddon: { canFilter: true, canSort: false },
+    giftWrapAddon: { canFilter: true, canSort: false },
+    shipmentProtectionAddon: { canFilter: true, canSort: false },
+    couponCode: { canFilter: true, canSort: false },
 };
 OrderRepository.ADMIN_SIEVE_FIELDS = {
     id: { canFilter: true, canSort: false },
@@ -520,6 +527,13 @@ OrderRepository.ADMIN_SIEVE_FIELDS = {
     // Never filtered as "standard" via Firestore == (see listForUser callers):
     // orders written before this field existed have no value to match.
     orderType: { canFilter: true, canSort: false },
+    // Same fulfilment flags as SELLER_SIEVE_FIELDS — admin needs to answer
+    // "who opted into WhatsApp updates?" when a status change goes out, without
+    // maintaining a parallel tracker.
+    whatsappNotifyAddon: { canFilter: true, canSort: false },
+    giftWrapAddon: { canFilter: true, canSort: false },
+    shipmentProtectionAddon: { canFilter: true, canSort: false },
+    couponCode: { canFilter: true, canSort: false },
 };
 const orderRepository = new OrderRepository();
 export { OrderRepository, orderRepository };

package/dist/features/orders/types/index.d.ts

@@ -79,8 +79,30 @@ export interface Order {
      * store plus one platform-wide coupon and this scalar shows only one of them.
      */
     couponCode?: string;
+    /** Total rupee value of every discount applied to this order. */
+    couponDiscount?: number;
     /** Every discount applied to this order — the full stack, not just the first. */
     appliedDiscounts?: AppliedOrderDiscount[];
+    /**
+     * Paid add-ons the buyer opted into for THIS order (= this store).
+     *
+     * These are operational flags, not just billing records: `whatsappNotifyAddon`
+     * is what the status-change notifier checks to decide whether to send a
+     * WhatsApp message, and `giftWrapAddon`/`shipmentProtectionAddon` are what
+     * the packer needs to see before dispatch. They live on the order itself and
+     * are filterable (`orders` SIEVE_FIELDS) precisely so nobody has to keep a
+     * separate list of who asked for what.
+     */
+    whatsappNotifyAddon?: boolean;
+    whatsappNotifyFee?: number;
+    giftWrapAddon?: boolean;
+    giftWrapFee?: number;
+    /** The buyer's gift message — the packer has to physically include this. */
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
+    shipmentProtectionFee?: number;
+    /** Buyer-facing platform commission apportioned to this order. */
+    platformFee?: number;
     trackingNumber?: string;
     shippingCarrier?: string;
     /** Carrier tracking page URL — rendered as an external link that opens in a new tab. No live-tracking API integration; this is just the passthrough URL a seller/admin entered. */

package/dist/features/products/components/ArtStickersListView.js

@@ -4,9 +4,8 @@ import { AdSlot } from "../../homepage/components/AdSlot";
 import { ProductsIndexListing } from "./ProductsIndexListing";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { sortBy } from "../../../constants/sort";
-import { ART_STICKERS_TYPE_FILTER_TABS } from "../constants/listing-tabs";
-import { listPublicProducts, parsePublicProductParams, } from "../../../_internal/server/features/products/list-public";
-const ART_STICKERS_LISTING_TYPES = ["art", "stickers"];
+import { ART_STICKERS_TYPE_FILTER_TABS, ART_STICKERS_LISTING_TYPES, } from "../constants/listing-tabs";
+import { listPublicProducts, parsePublicProductParams, defaultTogglesForListingTypes, } from "../../../_internal/server/features/products/list-public";
 const DEFAULT_PAGE_SIZE = 24;
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 export async function ArtStickersListView({ searchParams = {} }) {
@@ -17,7 +16,9 @@ export async function ArtStickersListView({ searchParams = {} }) {
         listingTypes: ART_STICKERS_LISTING_TYPES,
         pageSize: DEFAULT_PAGE_SIZE,
         sorts: DEFAULT_SORT,
-        hideSoldByDefault: true,
+        // Derived, so this page and ProductsIndexListing can never disagree
+        // about the default view (Root Cause #30).
+        ...defaultTogglesForListingTypes(ART_STICKERS_LISTING_TYPES),
     }));
     return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Art & Stickers" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Original art prints and sticker packs from independent sellers" })] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: result ?? null, listingTypes: ART_STICKERS_LISTING_TYPES, typeTabs: ART_STICKERS_TYPE_FILTER_TABS, searchPlaceholder: "Search art & stickers..." }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
 }