npm - @anker-in/headless-ui - Versions diffs - 1.1.2 → 1.1.5 - Mend

@anker-in/headless-ui 1.1.2 → 1.1.5

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 (519) hide show

package/dist/esm/biz-components/SelectStore/index.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Img } from '../../types/props.js';
+export type SelectStoreDataType = {
+    title: string;
+    desc: string;
+    img: Img;
+    mobileImg: Img;
+    padImg: Img;
+    miniImg: Img;
+};
+type SelectStoreType = {
+    data: {
+        list: SelectStoreDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectStoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/SelectStore/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as d,jsx as t,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as i,Text as l}from"../../components/index.js";const m=o=>{const{data:s,className:g}=o,{list:a}=s;return t(d,{children:t("div",{className:"",children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:a.map((e,r)=>p("div",{className:"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper relative flex aspect-[358/240] flex-col overflow-hidden rounded-2xl bg-[#EAEAEC]",children:[t(i,{className:"object-cover",imgClassName:"w-full h-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),p("div",{className:"laptop:px-6 laptop:pb-6 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4",children:[t(l,{html:e?.title,className:"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold"}),t(l,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]"})]})]},r))})})})};var I=c(m);export{I as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SelectStore/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n  title: string\n  desc: string\n  img: Img\n  mobileImg: Img\n  padImg: Img\n  miniImg: Img\n  // pay: {\n  //   img: Img\n  // }[]\n  // delivery: {\n  //   img: Img\n  // }[]\n  // service: {\n  //   title: string\n  //   img: Img\n  // }[]\n}\n\ntype SelectStoreType = {\n  data: {\n    list: SelectStoreDataType[]\n  }\n  className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n  const { data, className } = props\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div className=\"\">\n        <div className=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n          {list.map((item, index) => (\n            <div\n              key={index}\n              className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper relative flex aspect-[358/240] flex-col overflow-hidden rounded-2xl bg-[#EAEAEC]\"\n            >\n              <Picture\n                className=\"object-cover\"\n                imgClassName=\"w-full h-full object-cover\"\n                source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n              />\n              <div className=\"laptop:px-6 laptop:pb-6 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n                <Text\n                  html={item?.title}\n                  className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold\"\n                />\n                <Text\n                  html={item?.desc}\n                  className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]\"\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n        {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n              <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n                <div className=\"flex flex-col justify-center flex-1\">\n                \n                {item?.pay && (\n                  <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n                  {item?.pay?.map((pay, ind)=>{\n                    return (\n                      <div key={ind} className='laptop:w-[60px] w-[48px]'>\n                        <Picture\n                            className=\" w-full\"\n                            imgClassName=\"\"\n                            source={pay?.img?.url}\n                            alt={pay?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n                )}\n                \n                {\n                 item?.delivery && (\n                  <div className='flex gap-[24px] items-center justify-center'>\n                    {item?.delivery?.map((delivery, ind)=>{\n                    return (\n                      <div key={ind} className=''>\n                        <Picture\n                            className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n                            imgClassName=\"\"\n                            source={delivery?.img?.url}\n                            alt={delivery?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                  </div>\n                 ) \n                }\n                \n                {\n                  item?.service && (\n                    <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n                      {item?.service?.map((service, ind)=>{\n                        // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n                        const isFifth = ind === 4;\n                        return (\n                          <div key={ind} className={`\n                            flex flex-col items-center desktop:h-full  w-[157px] justify-start desktop:w-[81px]\n                            ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n                          `}>\n                            <div className='w-[70px] desktop:w-[54px]'>\n                              <Picture\n                              className=\"\"\n                              imgClassName=\"w-full h-auto\"\n                              source={service?.img?.url}\n                              alt={service?.img?.alt || ''}\n                            />\n                            </div>\n                            <div className='text-center'>\n                            <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n                            </div>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  )\n                }\n                </div>\n                <div className='mt-auto'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
+  "mappings": "aAsCI,mBAAAA,EAQU,OAAAC,EAKA,QAAAC,MAbV,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,+DACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAEC,UAAU,oLAEV,UAAAD,EAACG,EAAA,CACC,UAAU,eACV,aAAa,6BACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAT,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACI,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,0FACZ,EACAV,EAACI,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "props", "data", "className", "list", "item", "index", "SelectStore_default"]
+}

package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as le}from"react/jsx-runtime";import J,{useState as I,useEffect as M,useRef as g,useImperativeHandle as K}from"react";import{cn as U}from"../../helpers/utils.js";import X from"./tabSwitch.js";import Y from"../Title/index.js";import Z from"../SwiperBox/index.js";import{withLayout as ee}from"../../shared/Styles.js";import{gaTrack as P}from"../../shared/track.js";import{useMediaQuery as te}from"react-responsive";import{useRollout as se}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ae,ShelfDisplayHorizontalItem as ne}from"./shelfDisplayItem.js";const ie="image",re="product_shelf",oe=J.forwardRef(({key:x,data:c,event:H,buildData:B,breakpoints:C,className:E="",recommendedData:n,target:V="_self",metafields:L,isDisplayGudgments:_=!1,isDisplayBackImage:N=!1},A)=>{const{productsTab:o=[],productsCard:$=[],title:v,isShowTab:p=!0,tabShape:q="square",isShowTag:O=!1,isShowOriginalPrice:z=!0,isShowRecommendedCard:Q=!1,...W}=c,[b,S]=I(""),[a,f]=I([]),y=g(!1),u=g(!1),T=g(null),j=te({query:"(max-width: 768px)"}),[F,k]=se({threshold:0}),l=a?.length<=1&&_,i=!j&&a?.length<=2&&_,d=e=>{switch(e){case 1440:return i?a?.length:4;case 1024:return i?a?.length:3;default:return i?a?.length:2.3}},D=()=>{P({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:n?.map((e,w)=>{const s=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:w+1}})}})},h=(e,w)=>{if(w){const m=n?.map?.(s=>({...s,isShowRecommended:!0}));f(m?.length?m||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const R=B?.products?.find(G=>G?.handle===t?.handle);if(R)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...R}})?.filter(t=>t);f(s?.length?s||[]:[])}else f([])};return K(A,()=>T.current),M(()=>{k&&n?.length&&!y.current&&(y.current=!0,D())},[k,n]),M(()=>{if(!u.current){if(!u.current&&n?.length&&(u.current=!0),p){S(o?.[0]?.tab||""),h(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}h($,Q)}},[n]),le("div",{ref:T,className:U("shelf-display-wrap w-full",E,{"aiui-dark":c?.theme==="dark"}),children:[v&&r(Y,{data:{title:v}}),p&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(X,{value:b,tabs:o,tabShape:q,onTabClick:e=>{if(S(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){P({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ie,component_name:re,component_title:c?.title,component_position:1,navigation:e?.tab}});return}D()}})}),r("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(Z,{data:{list:a,configuration:{...W,event:H,isShowTag:O,isShowOriginalPrice:z,target:V,metafields:L,itemLength:a?.length,isDisplayBackImage:N}},id:`ShelfDisplay${x}${b}`,className:`${p?"mt-6":""} !overflow-visible shelf-display-swiper-box`,itemClassName:i?"flex-1":"",Slide:i?ne:ae,breakpoints:C||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l?1:1.2},768:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d()},1024:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1440)}}})})]})});var ve=ee(oe);export{ve as default};
+"use client";import{jsx as r,jsxs as le}from"react/jsx-runtime";import J,{useState as I,useEffect as M,useRef as g,useImperativeHandle as K}from"react";import{cn as U}from"../../helpers/utils.js";import X from"./tabSwitch.js";import Y from"../Title/index.js";import Z from"../SwiperBox/index.js";import{withLayout as ee}from"../../shared/Styles.js";import{gaTrack as P}from"../../shared/track.js";import{useMediaQuery as te}from"react-responsive";import{useRollout as se}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ae,ShelfDisplayHorizontalItem as ne}from"./shelfDisplayItem.js";const ie="image",re="product_shelf",oe=J.forwardRef(({key:x,data:c,event:H,buildData:B,breakpoints:C,className:E="",recommendedData:n,target:V="_self",metafields:L,isDisplayGudgments:_=!1,isDisplayBackImage:N=!1},A)=>{const{productsTab:o=[],productsCard:$=[],title:v,isShowTab:p=!0,tabShape:q="square",isShowTag:O=!1,isShowOriginalPrice:z=!0,isShowRecommendedCard:Q=!1,...W}=c,[b,S]=I(""),[a,f]=I([]),y=g(!1),u=g(!1),T=g(null),j=te({query:"(max-width: 768px)"}),[F,k]=se({threshold:0}),l=a?.length<=1&&_,i=!j&&a?.length<=2&&_,d=e=>{switch(e){case 1440:return i?a?.length:4;case 1024:return i?a?.length:3;default:return i?a?.length:2.3}},D=()=>{P({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:n?.map((e,w)=>{const s=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:w+1}})}})},h=(e,w)=>{if(w){const m=n?.map?.(s=>({...s,isShowRecommended:!0}));f(m?.length?m||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const R=B?.products?.find(G=>G?.handle===t?.handle);if(R)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...R}})?.filter(t=>t);f(s?.length?s||[]:[])}else f([])};return K(A,()=>T.current),M(()=>{k&&n?.length&&!y.current&&(y.current=!0,D())},[k,n]),M(()=>{if(!u.current){if(!u.current&&n?.length&&(u.current=!0),p){S(o?.[0]?.tab||""),h(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}h($,Q)}},[n]),le("div",{ref:T,className:U("shelf-display-wrap w-full",E,{"aiui-dark":c?.theme==="dark"}),children:[v&&r(Y,{data:{title:v}}),p&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(X,{value:b,tabs:o,tabShape:q,onTabClick:e=>{if(S(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){P({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ie,component_name:re,component_title:c?.title,component_position:1,navigation:e?.tab}});return}D()}})}),r("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(Z,{data:{list:a,configuration:{...W,event:H,isShowTag:O,isShowOriginalPrice:z,target:V,metafields:L,itemLength:a?.length,isDisplayBackImage:N}},id:`ShelfDisplay${x}${b}`,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?ne:ae,breakpoints:C||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l?1:1.2},768:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d()},1024:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1440)}}})})]})});var ve=ee(oe);export{ve as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible shelf-display-swiper-box`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  nl: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-US',\n    uk: 'en-GB',\n    ca: 'en-CA',\n    eu: 'en',\n    fr: 'fr-FR',\n    au: 'en-AU',\n    my: 'en-my',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    'ca-fr': 'fr-FR',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n    'eu-pl': 'pl-PL',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n  const localeLanguage = languageTerritory(locale)\n  if (!localeLanguage) {\n    return null\n  }\n  const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n    style: 'currency',\n    currency: code,\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency?.format?.(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    formattedValue = formattedValue\n      ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/\\.0+\\b/, '')\n      ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount;\n  if (hasDiscount) { \n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  nl: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-US',\n    uk: 'en-GB',\n    ca: 'en-CA',\n    eu: 'en',\n    fr: 'fr-FR',\n    au: 'en-AU',\n    my: 'en-my',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    'ca-fr': 'fr-FR',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n    'eu-pl': 'pl-PL',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n  const localeLanguage = languageTerritory(locale)\n  if (!localeLanguage) {\n    return null\n  }\n  const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n    style: 'currency',\n    currency: code,\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency?.format?.(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace?.(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    formattedValue = formattedValue\n      ?.replace?.(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/\\.0+\\b/, '')\n      ?.replace?.(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      ?.replace?.(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}\n"],
   "mappings": "AAAA,OAAOA,MAAa,aAGb,MAAMC,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,OACX,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CACD,MAAMC,EAAOP,IAAW,KAAO,MAAQG,GAAgB,MACjDK,EAAiBT,EAAkBC,CAAM,EAC/C,GAAI,CAACQ,EACH,OAAO,KAST,IAAIC,EAPmB,IAAI,KAAK,aAAaD,EAAgB,CAC3D,MAAO,WACP,SAAUD,EACV,sBAAuBH,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,GAEoC,SAASF,CAAM,EAEpD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDS,EAAiBA,GAAgB,SAAS,GAAG,UAAU,QAAS,EAAE,GAGhEH,IACFG,EAAiBA,GACb,UAAU,oBAAqB,IAAI,GACnC,UAAU,SAAU,EAAE,GACtB,UAAU,oBAAqB,IAAI,GACnC,UAAU,SAAU,EAAE,GAGrBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAR,EACA,WAAAS,EACA,aAAAR,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGW,CAAU,GAC/C,SAAU,GAAGb,EAAaE,CAAM,CAAC,GAAGW,EAAaT,GAAU,CAAC,EAC9D,EAGF,MAAMU,EAAcD,EAAaT,EACjC,IAAIW,EAAW,KACf,MAAMC,EAAgBf,EAAkBC,CAAM,EAC9C,GAAIc,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQJ,EAAaT,GAAUS,CAAU,EAAI,IACvF,CAEA,IAAIK,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAIpB,EAAQc,CAAU,EAAE,IAAIT,GAAU,CAAC,EAAE,SAAS,EAC1Ec,EAAiBf,EAAY,CAC3B,OAAQgB,EACR,aAAcd,GAAgB,MAC9B,OAAAH,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMkB,EAAQjB,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEa,EAAYP,EACdX,EAAY,CACV,OAAQU,EACR,aAAAR,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAY,EAAO,UAAAC,EAAW,SAAAN,EAAU,eAAAG,CAAe,CACtD",
   "names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
 }

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

@@ -2,7 +2,7 @@ import{Fragment as W,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiCo
                 ${t.direction==="vertical"?"w-full":""}
               `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>T(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:S,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",g==="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:$?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:o()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[_&&P&&s(F,{className:"absolute left-4 top-4 z-10 shelf-prices-tag",children:_||""}),s("div",{className:u("lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image"),children:s("a",{"aria-label":h,target:t?.target,href:q(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({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:s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),o()]})},e?.id||e?.handle)},de=({data:e,configuration:t})=>{const{itemShape:$,itemLength:g,metafields:I}=t||{},{discounts:P,discountsCopy:j}=I||{},{locale:x="us",copyWriting:v}=A(),[k,O]=U([]),w=K(null),S=(a,o,l)=>t?.event?.primaryButton?.(a,o+1,l),N=(a,o,l)=>t?.event?.secondaryButton?.(a,o+1,l),i=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},_=!i?.availableForSale&&i?.price?.amount===X,z=t?.isShowTag,T=t?.isShowOriginalPrice,y=i?.coupons?.[0],{price:n,basePrice:H,discount:m}=R({locale:x,amount:T&&y?y.variant_price4wscode:i.price,baseAmount:T&&y?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),L=()=>{const a=e?.sku,o=e?.variants;return o?.find(r=>r?.sku===a)?.image?.url||o?.[0]?.image?.url||""},f=e?.custom_name||e?.title,d=e?.custom_description||e?.description;J(w,{componentType:D,componentName:C,componentTitle:f,componentDescription:d,position:t?.index+1});const b=()=>g>=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"},h=()=>g>=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 Q(()=>{let a=[];if(m){const l=`${m}${P?.off||j?.off||""}`;a.push(l)}const o=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(o))},[e?.tags,m]),s("div",{ref:w,className:u(b().wrap,$==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]"),children:c("div",{className:u(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(b().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:s("a",{"aria-label":f,target:t?.target,href:q(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(E,{source:L(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:u("flex flex-col justify-center items-start",b().boxItem),children:[z&&k?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:k?.map?.((a,o)=>s(F,{className:"shelf-items-tag",children:a},o))}):null,f?s(G,{as:"h3",title:f||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:f||""}):null,d?s(M,{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:d||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:_?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&H||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>N(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:S,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",g==="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:$?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:o()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[_&&P&&s(F,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:_||""}),s("div",{className:u("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":h,target:t?.target,href:q(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({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:s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),o()]})},e?.id||e?.handle)},de=({data:e,configuration:t})=>{const{itemShape:$,itemLength:g,metafields:I}=t||{},{discounts:P,discountsCopy:j}=I||{},{locale:x="us",copyWriting:v}=A(),[k,O]=U([]),w=K(null),S=(a,o,l)=>t?.event?.primaryButton?.(a,o+1,l),N=(a,o,l)=>t?.event?.secondaryButton?.(a,o+1,l),i=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},_=!i?.availableForSale&&i?.price?.amount===X,z=t?.isShowTag,T=t?.isShowOriginalPrice,y=i?.coupons?.[0],{price:n,basePrice:H,discount:m}=R({locale:x,amount:T&&y?y.variant_price4wscode:i.price,baseAmount:T&&y?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),L=()=>{const a=e?.sku,o=e?.variants;return o?.find(r=>r?.sku===a)?.image?.url||o?.[0]?.image?.url||""},f=e?.custom_name||e?.title,d=e?.custom_description||e?.description;J(w,{componentType:D,componentName:C,componentTitle:f,componentDescription:d,position:t?.index+1});const b=()=>g>=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"},h=()=>g>=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 Q(()=>{let a=[];if(m){const l=`${m}${P?.off||j?.off||""}`;a.push(l)}const o=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(o))},[e?.tags,m]),s("div",{ref:w,className:u(b().wrap,$==="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:c("div",{className:u(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(b().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":f,target:t?.target,href:q(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(E,{source:L(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:u("flex flex-col items-start justify-center",b().boxItem),children:[z&&k?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:k?.map?.((a,o)=>s(F,{className:"shelf-items-tag",children:a},o))}):null,f?s(G,{as:"h3",title:f||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:f||""}):null,d?s(M,{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:d||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:_?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&H||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>N(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
               `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}

package/dist/esm/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\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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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=\"absolute left-4 top-4 z-10 shelf-prices-tag\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image'\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\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, 'relative overflow-hidden desktop:mb-0 mb-1')}>\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', 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"],
+  "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\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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/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\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"],
-  "mappings": "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",
+  "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"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "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", "Slogan_default"]
 }

package/dist/esm/biz-components/Specs/dropdown.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import{jsx as l}from"react/jsx-runtime";import{useEffect as b,useRef as h,useMemo as x}from"react";const m="openDropDown",v=({index:o,active:s,list:d,setActive:p,setVisible:c,visible:r,filterActive:a})=>{const u=h(null);b(()=>{const e=n=>{const t=n?.target?.getAttribute?.("class");!u?.current?.contains(n?.target)&&!t?.includes(m)&&c({...r,[o]:!1})};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[]);const f=x(()=>{const e=Object.keys(a||{});return d?.filter(n=>!e?.find(i=>a?.[i]?.handle===n?.handle))},[a,d]);return l("div",{ref:u,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${r?.[o]?"block":"hidden"}`,children:l("div",{className:"m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0",children:f?.map((e,n)=>{const t=e?.sku||e?.variants?.[0]?.sku;return l("div",{onClick:()=>{p({...s,[o]:{sku:t,name:e?.name,handle:e?.handle}}),c({...r,[o]:!1})},title:e?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
-                ${e?.handle===s?.handle?"bg-[#EAEAEC]":""}`,children:e?.name},n)})})})};var D=v;export{D as default};
+import{jsx as l}from"react/jsx-runtime";import{useEffect as b,useRef as h,useMemo as x}from"react";const v="openDropDown",y=({index:t,active:s,list:d,setActive:p,setVisible:c,visible:r,filterActive:a})=>{const u=h(null);b(()=>{const e=n=>{const o=n?.target?.getAttribute?.("class");!u?.current?.contains(n?.target)&&!o?.includes(v)&&c({...r,[t]:!1})};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[]);const f=x(()=>{const e=Object.keys(a||{});return d?.filter(n=>!e?.find(i=>a?.[i]?.handle===n?.handle))},[a,d]);return l("div",{ref:u,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${r?.[t]?"block":"hidden"}`,children:l("div",{className:"m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0",children:f?.map((e,n)=>{const o=e?.sku||e?.variants?.[0]?.sku;return l("div",{onClick:()=>{p({...s,[t]:{sku:o,name:e?.name||e?.title,handle:e?.handle}}),c({...r,[t]:!1})},title:e?.name||e?.title,className:`openDropDown min-xl:text-lg min-xxl:text-lg box-border cursor-pointer truncate px-6 py-4 text-base font-bold [&:hover]:bg-[#EAEAEC]
+                ${e?.handle===s?.handle?"bg-[#EAEAEC]":""}`,children:e?.name||e?.title},n)})})})};var k=y;export{k as default};
 //# sourceMappingURL=dropdown.js.map

package/dist/esm/biz-components/Specs/dropdown.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
-  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, id: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={id}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name}\n              className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
-  "mappings": "AA8CY,cAAAA,MAAA,oBA9CZ,OAAS,aAAAC,EAAW,UAAAC,EAAQ,WAAAC,MAAe,QAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,EAAcX,EAAuB,IAAI,EAE/CD,EAAU,IAAM,CACd,MAAMa,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAad,EAAQ,IAAM,CAC/B,MAAMe,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,OACER,EAAC,OACC,IAAKa,EACL,UAAW,yGAAyGF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAEzJ,SAAAN,EAAC,OAAI,UAAW,6EACb,SAAAiB,GAAY,IAAI,CAACE,EAAWE,IAAe,CAC1C,MAAMC,EAAaH,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,OACEnB,EAAC,OAEC,QAAS,IAAM,CACbS,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKgB,EACL,KAAMH,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFE,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOE,EAAQlB",
+  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, id: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={id}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name || item?.title,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name || item?.title}\n              className={`openDropDown min-xl:text-lg min-xxl:text-lg box-border cursor-pointer truncate px-6 py-4 text-base font-bold [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name || item?.title}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
+  "mappings": "AA8CY,cAAAA,MAAA,oBA9CZ,OAAS,aAAAC,EAAW,UAAAC,EAAQ,WAAAC,MAAe,QAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,EAAcX,EAAuB,IAAI,EAE/CD,EAAU,IAAM,CACd,MAAMa,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAad,EAAQ,IAAM,CAC/B,MAAMe,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,OACER,EAAC,OACC,IAAKa,EACL,UAAW,yGAAyGF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAEzJ,SAAAN,EAAC,OAAI,UAAW,6EACb,SAAAiB,GAAY,IAAI,CAACE,EAAWE,IAAe,CAC1C,MAAMC,EAAaH,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,OACEnB,EAAC,OAEC,QAAS,IAAM,CACbS,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKgB,EACL,KAAMH,GAAM,MAAQA,GAAM,MAC1B,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,MAAQA,GAAM,MAC3B,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAAQA,GAAM,OAhBhBE,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOE,EAAQlB",
   "names": ["jsx", "useEffect", "useRef", "useMemo", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "id", "currentSku", "dropdown_default"]
 }

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

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