pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/ProductCard/productCardModel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.firstMissingAxis = exports.valueSoldOut = exports.rangeOf = exports.variantsFor = exports.framesFor = exports.deriveAction = exports.lowStockCount = exports.isSoldOut = exports.soleVariantOf = exports.swatchAxisOf = exports.hasChoice = exports.DEFAULT_SWATCH_LIMIT = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+exports.DEFAULT_SWATCH_LIMIT = 3;
+const hasChoice = (axes) => axes.some((axis) => axis.values.length > 1);
+exports.hasChoice = hasChoice;
+/** The first colour-like axis whose values all carry a swatch; the card draws dots only for this one. */
+const swatchAxisOf = (axes) => axes.find((axis) => (axis.type === "swatch" || axis.type === "image-tile") &&
+    axis.values.length > 1 &&
+    axis.values.every((value) => value.swatch));
+exports.swatchAxisOf = swatchAxisOf;
+/** The one variant a product without a real choice resolves to, when there is one. */
+const soleVariantOf = (axes, variants) => {
+    var _a;
+    if ((0, exports.hasChoice)(axes))
+        return undefined;
+    const selection = {};
+    axes.forEach((axis) => {
+        if (axis.values[0])
+            selection[axis.id] = axis.values[0].id;
+    });
+    return (_a = (0, commerceVariants_1.findVariant)(axes, variants, selection)) !== null && _a !== void 0 ? _a : (axes.length === 0 ? variants[0] : undefined);
+};
+exports.soleVariantOf = soleVariantOf;
+const isSoldOut = (outOfStock, stock, variants) => {
+    if (outOfStock !== undefined)
+        return outOfStock;
+    if (stock !== undefined)
+        return stock <= 0;
+    return variants.length > 0 && variants.every((variant) => (0, commerceVariants_1.stockState)(variant) === "out-of-stock");
+};
+exports.isSoldOut = isSoldOut;
+/** Units left, only when a real count says the product is low; undefined otherwise. */
+const lowStockCount = (stock, sole) => {
+    const count = stock !== null && stock !== void 0 ? stock : sole === null || sole === void 0 ? void 0 : sole.stock;
+    if (count === undefined)
+        return undefined;
+    const state = (0, commerceVariants_1.stockState)({ stock: count, backorder: sole === null || sole === void 0 ? void 0 : sole.backorder });
+    return state === "low-stock" ? count : undefined;
+};
+exports.lowStockCount = lowStockCount;
+const deriveAction = (override, soldOut, axes) => {
+    if (override)
+        return override;
+    if (soldOut)
+        return "notify";
+    return (0, exports.hasChoice)(axes) ? "options" : "add";
+};
+exports.deriveAction = deriveAction;
+const optionKey = (axisId, valueId) => `${axisId}:${valueId}`;
+/** Frames for the active swatch value: its mapped media, else the whole pool. */
+const framesFor = (media, mediaIdsByOption, axisId, valueId) => {
+    if (!axisId || !valueId || !mediaIdsByOption)
+        return media;
+    const ids = mediaIdsByOption[optionKey(axisId, valueId)];
+    if (!ids)
+        return media;
+    const frames = ids.map((id) => media.find((item) => item.id === id)).filter((item) => !!item);
+    return frames.length > 0 ? frames : media;
+};
+exports.framesFor = framesFor;
+/** Variants that share the picked colour, so the price range follows the dot. */
+const variantsFor = (variants, axisId, valueId) => {
+    if (!axisId || !valueId)
+        return variants;
+    const scoped = variants.filter((variant) => variant.options[axisId] === valueId);
+    return scoped.length > 0 ? scoped : variants;
+};
+exports.variantsFor = variantsFor;
+const rangeOf = (variants) => {
+    const range = (0, commerceVariants_1.priceRange)(variants);
+    return range && range.min !== range.max ? range : undefined;
+};
+exports.rangeOf = rangeOf;
+const valueSoldOut = (variants, axisId, valueId) => variants.length > 0 && !(0, commerceVariants_1.isOptionAvailable)(variants, {}, axisId, valueId);
+exports.valueSoldOut = valueSoldOut;
+const firstMissingAxis = (axes, selection) => axes.find((axis) => selection[axis.id] === undefined);
+exports.firstMissingAxis = firstMissingAxis;

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { ProductDetailsProps } from "./ProductDetailsProps";
-declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable, displayRating, }: ProductDetailsProps) => React.JSX.Element;
+import type { ProductDetailsProps } from "./ProductDetailsProps";
+/** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
+declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;

package/dist/Components/ProductDetails/ProductDetails.js

@@ -3,62 +3,223 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
-var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
-var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
-var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
-var Button_1 = __importDefault(require("../Button/Button"));
-var lucide_react_1 = require("lucide-react");
-var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
-var FormattedDescription_1 = __importDefault(require("../Common/FormattedDescription"));
-var ProductDetails = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g, _h = _a.displayRating, displayRating = _h === void 0 ? true : _h;
-    var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
-    var _j = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _j[0], setSelectedOption = _j[1];
-    var _k = react_1.default.useState(1), qty = _k[0], setQty = _k[1];
-    react_1.default.useEffect(function () {
-        setQty(1);
-    }, [selectedOption]);
-    var handleIncrement = function () {
-        setQty(function (prev) {
-            var _a;
-            var stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
-            if (prev >= stock)
-                return prev;
-            return prev + 1;
-        });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const MediaGallery_1 = __importDefault(require("../MediaGallery/MediaGallery"));
+const useContainerWidth_1 = require("../Commerce/useContainerWidth");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const ProductBadges_1 = __importDefault(require("../ProductBadges/ProductBadges"));
+const Rating_1 = __importDefault(require("../Rating/Rating"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
+const WishlistToggle_1 = __importDefault(require("../WishlistToggle/WishlistToggle"));
+const VariantSelector_1 = __importDefault(require("../VariantSelector/VariantSelector"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const OffersList_1 = __importDefault(require("../OffersList/OffersList"));
+const PincodeChecker_1 = __importDefault(require("../PincodeChecker/PincodeChecker"));
+const TrustBadges_1 = __importDefault(require("../TrustBadges/TrustBadges"));
+const StickyBuyBar_1 = __importDefault(require("../StickyBuyBar/StickyBuyBar"));
+const DetailSections_1 = __importDefault(require("../DetailSections/DetailSections"));
+const ReviewSummary_1 = __importDefault(require("../ReviewSummary/ReviewSummary"));
+const ReviewList_1 = __importDefault(require("../ReviewList/ReviewList"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const productDetailsModel_1 = require("./productDetailsModel");
+const useInViewport_1 = require("./useInViewport");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const DESKTOP_QUERY = "(min-width: 1024px)";
+const DESKTOP_MIN_WIDTH = 960;
+const DEFAULT_ADDED_MS = 1600;
+const DEFAULT_LABELS = {
+    addToBag: "Add to bag",
+    buyNow: "Buy now",
+    notifyMe: "Notify me",
+    goToBag: "Go to bag",
+    added: "Added",
+    addedAnnouncement: "Added to bag",
+    addFailed: "Couldn't add this to your bag. Try again.",
+    selectPrompt: (axisLabel) => `Select a ${axisLabel}`,
+    taxNote: "Inclusive of all taxes",
+    jumpToReviews: (ratingText) => `${ratingText}. Go to reviews`,
+    share: "Share",
+    wishlistSave: "Save for later",
+};
+const withGuide = (axes, guide) => {
+    var _a;
+    if (!guide)
+        return axes;
+    const axisId = (_a = guide.axisId) !== null && _a !== void 0 ? _a : "size";
+    return axes.map((axis) => { var _a; return axis.id === axisId && !axis.guide ? { ...axis, guide: { label: (_a = guide.label) !== null && _a !== void 0 ? _a : "Size guide", onClick: guide.onClick } } : axis; });
+};
+const scrollToNode = (node, reduced) => {
+    if (node && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "center" });
+    }
+};
+/** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
+const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = productDetailsModel_1.DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const uid = (0, react_1.useId)();
+    const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+    const fmt = (0, react_1.useMemo)(() => ({ currency, locale }), [currency, locale]);
+    const rootRef = (0, react_1.useRef)(null);
+    const containerWidth = (0, useContainerWidth_1.useContainerWidth)(rootRef);
+    const wide = (0, useMatchMedia_1.useMatchMedia)(DESKTOP_QUERY, false);
+    const desktop = layout === "auto" ? (containerWidth === undefined ? wide : containerWidth >= DESKTOP_MIN_WIDTH) : layout === "desktop";
+    const controlSize = size !== null && size !== void 0 ? size : (desktop ? "md" : "lg");
+    const variants = (0, react_1.useMemo)(() => (0, productDetailsModel_1.resolveVariants)(product), [product]);
+    const axes = (0, react_1.useMemo)(() => withGuide(product.axes, sizeGuide), [product.axes, sizeGuide]);
+    const [innerSelection, setInnerSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
+    const selection = selectionProp !== null && selectionProp !== void 0 ? selectionProp : innerSelection;
+    const complete = (0, commerceVariants_1.selectionComplete)(product.axes, selection);
+    const variant = (0, commerceVariants_1.findVariant)(product.axes, variants, selection);
+    const unpicked = (0, productDetailsModel_1.firstUnpickedAxis)(product.axes, selection);
+    const selectPrompt = unpicked ? labels.selectPrompt(unpicked.label.toLowerCase()) : "";
+    const state = variant ? (0, commerceVariants_1.stockState)(variant) : (0, productDetailsModel_1.soldOutEverywhere)(variants) ? "out-of-stock" : undefined;
+    const notifyMode = state === "out-of-stock";
+    const ceiling = (0, productDetailsModel_1.quantityCeiling)(variant, maxQuantity);
+    const [innerQuantity, setInnerQuantity] = (0, react_1.useState)(defaultQuantity);
+    const quantity = (0, productDetailsModel_1.clampQuantity)(quantityProp !== null && quantityProp !== void 0 ? quantityProp : innerQuantity, ceiling);
+    const [bag, setBag] = (0, react_1.useState)("idle");
+    const [addFailed, setAddFailed] = (0, react_1.useState)(false);
+    const [showSelectError, setShowSelectError] = (0, react_1.useState)(false);
+    const [promptTick, setPromptTick] = (0, react_1.useState)(0);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const timer = (0, react_1.useRef)();
+    const mounted = (0, react_1.useRef)(true);
+    const selectorRef = (0, react_1.useRef)(null);
+    const ctaRef = (0, react_1.useRef)(null);
+    const reviewsRef = (0, react_1.useRef)(null);
+    const ctaInView = (0, useInViewport_1.useInViewport)(ctaRef, !desktop && !isLoading);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            clearTimeout(timer.current);
+        };
+    }, []);
+    const variantId = variant === null || variant === void 0 ? void 0 : variant.id;
+    (0, react_1.useEffect)(() => {
+        clearTimeout(timer.current);
+        setBag("idle");
+        setAddFailed(false);
+    }, [variantId, quantity]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (promptTick === 0)
+            return;
+        const group = (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="radiogroup"][aria-invalid="true"]');
+        scrollToNode(group !== null && group !== void 0 ? group : selectorRef.current, reduced);
+        (_b = group === null || group === void 0 ? void 0 : group.querySelector('[role="radio"][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+    }, [promptTick, reduced]);
+    const handleSelection = (0, react_1.useCallback)((next, matched) => {
+        if (selectionProp === undefined)
+            setInnerSelection(next);
+        if ((0, commerceVariants_1.selectionComplete)(product.axes, next))
+            setShowSelectError(false);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(next, matched);
+    }, [selectionProp, product.axes, onSelectionChange]);
+    const handleQuantity = (next) => {
+        if (quantityProp === undefined)
+            setInnerQuantity(next);
+        onQuantityChange === null || onQuantityChange === void 0 ? void 0 : onQuantityChange(next);
+    };
+    const promptSelection = () => {
+        setShowSelectError(true);
+        setPromptTick((tick) => tick + 1);
+    };
+    const handleAdd = async () => {
+        if (!complete || !variant) {
+            promptSelection();
+            return;
+        }
+        if (bag === "in-bag") {
+            onGoToBag === null || onGoToBag === void 0 ? void 0 : onGoToBag();
+            return;
+        }
+        if (bag !== "idle")
+            return;
+        setAddFailed(false);
+        try {
+            const pending = onAddToBag === null || onAddToBag === void 0 ? void 0 : onAddToBag(variant.id, quantity);
+            if (pending && typeof pending.then === "function") {
+                setBag("adding");
+                await pending;
+            }
+        }
+        catch {
+            if (mounted.current) {
+                setBag("idle");
+                setAddFailed(true);
+            }
+            return;
+        }
+        if (!mounted.current)
+            return;
+        setBag("added");
+        setAnnouncement(labels.addedAnnouncement);
+        timer.current = setTimeout(() => {
+            setBag(onGoToBag ? "in-bag" : "idle");
+            setAnnouncement("");
+        }, addedDuration);
     };
-    var handleDecrement = function () {
-        setQty(function (prev) { return (prev > 1 ? prev - 1 : 1); });
+    const handleBuyNow = () => {
+        if (!complete || !variant) {
+            promptSelection();
+            return;
+        }
+        onBuyNow === null || onBuyNow === void 0 ? void 0 : onBuyNow(variant.id, quantity);
     };
-    return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
-        react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem" },
-            react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch })),
-        react_1.default.createElement(react_2.Box, { flex: "1" },
-            label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
-            shortdesc && react_1.default.createElement(react_2.Box, { my: 3 },
-                react_1.default.createElement(FormattedDescription_1.default, { content: shortdesc })),
-            ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
-            tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
-            price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
-                    setSelectedOption(option);
-                    onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
-                } })),
-            typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) <= 0 && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
-                react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: "sm", 
-                    // width="50%"
-                    // onClick={button?.onClick}
-                    isDisabled: true }, "Out of Stock"))),
-            goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
-            addToCart && (((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
-                react_1.default.createElement(react_2.HStack, null,
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
-                    react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : Infinity), isRound: true, variant: "outline", colorScheme: "red" })))),
-            addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); } }, "Add to cart")),
-            addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) <= 0) && notifyMe && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); } }, "Notify Me")))));
+    const handleNotify = () => onNotify === null || onNotify === void 0 ? void 0 : onNotify(variant === null || variant === void 0 ? void 0 : variant.id);
+    const jumpToReviews = () => scrollToNode(reviewsRef.current, reduced);
+    const range = !variant && !complete ? (0, commerceVariants_1.priceRange)(variants) : null;
+    const price = (_a = variant === null || variant === void 0 ? void 0 : variant.price) !== null && _a !== void 0 ? _a : product.price;
+    const mrp = variant ? variant.mrp : product.mrp;
+    const showRange = range !== null && range.min !== range.max;
+    const activeIds = (0, productDetailsModel_1.activeMediaIds)(product, selection, variant);
+    const primaryLabel = bag === "added" ? labels.added : bag === "in-bag" ? labels.goToBag : notifyMode ? labels.notifyMe : labels.addToBag;
+    const barMode = notifyMode
+        ? "notify"
+        : !complete
+            ? "select-option"
+            : bag === "added"
+                ? "added"
+                : bag === "in-bag"
+                    ? "go-to-bag"
+                    : "add";
+    const showStepper = !notifyMode && ceiling > 0;
+    const showBuyNow = !!onBuyNow && !notifyMode && bag === "idle";
+    const ratingText = product.rating === undefined
+        ? ""
+        : `Rated ${product.rating.toFixed(1)} out of 5${product.ratingCount ? ` from ${product.ratingCount.toLocaleString(locale !== null && locale !== void 0 ? locale : "en-IN")} ratings` : ""}`;
+    const mrpForLegal = variant ? ((_b = variant.mrp) !== null && _b !== void 0 ? _b : variant.price) : ((_c = product.mrp) !== null && _c !== void 0 ? _c : product.price);
+    const hasLegal = !!(product.netQuantity || product.manufacturer || product.originCountry);
+    const reviewsHeadingId = `${uid}-reviews`;
+    const showReviews = reviews !== undefined || product.ratingCount !== undefined;
+    const sectionGap = desktop ? 18 : 10;
+    const gutter = desktop ? 6 : 4;
+    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? controlSize : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
+    const badgeSlot = product.badges && product.badges.length > 0 ? (0, jsx_runtime_1.jsx)(ProductBadges_1.default, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
+    const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : ((0, jsx_runtime_1.jsx)(MediaGallery_1.default, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
+    const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
+    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: (0, tonalHover_1.tonalHover)(colors, colors.background[50], colors.background[100]) }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? (0, jsx_runtime_1.jsx)(react_2.Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [(0, jsx_runtime_1.jsx)(DetailSections_1.default, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
+                            ? {
+                                netQuantity: product.netQuantity,
+                                manufacturer: product.manufacturer,
+                                originCountry: product.originCountry,
+                                mrpNote: `${(0, price_1.formatPrice)(mrpForLegal, fmt)} · ${(_e = (_d = detailSectionsProps === null || detailSectionsProps === void 0 ? void 0 : detailSectionsProps.labels) === null || _d === void 0 ? void 0 : _d.mrpIncludesTaxes) !== null && _e !== void 0 ? _e : "Maximum retail price, inclusive of all taxes"}`,
+                            }
+                            : undefined, defaultOpenIds: desktop ? ["description", "highlights", "specs"] : undefined, ...detailSectionsProps }), showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: reviewsRef, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(ReviewSummary_1.default, { id: reviewsHeadingId, rating: (_f = product.rating) !== null && _f !== void 0 ? _f : 0, count: (_h = (_g = product.ratingCount) !== null && _g !== void 0 ? _g : reviews === null || reviews === void 0 ? void 0 : reviews.length) !== null && _h !== void 0 ? _h : 0, breakdown: ratingBreakdown, onWriteReview: onWriteReview, locale: locale }), reviews && (reviews.length > 0 || (reviewsProps === null || reviewsProps === void 0 ? void 0 : reviewsProps.isLoading)) ? ((0, jsx_runtime_1.jsx)(ReviewList_1.default, { reviews: reviews, locale: locale, ...reviewsProps })) : null] }) })) : null, belowFold, relatedSlot] })) : null, !desktop && !isLoading ? ((0, jsx_runtime_1.jsx)(StickyBuyBar_1.default, { price: price, mrp: mrp, mode: barMode, visible: !ctaInView, isLoading: bag === "adding", itemLabel: product.title, onAddToBag: handleAdd, onSelectOption: promptSelection, onNotify: handleNotify, onGoToBag: () => onGoToBag === null || onGoToBag === void 0 ? void 0 : onGoToBag(), onBuyNow: onBuyNow ? handleBuyNow : undefined, labels: { add: labels.addToBag, selectOption: selectPrompt || labels.addToBag, notify: labels.notifyMe, added: labels.added, goToBag: labels.goToBag, buyNow: labels.buyNow }, ...fmt })) : null] }));
 };
 exports.default = ProductDetails;

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -1,35 +1,169 @@
-import { batch, options } from "../ProductCard/ProductCardProps";
-export type ProductDetailsProps = {
-    id: string | number;
-    price?: options[];
-    label?: string;
-    shortdesc?: string;
-    tags?: string[];
-    images?: images[];
-    batch?: batch;
-    category?: string;
-    rating?: string | number;
-    reviews?: string | number;
-    onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
-    onNotifyMe?: (id: string | number, var_id: number) => void;
-    onOptionChange?: (option: options) => void;
-    addToCart?: boolean;
-    goToCart?: boolean;
-    notifyMe?: boolean;
-    OnGoToCart?: () => void;
-    isQtyEditable?: boolean;
-    displayRating?: boolean;
-};
-export type images = {
-    imageUrl: string;
-    imageId: number;
-    order: number;
-    isImage?: boolean;
-    thumb?: string;
-};
-export type videos = {
-    videoUrl: string;
-    videoId: number;
-    order?: number;
-    thumb?: string;
-};
+import type { ReactNode } from "react";
+import type { OptionAxis, PriceFormat, ProductBadge, ProductMedia, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { DetailSectionsProps } from "../DetailSections/DetailSectionsProps";
+import type { Offer, OffersListProps } from "../OffersList/OffersListProps";
+import type { PincodeCheckerProps } from "../PincodeChecker/PincodeCheckerProps";
+import type { RatingBreakdown } from "../ReviewSummary/ReviewSummaryProps";
+import type { ReviewItem, ReviewListProps } from "../ReviewList/ReviewListProps";
+import type { SpecItem } from "../SpecTable/SpecTableProps";
+import type { TrustItem } from "../TrustBadges/TrustBadgesProps";
+/** The catalogue record the page renders; structurally compatible with a store's product so it can be passed straight through. */
+export interface ProductDetailsProduct {
+    /** Page h1 and the accessible name of the quantity stepper and sticky bar. */
+    title: string;
+    /** Muted line above the title. */
+    brand?: string;
+    /** Body of the Description section. */
+    description?: string;
+    /** Bullet list for the Highlights section. */
+    highlights?: string[];
+    /** Rows of the Specifications section. */
+    specs?: SpecItem[];
+    /** Every frame the product has; variants and `mediaIdsByOption` pick which ones show. */
+    media: ProductMedia[];
+    /** Option axes in display order; an empty list means the product has nothing to choose. */
+    axes: OptionAxis[];
+    /** Every sellable combination with its own price and stock; empty falls back to one variant at `price`. */
+    variants: ProductVariant[];
+    /** Price shown until a variant is picked, and the fallback when a variant carries none. */
+    price: number;
+    /** List price struck through beside `price`; a picked variant's own `mrp` replaces it. */
+    mrp?: number;
+    /** Average rating, 0 to 5. */
+    rating?: number;
+    /** Number of ratings beside the stars; also keeps the reviews section when `reviews` is omitted. */
+    ratingCount?: number;
+    /** Corner badges on the gallery, e.g. "Bestseller". */
+    badges?: ProductBadge[];
+    /** Base unit for the "per 100 g" line; needs a `pack` axis whose values carry `quantity`. */
+    unit?: {
+        unit: string;
+        per: number;
+    };
+    /** Frame ids per picked option, keyed "axisId:valueId"; a variant's own `mediaIds` wins. */
+    mediaIdsByOption?: Record<string, string[]>;
+    /** Shipping and returns copy for the details section. */
+    returnsNote?: string;
+    /** Country of origin line in the legal block of the details section. */
+    originCountry?: string;
+    /** Manufacturer line in the legal block of the details section. */
+    manufacturer?: string;
+    /** Legal-metrology net quantity such as "500 g". */
+    netQuantity?: string;
+}
+/** `auto` follows the component's own width (two columns from 960px, else the single-column phone page with a sticky buy bar); the window decides only until the first measure. */
+export type ProductDetailsLayout = "auto" | "desktop" | "mobile";
+/** Every string the page itself renders; sub-components take their own `labels` through their prop pass-throughs. */
+export interface ProductDetailsLabels {
+    /** Primary button text when the chosen variant can be bought. */
+    addToBag: string;
+    /** Text of the secondary button shown when `onBuyNow` is set. */
+    buyNow: string;
+    /** Primary button text when the chosen variant, or every variant, is sold out. */
+    notifyMe: string;
+    /** Primary button text after the add confirmation, when `onGoToBag` is set. */
+    goToBag: string;
+    /** Short confirmation in the button right after an add. */
+    added: string;
+    /** Screen-reader announcement after an add. */
+    addedAnnouncement: string;
+    /** Shown when `onAddToBag` rejects. */
+    addFailed: string;
+    /** Prompt for an unpicked axis, given its lower-cased label: "Select a size". */
+    selectPrompt: (axisLabel: string) => string;
+    /** Line under the price, e.g. "Inclusive of all taxes". */
+    taxNote: string;
+    /** Accessible name of the rating link that scrolls to the reviews. */
+    jumpToReviews: (ratingText: string) => string;
+    /** Accessible name of the share button; shown only when `onShare` is set. */
+    share: string;
+    /** Label of the wishlist toggle. */
+    wishlistSave: string;
+}
+/** The composed product page: gallery, buy panel, details and reviews, wired so the picked variant drives price, stock, frames and the primary action. */
+export interface ProductDetailsProps extends PriceFormat {
+    /** Catalogue record to render; changing it re-derives variants, frames and price. */
+    product: ProductDetailsProduct;
+    /** Controlled selection, axis id to option value id; nothing is preselected, because a size the shopper never chose is a wrong order. */
+    selection?: VariantSelection;
+    /** Starting selection when uncontrolled, axis id to option value id. */
+    defaultSelection?: VariantSelection;
+    /** Receives the new selection and the matching variant, or undefined while it is incomplete. */
+    onSelectionChange?: (selection: VariantSelection, variant: ProductVariant | undefined) => void;
+    /** Controlled quantity, clamped to the variant's remaining stock and `maxQuantity`. */
+    quantity?: number;
+    /** Starting quantity when uncontrolled; defaults to 1 and is clamped to the ceiling. */
+    defaultQuantity?: number;
+    /** Fires with the new quantity after the stepper changes it. */
+    onQuantityChange?: (quantity: number) => void;
+    /** Per-order ceiling; the variant's remaining stock lowers it further. */
+    maxQuantity?: number;
+    /** Fires with the variant id and quantity; a returned promise keeps the button busy, and a rejection shows `labels.addFailed`. */
+    onAddToBag?: (variantId: string, quantity: number) => void | Promise<unknown>;
+    /** Adds a secondary "Buy now" beside the primary; incomplete selections get the same prompt as Add to bag. */
+    onBuyNow?: (variantId: string, quantity: number) => void;
+    /** Fires from "Notify me" with the variant id, or undefined when every variant is sold out. */
+    onNotify?: (variantId: string | undefined) => void;
+    /** When set, a successful add morphs the button to "Added" and then to "Go to bag", which calls this. */
+    onGoToBag?: () => void;
+    /** How long "Added" shows before the button becomes "Go to bag", in ms. */
+    addedDuration?: number;
+    /** Controlled wishlist state; pair with `onWishlistChange`. */
+    wishlisted?: boolean;
+    /** Starting wishlist state when uncontrolled. */
+    defaultWishlisted?: boolean;
+    /** Fires with the new wishlist state when the toggle is pressed. */
+    onWishlistChange?: (wishlisted: boolean) => void;
+    /** Shows a share button beside the title. */
+    onShare?: () => void;
+    /** Shown as one collapsed row under the price. */
+    offers?: Offer[];
+    /** Pass-through to `OffersList`, e.g. `onCopy`. */
+    offersProps?: Partial<OffersListProps>;
+    /** Reassurance tiles under the delivery check. */
+    trustItems?: TrustItem[];
+    /** Shows the delivery checker when given; pass-through to `PincodeChecker`. */
+    pincode?: PincodeCheckerProps;
+    /** Adds a size-guide link to the axis with `axisId` (default "size") unless that axis already has a `guide`. */
+    sizeGuide?: {
+        label?: string;
+        axisId?: string;
+        onClick: () => void;
+    };
+    /** Also fired when any axis guide link is clicked, with the axis id. */
+    onGuideClick?: (axisId: string) => void;
+    /** Reviews to list; omit both this and `product.ratingCount` to leave the reviews section out. */
+    reviews?: ReviewItem[];
+    /** Counts per star for the distribution bars. */
+    ratingBreakdown?: RatingBreakdown;
+    /** Pass-through to `ReviewList`, e.g. `sortSlot`, `hasMore`, `onLoadMore`, `onHelpful`. */
+    reviewsProps?: Partial<ReviewListProps>;
+    /** Shows "Write a review" in the summary. */
+    onWriteReview?: () => void;
+    /** Pass-through to `DetailSections`; `sections` there adds or replaces a section. */
+    detailSectionsProps?: Partial<DetailSectionsProps>;
+    /** Care instructions for the details section. */
+    care?: string | string[];
+    /** Rendered above the gallery, e.g. a breadcrumb trail. */
+    breadcrumbs?: ReactNode;
+    /** `auto` splits into gallery and buy panel from 960px of the component's own width, not the window. */
+    layout?: ProductDetailsLayout;
+    /** Height of the add-to-bag, buy-now and quantity controls; defaults to `md` (40px) on the split layout, `lg` (48px) on the phone page. */
+    size?: "md" | "lg";
+    /** Replaces the gallery; its frames, badges and wishlist toggle go with it. */
+    mediaSlot?: ReactNode;
+    /** Extra content in the buy panel under the price, e.g. an EMI line. */
+    metaSlot?: ReactNode;
+    /** Extra content at the end of the buy panel. */
+    infoSlot?: ReactNode;
+    /** Extra content after the reviews. */
+    belowFold?: ReactNode;
+    /** Rendered last, e.g. a "You may also like" rail. */
+    relatedSlot?: ReactNode;
+    /** Skeleton in place of the gallery and buy panel. */
+    isLoading?: boolean;
+    /** Overrides for the page copy; unspecified strings keep the English defaults. */
+    labels?: Partial<ProductDetailsLabels>;
+    /** Set on the page root, which also carries `data-layout` of `desktop` or `mobile`. */
+    "data-testid"?: string;
+}

package/dist/Components/ProductDetails/productDetailsModel.d.ts

@@ -0,0 +1,14 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { UnitPrice } from "../../Utils/price";
+import type { ProductDetailsProduct } from "./ProductDetailsProps";
+export declare const DEFAULT_MAX_QUANTITY = 10;
+/** A product without variants sells as one variant at its own price. */
+export declare const resolveVariants: (product: ProductDetailsProduct) => ProductVariant[];
+/** A variant's own frames win; otherwise the frames of each picked option, in axis order. */
+export declare const activeMediaIds: (product: ProductDetailsProduct, selection: VariantSelection, variant: ProductVariant | undefined) => string[] | undefined;
+export declare const packUnitPrice: (product: ProductDetailsProduct, selection: VariantSelection, price: number) => UnitPrice | null;
+export declare const firstUnpickedAxis: (axes: OptionAxis[], selection: VariantSelection) => OptionAxis | undefined;
+export declare const soldOutEverywhere: (variants: ProductVariant[]) => boolean;
+/** Real remaining stock caps the order; backorder and untracked stock fall back to the per-order ceiling. */
+export declare const quantityCeiling: (variant: ProductVariant | undefined, maxQuantity: number) => number;
+export declare const clampQuantity: (value: number, ceiling: number) => number;