npm - @anker-in/headless-ui - Versions diffs - 1.1.14 → 1.1.16-beta.3 - Mend

@anker-in/headless-ui 1.1.14 → 1.1.16-beta.3

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.

Files changed (147) hide show

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js CHANGED Viewed

@@ -1,10 +1,10 @@
-"use strict";var Z=Object.create;var P=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ae=(e,t)=>{for(var a in t)P(e,a,{get:t[a],enumerable:!0})},X=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of te(t))!le.call(e,r)&&r!==a&&P(e,r,{get:()=>t[r],enumerable:!(p=ee(t,r))||p.enumerable});return e};var A=(e,t,a)=>(a=e!=null?Z(se(e)):{},X(t||!e||!e.__esModule?P(a,"default",{value:e,enumerable:!0}):a,e)),oe=e=>X(P({},"__esModule",{value:!0}),e);var re={};ae(re,{ShelfDisplayHorizontalItem:()=>ne,ShelfDisplayWrapItem:()=>ie,getProductImage:()=>Q});module.exports=oe(re);var s=require("react/jsx-runtime"),R=require("../AiuiProvider/index.js"),M=require("./shelfDisplay.js"),z=A(require("../../components/picture.js")),H=A(require("../../components/badge.js")),x=require("../../helpers/utils.js"),V=require("../../components/text.js"),N=A(require("../../components/button.js")),q=require("../../shared/track.js"),G=require("../../shared/trackUrlRef.js"),J=require("../../components/heading.js"),K=require("../../hooks/useExposure.js"),u=require("react");const j="image",O="product_shelf",Y=999999999e-2,Q=e=>{const t=e?.sku,a=e?.variants,p=a?.find(T=>T?.sku===t),r=p?.image?.url||a?.[0]?.image?.url||"",k=p?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:r,altText:k}},ie=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:p,metafields:r,isTopTag:k=!1,isShowTag:T,isShowOriginalPrice:h}=t||{},{locale:b="us",copyWriting:_}=(0,R.useAiuiContext)(),{discounts:L,discountsCopy:B}=r||{},D=(0,u.useRef)(null),[C,i]=(0,u.useState)([]),[I,E]=(0,u.useState)(""),$=(l,g,d)=>t?.event?.primaryButton?.(l,g+1,d),S=(l,g,d)=>t?.event?.secondaryButton?.(l,g+1,d),n=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},U=!n?.availableForSale&&n?.price?.amount===Y,f=n?.coupons?.[0],{price:F,basePrice:W,discount:c}=(0,M.formatVariantPrice)({locale:b,amount:h&&f?f.variant_price4wscode:n.price,baseAmount:h&&f?n.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:y,altText:w}=Q(e),v=e?.custom_name||e?.title,o=e?.custom_description||e?.description;(0,u.useEffect)(()=>{let l=[];if(c){const d=`${c}${L?.off||B?.off||""}`;E(d),l.push(d)}const g=e?.tags?.filter?.(d=>d?.startsWith?.("CLtag"))?.map?.(d=>d?.replace?.("CLtag:",""))?.slice?.(0,c?1:2);i(l.concat(g))},[e?.tags,c]),(0,K.useExposure)(D,{componentType:j,componentName:O,componentTitle:v,componentDescription:o,position:t?.index+1});const m=()=>(0,s.jsxs)(s.Fragment,{children:[T&&C?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((l,g)=>(0,s.jsx)(H.default,{className:"shelf-items-tag",children:l},g))}):null,v?(0,s.jsx)(J.Heading,{as:"h3",title:v||"",size:2,className:"shelf-display-product-title line-clamp-2",html:v||""}):null,o?(0,s.jsx)(V.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:U?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:_?.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&&F||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&W||""})]})}),(0,s.jsxs)("div",{className:(0,x.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)(N.default,{variant:"secondary",onClick:()=>S(e,t?.index,t),className:`
+"use strict";var ce=Object.create;var E=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},ne=(e,t,a,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of me(t))!ue.call(e,u)&&u!==a&&E(e,u,{get:()=>t[u],enumerable:!(f=pe(t,u))||f.enumerable});return e};var Y=(e,t,a)=>(a=e!=null?ce(de(e)):{},ne(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),xe=e=>ne(E({},"__esModule",{value:!0}),e);var ge={};fe(ge,{ShelfDisplayHorizontalItem:()=>ve,ShelfDisplayWrapItem:()=>he,getProductImage:()=>ae});module.exports=xe(ge);var s=require("react/jsx-runtime"),Z=require("../AiuiProvider/index.js"),ee=require("./shelfDisplay.js"),V=Y(require("../../components/picture.js")),q=Y(require("../../components/badge.js")),v=require("../../helpers/utils.js"),te=require("../../components/text.js"),W=Y(require("../../components/button.js")),se=require("../../shared/track.js"),le=require("../../shared/trackUrlRef.js"),oe=require("../../components/heading.js"),ie=require("../../hooks/useExposure.js"),p=require("react");const F="image",M="product_shelf",R=999999999e-2,ae=e=>{const t=e?.sku,a=e?.variants,f=a?.find(_=>_?.sku===t),u=f?.image?.url||a?.[0]?.image?.url||"",k=f?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:u,altText:k}},he=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:f,metafields:u,isTopTag:k=!1,isShowTag:_,isShowOriginalPrice:y}=t||{},{locale:b="us",copyWriting:O}=(0,Z.useAiuiContext)(),{discounts:U,discountsCopy:B}=u||{},z=(0,p.useRef)(null),[A,n]=(0,p.useState)([]),[C,G]=(0,p.useState)(""),J=(l,o,m,d)=>t?.event?.primaryButton?.(l,o+1,m,d),K=(l,o,m,d)=>t?.event?.secondaryButton?.(l,o+1,m,d),r=(0,p.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),x=r?.id?.split?.("/")||[],D=x?.[x?.length-1],H=!r?.availableForSale&&(r?.price?.amount===R||r?.price===R),g=r?.coupons?.[0],I=!!(y&&g),L=e?.price?.currencyCode||"USD",S=(0,p.useMemo)(()=>(0,ee.formatVariantPrice)({locale:b,amount:I?g?.variant_price4wscode:r?.price,baseAmount:I?r?.price:0,currencyCode:L}),[L,b,I,g?.variant_price4wscode,r]),{price:P,basePrice:Q,discount:N,discountAmount:h}=S,{imageUrl:T,altText:$}=ae(e),w=e?.custom_name||e?.title,j=e?.custom_description||e?.description,i=()=>{if(g?.value_type==="fixed_amount"){const l=h||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,m,d,re]=o;let X=d;return d.endsWith(".00")?X=d.replace(/\.00$/,""):d.endsWith(",00")&&(X=d.replace(/,00$/,"")),`${m}${X}${re}`}return l}return N||""};(0,p.useEffect)(()=>{let l=[];if(N||h){const m=`${i()}${U?.off||B?.off||""}`;G(m),l.push(m)}const o=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,N?1:2);n(l.concat(o))},[e?.tags,N,h,U?.off,B?.off]),(0,ie.useExposure)(z,{componentType:F,componentName:M,componentTitle:w,componentDescription:j,position:t?.index+1});const c=()=>(0,s.jsxs)(s.Fragment,{children:[_&&A?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:A?.map?.((l,o)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:l},o))}):null,w?(0,s.jsx)(oe.Heading,{as:"h3",title:w||"",size:2,className:"shelf-display-product-title line-clamp-2",html:w||""}):null,j?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:j||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:H?(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:r?.availableForSale&&P||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&Q||""})]})}),(0,s.jsxs)("div",{className:(0,v.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)(W.default,{variant:"secondary",onClick:()=>K(e,t?.index,t,g),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(N.default,{variant:"primary",onClick:()=>$(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>J(e,t?.index,t,g),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:D,className:(0,x.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",p==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(z.default,{source:y,alt:w,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:m()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[I&&k&&(0,s.jsx)(H.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:I||""}),(0,s.jsx)("div",{className:(0,x.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":v,target:t?.target,href:(0,G.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}`,`${j}_${O}`),onClick:()=>{(0,q.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)(z.default,{source:y,alt:w,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m()]})},e?.id||e?.handle)},ne=({data:e,configuration:t})=>{const{itemShape:a,itemLength:p,metafields:r}=t||{},{discounts:k,discountsCopy:T}=r||{},{locale:h="us",copyWriting:b}=(0,R.useAiuiContext)(),[_,L]=(0,u.useState)([]),B=(0,u.useRef)(null),D=(o,m,l)=>t?.event?.primaryButton?.(o,m+1,l),C=(o,m,l)=>t?.event?.secondaryButton?.(o,m+1,l),i=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},I=!i?.availableForSale&&i?.price?.amount===Y,E=t?.isShowTag,$=t?.isShowOriginalPrice,S=i?.coupons?.[0],{price:n,basePrice:U,discount:f}=(0,M.formatVariantPrice)({locale:h,amount:$&&S?S.variant_price4wscode:i.price,baseAmount:$&&S?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:F,altText:W}=Q(e),c=e?.custom_name||e?.title,y=e?.custom_description||e?.description;(0,K.useExposure)(B,{componentType:j,componentName:O,componentTitle:c,componentDescription:y,position:t?.index+1});const w=()=>p>=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=()=>p>=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,u.useEffect)(()=>{let o=[];if(f){const l=`${f}${k?.off||T?.off||""}`;o.push(l)}const m=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,f?1:2);L(o.concat(m))},[e?.tags,f]),(0,s.jsx)("div",{ref:B,className:(0,x.cn)(w().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,x.cn)(v(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,x.cn)(w().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":c,target:t?.target,href:(0,G.trackUrlRef)(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${j}_${O}`),onClick:()=>{(0,q.gaTrack)({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:(0,s.jsx)(z.default,{source:F,alt:W,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,x.cn)("flex flex-col items-start justify-center",w().boxItem),children:[E&&_?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:_?.map?.((o,m)=>(0,s.jsx)(H.default,{className:"shelf-items-tag",children:o},m))}):null,c?(0,s.jsx)(J.Heading,{as:"h3",title:c||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:c||""}):null,y?(0,s.jsx)(V.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:y||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:I?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&U||""})]})}),(0,s.jsxs)("div",{className:(0,x.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)(N.default,{variant:"secondary",onClick:()=>C(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,v.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(V.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:c()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[C&&k&&(0,s.jsx)(q.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:C||""}),(0,s.jsx)("div",{className:(0,v.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":w,target:t?.target,href:(0,le.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${D}`,`${F}_${M}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c()]})},e?.id||e?.handle)},ve=({data:e,configuration:t})=>{const{itemShape:a,itemLength:f,metafields:u}=t||{},{discounts:k,discountsCopy:_}=u||{},{locale:y="us",copyWriting:b}=(0,Z.useAiuiContext)(),[O,U]=(0,p.useState)([]),B=(0,p.useRef)(null),z=(i,c,l,o)=>t?.event?.primaryButton?.(i,c+1,l,o),A=(i,c,l,o)=>t?.event?.secondaryButton?.(i,c+1,l,o),n=(0,p.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(c=>c?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),C=n?.id?.split?.("/")||[],G=C?.[C?.length-1],J=!n?.availableForSale&&(n?.price?.amount===R||n?.price===R),K=t?.isShowTag,r=t?.isShowOriginalPrice,x=n?.coupons?.[0],D=!!(r&&x),H=e?.price?.currencyCode||"USD",g=(0,p.useMemo)(()=>(0,ee.formatVariantPrice)({locale:y,amount:D?x?.variant_price4wscode:n?.price,baseAmount:D?n?.price:0,currencyCode:H}),[H,y,D,x?.variant_price4wscode,n]),{price:I,basePrice:L,discount:S,discountAmount:P}=g,{imageUrl:Q,altText:N}=ae(e),h=e?.custom_name||e?.title,T=e?.custom_description||e?.description;(0,ie.useExposure)(B,{componentType:F,componentName:M,componentTitle:h,componentDescription:T,position:t?.index+1});const $=()=>f>=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"},w=()=>f>=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",j=()=>{if(x?.value_type==="fixed_amount"){const i=P||"",c=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(c){const[,l,o,m]=c;let d=o;return o.endsWith(".00")?d=o.replace(/\.00$/,""):o.endsWith(",00")&&(d=o.replace(/,00$/,"")),`${l}${d}${m}`}return i}return S||""};return(0,p.useEffect)(()=>{let i=[];if(S||P){const l=`${j()}${k?.off||_?.off||""}`;i.push(l)}const c=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);U(i.concat(c))},[e?.tags,S,P,k?.off,_?.off]),(0,s.jsx)("div",{ref:B,className:(0,v.cn)($().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,v.cn)(w(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,v.cn)($().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":h,target:t?.target,href:(0,le.trackUrlRef)(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${G}`,`${F}_${M}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:Q,alt:N,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,v.cn)("flex flex-col items-start justify-center",$().boxItem),children:[K&&O?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:O?.map?.((i,c)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:i},c))}):null,h?(0,s.jsx)(oe.Heading,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:h||""}):null,T?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:J?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&I||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&L||""})]})}),(0,s.jsxs)("div",{className:(0,v.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)(W.default,{variant:"secondary",onClick:()=>A(e,t?.index,t,x),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(N.default,{variant:"primary",onClick:()=>D(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>z(e,t?.index,t,x),className:`
               ${t.direction==="vertical"?"w-full":""}
             `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
 //# sourceMappingURL=shelfDisplayItem.js.map

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "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 type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, 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 } = 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 = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\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])\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 } = 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 = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\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 = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\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])\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"],
-  "mappings": "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",
-  "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_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "isSoldOut", "coupon", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
+  "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 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 } = 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, coupon: any) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\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, discountAmount } = 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  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()}${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, discountAmount, 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, coupon)}\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, coupon)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px] shelf-display-item'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          {currentPriceTag && isTopTag && (\n            <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts, discountsCopy } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants[0]\n    }\n    return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\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, discountAmount } = 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  const showPrice = () => {\n    if (coupon?.value_type === 'fixed_amount') {\n      const amountStr = discountAmount || ''\n      const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n      if (match) {\n        const [, prefix, numeric, suffix] = match\n        let updatedNumeric = numeric\n        if (numeric.endsWith('.00')) {\n          updatedNumeric = numeric.replace(/\\.00$/, '')\n        } else if (numeric.endsWith(',00')) {\n          updatedNumeric = numeric.replace(/,00$/, '')\n        }\n        return `${prefix}${updatedNumeric}${suffix}`\n      }\n      return amountStr\n    }\n    return discount || ''\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount || discountAmount) {\n      const discountTag = `${showPrice()}${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, discountAmount, 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}?variant=${variantId}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <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, coupon)}\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, coupon)}\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"],
+  "mappings": "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",
+  "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_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/cjs/biz-components/Slogan/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var K=Object.create;var h=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(t,r)=>{for(var n in r)h(t,n,{get:r[n],enumerable:!0})},G=(t,r,n,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!X.call(t,o)&&o!==n&&h(t,o,{get:()=>r[o],enumerable:!(l=O(r,o))||l.enumerable});return t};var tt=(t,r,n)=>(n=t!=null?K(W(t)):{},G(r||!t||!t.__esModule?h(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>G(h({},"__esModule",{value:!0}),t);var lt={};Z(lt,{componentName:()=>nt,componentType:()=>rt,default:()=>st});module.exports=et(lt);var s=require("react/jsx-runtime"),e=tt(require("react")),g=require("gsap"),N=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),u=require("../../helpers/utils.js"),w=require("../../components/index.js"),C=require("../../shared/Styles.js"),P=require("react-intersection-observer");const rt="copy",nt="brand_slogan";function ot(t=[],r=3){const n=[];for(let l=0;l<t.length;l+=r)n.push(t.slice(l,l+r));return n}const j=e.default.forwardRef(({data:t,className:r=""},n)=>{const{title:l,features:o=[],featureChunkSize:k=3}=t,[y,I]=e.default.useState(0),[V,b]=e.default.useState(!0),M=(0,e.useRef)(null),T=(0,e.useRef)(null),E=(0,e.useRef)(null),d=ot(o,k),S=d.length,p=o.length>k,F=p?[...d,d[0]]:d,R=40;(0,e.useImperativeHandle)(n,()=>M.current);const{ref:U,inView:L}=(0,P.useInView)();e.default.useEffect(()=>{if(!p)return;const i=setInterval(()=>{I(a=>a+1),b(!0)},3e3);return()=>clearInterval(i)},[S,p]),e.default.useEffect(()=>{if(p)if(y===S){const i=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(i)}else b(!0)},[y,S,p]);const f=(0,e.useRef)(null),$=(0,e.useRef)(null),x=(0,e.useRef)(null);return(0,e.useEffect)(()=>{g.gsap.registerPlugin(v.ScrollTrigger,N.SplitText);function i(){if(!f.current)return;x.current=new N.SplitText(f.current,{type:"words",wordsClass:"word"});const a=f.current?.clientHeight||100,m=x.current.words;g.gsap.set(m,{opacity:0}),T.current=v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const A=c.progress,z=m.length,Y=1/z,D=.5;m.forEach((_,q)=>{const B=q/z*(1-D),J=Y*(1+D);let H=(A-B)/J;H=Math.max(0,Math.min(H,1)),g.gsap.set(_,{opacity:H})})}}),o&&o.length>0&&(E.current=v.ScrollTrigger.create({trigger:$.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:c=>{g.gsap.set($.current,{opacity:c.progress})}}))}return L&&i(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),E.current&&E.current.kill()}},[L]),(0,s.jsx)("div",{ref:U,children:(0,s.jsxs)("div",{ref:M,className:(0,u.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,s.jsx)(w.Heading,{ref:f,as:"h2",size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,u.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${R}px]`),children:(0,s.jsx)("div",{className:(0,u.cn)(["flex flex-col",V?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*R}px)`},children:F.map((i,a)=>(0,s.jsx)("div",{className:(0,u.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${R}px]`),children:i.map((m,c)=>(0,s.jsxs)(e.default.Fragment,{children:[c>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:m.title})]},c))},a))})})]})})});j.displayName="Slogan";var st=(0,C.withLayout)(j);
+"use strict";"use client";var K=Object.create;var h=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(t,r)=>{for(var n in r)h(t,n,{get:r[n],enumerable:!0})},G=(t,r,n,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!X.call(t,o)&&o!==n&&h(t,o,{get:()=>r[o],enumerable:!(l=O(r,o))||l.enumerable});return t};var tt=(t,r,n)=>(n=t!=null?K(W(t)):{},G(r||!t||!t.__esModule?h(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>G(h({},"__esModule",{value:!0}),t);var lt={};Z(lt,{componentName:()=>nt,componentType:()=>rt,default:()=>st});module.exports=et(lt);var s=require("react/jsx-runtime"),e=tt(require("react")),g=require("gsap"),N=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),u=require("../../helpers/utils.js"),w=require("../../components/index.js"),C=require("../../shared/Styles.js"),P=require("react-intersection-observer");const rt="copy",nt="brand_slogan";function ot(t=[],r=3){const n=[];for(let l=0;l<t.length;l+=r)n.push(t.slice(l,l+r));return n}const j=e.default.forwardRef(({data:t,className:r=""},n)=>{const{title:l,features:o=[],featureChunkSize:k=3}=t,[y,I]=e.default.useState(0),[V,b]=e.default.useState(!0),M=(0,e.useRef)(null),T=(0,e.useRef)(null),E=(0,e.useRef)(null),d=ot(o,k),S=d.length,p=o.length>k,F=p?[...d,d[0]]:d,R=40;(0,e.useImperativeHandle)(n,()=>M.current);const{ref:U,inView:L}=(0,P.useInView)();e.default.useEffect(()=>{if(!p)return;const i=setInterval(()=>{I(a=>a+1),b(!0)},3e3);return()=>clearInterval(i)},[S,p]),e.default.useEffect(()=>{if(p)if(y===S){const i=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(i)}else b(!0)},[y,S,p]);const f=(0,e.useRef)(null),$=(0,e.useRef)(null),x=(0,e.useRef)(null);return(0,e.useEffect)(()=>{g.gsap.registerPlugin(v.ScrollTrigger,N.SplitText);function i(){if(!f.current)return;x.current=new N.SplitText(f.current,{type:"words",wordsClass:"word"});const a=f.current?.clientHeight||100,m=x.current.words;g.gsap.set(m,{opacity:0}),T.current=v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const A=c.progress,z=m.length,Y=1/z,D=.5;m.forEach((_,q)=>{const B=q/z*(1-D),J=Y*(1+D);let H=(A-B)/J;H=Math.max(0,Math.min(H,1)),g.gsap.set(_,{opacity:H})})}}),o&&o.length>0&&(E.current=v.ScrollTrigger.create({trigger:$.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:c=>{g.gsap.set($.current,{opacity:c.progress})}}))}return L&&i(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),E.current&&E.current.kill()}},[L]),(0,s.jsx)("div",{ref:U,children:(0,s.jsxs)("div",{ref:M,className:(0,u.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,s.jsx)(w.Heading,{ref:f,as:"h1",size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,u.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${R}px]`),children:(0,s.jsx)("div",{className:(0,u.cn)(["flex flex-col",V?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*R}px)`},children:F.map((i,a)=>(0,s.jsx)("div",{className:(0,u.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${R}px]`),children:i.map((m,c)=>(0,s.jsxs)(e.default.Fragment,{children:[c>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:m.title})]},c))},a))})})]})})});j.displayName="Slogan";var st=(0,C.withLayout)(j);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Slogan/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as=\"h2\"\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as=\"h1\"\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
   "mappings": "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",
   "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_react_intersection_observer", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index"]
 }

package/dist/cjs/biz-components/Specs/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var q=Object.create;var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var K=(l,o)=>{for(var c in o)h(l,c,{get:o[c],enumerable:!0})},T=(l,o,c,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let f of Q(o))!J.call(l,f)&&f!==c&&h(l,f,{get:()=>o[f],enumerable:!(u=z(o,f))||u.enumerable});return l};var F=(l,o,c)=>(c=l!=null?q(G(l)):{},T(o||!l||!l.__esModule?h(c,"default",{value:l,enumerable:!0}):c,l)),W=l=>T(h({},"__esModule",{value:!0}),l);var Y={};K(Y,{default:()=>X});module.exports=W(Y);var e=require("react/jsx-runtime"),H=F(require("./dropdown.js")),R=require("../AiuiProvider/index.js"),I=require("react-responsive"),p=require("react"),O=require("../../shared/Styles.js"),P=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=F(require("react"));const L=g.default.forwardRef((l,o)=>{const{data:c,buildData:u,onChange:f,onSecondaryChange:Z}=l||{},N=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),[r,k]=(0,p.useState)({}),[D,S]=(0,p.useState)(!1),[w,C]=(0,p.useState)({}),E=(0,g.useRef)(null),{locale:_="us"}=(0,R.useAiuiContext)(),{LeftMenu:M,RightMenu:A,DefaultSelectMenu:v}=(0,p.useMemo)(()=>c?.data||{},[c?.data]),$=t=>{try{const n=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(n)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},U=(t,s)=>{const n=A?.menus?.find?.(y=>y?.handle===t?.handle),a=t?.variants?.find?.(y=>y?.sku===t?.sku||n?.sku),i=a?.coupons?.[0],{price:m,basePrice:x}=(0,P.formatVariantPrice)({locale:_||"us",amount:i?i?.variant_price4wscode:a?.price,baseAmount:i?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=typeof v?.buttonText=="string"?v?.buttonText:v?.buttonText?.[String(s)]||"";return(0,e.jsxs)("div",{className:"specs-sku-node-wrap box-border",children:[(0,e.jsxs)(d.Text,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(r||{})?.length<=2)return null;C({...w,[s]:!w?.[s]})},children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:r?.[s]?.name||"",children:r?.[s]?.name||""}),Object.keys(r||{})?.length>2?(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})}):null]}),(0,e.jsx)(H.default,{index:s,list:u?.products,active:r,filterActive:r,setActive:k,visible:w,setVisible:C})]}),(0,e.jsx)("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:(0,e.jsx)(d.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),a?.availableForSale?(0,e.jsxs)("div",{className:"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold",children:[(0,e.jsx)("div",{className:"specs-sku-node-price text-[#080A0F]",children:m||""}),x&&(0,e.jsx)("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:x})]}):!1,b?(0,e.jsx)(d.Button,{onClick:()=>{f?.(t,s)},className:"specs-sku-node-button",children:b}):null]})},V=t=>t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(d.Picture,{source:t?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:$(t)?(0,e.jsx)(d.Picture,{source:t,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t||""}})}),j=t=>t.map((s,n)=>{const a=n===0;return(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[(0,e.jsx)(d.Heading,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${D?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(r)?.map?.(i=>{const m=r?.[i],x=A?.menus?.find?.(b=>b?.handle===m?.handle)?.subTitle;return V(x?.[s])})})]},s)}),B=t=>{if(!r)return;const{subTitle:s,isProduct:n}=t;return n?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[t?.title&&(0,e.jsx)(d.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${D?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(r)?.map((a,i)=>{const m=r?.[a],x=u?.products?.find?.(b=>b?.handle===m?.handle);return(0,e.jsx)("div",{children:U({...x,sku:m?.sku,item:a},i)},a)})})]}),s?.length?j(s):null]}):j(s)};return(0,g.useImperativeHandle)(o,()=>E.current),(0,p.useEffect)(()=>{if(!u?.products?.length)return;const t=v?.sku?.split?.(",")||[];let s={};t?.forEach?.((n,a)=>{const i=u?.products?.find?.(m=>{if(m?.variants?.find?.(b=>b?.sku===n))return!0});i&&(s={...s,[a]:{sku:n,name:i?.name||i?.title,handle:i?.handle}})}),k(s),S(t?.length>2)},[u]),(0,p.useEffect)(()=>{if(N){const t=Object.keys(r||{});if(t?.length>2){const s=t?.slice?.(0,2);let n={};s?.forEach?.(a=>{n={...n,[a]:r?.[a]}}),S(!1),k(n)}}},[N]),(0,e.jsx)("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:E,children:M?.data?(0,e.jsx)("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:M?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:B(t)},s))}):null})});L.displayName="Specs";var X=(0,O.withLayout)(L);
+"use strict";"use client";var q=Object.create;var h=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(l,n)=>{for(var c in n)h(l,c,{get:n[c],enumerable:!0})},L=(l,n,c,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let f of Q(n))!G.call(l,f)&&f!==c&&h(l,f,{get:()=>n[f],enumerable:!(u=z(n,f))||u.enumerable});return l};var T=(l,n,c)=>(c=l!=null?q(W(l)):{},L(n||!l||!l.__esModule?h(c,"default",{value:l,enumerable:!0}):c,l)),K=l=>L(h({},"__esModule",{value:!0}),l);var Y={};J(Y,{default:()=>X});module.exports=K(Y);var e=require("react/jsx-runtime"),H=T(require("./dropdown.js")),R=require("../AiuiProvider/index.js"),I=require("react-responsive"),p=require("react"),O=require("../../shared/Styles.js"),P=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=T(require("react"));const F=g.default.forwardRef((l,n)=>{const{data:c,buildData:u,onChange:f,onSecondaryChange:Z}=l||{},N=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),[r,k]=(0,p.useState)({}),[D,S]=(0,p.useState)(!1),[w,E]=(0,p.useState)({}),M=(0,g.useRef)(null),{locale:_="us"}=(0,R.useAiuiContext)(),{LeftMenu:A,RightMenu:C,DefaultSelectMenu:v}=(0,p.useMemo)(()=>c?.data||{},[c?.data]),$=t=>{try{const o=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(o)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},U=(t,s)=>{const o=C?.menus?.find?.(y=>y?.handle===t?.handle),a=t?.variants?.find?.(y=>y?.sku===t?.sku||o?.sku),i=a?.coupons?.[0],{price:m,basePrice:x}=(0,P.formatVariantPrice)({locale:_||"us",amount:i?i?.variant_price4wscode:a?.price,baseAmount:i?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=typeof v?.buttonText=="string"?v?.buttonText:v?.buttonText?.[String(s)]||"";return(0,e.jsxs)("div",{className:"specs-sku-node-wrap box-border",children:[(0,e.jsxs)(d.Text,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(r||{})?.length<=2)return null;E({...w,[s]:!w?.[s]})},children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:r?.[s]?.name||"",children:r?.[s]?.name||""}),Object.keys(r||{})?.length>2?(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),(0,e.jsx)(H.default,{index:s,list:u?.products,active:r,filterActive:r,setActive:k,visible:w,setVisible:E})]}),(0,e.jsx)("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:(0,e.jsx)(d.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),a?.availableForSale?(0,e.jsxs)("div",{className:"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold",children:[(0,e.jsx)("div",{className:"specs-sku-node-price text-[#080A0F]",children:m||""}),x&&(0,e.jsx)("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:x})]}):!1,b?(0,e.jsx)(d.Button,{onClick:()=>{f?.(t,s)},className:"specs-sku-node-button",children:b}):null]})},V=t=>t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(d.Picture,{source:t?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:$(t)?(0,e.jsx)(d.Picture,{source:t,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t||""}})}),j=t=>t.map((s,o)=>{const a=o===0;return(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[(0,e.jsx)(d.Heading,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${D?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(r)?.map?.(i=>{const m=r?.[i],x=C?.menus?.find?.(b=>b?.handle===m?.handle)?.subTitle;return V(x?.[s])})})]},s)}),B=t=>{if(!r)return;const{subTitle:s,isProduct:o}=t;return o?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[t?.title&&(0,e.jsx)(d.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${D?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(r)?.map((a,i)=>{const m=r?.[a],x=u?.products?.find?.(b=>b?.handle===m?.handle);return(0,e.jsx)("div",{children:U({...x,sku:m?.sku,item:a},i)},a)})})]}),s?.length?j(s):null]}):j(s)};return(0,g.useImperativeHandle)(n,()=>M.current),(0,p.useEffect)(()=>{if(!u?.products?.length)return;const t=v?.sku?.split?.(",")||[];let s={};t?.forEach?.((o,a)=>{const i=u?.products?.find?.(m=>{if(m?.variants?.find?.(b=>b?.sku===o))return!0});i&&(s={...s,[a]:{sku:o,name:i?.name||i?.title,handle:i?.handle}})}),k(s),S(t?.length>2)},[u]),(0,p.useEffect)(()=>{if(N){const t=Object.keys(r||{});if(t?.length>2){const s=t?.slice?.(0,2);let o={};s?.forEach?.(a=>{o={...o,[a]:r?.[a]}}),S(!1),k(o)}}},[N]),(0,e.jsx)("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:M,children:A?.data?(0,e.jsx)("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:A?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:B(t)},s))}):null})});F.displayName="Specs";var X=(0,O.withLayout)(F);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Specs/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Specs/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [isShowMax, setIsShowMax] = useState<boolean>(false)\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    const buttonTextValue =\n      typeof DefaultSelectMenu?.buttonText === 'string'\n        ? DefaultSelectMenu?.buttonText\n        : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n    return (\n      <div className=\"specs-sku-node-wrap box-border\">\n        <Text\n          className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n          onClick={() => {\n            if (Object.keys(active || {})?.length <= 2) return null\n\n            setVisibleActive({\n              ...visibleActive,\n              [index]: !visibleActive?.[index],\n            })\n          }}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n              title={active?.[index]?.name || ''}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            {Object.keys(active || {})?.length > 2 ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"25\"\n                viewBox=\"0 0 24 25\"\n                fill=\"none\"\n                className=\"openDropDown\"\n              >\n                <path\n                  d=\"M6 9.5L12 15.5L18 9.5\"\n                  stroke=\"#1D1D1F\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            ) : null}\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n            <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {buttonTextValue ? (\n          <Button\n            onClick={() => {\n              onChange?.(product, index)\n            }}\n            className=\"specs-sku-node-button\"\n          >\n            {buttonTextValue}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n          />\n          <div\n            className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name || findData?.title,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n    setIsShowMax(skus?.length > 2)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setIsShowMax(false)\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [isShowMax, setIsShowMax] = useState<boolean>(false)\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    const buttonTextValue =\n      typeof DefaultSelectMenu?.buttonText === 'string'\n        ? DefaultSelectMenu?.buttonText\n        : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n    return (\n      <div className=\"specs-sku-node-wrap box-border\">\n        <Text\n          className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n          onClick={() => {\n            if (Object.keys(active || {})?.length <= 2) return null\n\n            setVisibleActive({\n              ...visibleActive,\n              [index]: !visibleActive?.[index],\n            })\n          }}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n              title={active?.[index]?.name || ''}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            {Object.keys(active || {})?.length > 2 ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"25\"\n                viewBox=\"0 0 24 25\"\n                fill=\"none\"\n                className=\"openDropDown\"\n              >\n                <path\n                  d=\"M6 9.5L12 15.5L18 9.5\"\n                  stroke=\"#1D1D1F\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            ) : null}\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n            <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {buttonTextValue ? (\n          <Button\n            onClick={() => {\n              onChange?.(product, index)\n            }}\n            className=\"specs-sku-node-button\"\n          >\n            {buttonTextValue}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n          />\n          <div\n            className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name || findData?.title,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n    setIsShowMax(skus?.length > 2)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setIsShowMax(false)\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
+  "mappings": "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",
   "names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "onSecondaryChange", "isMobile", "active", "setActive", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "buttonTextValue", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
 }

package/dist/cjs/biz-components/Subscribe/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { LoadingDots } from '../../components/index.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n  loading,\n}: {\n  subscribeMetadata: any\n  onSubmit?: ({\n    email,\n    terms,\n    news,\n    dealsType,\n    onSuccess,\n  }: {\n    email: string\n    terms: string\n    news: string\n    dealsType?: string\n    onSuccess?: () => void\n  }) => void\n  className?: string\n  loading?: boolean\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<boolean>(false)\n  const [email, setEmail] = useState<string>('')\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    const news = formData.get('news')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.({\n      email: email as string,\n      terms: terms as string,\n      news: news as string,\n      dealsType: subscribeMetadata?.dealsType,\n      onSuccess: () => {\n        setSuccess(true)\n        let timer = setTimeout(() => {\n          setSuccess(false)\n          clearTimeout(timer)\n        }, 3000)\n      },\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n        className\n      )}\n    >\n      <style jsx global>\n        {`\n          .subscribe-component input:-webkit-autofill,\n          .subscribe-component input:-webkit-autofill:hover,\n          .subscribe-component input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n            -webkit-text-fill-color: #fff !important;\n            transition: background-color 9999s ease-in-out 0s !important;\n            caret-color: #fff;\n          }\n        `}\n      </style>\n      <div className=\"laptop:flex-1\">\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <div className=\"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1\">\n            <input\n              name=\"email\"\n              onFocus={() => setError(null)}\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              placeholder={subscribeMetadata?.placeholder}\n              className=\"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n            />\n            <button\n              onClick={() => setEmail('')}\n              className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n                hidden: !email,\n              })}\n            >\n              \u2715\n            </button>\n          </div>\n          <Button\n            type=\"submit\"\n            className=\"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            {loading ? (\n              <LoadingDots />\n            ) : (\n              <Text html={subscribeMetadata?.button} className=\"desktop:text-base text-sm font-bold leading-[1.2]\" />\n            )}\n          </Button>\n        </div>\n        {error && (\n          <Text as=\"p\" html={error} className=\"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n        )}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"laptop:items-center flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              checked={subscribeMetadata?.termsChecked}\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && (\n            <Text\n              as=\"p\"\n              html={termsError}\n              className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\"\n            />\n          )}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              checked={subscribeMetadata?.newsChecked}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {success && (\n            <Text\n              as=\"p\"\n              html={subscribeMetadata?.successMessage}\n              className=\"text-brand-0 text-base font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { LoadingDots } from '../../components/index.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n  loading,\n}: {\n  subscribeMetadata: any\n  onSubmit?: ({\n    email,\n    terms,\n    news,\n    dealsType,\n    onSuccess,\n  }: {\n    email: string\n    terms: string\n    news: string\n    dealsType?: string\n    onSuccess?: () => void\n  }) => void\n  className?: string\n  loading?: boolean\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<boolean>(false)\n  const [email, setEmail] = useState<string>('')\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    const news = formData.get('news')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.({\n      email: email as string,\n      terms: terms as string,\n      news: news as string,\n      dealsType: subscribeMetadata?.dealsType,\n      onSuccess: () => {\n        setSuccess(true)\n        let timer = setTimeout(() => {\n          setSuccess(false)\n          clearTimeout(timer)\n        }, 3000)\n      },\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n        className\n      )}\n    >\n      {/* TODO: @seasail \u7528tailwind \u539F\u5B50\u7C7B\u6216\u8005\u884C\u5185\u6837\u5F0F(Inline Style)\u4EE3\u66FF jsx global */}\n      <style jsx global>\n        {`\n          .subscribe-component input:-webkit-autofill,\n          .subscribe-component input:-webkit-autofill:hover,\n          .subscribe-component input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n            -webkit-text-fill-color: #fff !important;\n            transition: background-color 9999s ease-in-out 0s !important;\n            caret-color: #fff;\n          }\n        `}\n      </style>\n      <div className=\"laptop:flex-1\">\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <div className=\"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1\">\n            <input\n              name=\"email\"\n              onFocus={() => setError(null)}\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              placeholder={subscribeMetadata?.placeholder}\n              className=\"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n            />\n            <button\n              onClick={() => setEmail('')}\n              className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n                hidden: !email,\n              })}\n            >\n              \u2715\n            </button>\n          </div>\n          <Button\n            type=\"submit\"\n            className=\"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            {loading ? (\n              <LoadingDots />\n            ) : (\n              <Text html={subscribeMetadata?.button} className=\"desktop:text-base text-sm font-bold leading-[1.2]\" />\n            )}\n          </Button>\n        </div>\n        {error && (\n          <Text as=\"p\" html={error} className=\"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n        )}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"laptop:items-center flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              checked={subscribeMetadata?.termsChecked}\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && (\n            <Text\n              as=\"p\"\n              html={termsError}\n              className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\"\n            />\n          )}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              checked={subscribeMetadata?.newsChecked}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {success && (\n            <Text\n              as=\"p\"\n              html={subscribeMetadata?.successMessage}\n              className=\"text-brand-0 text-base font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
+  "mappings": "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",
   "names": ["Subscribe_exports", "__export", "Subscribe_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "Subscribe", "subscribeMetadata", "onSubmit", "className", "loading", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked"]
 }

package/dist/cjs/biz-components/Tabs/Tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var p=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var s in r)p(e,s,{get:r[s],enumerable:!0})},f=(e,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of G(r))!w.call(e,m)&&m!==s&&p(e,m,{get:()=>r[m],enumerable:!(l=A(r,m))||l.enumerable});return e};var o=(e,r,s)=>(s=e!=null?L(q(e)):{},f(r||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),D=e=>f(p({},"__esModule",{value:!0}),e);var x={};B(x,{default:()=>R});module.exports=D(x);var i=require("react/jsx-runtime"),n=require("../../shared/Styles.js"),c=o(require("../../components/tabs.js")),d=require("../../helpers/index.js"),u=o(require("react")),b=o(require("../ShelfDisplay/index.js")),y=o(require("../AccordionCards/index.js")),h=o(require("../Faq/index.js")),g=o(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),k=o(require("../Title/index.js")),N=o(require("../Graphic/index.js"));const M=u.default.forwardRef(({data:e,className:r},s)=>{const{theme:l,shape:m,align:v,tabs:t=[],sectionTitle:T}=e,P=a=>a?.blockType==="ipc-shelfdisplay"?(0,i.jsx)(b.default,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?(0,i.jsx)(g.default,{data:a}):a?.blockType==="ipc-accordioncards"?(0,i.jsx)(y.default,{data:a}):a?.blockType==="ipc-faq"?(0,i.jsx)(h.default,{data:a}):a?.blockType==="ipc-graphic"?(0,i.jsx)(N.default,{data:a}):null;return(0,i.jsxs)("section",{ref:s,className:(0,d.cn)(l==="dark"?"aiui-dark":"",r),children:[T&&(0,i.jsx)(k.default,{className:"section-title",data:{title:T}}),(0,i.jsxs)(c.Tabs,{shape:m,align:v,defaultValue:t?.[0]?.id||t?.[0]?.tabName,children:[Array.isArray(t)&&t.length>1&&(0,i.jsx)(c.TabsList,{className:"tabs-list",children:t.map(a=>(0,i.jsx)(c.TabsTrigger,{value:a.id||a.tabName,className:"tabs-trigger",children:a.tabName},a.id||a.tabName))}),(Array.isArray(t)?t:[])?.map(a=>(0,i.jsx)(c.TabsContent,{value:a.id||a.tabName,className:`tabs-content ${t?.length>1?"mt-[24px]":""}`,children:a.tabContent?.[0]?P(a.tabContent?.[0]):null},a.id||a.tabName))]})]})});var R=(0,n.withLayout)(M);
+"use strict";"use client";var A=Object.create;var p=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var D=(e,i)=>{for(var s in i)p(e,s,{get:i[s],enumerable:!0})},d=(e,i,s,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of q(i))!B.call(e,o)&&o!==s&&p(e,o,{get:()=>i[o],enumerable:!(l=G(i,o))||l.enumerable});return e};var m=(e,i,s)=>(s=e!=null?A(w(e)):{},d(i||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),M=e=>d(p({},"__esModule",{value:!0}),e);var x={};D(x,{default:()=>R});module.exports=M(x);var r=require("react/jsx-runtime"),n=require("../../shared/Styles.js"),c=m(require("../../components/tabs.js")),b=require("../../helpers/index.js"),u=m(require("react")),y=m(require("../ShelfDisplay/index.js")),h=m(require("../AccordionCards/index.js")),N=m(require("../Faq/index.js")),g=m(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),k=m(require("../Title/index.js")),v=m(require("../Graphic/index.js"));const f=u.default.forwardRef(({data:e,className:i},s)=>{const{theme:l,shape:o,align:P,tabs:t=[],sectionTitle:T}=e,L=a=>a?.blockType==="ipc-shelfdisplay"?(0,r.jsx)(y.default,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?(0,r.jsx)(g.default,{data:a}):a?.blockType==="ipc-accordioncards"?(0,r.jsx)(h.default,{data:a}):a?.blockType==="ipc-faq"?(0,r.jsx)(N.default,{data:a}):a?.blockType==="ipc-graphic"?(0,r.jsx)(v.default,{data:a}):null;return(0,r.jsxs)("section",{ref:s,className:(0,b.cn)(l==="dark"?"aiui-dark":"",i),children:[T&&(0,r.jsx)(k.default,{className:"section-title",data:{title:T}}),(0,r.jsxs)(c.Tabs,{shape:o,align:P,defaultValue:t?.[0]?.id||t?.[0]?.tabName,children:[Array.isArray(t)&&t.length>1&&(0,r.jsx)(c.TabsList,{className:"tabs-list",children:t.map(a=>(0,r.jsx)(c.TabsTrigger,{value:a.id||a.tabName,className:"tabs-trigger",children:a.tabName},a.id||a.tabName))}),(Array.isArray(t)?t:[])?.map(a=>(0,r.jsx)(c.TabsContent,{value:a.id||a.tabName,className:`tabs-content ${t?.length>1?"mt-[24px]":""}`,children:a.tabContent?.[0]?L(a.tabContent?.[0]):null},a.id||a.tabName))]})]})});f.displayName="Tabs";var R=(0,n.withLayout)(f);
 //# sourceMappingURL=Tabs.js.map