@anker-in/headless-ui 1.1.9-temp.120301 → 1.1.9-temp.120302
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 +2 -2
- package/dist/esm/biz-components/AiuiProvider/index.d.ts +5 -0
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts +1 -1
- package/dist/esm/biz-components/ShelfDisplay/couponType.d.ts +50 -0
- package/dist/esm/biz-components/ShelfDisplay/couponUtils.d.ts +37 -0
- package/dist/esm/biz-components/ShelfDisplay/handleCoupon.d.ts +28 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/useUDCGroup.d.ts +0 -0
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";var re=Object.create;var F=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var i in t)F(e,i,{get:t[i],enumerable:!0})},ie=(e,t,i,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of ce(t))!de.call(e,c)&&c!==i&&F(e,c,{get:()=>t[c],enumerable:!(m=pe(t,c))||m.enumerable});return e};var Q=(e,t,i)=>(i=e!=null?re(me(e)):{},ie(t||!e||!e.__esModule?F(i,"default",{value:e,enumerable:!0}):i,e)),xe=e=>ie(F({},"__esModule",{value:!0}),e);var ve={};ue(ve,{ShelfDisplayHorizontalItem:()=>he,ShelfDisplayWrapItem:()=>fe,getProductImage:()=>ae});module.exports=xe(ve);var s=require("react/jsx-runtime"),X=require("../AiuiProvider/index.js"),Y=require("./shelfDisplay.js"),M=Q(require("../../components/picture.js")),R=Q(require("../../components/badge.js")),f=require("../../helpers/utils.js"),Z=require("../../components/text.js"),j=Q(require("../../components/button.js")),ee=require("../../shared/track.js"),te=require("../../shared/trackUrlRef.js"),se=require("../../components/heading.js"),le=require("./handleCoupon.js"),oe=require("../../hooks/useExposure.js"),a=require("react");const A="image",G="product_shelf",ne=999999999e-2,ae=e=>{const t=e?.sku,i=e?.variants,m=i?.find(y=>y?.sku===t),c=m?.image?.url||i?.[0]?.image?.url||"",b=m?.image?.altText||i?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:c,altText:b}},fe=({data:e,configuration:t})=>{const{isDisplayBackImage:i=!1,itemShape:m,metafields:c,isTopTag:b=!1,isShowTag:y,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:O,inApp:
|
|
1
|
+
"use strict";var re=Object.create;var F=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var i in t)F(e,i,{get:t[i],enumerable:!0})},ie=(e,t,i,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of ce(t))!de.call(e,c)&&c!==i&&F(e,c,{get:()=>t[c],enumerable:!(m=pe(t,c))||m.enumerable});return e};var Q=(e,t,i)=>(i=e!=null?re(me(e)):{},ie(t||!e||!e.__esModule?F(i,"default",{value:e,enumerable:!0}):i,e)),xe=e=>ie(F({},"__esModule",{value:!0}),e);var ve={};ue(ve,{ShelfDisplayHorizontalItem:()=>he,ShelfDisplayWrapItem:()=>fe,getProductImage:()=>ae});module.exports=xe(ve);var s=require("react/jsx-runtime"),X=require("../AiuiProvider/index.js"),Y=require("./shelfDisplay.js"),M=Q(require("../../components/picture.js")),R=Q(require("../../components/badge.js")),f=require("../../helpers/utils.js"),Z=require("../../components/text.js"),j=Q(require("../../components/button.js")),ee=require("../../shared/track.js"),te=require("../../shared/trackUrlRef.js"),se=require("../../components/heading.js"),le=require("./handleCoupon.js"),oe=require("../../hooks/useExposure.js"),a=require("react");const A="image",G="product_shelf",ne=999999999e-2,ae=e=>{const t=e?.sku,i=e?.variants,m=i?.find(y=>y?.sku===t),c=m?.image?.url||i?.[0]?.image?.url||"",b=m?.image?.altText||i?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:c,altText:b}},fe=({data:e,configuration:t})=>{const{isDisplayBackImage:i=!1,itemShape:m,metafields:c,isTopTag:b=!1,isShowTag:y,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:O,inApp:S,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}=(0,X.useAiuiContext)(),{discounts:U,discountsCopy:D}=c||{},z=(0,a.useRef)(null),[H,r]=(0,a.useState)([]),[L,V]=(0,a.useState)(""),q=(l,x,u)=>t?.event?.primaryButton?.(l,x+1,u),w=(l,x,u)=>t?.event?.secondaryButton?.(l,x+1,u),n=(0,a.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku&&l.find(x=>x?.sku===e?.sku)||l[0]},[e?.sku,e?.variants]),W=!n?.availableForSale&&n?.price?.amount===ne,P=(0,a.useMemo)(()=>(0,le.getCouponFromVariant)({variant:n,inApp:S,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}),[n,S,N,B,C,I]),$=!!(h&&P),E=e?.price?.currencyCode||"USD",k=(0,a.useMemo)(()=>(0,Y.formatVariantPrice)({locale:v,amount:$?P?.variant_price4wscode:n?.price,baseAmount:$?n?.price:0,currencyCode:E}),[E,v,$,P?.variant_price4wscode,n]),{price:J,basePrice:K,discount:d}=k,{imageUrl:T,altText:_}=ae(e),g=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,a.useEffect)(()=>{let l=[];if(d){const u=`${d}${U?.off||D?.off||""}`;V(u),l.push(u)}const x=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);r(l.concat(x))},[e?.tags,d,U?.off,D?.off]),(0,oe.useExposure)(z,{componentType:A,componentName:G,componentTitle:g,componentDescription:o,position:t?.index+1});const p=()=>(0,s.jsxs)(s.Fragment,{children:[y&&H?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((l,x)=>(0,s.jsx)(R.default,{className:"shelf-items-tag",children:l},x))}):null,g?(0,s.jsx)(se.Heading,{as:"h3",title:g||"",size:2,className:"shelf-display-product-title line-clamp-2",html:g||""}):null,o?(0,s.jsx)(Z.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:W?(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:n?.availableForSale&&J||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&K||""})]})}),(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:()=>w(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:()=>q(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",m==="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:i?(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)(M.default,{source:
|
|
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",m==="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:i?(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)(M.default,{source:T,alt:_,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:p()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&b&&(0,s.jsx)(R.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":g,target:t?.target,href:(0,te.trackUrlRef)(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{(0,ee.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)(M.default,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),p()]})},e?.id||e?.handle)},he=({data:e,configuration:t})=>{const{itemShape:i,itemLength:m,metafields:c}=t||{},{discounts:b,discountsCopy:y}=c||{},{locale:h="us",copyWriting:v,inApp:O,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=(0,X.useAiuiContext)(),[I,U]=(0,a.useState)([]),D=(0,a.useRef)(null),z=(o,p,l)=>t?.event?.primaryButton?.(o,p+1,l),H=(o,p,l)=>t?.event?.secondaryButton?.(o,p+1,l),r=(0,a.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(p=>p?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!r?.availableForSale&&r?.price?.amount===ne,V=t?.isShowTag,q=t?.isShowOriginalPrice,w=(0,a.useMemo)(()=>(0,le.getCouponFromVariant)({variant:r,inApp:O,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[r,O,S,N,B,C]);console.log("coupon",w);const n=!!(q&&w),W=e?.price?.currencyCode||"USD",P=(0,a.useMemo)(()=>(0,Y.formatVariantPrice)({locale:h,amount:n?w?.variant_price4wscode:r?.price,baseAmount:n?r?.price:0,currencyCode:W}),[W,h,n,w?.variant_price4wscode,r]),{price:$,basePrice:E,discount:k}=P,{imageUrl:J,altText:K}=ae(e),d=e?.custom_name||e?.title,T=e?.custom_description||e?.description;(0,oe.useExposure)(D,{componentType:A,componentName:G,componentTitle:d,componentDescription:T,position:t?.index+1});const _=()=>m>=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"},g=()=>m>=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,a.useEffect)(()=>{let o=[];if(k){const l=`${k}${b?.off||y?.off||""}`;o.push(l)}const p=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);U(o.concat(p))},[e?.tags,k,b?.off,y?.off]),(0,s.jsx)("div",{ref:D,className:(0,f.cn)(_().wrap,i==="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)(g(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(_().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":d,target:t?.target,href:(0,te.trackUrlRef)(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{(0,ee.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(M.default,{source:J,alt:K,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",_().boxItem),children:[V&&I?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:I?.map?.((o,p)=>(0,s.jsx)(R.default,{className:"shelf-items-tag",children:o},p))}):null,d?(0,s.jsx)(se.Heading,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:d||""}):null,T?(0,s.jsx)(Z.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:T||""}):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:v?.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:r?.availableForSale&&$||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&E||""})]})}),(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 = !variant?.availableForSale && variant?.price?.amount === 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 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}`,\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 = !variant?.availableForSale && variant?.price?.amount === 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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
|
|
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 = !variant?.availableForSale && variant?.price?.amount === 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 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}`,\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 = !variant?.availableForSale && variant?.price?.amount === 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 console.log('coupon', coupon)\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
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"]
|
|
7
7
|
}
|
|
@@ -6,6 +6,11 @@ interface AiuiContextType {
|
|
|
6
6
|
pathname?: string;
|
|
7
7
|
storeDomain?: string;
|
|
8
8
|
isLogin?: boolean;
|
|
9
|
+
inApp?: boolean;
|
|
10
|
+
udcGroupIds?: number[];
|
|
11
|
+
udcWhiteGroupIds?: number[];
|
|
12
|
+
targetCode?: string;
|
|
13
|
+
channel?: string;
|
|
9
14
|
currencyCode?: string;
|
|
10
15
|
}
|
|
11
16
|
export declare const AiuiContext: React.Context<AiuiContextType>;
|
|
@@ -15,7 +15,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<{
|
|
|
15
15
|
} | undefined;
|
|
16
16
|
slug: string;
|
|
17
17
|
payload?: any;
|
|
18
|
-
} & Omit<import("../../types/graphql.js").Product, "media" | "
|
|
18
|
+
} & Omit<import("../../types/graphql.js").Product, "media" | "options" | "metafields" | "price" | "images" | "variants"> & {
|
|
19
19
|
variant: ProductVariant;
|
|
20
20
|
})[];
|
|
21
21
|
variant: ProductVariant;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export type SellingPlans = {
|
|
2
|
+
id: string;
|
|
3
|
+
name: string;
|
|
4
|
+
options: {
|
|
5
|
+
name: string;
|
|
6
|
+
value: string;
|
|
7
|
+
}[];
|
|
8
|
+
};
|
|
9
|
+
export type ProductOption = {
|
|
10
|
+
__typename?: 'MultipleChoiceOption';
|
|
11
|
+
id: string;
|
|
12
|
+
displayName: string;
|
|
13
|
+
values: ProductOptionValues[];
|
|
14
|
+
};
|
|
15
|
+
export type ProductOptionValues = {
|
|
16
|
+
label: string;
|
|
17
|
+
hexColors?: string[];
|
|
18
|
+
};
|
|
19
|
+
export type SellingPlanAllocations = {
|
|
20
|
+
priceAdjustments: [];
|
|
21
|
+
sellingPlan: SellingPlans;
|
|
22
|
+
}[];
|
|
23
|
+
export type ProductVariant = {
|
|
24
|
+
id: string | number;
|
|
25
|
+
options: ProductOption[];
|
|
26
|
+
availableForSale?: boolean;
|
|
27
|
+
quantityAvailable: number;
|
|
28
|
+
metafields?: Record<string, any>;
|
|
29
|
+
sellingPlanAllocations?: SellingPlanAllocations;
|
|
30
|
+
price: number;
|
|
31
|
+
listPrice: number;
|
|
32
|
+
[key: string]: any;
|
|
33
|
+
};
|
|
34
|
+
export type VariantCoupon = {
|
|
35
|
+
title: string;
|
|
36
|
+
starts_at: string;
|
|
37
|
+
ends_at: string | null;
|
|
38
|
+
variant_shopify_id: number;
|
|
39
|
+
value_type: 'percentage' | 'fixed' | 'fixed_amount' | 'fix_discount_amount';
|
|
40
|
+
value: string;
|
|
41
|
+
currency: string;
|
|
42
|
+
fixed_value: string;
|
|
43
|
+
value_style: string;
|
|
44
|
+
variant_price4wscode: number;
|
|
45
|
+
discount_type: string;
|
|
46
|
+
amazon_deal: boolean;
|
|
47
|
+
cdi_id: number;
|
|
48
|
+
cdi_updated_at: string;
|
|
49
|
+
variant_price?: string;
|
|
50
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { ProductVariant, VariantCoupon } from './couponType';
|
|
2
|
+
export declare enum CouponType {
|
|
3
|
+
hideChannel = "wsch",
|
|
4
|
+
appChannel = "wsap",
|
|
5
|
+
udcChannel = "wsuc"
|
|
6
|
+
}
|
|
7
|
+
export declare function atobID(id: any): any;
|
|
8
|
+
export interface GetValidCustomCouponProps {
|
|
9
|
+
/** custom_data item */
|
|
10
|
+
customDataItem: {
|
|
11
|
+
udcGroups: number[];
|
|
12
|
+
whiteGroups: number[];
|
|
13
|
+
discount: VariantCoupon;
|
|
14
|
+
};
|
|
15
|
+
/** 人群分组，来自 get_user_in_group 接口 */
|
|
16
|
+
udcGroupIds?: number[];
|
|
17
|
+
udcWhiteGroupIds?: number[];
|
|
18
|
+
}
|
|
19
|
+
declare class CouponUtils {
|
|
20
|
+
/** 是否为隐藏渠道优惠券 */
|
|
21
|
+
static isHideChannelCoupon(couponTitle?: string): boolean;
|
|
22
|
+
/** 是否为 App 渠道优惠券 */
|
|
23
|
+
static isAppChannelCoupon(couponTitle?: string): boolean;
|
|
24
|
+
/** 是否为 UDC 渠道优惠券 */
|
|
25
|
+
static isUDCChannelCoupon(couponTitle?: string): boolean;
|
|
26
|
+
/** 检查优惠券是否在有效期内 */
|
|
27
|
+
static isCouponInValidPeriod(coupon: VariantCoupon): boolean;
|
|
28
|
+
/** 检查优惠券是否匹配指定的隐藏渠道 */
|
|
29
|
+
static getMatchChannelCoupons(activeCoupons: VariantCoupon[], channel?: string): VariantCoupon[];
|
|
30
|
+
/** 检查优惠券是否匹配变体ID */
|
|
31
|
+
static isCouponMatchVariant(coupon: VariantCoupon, variant: ProductVariant | undefined): boolean;
|
|
32
|
+
/** 验证是否有 coupons 或者 custom_coupons */
|
|
33
|
+
static validateVariantCoupon(variant: ProductVariant | undefined): boolean;
|
|
34
|
+
/** 获取 custom_data 中符合 UDC 人群分组的折扣 */
|
|
35
|
+
static getValidCustomCoupon({ customDataItem, udcGroupIds, udcWhiteGroupIds }: GetValidCustomCouponProps): boolean;
|
|
36
|
+
}
|
|
37
|
+
export { CouponUtils };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ProductVariant, VariantCoupon } from './couponType';
|
|
2
|
+
interface GetCouponFromVariantProps {
|
|
3
|
+
/** 变体 */
|
|
4
|
+
variant: ProductVariant | undefined;
|
|
5
|
+
/** 隐藏渠道 */
|
|
6
|
+
channel?: string;
|
|
7
|
+
/** 是否在app中 */
|
|
8
|
+
inApp?: boolean;
|
|
9
|
+
/** UDC人群分组 */
|
|
10
|
+
udcGroupIds?: number[];
|
|
11
|
+
/** UDC白名单人群分组 */
|
|
12
|
+
udcWhiteGroupIds?: number[];
|
|
13
|
+
/** 目标代码 */
|
|
14
|
+
targetCode?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface GetValidCustomCouponProps {
|
|
17
|
+
/** custom_data item */
|
|
18
|
+
customDataItem: {
|
|
19
|
+
udcGroups: number[];
|
|
20
|
+
whiteGroups: number[];
|
|
21
|
+
discount: VariantCoupon;
|
|
22
|
+
};
|
|
23
|
+
/** 人群分组，来自 get_user_in_group 接口 */
|
|
24
|
+
udcGroupIds?: number[];
|
|
25
|
+
udcWhiteGroupIds?: number[];
|
|
26
|
+
}
|
|
27
|
+
export declare function getCouponFromVariant({ variant, channel, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, }: GetCouponFromVariantProps): VariantCoupon | undefined;
|
|
28
|
+
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{Fragment as X,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"./shelfDisplay.js";import J from"../../components/picture.js";import K from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as ee}from"../../components/text.js";import F from"../../components/button.js";import{gaTrack as te}from"../../shared/track.js";import{trackUrlRef as se}from"../../shared/trackUrlRef.js";import{Heading as le}from"../../components/heading.js";import{getCouponFromVariant as oe}from"./handleCoupon.js";import{useExposure as ae}from"../../hooks/useExposure.js";import{useRef as ie,useEffect as ne,useMemo as
|
|
1
|
+
import{Fragment as X,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"./shelfDisplay.js";import J from"../../components/picture.js";import K from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as ee}from"../../components/text.js";import F from"../../components/button.js";import{gaTrack as te}from"../../shared/track.js";import{trackUrlRef as se}from"../../shared/trackUrlRef.js";import{Heading as le}from"../../components/heading.js";import{getCouponFromVariant as oe}from"./handleCoupon.js";import{useExposure as ae}from"../../hooks/useExposure.js";import{useRef as ie,useEffect as ne,useMemo as _,useState as Q}from"react";const A="image",G="product_shelf",re=999999999e-2,pe=e=>{const t=e?.sku,u=e?.variants,x=u?.find(b=>b?.sku===t),S=x?.image?.url||u?.[0]?.image?.url||"",g=x?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:S,altText:g}},Te=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:x,metafields:S,isTopTag:g=!1,isShowTag:b,isShowOriginalPrice:f}=t||{},{locale:h="us",copyWriting:O,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}=Y(),{discounts:U,discountsCopy:P}=S||{},z=ie(null),[H,i]=Q([]),[L,M]=Q(""),R=(l,c,p)=>t?.event?.primaryButton?.(l,c+1,p),y=(l,c,p)=>t?.event?.secondaryButton?.(l,c+1,p),a=_(()=>{const l=e?.variants||[];if(l.length)return e?.sku&&l.find(c=>c?.sku===e?.sku)||l[0]},[e?.sku,e?.variants]),W=!a?.availableForSale&&a?.price?.amount===re,$=_(()=>oe({variant:a,inApp:N,udcGroupIds:B,udcWhiteGroupIds:C,targetCode:I,channel:D}),[a,N,B,C,I,D]),j=!!(f&&$),E=e?.price?.currencyCode||"USD",w=_(()=>Z({locale:h,amount:j?$?.variant_price4wscode:a?.price,baseAmount:j?a?.price:0,currencyCode:E}),[E,h,j,$?.variant_price4wscode,a]),{price:V,basePrice:q,discount:r}=w,{imageUrl:k,altText:T}=pe(e),v=e?.custom_name||e?.title,o=e?.custom_description||e?.description;ne(()=>{let l=[];if(r){const p=`${r}${U?.off||P?.off||""}`;M(p),l.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,r?1:2);i(l.concat(c))},[e?.tags,r,U?.off,P?.off]),ae(z,{componentType:A,componentName:G,componentTitle:v,componentDescription:o,position:t?.index+1});const n=()=>m(X,{children:[b&&H?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((l,c)=>s(K,{className:"shelf-items-tag",children:l},c))}):null,v?s(le,{as:"h3",title:v||"",size:2,className:"shelf-display-product-title line-clamp-2",html:v||""}):null,o?s(ee,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:W?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):m(X,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&V||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&q||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>y(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
3
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>R(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="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:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(J,{source:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="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:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(J,{source:k,alt:T,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:n()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&g&&s(K,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),s("div",{className:d("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":v,target:t?.target,href:se(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{te({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(J,{source:k,alt:T,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),n()]})},e?.id||e?.handle)},_e=({data:e,configuration:t})=>{const{itemShape:u,itemLength:x,metafields:S}=t||{},{discounts:g,discountsCopy:b}=S||{},{locale:f="us",copyWriting:h,inApp:O,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}=Y(),[D,U]=Q([]),P=ie(null),z=(o,n,l)=>t?.event?.primaryButton?.(o,n+1,l),H=(o,n,l)=>t?.event?.secondaryButton?.(o,n+1,l),i=_(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(n=>n?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!i?.availableForSale&&i?.price?.amount===re,M=t?.isShowTag,R=t?.isShowOriginalPrice,y=_(()=>oe({variant:i,inApp:O,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}),[i,O,N,B,C,I]);console.log("coupon",y);const a=!!(R&&y),W=e?.price?.currencyCode||"USD",$=_(()=>Z({locale:f,amount:a?y?.variant_price4wscode:i?.price,baseAmount:a?i?.price:0,currencyCode:W}),[W,f,a,y?.variant_price4wscode,i]),{price:j,basePrice:E,discount:w}=$,{imageUrl:V,altText:q}=pe(e),r=e?.custom_name||e?.title,k=e?.custom_description||e?.description;ae(P,{componentType:A,componentName:G,componentTitle:r,componentDescription:k,position:t?.index+1});const T=()=>x>=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"},v=()=>x>=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 ne(()=>{let o=[];if(w){const l=`${w}${g?.off||b?.off||""}`;o.push(l)}const n=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,w?1:2);U(o.concat(n))},[e?.tags,w,g?.off,b?.off]),s("div",{ref:P,className:d(T().wrap,u==="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:d(v(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(T().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":r,target:t?.target,href:se(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{te({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(J,{source:V,alt:q,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:d("flex flex-col items-start justify-center",T().boxItem),children:[M&&D?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:D?.map?.((o,n)=>s(K,{className:"shelf-items-tag",children:o},n))}):null,r?s(le,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,k?s(ee,{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:k||""}):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:h?.soldOutText}):m(X,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&E||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
7
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{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 = !variant?.availableForSale && variant?.price?.amount === 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 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}`,\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 = !variant?.availableForSale && variant?.price?.amount === 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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
|
|
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 = !variant?.availableForSale && variant?.price?.amount === 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 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}`,\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 = !variant?.availableForSale && variant?.price?.amount === 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 console.log('coupon', coupon)\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
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"]
|
|
7
7
|
}
|
|
File without changes
|