@anker-in/headless-ui 1.1.9-alpha.1764929095815 → 1.1.9-alpha.1764931651058
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/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ce=Object.create;var E=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},pe=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of de(t))!xe.call(e,m)&&m!==a&&E(e,m,{get:()=>t[m],enumerable:!(d=me(t,m))||d.enumerable});return e};var Y=(e,t,a)=>(a=e!=null?ce(ue(e)):{},pe(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),he=e=>pe(E({},"__esModule",{value:!0}),e);var be={};fe(be,{ShelfDisplayHorizontalItem:()=>ge,ShelfDisplayWrapItem:()=>ve,getProductImage:()=>ne});module.exports=he(be);var s=require("react/jsx-runtime"),Z=require("../AiuiProvider/index.js"),ee=require("./shelfDisplay.js"),R=Y(require("../../components/picture.js")),V=Y(require("../../components/badge.js")),f=require("../../helpers/utils.js"),te=require("../../components/text.js"),j=Y(require("../../components/button.js")),se=require("../../shared/track.js"),le=require("../../shared/trackUrlRef.js"),oe=require("../../components/heading.js"),ae=require("./handleCoupon.js"),ie=require("../../hooks/useExposure.js"),o=require("react");const F="image",G="product_shelf",M=999999999e-2,ne=e=>{const t=e?.sku,a=e?.variants,d=a?.find(k=>k?.sku===t),m=d?.image?.url||a?.[0]?.image?.url||"",w=d?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:m,altText:w}},ve=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:d,metafields:m,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:g}=t||{},{locale:b="us",copyWriting:O,inApp:T,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=(0,Z.useAiuiContext)(),{discounts:U,discountsCopy:C}=m||{},z=(0,o.useRef)(null),[H,n]=(0,o.useState)([]),[L,q]=(0,o.useState)(""),J=(c,x,u)=>t?.event?.primaryButton?.(c,x+1,u),I=(c,x,u)=>t?.event?.secondaryButton?.(c,x+1,u),l=(0,o.useMemo)(()=>{const c=e?.variants||[];if(c.length)return e?.sku?c?.find?.(x=>x?.sku===e?.sku)||c[0]:c?.[0]},[e?.sku,e?.variants]),D=l?.id?.split?.("/")||[],K=D?.[D?.length-1],Q=!l?.availableForSale&&(l?.price?.amount===M||l?.price===M),P=(0,o.useMemo)(()=>(0,ae.getCouponFromVariant)({variant:l,inApp:T,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[l,T,_,S,N,B]),h=!!(g&&P),W=e?.price?.currencyCode||"USD",X=(0,o.useMemo)(()=>(0,ee.formatVariantPrice)({locale:b,amount:h?P?.variant_price4wscode:l?.price,baseAmount:h?l?.price:0,currencyCode:W}),[W,b,h,P?.variant_price4wscode,l]),{price:y,basePrice:$,discount:v}=X,{imageUrl:A,altText:i}=ne(e),r=e?.custom_name||e?.title,p=e?.custom_description||e?.description;(0,o.useEffect)(()=>{let c=[];if(v){const u=`${v}${U?.off||C?.off||""}`;q(u),c.push(u)}const x=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,v?1:2);n(c.concat(x))},[e?.tags,v,U?.off,C?.off]),(0,ie.useExposure)(z,{componentType:F,componentName:G,componentTitle:r,componentDescription:p,position:t?.index+1});const re=()=>(0,s.jsxs)(s.Fragment,{children:[k&&H?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((c,x)=>(0,s.jsx)(V.default,{className:"shelf-items-tag",children:c},x))}):null,r?(0,s.jsx)(oe.Heading,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title line-clamp-2",html:r||""}):null,p?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:p||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:Q?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:l?.availableForSale&&y||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:l?.availableForSale&&$||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>I(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
3
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>J(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",d==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(R.default,{source:A,alt:i,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&w&&(0,s.jsx)(V.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),(0,s.jsx)("div",{className:(0,f.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":r,target:t?.target,href:(0,le.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${K}`,`${F}_${G}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:(0,s.jsx)(R.default,{source:A,alt:i,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},ge=({data:e,configuration:t})=>{const{itemShape:a,itemLength:d,metafields:m}=t||{},{discounts:w,discountsCopy:k}=m||{},{locale:g="us",copyWriting:b,inApp:O,udcGroupIds:T,udcWhiteGroupIds:_,targetCode:S,channel:N}=(0,Z.useAiuiContext)(),[B,U]=(0,o.useState)([]),C=(0,o.useRef)(null),z=(i,r,p)=>t?.event?.primaryButton?.(i,r+1,p),H=(i,r,p)=>t?.event?.secondaryButton?.(i,r+1,p),n=(0,o.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),L=!n?.availableForSale&&(n?.price?.amount===M||n?.price===M),q=t?.isShowTag,J=t?.isShowOriginalPrice,I=(0,o.useMemo)(()=>(0,ae.getCouponFromVariant)({variant:n,inApp:O,udcGroupIds:T,udcWhiteGroupIds:_,targetCode:S,channel:N}),[n,O,T,_,S,N]),l=!!(J&&I),D=e?.price?.currencyCode||"USD",K=(0,o.useMemo)(()=>(0,ee.formatVariantPrice)({locale:g,amount:l?I?.variant_price4wscode:n?.price,baseAmount:l?n?.price:0,currencyCode:D}),[D,g,l,I?.variant_price4wscode,n]),{price:Q,basePrice:P,discount:h}=K,{imageUrl:W,altText:X}=ne(e),y=e?.custom_name||e?.title,$=e?.custom_description||e?.description;(0,ie.useExposure)(C,{componentType:F,componentName:G,componentTitle:y,componentDescription:$,position:t?.index+1});const v=()=>d>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},A=()=>d>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return(0,o.useEffect)(()=>{let i=[];if(h){const p=`${h}${w?.off||k?.off||""}`;i.push(p)}const r=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,h?1:2);U(i.concat(r))},[e?.tags,h,w?.off,k?.off]),(0,s.jsx)("div",{ref:C,className:(0,f.cn)(v().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,f.cn)(A(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(v().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":y,target:t?.target,href:(0,le.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}`,`${F}_${G}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(R.default,{source:W,alt:X,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,f.cn)("flex flex-col items-start justify-center",v().boxItem),children:[q&&B?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:B?.map?.((i,r)=>(0,s.jsx)(V.default,{className:"shelf-items-tag",children:i},r))}):null,y?(0,s.jsx)(oe.Heading,{as:"h3",title:y||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:y||""}):null,$?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:$||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:L?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&Q||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&P||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
7
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${data?.sku || variant?.sku}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "ykBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,gCAAAE,GAAA,yBAAAC,GAAA,oBAAAC,KAAA,eAAAC,GAAAL,
|
|
6
|
-
"names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_handleCoupon", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_handleCoupon", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as Z,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import Q from"../../components/picture.js";import X from"../../components/badge.js";import{cn as x}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import E from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{Heading as ie}from"../../components/heading.js";import{getCouponFromVariant as ne}from"./handleCoupon.js";import{useExposure as re}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as ce,useMemo as k,useState as Y}from"react";const F="image",G="product_shelf",M=999999999e-2,me=e=>{const t=e?.sku,f=e?.variants,h=f?.find(w=>w?.sku===t),T=h?.image?.url||f?.[0]?.image?.url||"",y=h?.image?.altText||f?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:T,altText:y}},Se=({data:e,configuration:t})=>{const{isDisplayBackImage:f=!1,itemShape:h,metafields:T,isTopTag:y=!1,isShowTag:w,isShowOriginalPrice:v}=t||{},{locale:g="us",copyWriting:O,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=te(),{discounts:U,discountsCopy:I}=T||{},z=pe(null),[H,a]=Y([]),[L,R]=Y(""),V=(r,c,p)=>t?.event?.primaryButton?.(r,c+1,p),D=(r,c,p)=>t?.event?.secondaryButton?.(r,c+1,p),l=k(()=>{const r=e?.variants||[];if(r.length)return e?.sku?r?.find?.(c=>c?.sku===e?.sku)||r[0]:r?.[0]},[e?.sku,e?.variants]),P=l?.id?.split?.("/")||[],q=P?.[P?.length-1],J=!l?.availableForSale&&(l?.price?.amount===M||l?.price===M),$=k(()=>ne({variant:l,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[l,_,S,N,B,C]),d=!!(v&&$),W=e?.price?.currencyCode||"USD",K=k(()=>se({locale:g,amount:d?$?.variant_price4wscode:l?.price,baseAmount:d?l?.price:0,currencyCode:W}),[W,g,d,$?.variant_price4wscode,l]),{price:b,basePrice:j,discount:u}=K,{imageUrl:A,altText:o}=me(e),i=e?.custom_name||e?.title,n=e?.custom_description||e?.description;ce(()=>{let r=[];if(u){const p=`${u}${U?.off||I?.off||""}`;R(p),r.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,u?1:2);a(r.concat(c))},[e?.tags,u,U?.off,I?.off]),re(z,{componentType:F,componentName:G,componentTitle:i,componentDescription:n,position:t?.index+1});const ee=()=>m(Z,{children:[w&&H?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((r,c)=>s(X,{className:"shelf-items-tag",children:r},c))}):null,i?s(ie,{as:"h3",title:i||"",size:2,className:"shelf-display-product-title line-clamp-2",html:i||""}):null,n?s(le,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:n||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:J?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:l?.availableForSale&&b||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:l?.availableForSale&&j||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>V(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:x("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",h==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:f?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:ee()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&y&&s(X,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),s("div",{className:x("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":i,target:t?.target,href:ae(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${q}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),ee()]})},e?.id||e?.handle)},Ne=({data:e,configuration:t})=>{const{itemShape:f,itemLength:h,metafields:T}=t||{},{discounts:y,discountsCopy:w}=T||{},{locale:v="us",copyWriting:g,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=te(),[C,U]=Y([]),I=pe(null),z=(o,i,n)=>t?.event?.primaryButton?.(o,i+1,n),H=(o,i,n)=>t?.event?.secondaryButton?.(o,i+1,n),a=k(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(i=>i?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!a?.availableForSale&&(a?.price?.amount===M||a?.price===M),R=t?.isShowTag,V=t?.isShowOriginalPrice,D=k(()=>ne({variant:a,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[a,O,_,S,N,B]),l=!!(V&&D),P=e?.price?.currencyCode||"USD",q=k(()=>se({locale:v,amount:l?D?.variant_price4wscode:a?.price,baseAmount:l?a?.price:0,currencyCode:P}),[P,v,l,D?.variant_price4wscode,a]),{price:J,basePrice:$,discount:d}=q,{imageUrl:W,altText:K}=me(e),b=e?.custom_name||e?.title,j=e?.custom_description||e?.description;re(I,{componentType:F,componentName:G,componentTitle:b,componentDescription:j,position:t?.index+1});const u=()=>h>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},A=()=>h>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return ce(()=>{let o=[];if(d){const n=`${d}${y?.off||w?.off||""}`;o.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);U(o.concat(i))},[e?.tags,d,y?.off,w?.off]),s("div",{ref:I,className:x(u().wrap,f==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:x(A(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:x(u().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":b,target:t?.target,href:ae(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Q,{source:W,alt:K,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:x("flex flex-col items-start justify-center",u().boxItem),children:[R&&C?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((o,i)=>s(X,{className:"shelf-items-tag",children:o},i))}):null,b?s(ie,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:b||""}):null,j?s(le,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:j||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:L?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&J||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&$||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
7
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
9
|
-
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{
|
|
9
|
+
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{Ne as ShelfDisplayHorizontalItem,Se as ShelfDisplayWrapItem,me as getProductImage};
|
|
10
10
|
//# sourceMappingURL=shelfDisplayItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${data?.sku || variant?.sku}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|