@anker-in/headless-ui 1.3.55 → 1.3.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +2 -2
- package/dist/cjs/biz-components/CreditsShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/CreditsShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/Marquee.js +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/type.d.ts +1 -0
- package/dist/cjs/biz-components/Marquee/type.js +1 -1
- package/dist/cjs/biz-components/Marquee/type.js.map +1 -1
- package/dist/cjs/biz-components/MediaShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/MediaShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/SceneShelf/ProductsPanel.js +1 -1
- package/dist/cjs/biz-components/SceneShelf/ProductsPanel.js.map +2 -2
- package/dist/cjs/biz-components/SceneShelfV2/index.js +1 -1
- package/dist/cjs/biz-components/SceneShelfV2/index.js.map +2 -2
- package/dist/cjs/biz-components/SceneShelfV3/ProductCard.js +1 -1
- package/dist/cjs/biz-components/SceneShelfV3/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/ActiveShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/PriceAndActions.js.map +2 -2
- package/dist/esm/biz-components/CreditsShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/CreditsShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/Marquee/Marquee.js +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js.map +2 -2
- package/dist/esm/biz-components/Marquee/type.d.ts +1 -0
- package/dist/esm/biz-components/MediaShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/MediaShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/SceneShelf/ProductsPanel.js +1 -1
- package/dist/esm/biz-components/SceneShelf/ProductsPanel.js.map +2 -2
- package/dist/esm/biz-components/SceneShelfV2/index.js +1 -1
- package/dist/esm/biz-components/SceneShelfV2/index.js.map +2 -2
- package/dist/esm/biz-components/SceneShelfV3/ProductCard.js +1 -1
- package/dist/esm/biz-components/SceneShelfV3/ProductCard.js.map +2 -2
- package/package.json +1 -1
- package/style.css +18 -6
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var _=Object.create;var
|
|
1
|
+
"use strict";"use client";var _=Object.create;var b=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,i)=>{for(var l in i)b(e,l,{get:i[l],enumerable:!0})},k=(e,i,l,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of q(i))!E.call(e,o)&&o!==l&&b(e,o,{get:()=>i[o],enumerable:!(d=A(i,o))||d.enumerable});return e};var R=(e,i,l)=>(l=e!=null?_($(e)):{},k(i||!e||!e.__esModule?b(l,"default",{value:e,enumerable:!0}):l,e)),I=e=>k(b({},"__esModule",{value:!0}),e);var K={};H(K,{ProductCard:()=>u,default:()=>j});module.exports=I(K);var a=require("react/jsx-runtime"),c=R(require("react")),n=require("../../helpers/index.js"),t=require("../../components/index.js");const O=5;function G(e,i,l,d){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return i===void 0?!0:l<=i;case"below-percentage":return i===void 0?!0:l/d*100<=i;default:return!0}}const u=c.forwardRef(({product:e,className:i,stockDisplayMode:l,stockThresholdValue:d,onLearnMore:o,onShopNow:C,onAddToCart:S,classNames:r,secondaryButtonText:p,secondaryButtonFun:v,primaryButtonText:y,primaryButtonFun:h,showOriginalPrice:P,copy:g,onProductImageClick:m,showTags:N=!0},M)=>{const[F,L]=c.useState(!1),[B,D]=c.useState(!1),T=c.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?O:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),x=async(s,f)=>{if(!s)return;const w=f==="primary"?L:D;w(!0);try{switch(s){case"buyNow":await C?.(e);break;case"addCart":await S?.(e);break;case"learnMore":await o?.(e);break;default:break}}finally{w(!1)}},z=e.availableForSale&&e.quantityAvailable<=0;return(0,a.jsxs)(t.Card,{ref:M,className:(0,n.cn)("tablet:min-w-[auto] hover:bg-container-secondary-0 flex h-full min-w-[296px] flex-col overflow-hidden border-none",e.custom_link?"cursor-pointer":"",i,r?.productCard),children:[(0,a.jsxs)("div",{className:(0,n.cn)("media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",r?.productCardImageWrapper),children:[(0,a.jsx)("div",{className:(0,n.cn)("media-shelf-product-card-image-bg absolute inset-0 ",r?.productCardImageBg),children:(0,a.jsx)("a",{onClick:()=>m?.(e),...!m&&{href:e.custom_link||e.listingLink},className:"cursor-pointer",children:(0,a.jsx)(t.Picture,{source:e.custom_image||e.image,alt:e.name,className:(0,n.cn)("h-full",r?.productCardImage),imgClassName:"h-full object-contain"})})}),N&&e.tags&&e.tags.length>0&&(0,a.jsx)("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]",children:e.tags.map((s,f)=>s.label?(0,a.jsx)(t.Badge,{size:"sm",variant:s.variant||"outline",className:(0,n.cn)("mr-1"),promotionalType:s.promotionalType,children:s.label},f):(0,a.jsx)(c.Fragment,{children:s},f))})]}),(0,a.jsxs)(t.CardContent,{className:"desktop:p-6 bg-container-primary laptop:gap-6 flex h-[calc(100%-240px)] grow flex-col justify-between gap-4 p-4",children:[(0,a.jsxs)("div",{className:"flex-0",children:[(0,a.jsx)(t.Heading,{as:"h3",size:2,className:(0,n.cn)("text-info-primary mb-1 line-clamp-2 tracking-tight",m?"cursor-pointer":"",r?.productTitle),onClick:m?()=>m(e):void 0,children:e.custom_name||e.name}),(e.custom_description||e?.description)&&(0,a.jsx)(t.Text,{size:2,className:(0,n.cn)("text-info-primary line-clamp-1",r?.productDescription),html:e.custom_description||e.description})]}),G(l,d,e?.quantityAvailable??0,e?.totalInventory??0)&&(0,a.jsxs)("div",{"data-total":e?.totalInventory??0,"data-available":e?.quantityAvailable??0,className:"space-y-2",children:[(0,a.jsx)(t.Progress,{value:T,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),(0,a.jsx)(t.Text,{size:3,className:"text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[12px]",children:z?g?.limitedStock:g?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:(0,n.cn)("mb-2",r?.productPrice),children:(0,a.jsx)("div",{className:"flex items-baseline gap-2",children:e.availableForSale?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.price}),P&&e.originalPrice&&(0,a.jsx)(t.Heading,{size:2,className:(0,n.cn)("text-info-tertiary line-through",r?.originalPrice),as:"h6",children:e.originalPrice})]}):(0,a.jsx)(t.Heading,{size:2,className:"text-info-tertiary",children:g?.outOfStockLabel??"Sold Out"})})}),e?.priceLabel&&e?.availableForSale&&(0,a.jsx)(t.Text,{size:4,className:(0,n.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]",r?.productPriceLabel),children:e.priceLabel}),(0,a.jsxs)("div",{className:(0,n.cn)("lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2",r?.buttonGroup),children:[p&&(0,a.jsx)(t.Button,{variant:"secondary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",r?.secondaryButton),onClick:()=>x(v,"secondary"),disabled:!e.availableForSale&&v!=="learnMore",loading:B,"data-headless-type-name":"MediaShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${p}`,"data-headless-sku":e.sku,children:p}),y&&(0,a.jsx)(t.Button,{variant:"primary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",r?.primaryButton),onClick:()=>x(h,"primary"),disabled:!e.availableForSale&&h!=="learnMore",loading:F,"data-headless-type-name":"MediaShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${y}`,"data-headless-sku":e.sku,children:y})]})]})]})]})});u.displayName="MediaShelf.ProductCard";var j=u;
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaShelf/ProductCard.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type {\n ButtonFunctionType,\n CopyConfig,\n ProductCardData,\n StockDisplayMode,\n MediaShelfSemanticName,\n} from './types.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n stockDisplayMode: StockDisplayMode | undefined,\n stockThresholdValue: number | undefined,\n quantityAvailable: number,\n totalInventory: number\n): boolean {\n // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n if (stockDisplayMode === undefined) {\n return true\n }\n\n // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n switch (stockDisplayMode) {\n case 'always':\n // \u603B\u662F\u663E\u793A\n return true\n\n case 'never':\n // \u6C38\u4E0D\u663E\u793A\n return false\n\n case 'below-quantity':\n // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n\n return quantityAvailable <= stockThresholdValue\n\n case 'below-percentage':\n // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n default:\n // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n return true\n }\n}\n\n/**\n * MediaShelf ProductCard \u7EC4\u4EF6 Props \u63A5\u53E3\n */\nexport interface MediaShelfProductCardProps {\n /** \u4EA7\u54C1\u6570\u636E */\n product: ProductCardData\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<MediaShelfSemanticName, string>>\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n showTags?: boolean\n}\n\n/**\n * MediaShelf \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, MediaShelfProductCardProps>(\n (\n {\n product,\n className,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n copy,\n onProductImageClick,\n showTags = true,\n },\n ref\n ) => {\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const stockPercentage = React.useMemo(() => {\n if (product?.availableForSale && product?.quantityAvailable <= 0) {\n return OVERSELLING_STOCK_PERCENTAGE\n }\n // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n if (!product?.availableForSale) {\n return 0\n }\n return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n return (\n <Card\n ref={ref}\n className={cn(\n 'tablet:min-w-[auto] hover:bg-container-secondary-0 flex h-full min-w-[296px] flex-col overflow-hidden border-none',\n product.custom_link ? 'cursor-pointer' : '',\n className,\n classNames?.productCard\n )}\n >\n {/* \u56FE\u7247\u533A\u57DF */}\n <div\n className={cn(\n 'media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden',\n classNames?.productCardImageWrapper\n )}\n >\n {/* \u80CC\u666F\u56FE\u7247 */}\n <div className={cn('media-shelf-product-card-image-bg absolute inset-0 ', classNames?.productCardImageBg)}>\n <a\n onClick={() => onProductImageClick?.(product)}\n {...(!onProductImageClick && {\n href: product.custom_link || product.listingLink,\n })}\n className=\"cursor-pointer\"\n >\n <Picture\n source={product.custom_image || product.image}\n alt={product.name}\n className={cn('h-full', classNames?.productCardImage)}\n imgClassName=\"h-full object-contain\"\n />\n </a>\n </div>\n\n {/* \u6807\u7B7E\u533A\u57DF */}\n {showTags && product.tags && product.tags.length > 0 && (\n <div className=\"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]\">\n {product.tags.map((tag: any, index) =>\n (tag as any).label ? (\n <Badge\n key={index}\n size=\"sm\"\n variant={(tag.variant as any) || 'outline'}\n className={cn('mr-1')}\n promotionalType={tag.promotionalType}\n >\n {tag.label}\n </Badge>\n ) : (\n <React.Fragment key={index}>{tag}</React.Fragment>\n )\n )}\n </div>\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <CardContent className=\"desktop:p-6 bg-container-primary laptop:gap-6 flex h-[calc(100%-240px)] grow flex-col justify-between gap-4 p-4\">\n {/* \u4EA7\u54C1\u6807\u9898\u548C\u526F\u6807\u9898 */}\n <div className=\"flex-0\">\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'text-info-primary mb-1 line-clamp-2 tracking-tight',\n onProductImageClick ? 'cursor-pointer' : '',\n classNames?.productTitle\n )}\n onClick={onProductImageClick ? () => onProductImageClick(product) : undefined}\n >\n {product.custom_name || product.name}\n </Heading>\n {(product.custom_description || product?.description) && (\n <Text\n size={2}\n className={cn('text-info-primary line-clamp-1', classNames?.productDescription)}\n html={product.custom_description || product.description}\n />\n )}\n </div>\n\n {/* \u5E93\u5B58\u4FE1\u606F */}\n {shouldShowStock(\n stockDisplayMode,\n stockThresholdValue,\n product?.quantityAvailable ?? 0,\n product?.totalInventory ?? 0\n ) && (\n <div\n data-total={product?.totalInventory ?? 0}\n data-available={product?.quantityAvailable ?? 0}\n className=\"space-y-2\"\n >\n <Progress\n value={stockPercentage}\n max={100}\n min={0}\n size=\"base\"\n variant=\"default\"\n aria-label=\"stock progress\"\n classNames={{\n progressBar: 'transition-all duration-300 ease-in-out',\n }}\n />\n <Text size={3} className=\"text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[12px]\">\n {overselling\n ? copy?.limitedStock\n : copy?.stockDisplayText?.replace(\n '{count}',\n `${product.availableForSale ? product.quantityAvailable : 0}`\n )}\n </Text>\n </div>\n )}\n\n <div>\n {/* \u4EF7\u683C\u533A\u57DF */}\n <div className={cn('mb-2', classNames?.productPrice)}>\n <div className=\"flex items-baseline gap-2\">\n {product.availableForSale ? (\n <>\n <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n {product.price}\n </Heading>\n {showOriginalPrice && product.originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n as=\"h6\"\n >\n {product.originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Heading size={2} className=\"text-info-tertiary\">\n {copy?.outOfStockLabel ?? 'Sold Out'}\n </Heading>\n )}\n </div>\n </div>\n\n {product?.priceLabel && product?.availableForSale && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]',\n classNames?.productPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u533A\u57DF */}\n <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n size=\"base\"\n className={cn('tablet:w-fit w-full', classNames?.secondaryButton)}\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n data-headless-type-name=\"MediaShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${secondaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n size=\"base\"\n className={cn('tablet:w-fit w-full', classNames?.primaryButton)}\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n data-headless-type-name=\"MediaShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${primaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n </div>\n </CardContent>\n </Card>\n )\n }\n)\n\nProductCard.displayName = 'MediaShelf.ProductCard'\n\nexport default ProductCard\nexport { ProductCard }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button, Badge, Card, CardContent, Picture, Text, Heading, Progress } from '../../components/index.js'\n\nimport type {\n ButtonFunctionType,\n CopyConfig,\n ProductCardData,\n StockDisplayMode,\n MediaShelfSemanticName,\n} from './types.js'\n\n/**\n * \u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u7684\u6700\u5C0F\u767E\u5206\u6BD4\n * \u9632\u6B62\u8D85\u5356\u65F6\u5E93\u5B58\u6761\u663E\u793A\u4E3A\u6EE1\u683C\uFF08100%\uFF09\u6216\u5B8C\u5168\u7A7A\uFF080%\uFF09\n */\nconst OVERSELLING_STOCK_PERCENTAGE = 5\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThresholdValue \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param quantityAvailable \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n * @param totalInventory \u603B\u5E93\u5B58\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n stockDisplayMode: StockDisplayMode | undefined,\n stockThresholdValue: number | undefined,\n quantityAvailable: number,\n totalInventory: number\n): boolean {\n // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n if (stockDisplayMode === undefined) {\n return true\n }\n\n // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n switch (stockDisplayMode) {\n case 'always':\n // \u603B\u662F\u663E\u793A\n return true\n\n case 'never':\n // \u6C38\u4E0D\u663E\u793A\n return false\n\n case 'below-quantity':\n // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n\n return quantityAvailable <= stockThresholdValue\n\n case 'below-percentage':\n // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n if (stockThresholdValue === undefined) {\n return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n }\n return (quantityAvailable / totalInventory) * 100 <= stockThresholdValue\n\n default:\n // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n return true\n }\n}\n\n/**\n * MediaShelf ProductCard \u7EC4\u4EF6 Props \u63A5\u53E3\n */\nexport interface MediaShelfProductCardProps {\n /** \u4EA7\u54C1\u6570\u636E */\n product: ProductCardData\n /** \u6837\u5F0F\u7C7B\u540D */\n className?: string\n /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n stockDisplayMode?: StockDisplayMode\n /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n stockThresholdValue?: number\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData) => void\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddToCart?: (product: ProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<MediaShelfSemanticName, string>>\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n secondaryButtonFun?: ButtonFunctionType\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n primaryButtonFun?: ButtonFunctionType\n /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n showOriginalPrice?: boolean\n /** \u6587\u6848\u914D\u7F6E */\n copy?: CopyConfig\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n showTags?: boolean\n}\n\n/**\n * MediaShelf \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, MediaShelfProductCardProps>(\n (\n {\n product,\n className,\n stockDisplayMode,\n stockThresholdValue,\n onLearnMore,\n onShopNow,\n onAddToCart,\n classNames,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n showOriginalPrice,\n copy,\n onProductImageClick,\n showTags = true,\n },\n ref\n ) => {\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const stockPercentage = React.useMemo(() => {\n if (product?.availableForSale && product?.quantityAvailable <= 0) {\n return OVERSELLING_STOCK_PERCENTAGE\n }\n // \u4E0D\u53EF\u552E\u65F6\u663E\u793A0%\n if (!product?.availableForSale) {\n return 0\n }\n return ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n const overselling = product.availableForSale && product.quantityAvailable <= 0\n\n return (\n <Card\n ref={ref}\n className={cn(\n 'tablet:min-w-[auto] hover:bg-container-secondary-0 flex h-full min-w-[296px] flex-col overflow-hidden border-none',\n product.custom_link ? 'cursor-pointer' : '',\n className,\n classNames?.productCard\n )}\n >\n {/* \u56FE\u7247\u533A\u57DF */}\n <div\n className={cn(\n 'media-shelf-product-card-image-wrapper desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden',\n classNames?.productCardImageWrapper\n )}\n >\n {/* \u80CC\u666F\u56FE\u7247 */}\n <div className={cn('media-shelf-product-card-image-bg absolute inset-0 ', classNames?.productCardImageBg)}>\n <a\n onClick={() => onProductImageClick?.(product)}\n {...(!onProductImageClick && {\n href: product.custom_link || product.listingLink,\n })}\n className=\"cursor-pointer\"\n >\n <Picture\n source={product.custom_image || product.image}\n alt={product.name}\n className={cn('h-full', classNames?.productCardImage)}\n imgClassName=\"h-full object-contain\"\n />\n </a>\n </div>\n\n {/* \u6807\u7B7E\u533A\u57DF */}\n {showTags && product.tags && product.tags.length > 0 && (\n <div className=\"lg-desktop:h-[28px] absolute left-4 top-4 flex h-[24px]\">\n {product.tags.map((tag: any, index) =>\n (tag as any).label ? (\n <Badge\n key={index}\n size=\"sm\"\n variant={(tag.variant as any) || 'outline'}\n className={cn('mr-1')}\n promotionalType={tag.promotionalType}\n >\n {tag.label}\n </Badge>\n ) : (\n <React.Fragment key={index}>{tag}</React.Fragment>\n )\n )}\n </div>\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <CardContent className=\"desktop:p-6 bg-container-primary laptop:gap-6 flex h-[calc(100%-240px)] grow flex-col justify-between gap-4 p-4\">\n {/* \u4EA7\u54C1\u6807\u9898\u548C\u526F\u6807\u9898 */}\n <div className=\"flex-0\">\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'text-info-primary mb-1 line-clamp-2 tracking-tight',\n onProductImageClick ? 'cursor-pointer' : '',\n classNames?.productTitle\n )}\n onClick={onProductImageClick ? () => onProductImageClick(product) : undefined}\n >\n {product.custom_name || product.name}\n </Heading>\n {(product.custom_description || product?.description) && (\n <Text\n size={2}\n className={cn('text-info-primary line-clamp-1', classNames?.productDescription)}\n html={product.custom_description || product.description}\n />\n )}\n </div>\n\n {/* \u5E93\u5B58\u4FE1\u606F */}\n {shouldShowStock(\n stockDisplayMode,\n stockThresholdValue,\n product?.quantityAvailable ?? 0,\n product?.totalInventory ?? 0\n ) && (\n <div\n data-total={product?.totalInventory ?? 0}\n data-available={product?.quantityAvailable ?? 0}\n className=\"space-y-2\"\n >\n <Progress\n value={stockPercentage}\n max={100}\n min={0}\n size=\"base\"\n variant=\"default\"\n aria-label=\"stock progress\"\n classNames={{\n progressBar: 'transition-all duration-300 ease-in-out',\n }}\n />\n <Text size={3} className=\"text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[12px]\">\n {overselling\n ? copy?.limitedStock\n : copy?.stockDisplayText?.replace(\n '{count}',\n `${product.availableForSale ? product.quantityAvailable : 0}`\n )}\n </Text>\n </div>\n )}\n\n <div>\n {/* \u4EF7\u683C\u533A\u57DF */}\n <div className={cn('mb-2', classNames?.productPrice)}>\n <div className=\"flex items-baseline gap-2\">\n {product.availableForSale ? (\n <>\n <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n {product.price}\n </Heading>\n {showOriginalPrice && product.originalPrice && (\n <Heading\n size={2}\n className={cn('text-info-tertiary line-through', classNames?.originalPrice)}\n as=\"h6\"\n >\n {product.originalPrice}\n </Heading>\n )}\n </>\n ) : (\n <Heading size={2} className=\"text-info-tertiary\">\n {copy?.outOfStockLabel ?? 'Sold Out'}\n </Heading>\n )}\n </div>\n </div>\n\n {product?.priceLabel && product?.availableForSale && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[12px]',\n classNames?.productPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u533A\u57DF */}\n <div className={cn('lg-desktop:gap-3 tablet:flex-nowrap flex flex-wrap gap-2', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.secondaryButton\n )}\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n data-headless-type-name=\"MediaShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${secondaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n size=\"base\"\n className={cn(\n 'tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap',\n classNames?.primaryButton\n )}\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n data-headless-type-name=\"MediaShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name || product.name}#${product.description || ''}#${primaryButtonText}`}\n data-headless-sku={product.sku}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n </div>\n </CardContent>\n </Card>\n )\n }\n)\n\nProductCard.displayName = 'MediaShelf.ProductCard'\n\nexport default ProductCard\nexport { ProductCard }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "OVERSELLING_STOCK_PERCENTAGE", "shouldShowStock", "stockDisplayMode", "stockThresholdValue", "quantityAvailable", "totalInventory", "product", "className", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "showOriginalPrice", "copy", "onProductImageClick", "showTags", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "stockPercentage", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "overselling", "tag", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var W=Object.create;var x=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var $=(e,r)=>{for(var o in r)x(e,o,{get:r[o],enumerable:!0})},D=(e,r,o,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let
|
|
1
|
+
"use strict";"use client";var W=Object.create;var x=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var $=(e,r)=>{for(var o in r)x(e,o,{get:r[o],enumerable:!0})},D=(e,r,o,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of Y(r))!_.call(e,c)&&c!==o&&x(e,c,{get:()=>r[c],enumerable:!(u=X(r,c))||u.enumerable});return e};var ee=(e,r,o)=>(o=e!=null?W(Z(e)):{},D(r||!e||!e.__esModule?x(o,"default",{value:e,enumerable:!0}):o,e)),te=e=>D(x({},"__esModule",{value:!0}),e);var ae={};$(ae,{SceneShelfProductsPanel:()=>g});module.exports=te(ae);var t=require("react/jsx-runtime"),f=ee(require("react")),y=require("swiper/react"),P=require("swiper/modules"),n=require("../../helpers/index.js"),i=require("../../components/index.js"),F=require("./context.js"),oe=require("swiper/css");const g=f.forwardRef(({title:e,totalPriceLabel:r,totalCurrentPrice:o,totalOriginalPrice:u,primaryButtonText:c,primaryButtonFun:M,secondaryButtonText:A,secondaryButtonFun:R,bundleDiscountLabel:O,className:z,children:V,...H},j)=>{const a=(0,F.useSceneShelfContext)(),s=a?.classNames,h=r??a?.totalPriceLabel??"Total Price:",p=o??a?.totalCurrentPrice,w=u??a?.totalOriginalPrice,B=c??a?.primaryButtonText??"Shop Now",T=M??a?.primaryButtonFun??"buyNow",N=A??a?.secondaryButtonText??"Add to Cart",S=R??a?.secondaryButtonFun??"addCart",m=O??a?.bundleDiscountLabel,d=a?.selectedProducts??[],E=a?.onLearnMore,q=a?.onShopNow,G=a?.onAddToCart,I=a?.showOriginalPrice??!0,[J,K]=f.useState(!1),[Q,U]=f.useState(!1),L=f.Children.toArray(V),v=async(l,b)=>{if(!l)return;const C=b==="primary"?K:U;C(!0);try{switch(l){case"buyNow":await q?.(d);break;case"addCart":await G?.(d);break;case"learnMore":await E?.(d);break;default:break}}finally{C(!1)}},k=l=>l==="learnMore"?!1:d.length===0;return(0,t.jsxs)("div",{ref:j,className:(0,n.cn)("bg-container-primary laptop:p-6 lg-desktop:p-8 flex min-w-0 flex-1 flex-col justify-between overflow-hidden p-4",z,s?.content),...H,children:[e&&(0,t.jsx)(i.Heading,{as:"h2",size:3,className:(0,n.cn)("text-info-primary flex-0 mb-[16px] line-clamp-1 shrink-0",s?.title),html:e}),(0,t.jsx)("div",{className:(0,n.cn)("lg-desktop:mb-[24px] mb-[16px] flex-1 ",s?.productList),children:(0,t.jsx)(y.Swiper,{modules:[P.FreeMode,P.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:10,breakpoints:{0:{slidesPerView:1.5},768:{spaceBetween:16,slidesPerView:2.8},1024:{slidesPerView:2.3},1440:{spaceBetween:16,slidesPerView:L.length<=3?3:3.2}},children:L.map((l,b)=>(0,t.jsx)(y.SwiperSlide,{className:"h-fit shrink-0",children:l},b))})}),(0,t.jsxs)("div",{className:(0,n.cn)("tablet:items-end tablet:flex-row flex-0 flex flex-col items-start justify-between gap-2",s?.footer),children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsxs)("div",{className:(0,n.cn)("flex flex-wrap items-center gap-1",s?.totalPrice),children:[h&&(0,t.jsx)(i.Text,{as:"span",size:2,className:"text-info-primary lg-desktop:text-[24px] text-[20px]",children:h}),p&&(0,t.jsx)(i.Text,{as:"span",size:2,className:(0,n.cn)("text-info-primary lg-desktop:text-[24px] text-[20px]",s?.currentTotalPrice),children:p.formatted}),I&&w&&p&&w.value>p.value&&(0,t.jsx)(i.Text,{as:"span",size:2,className:(0,n.cn)("text-info-quaternary lg-desktop:text-[24px] text-[20px] line-through",s?.originalTotalPrice),children:w.formatted})]}),m&&(0,t.jsx)(i.Text,{as:"span",size:2,className:(0,n.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 text-[14px]",s?.bundleDiscountLabel),children:typeof m=="function"?m(d):m})]}),(0,t.jsxs)("div",{className:(0,n.cn)("flex items-stretch gap-3",s?.buttonGroup),children:[N&&(0,t.jsx)(i.Button,{variant:"secondary",className:"min-w-0 whitespace-normal text-center",onClick:()=>v(S,"secondary"),disabled:k(S),loading:Q,children:N}),B&&(0,t.jsx)(i.Button,{variant:"primary",className:"min-w-0 whitespace-normal text-center",onClick:()=>v(T,"primary"),disabled:k(T),loading:J,children:B})]})]})]})});g.displayName="SceneShelf.ProductsPanel";
|
|
2
2
|
//# sourceMappingURL=ProductsPanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SceneShelf/ProductsPanel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel } from 'swiper/modules'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Text } from '../../components/index.js'\nimport { useSceneShelfContext } from './context.js'\nimport type { PriceData, ButtonFunctionType, SceneProductCardData } from './types.js'\nimport 'swiper/css'\n\nexport interface SceneShelfProductsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u6807\u9898 */\n title?: string\n /** \u603B\u4EF7\u6807\u7B7E */\n totalPriceLabel?: string\n /** \u5F53\u524D\u603B\u4EF7 */\n totalCurrentPrice?: PriceData\n /** \u539F\u603B\u4EF7 */\n totalOriginalPrice?: PriceData\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /**\n * \u5957\u9910\u6298\u6263\u6807\u7B7E\uFF0C\u652F\u6301 string \u6216 render prop\n * @param selectedProducts \u5F53\u524D\u9009\u4E2D\u7684\u4EA7\u54C1\u5217\u8868\n */\n bundleDiscountLabel?: string | ((selectedProducts: SceneProductCardData[]) => React.ReactNode)\n /** \u5B50\u7EC4\u4EF6\uFF08ProductCard \u6216\u81EA\u5B9A\u4E49\u5361\u7247\uFF09 */\n children: React.ReactNode\n}\n\n/**\n * SceneShelf ProductsPanel \u7EC4\u4EF6\n *\n * @description \u4EA7\u54C1\u9762\u677F\u7EC4\u4EF6\uFF0C\u5305\u542B\u4EA7\u54C1\u5217\u8868\uFF08Swiper\uFF09\u548C\u5E95\u90E8\u64CD\u4F5C\u533A\u57DF\uFF08\u603B\u4EF7 + \u6309\u94AE\uFF09\n */\nconst SceneShelfProductsPanel = React.forwardRef<HTMLDivElement, SceneShelfProductsPanelProps>(\n (\n {\n title,\n totalPriceLabel: totalPriceLabelProp,\n totalCurrentPrice: totalCurrentPriceProp,\n totalOriginalPrice: totalOriginalPriceProp,\n primaryButtonText: primaryButtonTextProp,\n primaryButtonFun: primaryButtonFunProp,\n secondaryButtonText: secondaryButtonTextProp,\n secondaryButtonFun: secondaryButtonFunProp,\n bundleDiscountLabel: bundleDiscountLabelProp,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const context = useSceneShelfContext()\n const classNames = context?.classNames\n\n // Props \u4F18\u5148\u7EA7\u9AD8\u4E8E Context\n const totalPriceLabel = totalPriceLabelProp ?? context?.totalPriceLabel ?? 'Total Price:'\n const totalCurrentPrice = totalCurrentPriceProp ?? context?.totalCurrentPrice\n const totalOriginalPrice = totalOriginalPriceProp ?? context?.totalOriginalPrice\n const primaryButtonText = primaryButtonTextProp ?? context?.primaryButtonText ?? 'Shop Now'\n const primaryButtonFun = primaryButtonFunProp ?? context?.primaryButtonFun ?? 'buyNow'\n const secondaryButtonText = secondaryButtonTextProp ?? context?.secondaryButtonText ?? 'Add to Cart'\n const secondaryButtonFun = secondaryButtonFunProp ?? context?.secondaryButtonFun ?? 'addCart'\n const bundleDiscountLabel = bundleDiscountLabelProp ?? context?.bundleDiscountLabel\n\n const selectedProducts = context?.selectedProducts ?? []\n const onLearnMore = context?.onLearnMore\n const onShopNow = context?.onShopNow\n const onAddToCart = context?.onAddToCart\n const showOriginalPrice = context?.showOriginalPrice ?? true\n\n // \u6309\u94AE loading \u72B6\u6001\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n // \u5C06 children \u8F6C\u6362\u4E3A\u6570\u7EC4\n const childrenArray = React.Children.toArray(children)\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(selectedProducts)\n break\n case 'addCart':\n await onAddToCart?.(selectedProducts)\n break\n case 'learnMore':\n await onLearnMore?.(selectedProducts)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n // \u5224\u65AD\u6309\u94AE\u662F\u5426\u5E94\u8BE5\u88AB\u7981\u7528\uFF08learnMore \u4E0D\u9700\u8981\u68C0\u67E5\u9009\u4E2D\u4EA7\u54C1\u6570\u91CF\uFF09\n const isButtonDisabled = (buttonFun?: ButtonFunctionType) => {\n if (buttonFun === 'learnMore') return false\n return selectedProducts.length === 0\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-primary laptop:p-6 lg-desktop:p-8 flex min-w-0 flex-1 flex-col justify-between overflow-hidden p-4',\n className,\n classNames?.content\n )}\n {...props}\n >\n {/* \u6807\u9898 */}\n {title && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('text-info-primary flex-0 mb-[16px] line-clamp-1 shrink-0', classNames?.title)}\n html={title}\n />\n )}\n\n {/* \u4EA7\u54C1\u5217\u8868 - Swiper \u5BB9\u5668 */}\n <div className={cn('lg-desktop:mb-[24px] mb-[16px] flex-1 ', classNames?.productList)}>\n <Swiper\n modules={[FreeMode, Mousewheel]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n slidesPerView=\"auto\"\n spaceBetween={10}\n breakpoints={{\n 0: {\n slidesPerView: 1.5,\n },\n 768: {\n spaceBetween: 16,\n slidesPerView: 2.8,\n },\n 1024: {\n slidesPerView: 2.3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: childrenArray.length <= 3 ? 3 : 3.2,\n },\n }}\n >\n {childrenArray.map((child, index) => (\n <SwiperSlide key={index} className=\"h-fit shrink-0\">\n {child}\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* \u5E95\u90E8\u533A\u57DF - \u603B\u4EF7 + \u6309\u94AE */}\n <div\n className={cn(\n 'tablet:items-end tablet:flex-row flex-0 flex flex-col items-start justify-between gap-2',\n classNames?.footer\n )}\n >\n <div className=\"flex flex-col\">\n {/* \u603B\u4EF7 */}\n <div className={cn('flex flex-wrap items-center gap-1', classNames?.totalPrice)}>\n {totalPriceLabel && (\n <Text as=\"span\" size={2} className=\"text-info-primary lg-desktop:text-[24px] text-[20px]\">\n {totalPriceLabel}\n </Text>\n )}\n {totalCurrentPrice && (\n <Text\n as=\"span\"\n size={2}\n className={cn('text-info-primary lg-desktop:text-[24px] text-[20px]', classNames?.currentTotalPrice)}\n >\n {totalCurrentPrice.formatted}\n </Text>\n )}\n {showOriginalPrice &&\n totalOriginalPrice &&\n totalCurrentPrice &&\n totalOriginalPrice.value > totalCurrentPrice.value && (\n <Text\n as=\"span\"\n size={2}\n className={cn(\n 'text-info-quaternary lg-desktop:text-[24px] text-[20px] line-through',\n classNames?.originalTotalPrice\n )}\n >\n {totalOriginalPrice.formatted}\n </Text>\n )}\n </div>\n {bundleDiscountLabel && (\n <Text\n as=\"span\"\n size={2}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 text-[14px]',\n classNames?.bundleDiscountLabel\n )}\n >\n {typeof bundleDiscountLabel === 'function'\n ? bundleDiscountLabel(selectedProducts)\n : bundleDiscountLabel}\n </Text>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex gap-3', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={isButtonDisabled(secondaryButtonFun)}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={isButtonDisabled(primaryButtonFun)}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfProductsPanel.displayName = 'SceneShelf.ProductsPanel'\n\nexport { SceneShelfProductsPanel }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel } from 'swiper/modules'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Text } from '../../components/index.js'\nimport { useSceneShelfContext } from './context.js'\nimport type { PriceData, ButtonFunctionType, SceneProductCardData } from './types.js'\nimport 'swiper/css'\n\nexport interface SceneShelfProductsPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u6807\u9898 */\n title?: string\n /** \u603B\u4EF7\u6807\u7B7E */\n totalPriceLabel?: string\n /** \u5F53\u524D\u603B\u4EF7 */\n totalCurrentPrice?: PriceData\n /** \u539F\u603B\u4EF7 */\n totalOriginalPrice?: PriceData\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /**\n * \u5957\u9910\u6298\u6263\u6807\u7B7E\uFF0C\u652F\u6301 string \u6216 render prop\n * @param selectedProducts \u5F53\u524D\u9009\u4E2D\u7684\u4EA7\u54C1\u5217\u8868\n */\n bundleDiscountLabel?: string | ((selectedProducts: SceneProductCardData[]) => React.ReactNode)\n /** \u5B50\u7EC4\u4EF6\uFF08ProductCard \u6216\u81EA\u5B9A\u4E49\u5361\u7247\uFF09 */\n children: React.ReactNode\n}\n\n/**\n * SceneShelf ProductsPanel \u7EC4\u4EF6\n *\n * @description \u4EA7\u54C1\u9762\u677F\u7EC4\u4EF6\uFF0C\u5305\u542B\u4EA7\u54C1\u5217\u8868\uFF08Swiper\uFF09\u548C\u5E95\u90E8\u64CD\u4F5C\u533A\u57DF\uFF08\u603B\u4EF7 + \u6309\u94AE\uFF09\n */\nconst SceneShelfProductsPanel = React.forwardRef<HTMLDivElement, SceneShelfProductsPanelProps>(\n (\n {\n title,\n totalPriceLabel: totalPriceLabelProp,\n totalCurrentPrice: totalCurrentPriceProp,\n totalOriginalPrice: totalOriginalPriceProp,\n primaryButtonText: primaryButtonTextProp,\n primaryButtonFun: primaryButtonFunProp,\n secondaryButtonText: secondaryButtonTextProp,\n secondaryButtonFun: secondaryButtonFunProp,\n bundleDiscountLabel: bundleDiscountLabelProp,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const context = useSceneShelfContext()\n const classNames = context?.classNames\n\n // Props \u4F18\u5148\u7EA7\u9AD8\u4E8E Context\n const totalPriceLabel = totalPriceLabelProp ?? context?.totalPriceLabel ?? 'Total Price:'\n const totalCurrentPrice = totalCurrentPriceProp ?? context?.totalCurrentPrice\n const totalOriginalPrice = totalOriginalPriceProp ?? context?.totalOriginalPrice\n const primaryButtonText = primaryButtonTextProp ?? context?.primaryButtonText ?? 'Shop Now'\n const primaryButtonFun = primaryButtonFunProp ?? context?.primaryButtonFun ?? 'buyNow'\n const secondaryButtonText = secondaryButtonTextProp ?? context?.secondaryButtonText ?? 'Add to Cart'\n const secondaryButtonFun = secondaryButtonFunProp ?? context?.secondaryButtonFun ?? 'addCart'\n const bundleDiscountLabel = bundleDiscountLabelProp ?? context?.bundleDiscountLabel\n\n const selectedProducts = context?.selectedProducts ?? []\n const onLearnMore = context?.onLearnMore\n const onShopNow = context?.onShopNow\n const onAddToCart = context?.onAddToCart\n const showOriginalPrice = context?.showOriginalPrice ?? true\n\n // \u6309\u94AE loading \u72B6\u6001\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n // \u5C06 children \u8F6C\u6362\u4E3A\u6570\u7EC4\n const childrenArray = React.Children.toArray(children)\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(selectedProducts)\n break\n case 'addCart':\n await onAddToCart?.(selectedProducts)\n break\n case 'learnMore':\n await onLearnMore?.(selectedProducts)\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n }\n\n // \u5224\u65AD\u6309\u94AE\u662F\u5426\u5E94\u8BE5\u88AB\u7981\u7528\uFF08learnMore \u4E0D\u9700\u8981\u68C0\u67E5\u9009\u4E2D\u4EA7\u54C1\u6570\u91CF\uFF09\n const isButtonDisabled = (buttonFun?: ButtonFunctionType) => {\n if (buttonFun === 'learnMore') return false\n return selectedProducts.length === 0\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-primary laptop:p-6 lg-desktop:p-8 flex min-w-0 flex-1 flex-col justify-between overflow-hidden p-4',\n className,\n classNames?.content\n )}\n {...props}\n >\n {/* \u6807\u9898 */}\n {title && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('text-info-primary flex-0 mb-[16px] line-clamp-1 shrink-0', classNames?.title)}\n html={title}\n />\n )}\n\n {/* \u4EA7\u54C1\u5217\u8868 - Swiper \u5BB9\u5668 */}\n <div className={cn('lg-desktop:mb-[24px] mb-[16px] flex-1 ', classNames?.productList)}>\n <Swiper\n modules={[FreeMode, Mousewheel]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n slidesPerView=\"auto\"\n spaceBetween={10}\n breakpoints={{\n 0: {\n slidesPerView: 1.5,\n },\n 768: {\n spaceBetween: 16,\n slidesPerView: 2.8,\n },\n 1024: {\n slidesPerView: 2.3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: childrenArray.length <= 3 ? 3 : 3.2,\n },\n }}\n >\n {childrenArray.map((child, index) => (\n <SwiperSlide key={index} className=\"h-fit shrink-0\">\n {child}\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n\n {/* \u5E95\u90E8\u533A\u57DF - \u603B\u4EF7 + \u6309\u94AE */}\n <div\n className={cn(\n 'tablet:items-end tablet:flex-row flex-0 flex flex-col items-start justify-between gap-2',\n classNames?.footer\n )}\n >\n <div className=\"flex flex-col\">\n {/* \u603B\u4EF7 */}\n <div className={cn('flex flex-wrap items-center gap-1', classNames?.totalPrice)}>\n {totalPriceLabel && (\n <Text as=\"span\" size={2} className=\"text-info-primary lg-desktop:text-[24px] text-[20px]\">\n {totalPriceLabel}\n </Text>\n )}\n {totalCurrentPrice && (\n <Text\n as=\"span\"\n size={2}\n className={cn('text-info-primary lg-desktop:text-[24px] text-[20px]', classNames?.currentTotalPrice)}\n >\n {totalCurrentPrice.formatted}\n </Text>\n )}\n {showOriginalPrice &&\n totalOriginalPrice &&\n totalCurrentPrice &&\n totalOriginalPrice.value > totalCurrentPrice.value && (\n <Text\n as=\"span\"\n size={2}\n className={cn(\n 'text-info-quaternary lg-desktop:text-[24px] text-[20px] line-through',\n classNames?.originalTotalPrice\n )}\n >\n {totalOriginalPrice.formatted}\n </Text>\n )}\n </div>\n {bundleDiscountLabel && (\n <Text\n as=\"span\"\n size={2}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 text-[14px]',\n classNames?.bundleDiscountLabel\n )}\n >\n {typeof bundleDiscountLabel === 'function'\n ? bundleDiscountLabel(selectedProducts)\n : bundleDiscountLabel}\n </Text>\n )}\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn('flex items-stretch gap-3', classNames?.buttonGroup)}>\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"min-w-0 whitespace-normal text-center\"\n onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n disabled={isButtonDisabled(secondaryButtonFun)}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"min-w-0 whitespace-normal text-center\"\n onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n disabled={isButtonDisabled(primaryButtonFun)}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfProductsPanel.displayName = 'SceneShelf.ProductsPanel'\n\nexport { SceneShelfProductsPanel }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductsPanel_exports", "__export", "SceneShelfProductsPanel", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_modules", "import_helpers", "import_components", "import_context", "import_css", "title", "totalPriceLabelProp", "totalCurrentPriceProp", "totalOriginalPriceProp", "primaryButtonTextProp", "primaryButtonFunProp", "secondaryButtonTextProp", "secondaryButtonFunProp", "bundleDiscountLabelProp", "className", "children", "props", "ref", "context", "classNames", "totalPriceLabel", "totalCurrentPrice", "totalOriginalPrice", "primaryButtonText", "primaryButtonFun", "secondaryButtonText", "secondaryButtonFun", "bundleDiscountLabel", "selectedProducts", "onLearnMore", "onShopNow", "onAddToCart", "showOriginalPrice", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "childrenArray", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "isButtonDisabled", "child", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var ie=Object.create;var j=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(e,i)=>{for(var r in i)j(e,r,{get:i[r],enumerable:!0})},U=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of ae(i))!ne.call(e,u)&&u!==r&&j(e,u,{get:()=>i[u],enumerable:!(l=oe(i,u))||l.enumerable});return e};var W=(e,i,r)=>(r=e!=null?ie(re(e)):{},U(i||!e||!e.__esModule?j(r,"default",{value:e,enumerable:!0}):r,e)),le=e=>U(j({},"__esModule",{value:!0}),e);var fe={};se(fe,{SceneShelfV2ProductCard:()=>N,default:()=>ue});module.exports=le(fe);var t=require("react/jsx-runtime"),n=W(require("react")),a=require("../../helpers/index.js"),s=require("../../components/index.js"),$=W(require("../Media/index.js")),D=require("swiper/react"),Q=require("swiper/modules"),ve=require("swiper/css"),he=require("swiper/css/navigation"),q=require("../../shared/Styles.js"),J=require("../../hooks/useGridRowCount.js"),X=require("../../hooks/useExposure.js"),Y=require("../../hooks/useViewItemList.js"),Z=require("../../shared/trackUrlRef.js"),A=require("../AiuiProvider/index.js"),V=require("../../shared/track.js");const ce="shelf",de="scene_shelf_v2",pe=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),me=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),N=n.memo(({product:e,isShowTag:i=!0,onImageClick:r,onProductImageClick:l,onLearnMore:u,onShopNow:P,onAddToCart:k,secondaryButtonText:x,secondaryButtonFun:b,primaryButtonText:w,primaryButtonFun:_,classNames:c,className:d,theme:L,index:p})=>{const{locale:B="us",trackingData:M}=(0,A.useAiuiContext)(),[z,I]=n.useState(!1),[C,R]=n.useState(!1),f=M?.pageGroup,y=n.useCallback(async(m,v)=>{if(!m)return;const T=v==="primary"?I:R;T(!0);try{switch(m){case"buyNow":await P?.(e);break;case"addCart":await k?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{T(!1)}},[u,P,k,e]),E=n.useCallback(()=>y(_,"primary"),[y,_]),H=n.useCallback(()=>y(b,"secondary"),[y,b]),g=n.useCallback(m=>{const v=l??r;!e.href&&v&&m.preventDefault(),v?.(e),(0,V.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:p}]})},[p,r,l,f,e]);return(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",d,c?.productCard,{"bg-container-secondary-0":L==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,a.getLocalizedPath)((0,Z.trackUrlRef)(e.href,f+"_"+ce+"_"+de),B),onClick:g,className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",c?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",(l??r)&&"cursor-pointer transition-opacity hover:opacity-80",c?.productCardImage),onClick:l??r?g:void 0,role:l??r?"button":void 0,tabIndex:l??r?0:void 0,"aria-label":l??r?`View ${e.title}`:void 0,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",c?.productCardTags),children:i&&e?.tags?.map((m,v)=>(0,t.jsx)(s.Badge,{variant:m.variant??"outline",size:"sm",className:"",children:m.label},v))}),(0,t.jsx)(s.Heading,{as:"h3",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",c?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(s.Text,{as:"p",size:1,className:(0,a.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",c?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",c?.productCardPriceWrapper),children:[(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-current-price text-info-primary",c?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,a.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",c?.productCardOriginalPrice),children:e.originalPrice})]}),e?.priceLabel&&(0,t.jsx)(s.Text,{size:4,className:(0,a.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",c?.productCardPriceLabel),children:e.priceLabel}),(x||w)&&(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",c?.productCardButtons),children:[x&&(0,t.jsx)(s.Button,{variant:"secondary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{H(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&b!=="learnMore",loading:C,children:x}),w&&(0,t.jsx)(s.Button,{variant:"primary",className:"laptop:grow-0 flex-1 whitespace-nowrap",onClick:()=>{E(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:w,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&_!=="learnMore",loading:z,children:w})]})]})]})]})});N.displayName="SceneShelfV2.ProductCard";const K=n.forwardRef(({className:e,classNames:i={},data:r,onPlayClick:l,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,...w},_)=>{const{theme:c="light",sceneImage:d,productsTitle:L,products:p,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,viewMoreLimit:C=2,copy:R}=r,f=n.useRef(null),y=n.useRef(null),E=n.useRef(null),[H,g]=n.useState(!1),[m,v]=n.useState(!1),{trackingData:T}=(0,A.useAiuiContext)();(0,X.useExposure)(y,{componentType:"image",componentName:"scene_shelf_banner"}),(0,Y.useViewItemList)(E,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:p.map((o,h)=>({item_id:o.sku??"",item_name:o.title,item_variant:o.variantId??"",price:o.currentPrice,index:h})),tabName:""});const O=(0,J.useGridRowCount)({rows:C??0,mobileCols:2}),G=n.useMemo(()=>[d?.pc,d?.desktop,d?.laptop,d?.pad,d?.mobile].some(o=>o?.mimeType==="video/mp4"),[d]),ee=n.useCallback(()=>{const o=f.current;o?o.paused?(o.play(),g(!0),l?.(!0)):(o.pause(),g(!1),l?.(!1)):l?.(!0),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:T?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:d?.pc?.id}})},[l,d?.pc?.id,T?.pageGroup]);return n.useEffect(()=>{const o=f.current;if(!o||!G)return;const h=new IntersectionObserver(S=>{S.forEach(F=>{F.isIntersecting?o.play().catch(te=>{console.warn("Video autoplay failed:",te)}):o.pause()})},{threshold:.5});return h.observe(o),()=>{h.disconnect()}},[]),(0,t.jsxs)("div",{...w,ref:_,className:(0,a.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":c==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,a.cn)("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",i?.media),ref:y,children:[(0,t.jsx)($.default,{pcImage:d?.pc,desktopImage:d?.desktop,laptopImage:d?.laptop,padImage:d?.pad,mobileImage:d?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>g(!0),onVideoPause:()=>g(!1),onVideoEnded:()=>g(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,a.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),G&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":H?"Pause video":"Play video",onClick:ee,className:(0,a.cn)("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",i?.mediaPlayButton),children:H?(0,t.jsx)(me,{}):(0,t.jsx)(pe,{})})})]}),(0,t.jsxs)("div",{ref:E,className:(0,a.cn)("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",i?.products),children:[L&&(0,t.jsx)(s.Heading,{as:"h2",size:3,className:(0,a.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:L}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const o=C!==void 0&&C>0&&p.length>O,h=o&&!m?p.slice(0,O):p;return(0,t.jsxs)(t.Fragment,{children:[h.map((S,F)=>(0,t.jsx)(N,{isShowTag:r.isShowTag??!0,product:S,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:F},S.productKey)),o&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>v(S=>!S),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":m,children:[m?R?.viewLessLabel??"View Less":R?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,a.cn)("size-4 transition-transform",m&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(D.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Q.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:p.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:p.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:p.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:p.length>4?3.8:4}},children:p.map((o,h)=>(0,t.jsx)(D.SwiperSlide,{className:(0,a.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(N,{product:o,isShowTag:r.isShowTag??!0,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:h})},o.productKey))})})})]})]})});K.displayName="SceneShelfV2";var ue=(0,q.withLayout)(K);
|
|
1
|
+
"use strict";"use client";var ie=Object.create;var j=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var se=(e,i)=>{for(var r in i)j(e,r,{get:i[r],enumerable:!0})},U=(e,i,r,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let u of oe(i))!ne.call(e,u)&&u!==r&&j(e,u,{get:()=>i[u],enumerable:!(l=ae(i,u))||l.enumerable});return e};var W=(e,i,r)=>(r=e!=null?ie(re(e)):{},U(i||!e||!e.__esModule?j(r,"default",{value:e,enumerable:!0}):r,e)),le=e=>U(j({},"__esModule",{value:!0}),e);var fe={};se(fe,{SceneShelfV2ProductCard:()=>N,default:()=>ue});module.exports=le(fe);var t=require("react/jsx-runtime"),n=W(require("react")),o=require("../../helpers/index.js"),s=require("../../components/index.js"),$=W(require("../Media/index.js")),D=require("swiper/react"),Q=require("swiper/modules"),ge=require("swiper/css"),he=require("swiper/css/navigation"),q=require("../../shared/Styles.js"),J=require("../../hooks/useGridRowCount.js"),X=require("../../hooks/useExposure.js"),Y=require("../../hooks/useViewItemList.js"),Z=require("../../shared/trackUrlRef.js"),A=require("../AiuiProvider/index.js"),V=require("../../shared/track.js");const ce="shelf",de="scene_shelf_v2",pe=()=>(0,t.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,t.jsx)("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),me=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,t.jsx)("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),(0,t.jsx)("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),N=n.memo(({product:e,isShowTag:i=!0,onImageClick:r,onProductImageClick:l,onLearnMore:u,onShopNow:P,onAddToCart:k,secondaryButtonText:x,secondaryButtonFun:b,primaryButtonText:w,primaryButtonFun:_,classNames:c,className:d,theme:L,index:p})=>{const{locale:B="us",trackingData:M}=(0,A.useAiuiContext)(),[z,I]=n.useState(!1),[C,R]=n.useState(!1),f=M?.pageGroup,y=n.useCallback(async(m,g)=>{if(!m)return;const T=g==="primary"?I:R;T(!0);try{switch(m){case"buyNow":await P?.(e);break;case"addCart":await k?.(e);break;case"learnMore":await u?.(e?.href??"");break;default:break}}finally{T(!1)}},[u,P,k,e]),E=n.useCallback(()=>y(_,"primary"),[y,_]),H=n.useCallback(()=>y(b,"secondary"),[y,b]),v=n.useCallback(m=>{const g=l??r;!e.href&&g&&m.preventDefault(),g?.(e),(0,V.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_2_Products",page_group:f,items:[{item_id:e.sku,item_name:e.custom_name||e.title,item_variant:e.variantId,price:e.currentPrice,index:p}]})},[p,r,l,f,e]);return(0,t.jsxs)("div",{className:(0,o.cn)("scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4",d,c?.productCard,{"bg-container-secondary-0":L==="dark"}),children:[e.href?(0,t.jsx)("a",{href:(0,o.getLocalizedPath)((0,Z.trackUrlRef)(e.href,f+"_"+ce+"_"+de),B),onClick:v,className:(0,o.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80",c?.productCardImage),"aria-label":`View ${e.title}`,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}):(0,t.jsx)("div",{className:(0,o.cn)("scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ",(l??r)&&"cursor-pointer transition-opacity hover:opacity-80",c?.productCardImage),onClick:l??r?v:void 0,role:l??r?"button":void 0,tabIndex:l??r?0:void 0,"aria-label":l??r?`View ${e.title}`:void 0,children:(0,t.jsx)(s.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"size-full",imgClassName:"object-contain"})}),(0,t.jsxs)("div",{className:"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1",c?.productCardTags),children:i&&e?.tags?.map((m,g)=>(0,t.jsx)(s.Badge,{variant:m.variant??"outline",size:"sm",className:"",children:m.label},g))}),(0,t.jsx)(s.Heading,{as:"h3",size:2,className:(0,o.cn)("scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]",c?.productCardTitle),children:e.custom_name||e.title}),(e.custom_description||e.description)&&(0,t.jsx)(s.Text,{as:"p",size:1,className:(0,o.cn)("scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",c?.productCardDescription),children:e.custom_description||e.description})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:(0,o.cn)("scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1",c?.productCardPriceWrapper),children:[(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,o.cn)("scene-shelf-v2-product-card-current-price text-info-primary",c?.productCardCurrentPrice),children:e.currentPrice}),e.originalPrice&&(0,t.jsx)(s.Heading,{as:"h6",size:2,className:(0,o.cn)("scene-shelf-v2-product-card-original-price text-info-tertiary line-through",c?.productCardOriginalPrice),children:e.originalPrice})]}),e?.priceLabel&&(0,t.jsx)(s.Text,{size:4,className:(0,o.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",c?.productCardPriceLabel),children:e.priceLabel}),(x||w)&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2",c?.productCardButtons),children:[x&&(0,t.jsx)(s.Button,{variant:"secondary",className:"laptop:w-auto laptop:flex-1 w-full min-w-0 whitespace-normal text-center",onClick:()=>{H(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:x,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&b!=="learnMore",loading:C,children:x}),w&&(0,t.jsx)(s.Button,{variant:"primary",className:"laptop:w-auto laptop:flex-1 w-full min-w-0 whitespace-normal text-center",onClick:()=>{E(),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:f||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.title,component_description:"",button_name:w,SKU:e.sku||"",position:p}})},disabled:e.soldOut&&_!=="learnMore",loading:z,children:w})]})]})]})]})});N.displayName="SceneShelfV2.ProductCard";const K=n.forwardRef(({className:e,classNames:i={},data:r,onPlayClick:l,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,...w},_)=>{const{theme:c="light",sceneImage:d,productsTitle:L,products:p,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,viewMoreLimit:C=2,copy:R}=r,f=n.useRef(null),y=n.useRef(null),E=n.useRef(null),[H,v]=n.useState(!1),[m,g]=n.useState(!1),{trackingData:T}=(0,A.useAiuiContext)();(0,X.useExposure)(y,{componentType:"image",componentName:"scene_shelf_banner"}),(0,Y.useViewItemList)(E,{componentType:"video",componentName:"scene_shelf_banner",itemListName:"Scene_Shelf_2_Products",items:p.map((a,h)=>({item_id:a.sku??"",item_name:a.title,item_variant:a.variantId??"",price:a.currentPrice,index:h})),tabName:""});const O=(0,J.useGridRowCount)({rows:C??0,mobileCols:2}),G=n.useMemo(()=>[d?.pc,d?.desktop,d?.laptop,d?.pad,d?.mobile].some(a=>a?.mimeType==="video/mp4"),[d]),ee=n.useCallback(()=>{const a=f.current;a?a.paused?(a.play(),v(!0),l?.(!0)):(a.pause(),v(!1),l?.(!1)):l?.(!0),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:T?.pageGroup,component_type:"video",component_name:"scene_shelf_banner",position:1,creative_id:d?.pc?.id}})},[l,d?.pc?.id,T?.pageGroup]);return n.useEffect(()=>{const a=f.current;if(!a||!G)return;const h=new IntersectionObserver(S=>{S.forEach(F=>{F.isIntersecting?a.play().catch(te=>{console.warn("Video autoplay failed:",te)}):a.pause()})},{threshold:.5});return h.observe(a),()=>{h.disconnect()}},[]),(0,t.jsxs)("div",{...w,ref:_,className:(0,o.cn)("scene-shelf-v2-root w-full overflow-hidden",{"aiui-dark":c==="dark"},e,i?.root),children:[(0,t.jsxs)("div",{className:(0,o.cn)("scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden",i?.media),ref:y,children:[(0,t.jsx)($.default,{pcImage:d?.pc,desktopImage:d?.desktop,laptopImage:d?.laptop,padImage:d?.pad,mobileImage:d?.mobile,className:"size-full",videoClassName:"absolute inset-0 size-full object-cover",videoRef:f,onVideoPlay:()=>v(!0),onVideoPause:()=>v(!1),onVideoEnded:()=>v(!1)}),(0,t.jsx)("div",{"aria-hidden":"true",className:(0,o.cn)("scene-shelf-v2-media-overlay pointer-events-none absolute inset-0",i?.mediaOverlay)}),G&&(0,t.jsx)("div",{className:"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6",children:(0,t.jsx)("button",{type:"button","aria-label":H?"Pause video":"Play video",onClick:ee,className:(0,o.cn)("scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",i?.mediaPlayButton),children:H?(0,t.jsx)(me,{}):(0,t.jsx)(pe,{})})})]}),(0,t.jsxs)("div",{ref:E,className:(0,o.cn)("scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3",i?.products),children:[L&&(0,t.jsx)(s.Heading,{as:"h2",size:3,className:(0,o.cn)("scene-shelf-v2-products-title text-info-primary",i?.productsTitle),html:L}),(0,t.jsx)("div",{className:"tablet:hidden grid grid-cols-2 gap-3",children:(()=>{const a=C!==void 0&&C>0&&p.length>O,h=a&&!m?p.slice(0,O):p;return(0,t.jsxs)(t.Fragment,{children:[h.map((S,F)=>(0,t.jsx)(N,{isShowTag:r.isShowTag??!0,product:S,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:F},S.productKey)),a&&(0,t.jsx)("div",{className:"col-span-2 mt-6 flex justify-center",children:(0,t.jsxs)("button",{type:"button",onClick:()=>g(S=>!S),className:"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors","aria-expanded":m,children:[m?R?.viewLessLabel??"View Less":R?.viewMoreLabel??"View More",(0,t.jsx)("svg",{className:(0,o.cn)("size-4 transition-transform",m&&"rotate-180"),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})()}),(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"relative",children:(0,t.jsx)(D.Swiper,{slidesPerView:"auto",observer:!0,observeParents:!0,modules:[Q.Mousewheel],mousewheel:{enabled:!0,forceToAxis:!0,sensitivity:1},className:"!overflow-visible",breakpoints:{768:{spaceBetween:16,slidesPerView:p.length>3?2.3:2},1024:{spaceBetween:16,slidesPerView:p.length>3?2.8:3},1440:{spaceBetween:16,slidesPerView:p.length>4?3.8:4},1920:{spaceBetween:16,slidesPerView:p.length>4?3.8:4}},children:p.map((a,h)=>(0,t.jsx)(D.SwiperSlide,{className:(0,o.cn)("!h-auto ",i.productCardSlideWrapper),children:(0,t.jsx)(N,{product:a,isShowTag:r.isShowTag??!0,onImageClick:u,onProductImageClick:P,onLearnMore:k,onShopNow:x,onAddToCart:b,secondaryButtonText:B,secondaryButtonFun:M,primaryButtonText:z,primaryButtonFun:I,classNames:i,theme:c,index:h})},a.productKey))})})})]})]})});K.displayName="SceneShelfV2";var ue=(0,q.withLayout)(K);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SceneShelfV2/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardPriceLabel'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n /** \u4EF7\u683C\u6807\u7B7E\u6587\u672C\uFF08\u5982 \"Plus Member Price\"\uFF09 */\n priceLabel?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** @deprecated Use `onProductImageClick` instead. */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onProductImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onProductImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n const callback = onProductImageClick ?? onImageClick\n if (!product.href && callback) {\n e.preventDefault()\n }\n callback?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, onProductImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n 'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n 'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n (onProductImageClick ?? onImageClick) && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={(onProductImageClick ?? onImageClick) ? handleImageClick : undefined}\n role={(onProductImageClick ?? onImageClick) ? 'button' : undefined}\n tabIndex={(onProductImageClick ?? onImageClick) ? 0 : undefined}\n aria-label={(onProductImageClick ?? onImageClick) ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {product?.priceLabel && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames?.productCardPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:grow-0 flex-1 whitespace-nowrap\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n {\n className,\n classNames = {},\n data,\n onPlayClick,\n onImageClick,\n onProductImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n ...props\n },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n 'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n 'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onProductImageClick={onProductImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onProductImageClick={onProductImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport { Heading, Text, Badge, Button, Picture } from '../../components/index.js'\nimport Media from '../Media/index.js'\nimport type { ResponsiveMedia, Theme } from '../../types/props.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useGridRowCount } from '../../hooks/useGridRowCount.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useViewItemList } from '../../hooks/useViewItemList.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'shelf'\nconst componentName = 'scene_shelf_v2'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Types\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\nexport type SceneShelfV2SemanticName =\n | 'root'\n | 'media'\n | 'mediaOverlay'\n | 'mediaQuote'\n | 'mediaPlayButton'\n | 'products'\n | 'productsTitle'\n | 'productGrid'\n | 'productCardSlideWrapper'\n | 'productCard'\n | 'productCardImage'\n | 'productCardTags'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPriceWrapper'\n | 'productCardCurrentPrice'\n | 'productCardOriginalPrice'\n | 'productCardPriceLabel'\n | 'productCardButtons'\n\nexport interface SceneShelfV2Tag {\n label: string\n variant?: 'outline' | 'fill'\n}\n\nexport interface SceneShelfV2Product {\n /** \u4EA7\u54C1\u552F\u4E00\u6807\u8BC6 */\n productKey: string\n /** \u4EA7\u54C1\u4E3B\u6807\u9898 */\n title: string\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u4EA7\u54C1\u56FE\u7247 */\n imageUrl: string\n imageAlt: string\n /**\n * \u4EA7\u54C1\u94FE\u63A5 URL\u3002\n */\n href?: string\n /** \u5F53\u524D\u4EF7\u683C\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u5982 \"$1,999.00\"\uFF09 */\n currentPrice: string\n /** \u539F\u4EF7\uFF08\u663E\u793A\u5220\u9664\u7EBF\uFF09 */\n originalPrice?: string\n /** \u6807\u7B7E\u5217\u8868 */\n tags?: SceneShelfV2Tag[]\n /** \u662F\u5426\u552E\u7F44 */\n soldOut?: boolean\n /**\n * sku\n */\n sku?: string\n /**\n * \u53D8\u4F53id\n */\n variantId?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u540D\u79F0 */\n custom_name?: string\n /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n custom_description?: string\n /** \u4EF7\u683C\u6807\u7B7E\u6587\u672C\uFF08\u5982 \"Plus Member Price\"\uFF09 */\n priceLabel?: string\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface SceneShelfV2CopyConfig {\n /** \u67E5\u770B\u66F4\u591A\u6807\u7B7E */\n viewMoreLabel?: string\n /** \u6536\u8D77\u6807\u7B7E */\n viewLessLabel?: string\n}\n\nexport interface SceneShelfV2Data {\n theme?: 'light' | 'dark'\n isShowTag?: boolean\n sceneImage: ResponsiveMedia\n /** \u4EA7\u54C1\u533A\u6807\u9898\uFF08\u53EF\u9009\uFF09 */\n productsTitle?: string\n /** \u4EA7\u54C1\u5217\u8868 */\n products: SceneShelfV2Product[]\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C */\n secondaryButtonText?: string\n /** \u6B21\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n secondaryButtonFun?: ButtonFunctionType\n /** \u4E3B\u8981\u6309\u94AE\u6587\u672C */\n primaryButtonText?: string\n /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD\u7C7B\u578B */\n primaryButtonFun?: ButtonFunctionType\n /** \u67E5\u770B\u66F4\u591A\u9650\u5236\u6570\uFF08\u624B\u673A\u7AEF\u8D85\u8FC7\u4E24\u884C\u65F6\u663E\u793AviewMore\u6309\u94AE\uFF09 */\n viewMoreLimit?: number\n /** \u6587\u6848\u914D\u7F6E */\n copy?: SceneShelfV2CopyConfig\n}\n\nexport interface SceneShelfV2Props extends React.HTMLAttributes<HTMLDivElement> {\n data: SceneShelfV2Data\n /**\n * \u70B9\u51FB\u64AD\u653E/\u6682\u505C\u6309\u94AE\u56DE\u8C03\u3002\n * \u5F53\u5A92\u4F53\u533A\u4E3A\u89C6\u9891\u65F6\uFF0C\u7EC4\u4EF6\u5185\u90E8\u4F1A\u81EA\u52A8\u63A7\u5236\u64AD\u653E/\u6682\u505C,\u6B64\u56DE\u8C03\u4ECD\u4F1A\u89E6\u53D1\u3002\n */\n onPlayClick?: (isPlaying: boolean) => void\n /** @deprecated Use `onProductImageClick` instead. */\n onImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n onProductImageClick?: (product: SceneShelfV2Product) => void\n /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onLearnMore?: (link: string) => void | Promise<void>\n /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03\uFF08\u652F\u6301\u5F02\u6B65\uFF09 */\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n}\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n </svg>\n)\n\nconst PauseIcon = () => (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n </svg>\n)\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Product Card\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface ProductCardInnerProps {\n product: SceneShelfV2Product\n isShowTag: boolean\n onImageClick?: (product: SceneShelfV2Product) => void\n onProductImageClick?: (product: SceneShelfV2Product) => void\n onLearnMore?: (link: string) => void | Promise<void>\n onShopNow?: (product: SceneShelfV2Product) => void | Promise<void>\n onAddToCart?: (product: SceneShelfV2Product) => void | Promise<void>\n secondaryButtonText?: string\n secondaryButtonFun?: ButtonFunctionType\n primaryButtonText?: string\n primaryButtonFun?: ButtonFunctionType\n classNames?: Partial<Record<SceneShelfV2SemanticName, string>>\n className?: string\n theme?: Theme\n index?: number\n}\n\nconst ProductCardInner = React.memo(\n ({\n product,\n isShowTag = true,\n onImageClick,\n onProductImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n classNames,\n className,\n theme,\n index,\n }: ProductCardInnerProps) => {\n const { locale = 'us', trackingData } = useAiuiContext()\n const [primaryLoading, setPrimaryLoading] = React.useState(false)\n const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n const pageGroup = trackingData?.pageGroup\n\n // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n const handleButtonClick = React.useCallback(\n async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n if (!buttonFun) return\n\n const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n setLoading(true)\n try {\n switch (buttonFun) {\n case 'buyNow':\n await onShopNow?.(product)\n break\n case 'addCart':\n await onAddToCart?.(product)\n break\n case 'learnMore':\n await onLearnMore?.(product?.href ?? '')\n break\n default:\n break\n }\n } finally {\n setLoading(false)\n }\n },\n [onLearnMore, onShopNow, onAddToCart, product]\n )\n\n const handlePrimary = React.useCallback(\n () => handleButtonClick(primaryButtonFun, 'primary'),\n [handleButtonClick, primaryButtonFun]\n )\n const handleSecondary = React.useCallback(\n () => handleButtonClick(secondaryButtonFun, 'secondary'),\n [handleButtonClick, secondaryButtonFun]\n )\n\n const handleImageClick = React.useCallback(\n (e: React.MouseEvent) => {\n const callback = onProductImageClick ?? onImageClick\n if (!product.href && callback) {\n e.preventDefault()\n }\n callback?.(product)\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n item_list_name: 'Scene_Shelf_2_Products',\n page_group: pageGroup,\n items: [\n {\n item_id: product.sku,\n item_name: product.custom_name || product.title,\n item_variant: product.variantId,\n price: product.currentPrice,\n index: index,\n },\n ],\n })\n },\n [index, onImageClick, onProductImageClick, pageGroup, product]\n )\n\n return (\n <div\n className={cn(\n 'scene-shelf-v2-product-card rounded-box bg-container-secondary-1 tablet:px-6 desktop:pb-6 desktop:px-6 box-border flex h-full flex-col items-center justify-between gap-3 overflow-hidden px-2 py-4',\n className,\n classNames?.productCard,\n {\n 'bg-container-secondary-0': theme === 'dark',\n }\n )}\n >\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n {product.href ? (\n <a\n href={getLocalizedPath(\n trackUrlRef(product.href, pageGroup + '_' + componentType + '_' + componentName),\n locale\n )}\n onClick={handleImageClick}\n className={cn(\n 'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n aria-label={`View ${product.title}`}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-image desktop:size-[196px] tablet:size-[140px] lg-desktop:size-[196px] flex size-[128px] shrink-0 items-center justify-center ',\n (onProductImageClick ?? onImageClick) && 'cursor-pointer transition-opacity hover:opacity-80',\n classNames?.productCardImage\n )}\n onClick={(onProductImageClick ?? onImageClick) ? handleImageClick : undefined}\n role={(onProductImageClick ?? onImageClick) ? 'button' : undefined}\n tabIndex={(onProductImageClick ?? onImageClick) ? 0 : undefined}\n aria-label={(onProductImageClick ?? onImageClick) ? `View ${product.title}` : undefined}\n >\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt}\n className=\"size-full\"\n imgClassName=\"object-contain\"\n />\n </div>\n )}\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"desktop:gap-6 flex w-full flex-1 flex-col justify-between gap-4\">\n {/* \u6807\u7B7E + \u6807\u9898 + \u526F\u6807\u9898 */}\n <div className=\"flex flex-col gap-2\">\n <div\n className={cn(\n 'scene-shelf-v2-product-card-tags flex min-h-[24px] flex-wrap gap-1',\n classNames?.productCardTags\n )}\n >\n {isShowTag &&\n product?.tags?.map((tag, idx) => (\n <Badge key={idx} variant={tag.variant ?? 'outline'} size=\"sm\" className=\"\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n <Heading\n as=\"h3\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-title text-info-primary laptop:line-clamp-2 line-clamp-3 pr-[16%] text-[16px]',\n classNames?.productCardTitle\n )}\n >\n {product.custom_name || product.title}\n </Heading>\n\n {(product.custom_description || product.description) && (\n <Text\n as=\"p\"\n size={1}\n className={cn(\n 'scene-shelf-v2-product-card-description text-info-primary tablet:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1',\n classNames?.productCardDescription\n )}\n >\n {product.custom_description || product.description}\n </Text>\n )}\n </div>\n\n {/* \u4EF7\u683C + \u6309\u94AE */}\n <div className=\"flex flex-col gap-2\">\n {/* \u4EF7\u683C */}\n <div\n className={cn(\n 'scene-shelf-v2-product-card-price flex flex-wrap items-center gap-1',\n classNames?.productCardPriceWrapper\n )}\n >\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-current-price text-info-primary',\n classNames?.productCardCurrentPrice\n )}\n >\n {product.currentPrice}\n </Heading>\n {product.originalPrice && (\n <Heading\n as=\"h6\"\n size={2}\n className={cn(\n 'scene-shelf-v2-product-card-original-price text-info-tertiary line-through',\n classNames?.productCardOriginalPrice\n )}\n >\n {product.originalPrice}\n </Heading>\n )}\n </div>\n\n {product?.priceLabel && (\n <Text\n size={4}\n className={cn(\n 'text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames?.productCardPriceLabel\n )}\n >\n {product.priceLabel}\n </Text>\n )}\n\n {/* \u6309\u94AE\u7EC4 */}\n {(secondaryButtonText || primaryButtonText) && (\n <div\n className={cn(\n 'scene-shelf-v2-product-card-buttons laptop:flex-nowrap lg-desktop:gap-3 flex flex-wrap gap-2',\n classNames?.productCardButtons\n )}\n >\n {secondaryButtonText && (\n <Button\n variant=\"secondary\"\n className=\"laptop:w-auto laptop:flex-1 w-full min-w-0 whitespace-normal text-center\"\n onClick={() => {\n handleSecondary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: secondaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && secondaryButtonFun !== 'learnMore'}\n loading={secondaryLoading}\n >\n {secondaryButtonText}\n </Button>\n )}\n {primaryButtonText && (\n <Button\n variant=\"primary\"\n className=\"laptop:w-auto laptop:flex-1 w-full min-w-0 whitespace-normal text-center\"\n onClick={() => {\n handlePrimary()\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: pageGroup || 'Home Page',\n component_type: 'copy',\n component_name: 'scene_shelf_product',\n component_title: product.title,\n component_description: '',\n button_name: primaryButtonText,\n SKU: product.sku || '',\n position: index,\n },\n })\n }}\n disabled={product.soldOut && primaryButtonFun !== 'learnMore'}\n loading={primaryLoading}\n >\n {primaryButtonText}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nProductCardInner.displayName = 'SceneShelfV2.ProductCard'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Main Component\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst SceneShelfV2 = React.forwardRef<HTMLDivElement, SceneShelfV2Props>(\n (\n {\n className,\n classNames = {},\n data,\n onPlayClick,\n onImageClick,\n onProductImageClick,\n onLearnMore,\n onShopNow,\n onAddToCart,\n ...props\n },\n ref\n ) => {\n const {\n theme = 'light',\n sceneImage,\n productsTitle,\n products,\n secondaryButtonText,\n secondaryButtonFun,\n primaryButtonText,\n primaryButtonFun,\n viewMoreLimit = 2,\n copy,\n } = data\n const videoRef = React.useRef<HTMLVideoElement>(null)\n const mediaRef = React.useRef<HTMLDivElement>(null)\n const productWrapperRef = React.useRef<HTMLDivElement>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const [isExpanded, setIsExpanded] = React.useState(false)\n const { trackingData } = useAiuiContext()\n\n useExposure(mediaRef, {\n componentType: 'image',\n componentName: 'scene_shelf_banner',\n })\n\n useViewItemList(productWrapperRef, {\n componentType: 'video',\n componentName: 'scene_shelf_banner',\n itemListName: 'Scene_Shelf_2_Products',\n items: products.map((item, index) => ({\n item_id: item.sku ?? '',\n item_name: item.title,\n item_variant: item.variantId ?? '',\n price: item.currentPrice,\n index: index,\n })),\n tabName: '',\n })\n\n const visibleLimit = useGridRowCount({\n rows: viewMoreLimit ?? 0,\n mobileCols: 2,\n })\n\n const hasVideo = React.useMemo(\n () =>\n [sceneImage?.pc, sceneImage?.desktop, sceneImage?.laptop, sceneImage?.pad, sceneImage?.mobile].some(\n media => media?.mimeType === 'video/mp4'\n ),\n [sceneImage]\n )\n\n const handlePlayButtonClick = React.useCallback(() => {\n const video = videoRef.current\n if (video) {\n if (video.paused) {\n video.play()\n setIsPlaying(true)\n onPlayClick?.(true)\n } else {\n video.pause()\n setIsPlaying(false)\n onPlayClick?.(false)\n }\n } else {\n onPlayClick?.(true)\n }\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingData?.pageGroup,\n component_type: 'video',\n component_name: 'scene_shelf_banner',\n position: 1,\n creative_id: sceneImage?.pc?.id,\n },\n })\n }, [onPlayClick, sceneImage?.pc?.id, trackingData?.pageGroup])\n\n // \u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\n React.useEffect(() => {\n const video = videoRef.current\n if (!video || !hasVideo) return\n\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u8FDB\u5165\u89C6\u7A97\uFF0C\u81EA\u52A8\u64AD\u653E\n video.play().catch(error => {\n // \u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\uFF08\u6D4F\u89C8\u5668\u7B56\u7565\u53EF\u80FD\u963B\u6B62\u81EA\u52A8\u64AD\u653E\uFF09\n console.warn('Video autoplay failed:', error)\n })\n } else {\n // \u79BB\u5F00\u89C6\u7A97\uFF0C\u6682\u505C\u64AD\u653E\n video.pause()\n }\n })\n },\n {\n threshold: 0.5, // \u5F53\u89C6\u9891 50% \u53EF\u89C1\u65F6\u89E6\u53D1\n }\n )\n\n observer.observe(video)\n\n return () => {\n observer.disconnect()\n }\n }, [])\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'scene-shelf-v2-root w-full overflow-hidden',\n { 'aiui-dark': theme === 'dark' },\n className,\n classNames?.root\n )}\n >\n {/* \u2500\u2500 \u5A92\u4F53\u533A \u2500\u2500 */}\n <div\n className={cn(\n 'scene-shelf-v2-media laptop:h-[360px] tablet:h-[400px] desktop:h-[384px] rounded-box tablet:rounded-t-box tablet:rounded-b-none lg-desktop:h-[480px] relative h-[240px] overflow-hidden',\n classNames?.media\n )}\n ref={mediaRef}\n >\n <Media\n pcImage={sceneImage?.pc}\n desktopImage={sceneImage?.desktop}\n laptopImage={sceneImage?.laptop}\n padImage={sceneImage?.pad}\n mobileImage={sceneImage?.mobile}\n className=\"size-full\"\n videoClassName=\"absolute inset-0 size-full object-cover\"\n videoRef={videoRef}\n onVideoPlay={() => setIsPlaying(true)}\n onVideoPause={() => setIsPlaying(false)}\n onVideoEnded={() => setIsPlaying(false)}\n />\n {/* \u6E10\u53D8\u906E\u7F69 */}\n <div\n aria-hidden=\"true\"\n className={cn(\n 'scene-shelf-v2-media-overlay pointer-events-none absolute inset-0',\n classNames?.mediaOverlay\n )}\n />\n\n {/* \u5F15\u8A00 + \u64AD\u653E/\u6682\u505C\u6309\u94AE */}\n {hasVideo && (\n <div className=\"desktop:gap-16 desktop:p-8 absolute inset-0 flex items-end justify-end gap-4 p-6\">\n <button\n type=\"button\"\n aria-label={isPlaying ? 'Pause video' : 'Play video'}\n onClick={handlePlayButtonClick}\n className={cn(\n 'scene-shelf-v2-media-play-button flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n classNames?.mediaPlayButton\n )}\n >\n {isPlaying ? <PauseIcon /> : <PlayIcon />}\n </button>\n </div>\n )}\n </div>\n\n {/* \u2500\u2500 \u4EA7\u54C1\u533A \u2500\u2500 */}\n <div\n ref={productWrapperRef}\n className={cn(\n 'scene-shelf-v2-products text-info-primary tablet:bg-container-primary laptop:p-6 desktop:p-8 rounded-b-box tablet:p-4 flex flex-col gap-4 bg-transparent p-0 pt-3',\n classNames?.products\n )}\n >\n {productsTitle && (\n <Heading\n as=\"h2\"\n size={3}\n className={cn('scene-shelf-v2-products-title text-info-primary', classNames?.productsTitle)}\n html={productsTitle}\n />\n )}\n\n {/* Mobile\uFF1A2\u5217\u5E73\u94FA */}\n <div className=\"tablet:hidden grid grid-cols-2 gap-3\">\n {(() => {\n const shouldShowViewMore =\n viewMoreLimit !== undefined && viewMoreLimit > 0 && products.length > visibleLimit\n const displayedProducts = shouldShowViewMore && !isExpanded ? products.slice(0, visibleLimit) : products\n\n return (\n <>\n {displayedProducts.map((product, index) => (\n <ProductCardInner\n key={product.productKey}\n isShowTag={data.isShowTag ?? true}\n product={product}\n onImageClick={onImageClick}\n onProductImageClick={onProductImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n ))}\n {shouldShowViewMore && (\n <div className=\"col-span-2 mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n className=\"text-info-primary hover:text-brand-0 flex items-center gap-2 text-[14px] font-bold transition-colors\"\n aria-expanded={isExpanded}\n >\n {isExpanded ? (copy?.viewLessLabel ?? 'View Less') : (copy?.viewMoreLabel ?? 'View More')}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </>\n )\n })()}\n </div>\n\n {/* Tablet\uFF1ASwiper \u6A2A\u6ED1 */}\n <div className=\"tablet:block hidden\">\n <div className=\"relative\">\n <Swiper\n slidesPerView=\"auto\"\n observer\n observeParents\n modules={[Mousewheel]}\n mousewheel={{\n enabled: true,\n forceToAxis: true,\n sensitivity: 1,\n }}\n className=\"!overflow-visible\"\n breakpoints={{\n 768: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n slidesPerView: products.length > 3 ? 2.8 : 3,\n },\n 1440: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n 1920: {\n spaceBetween: 16,\n slidesPerView: products.length > 4 ? 3.8 : 4,\n },\n }}\n >\n {products.map((product, index) => (\n <SwiperSlide key={product.productKey} className={cn('!h-auto ', classNames.productCardSlideWrapper)}>\n <ProductCardInner\n product={product}\n isShowTag={data.isShowTag ?? true}\n onImageClick={onImageClick}\n onProductImageClick={onProductImageClick}\n onLearnMore={onLearnMore}\n onShopNow={onShopNow}\n onAddToCart={onAddToCart}\n secondaryButtonText={secondaryButtonText}\n secondaryButtonFun={secondaryButtonFun}\n primaryButtonText={primaryButtonText}\n primaryButtonFun={primaryButtonFun}\n classNames={classNames}\n theme={theme}\n index={index}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneShelfV2.displayName = 'SceneShelfV2'\nexport default withLayout(SceneShelfV2)\nexport { ProductCardInner as SceneShelfV2ProductCard }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["SceneShelfV2_exports", "__export", "ProductCardInner", "SceneShelfV2_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Media", "import_react", "import_modules", "import_css", "import_navigation", "import_Styles", "import_useGridRowCount", "import_useExposure", "import_useViewItemList", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "PlayIcon", "PauseIcon", "product", "isShowTag", "onImageClick", "onProductImageClick", "onLearnMore", "onShopNow", "onAddToCart", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "classNames", "className", "theme", "index", "locale", "trackingData", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "pageGroup", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "handlePrimary", "handleSecondary", "handleImageClick", "e", "callback", "tag", "idx", "SceneShelfV2", "data", "onPlayClick", "props", "ref", "sceneImage", "productsTitle", "products", "viewMoreLimit", "copy", "videoRef", "mediaRef", "productWrapperRef", "isPlaying", "setIsPlaying", "isExpanded", "setIsExpanded", "item", "visibleLimit", "hasVideo", "media", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "Media", "shouldShowViewMore", "displayedProducts", "prev"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var R=Object.create;var g=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var I=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let
|
|
1
|
+
"use strict";"use client";var R=Object.create;var g=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var I=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of q(o))!W.call(e,l)&&l!==r&&g(e,l,{get:()=>o[l],enumerable:!(m=V(o,l))||m.enumerable});return e};var J=(e,o,r)=>(r=e!=null?R(K(e)):{},T(o||!e||!e.__esModule?g(r,"default",{value:e,enumerable:!0}):r,e)),Q=e=>T(g({},"__esModule",{value:!0}),e);var Y={};I(Y,{ProductCard:()=>x,default:()=>X});module.exports=Q(Y);var t=require("react/jsx-runtime"),c=J(require("react")),i=require("../../helpers/index.js"),a=require("../../components/index.js"),B=require("../../shared/trackUrlRef.js"),u=require("../../shared/track.js"),L=require("../AiuiProvider/index.js");const x=c.forwardRef(({product:e,className:o,showTags:r=!0,onLearnMore:m,onShopNow:l,onAddToCart:_,classNames:n,secondaryButtonText:f,secondaryButtonFun:h,primaryButtonText:y,primaryButtonFun:k,showOriginalPrice:z,copy:D,onProductImageClick:v,theme:M="light",locale:P="us",index:d=0,tabName:w},H)=>{const[O,j]=c.useState(!1),[A,G]=c.useState(!1),{trackingData:U}=(0,L.useAiuiContext)(),p=U?.pageGroup,C=!e.soldOut,S=c.useCallback(async(s,b)=>{if(!s)return;const N=b==="primary"?j:G;N(!0);try{switch(s){case"buyNow":await l?.(e);break;case"addCart":await _?.(e);break;case"learnMore":await m?.(e.href);break}}finally{N(!1)}},[e,l,_,m]),E=c.useMemo(()=>(0,i.getLocalizedPath)((0,B.trackUrlRef)(e.href,p+"_shelf_scene_shelf_v3"),P),[e.href,p,P]),F=c.useCallback(()=>{v?.(e),(0,u.gaTrack)({event:"ga4Event",event_name:"select_item",item_list_name:"Scene_Shelf_3_Products",page_group:p,items:[{item_id:e.sku,item_name:e.title,item_variant:e.id,price:e.currentPrice,index:d}],tab_name:w,position:d})},[v,e,p,d,w]);return(0,t.jsx)(a.Card,{ref:H,className:(0,i.cn)("bg-container-primary flex h-full flex-col overflow-hidden border-none hover:bg-white",o,n?.productCard,{"hover:bg-container-secondary-0 ":M==="dark"}),children:(0,t.jsxs)(a.CardContent,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[(0,t.jsx)("div",{className:"product-image-wrapper lg-desktop:size-[196px] mx-auto size-[138px] cursor-pointer overflow-hidden",children:(0,t.jsx)("a",{onClick:F,...!v&&{href:E},rel:"noreferrer",children:(0,t.jsx)(a.Picture,{source:e.imageUrl,alt:e.imageAlt,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),(0,t.jsx)("div",{className:"lg-desktop:h-[28px] mb-1 flex h-[24px] gap-1",children:r&&e.tags?.map((s,b)=>(0,t.jsx)(a.Badge,{size:"sm",variant:s.variant||"outline",className:(0,i.cn)(s.variant==="promotional"?"ml-2":""),promotionalType:s.promotionalType,children:s.label},b))}),(0,t.jsxs)("div",{className:"flex h-full flex-1 grow flex-col justify-between",children:[(0,t.jsxs)("div",{className:"mb-4",children:[(0,t.jsx)(a.Heading,{as:"h3",size:2,className:(0,i.cn)("text-info-primary laptop:line-clamp-2 mb-2 line-clamp-3 min-h-[2.4em]",n?.productTitle),html:e.custom_name||e.title}),(e?.custom_description||e?.description)&&(0,t.jsx)(a.Text,{size:2,className:(0,i.cn)("text-info-secondary desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",n?.productDescription),html:e.custom_description||e.description})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:(0,i.cn)("mb-2",n?.productPrice),children:(0,t.jsx)("div",{className:(0,i.cn)("flex items-baseline gap-2",n?.priceWrapper),children:C?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.currentPrice}),z&&e.originalPrice&&(0,t.jsx)(a.Heading,{size:2,className:(0,i.cn)("text-info-tertiary line-through",n?.originalPrice),as:"h6",children:e.originalPrice})]}):(0,t.jsx)(a.Heading,{size:2,className:"text-info-tertiary",children:D?.outOfStockLabel??"Sold Out"})})}),e?.priceLabel&&C&&(0,t.jsx)(a.Text,{size:4,className:(0,i.cn)("text-marketing-1 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",n?.productPriceLabel),children:e.priceLabel}),(0,t.jsxs)("div",{className:(0,i.cn)("lg-desktop:gap-3 laptop:flex-row laptop:flex-nowrap flex flex-col flex-wrap gap-2",n?.buttonGroup),children:[f&&(0,t.jsx)(a.Button,{variant:"secondary",size:"base",className:(0,i.cn)("laptop:flex-1 laptop:min-w-0 laptop:whitespace-normal laptop:text-center w-full min-w-0 whitespace-normal text-center",n?.secondaryButton),onClick:()=>{S(h,"secondary"),(0,u.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:p||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:f,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&h!=="learnMore",loading:A,children:f}),y&&(0,t.jsx)(a.Button,{variant:"primary",size:"base",className:(0,i.cn)("laptop:flex-1 laptop:min-w-0 laptop:whitespace-normal laptop:text-center w-full min-w-0 whitespace-normal text-center",n?.primaryButton),onClick:()=>{S(k,"primary"),(0,u.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:p||"Home Page",component_type:"copy",component_name:"scene_shelf_product",component_title:e.custom_name||e.title,component_description:e.custom_description||"",button_name:y,SKU:e.sku||"",position:d}})},disabled:e.soldOut&&k!=="learnMore",loading:O,children:y})]})]})]})]})})});x.displayName="SceneShelfV3.ProductCard";var X=x;
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|