@anker-in/headless-ui 1.1.14 → 1.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var M=(e,i)=>{for(var r in i)a(e,r,{get:i[r],enumerable:!0})},d=(e,i,r,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of S(i))!g.call(e,o)&&o!==r&&a(e,o,{get:()=>i[o],enumerable:!(t=u(i,o))||t.enumerable});return e};var B=(e,i,r)=>(r=e!=null?m(P(e)):{},d(i||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),y=e=>d(a({},"__esModule",{value:!0}),e);var h={};M(h,{default:()=>b});module.exports=y(h);var l=require("react/jsx-runtime"),c=B(require("react")),n=require("swiper/react"),s=require("swiper/modules"),k=require("swiper/css"),G=require("swiper/css/pagination");const f=c.default.forwardRef(({data:e,Slide:i,id:r,isHalf:t},o)=>(0,l.jsx)(n.Swiper,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[s.FreeMode,s.Mousewheel,s.Pagination],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:t?2:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:t?2:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((w,p)=>(0,l.jsx)(n.SwiperSlide,{className:"!h-[unset]",children:(0,l.jsx)(i,{data:w,configuration:{...e?.configuration,index:p}})},r+"SwiperSlide"+p))}));f.displayName="SwiperBox";var b=f;
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6DU,IAAAI,EAAA,6BA5DVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,
|
|
6
|
-
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "item", "jIndex"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n isHalf?: boolean\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, isHalf }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n }}\n className=\"!overflow-visible\"\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6DU,IAAAI,EAAA,6BA5DVC,EAAkB,oBAClBA,EAAoC,wBACpCC,EAAiD,0BACjDC,EAAO,sBACPC,EAAO,iCAcP,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,GAAAC,EAAI,OAAAC,CAAO,EAAGC,OAE7F,OAAC,UACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAeD,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGH,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,OACtB,OAAC,eAA8C,UAAU,aACvD,mBAACL,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDR,EAAU,YAAc,YAExB,IAAOP,EAAQO",
|
|
6
|
+
"names": ["SwiperCategory_exports", "__export", "SwiperCategory_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_css", "import_pagination", "SwiperBox", "React", "data", "Slide", "id", "isHalf", "ref", "item", "jIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var $=Object.create;var d=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of L(t))!T.call(e,n)&&n!==o&&d(e,n,{get:()=>t[n],enumerable:!(r=E(t,n))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?$(S(e)):{},C(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>C(d({},"__esModule",{value:!0}),e);var F={};M(F,{default:()=>R});module.exports=D(F);var a=require("react/jsx-runtime"),l=u(require("react")),s=require("../../helpers/utils.js"),h=u(require("../../components/picture.js")),w=require("../../shared/Styles.js"),I=u(require("../Title/index.js")),x=u(require("./SwiperCategory.js")),f=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),_=require("../../components/heading.js");const m="image",p="category_banner",g=5,H=3,P=(e,t)=>{const o=[];for(let r=0;r<e.length;r+=t)o.push(e.slice(r,r+t));return o},j=({data:e,configuration:t})=>{const o=(0,l.useRef)(null);return(0,f.useExposure)(o,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,a.jsxs)("div",{ref:o,className:(0,s.cn)("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("div",{className:"transition-all duration-300 group-hover:scale-110",children:(0,a.jsx)("a",{"aria-label":e?.name,href:(0,y.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,a.jsx)(h.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,a.jsx)(_.Heading,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},A=({data:e,configuration:t,index:o,isFirstItemLarger:r})=>{const n=(0,l.useRef)(null);(0,f.useExposure)(n,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1});const i=o===0;return(0,a.jsxs)("div",{ref:n,className:(0,s.cn)("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",r?(0,s.cn)("p-4",i?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,a.jsx)(h.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,s.cn)("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?(0,s.cn)(i?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,a.jsx)("p",{className:(0,s.cn)("text-info-primary text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},B=({data:e,configuration:t})=>{const r=(t?.totalCategories??0)<=g;return(0,a.jsx)("div",{className:`gap-3 ${r?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((n,i)=>(0,a.jsx)(A,{index:i,data:n,configuration:t,isFirstItemLarger:r},i))})},z=l.default.forwardRef((e,t)=>{const{data:o,className:r="",key:n,event:i}=e,c=(o?.isShowSelect?o?.products:o?.productData)||[],v=c.length>g,b=c.length,N=P(c,v?H:g),k=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>k.current),(0,a.jsxs)("div",{ref:k,className:(0,s.cn)("w-full overflow-hidden",r,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&(0,a.jsx)(I.default,{data:{title:o?.title},className:"text-4xl"}),(0,a.jsx)("div",{className:"tablet:block hidden",children:(0,a.jsx)(x.default,{id:`Category${n}`,Slide:j,data:{list:c,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:b}}})}),(0,a.jsx)("div",{className:"tablet:hidden block",children:(0,a.jsx)(x.default,{id:`Category1${n}`,Slide:B,data:{list:N,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:b}},isHalf:v})}),(0,a.jsx)("div",{className:"h-7"})]})});var R=(0,w.withLayout)(z);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "import_heading", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "Picture", "SingleMobileItem", "index", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]',\n 'tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <Heading\n as=\"h3\"\n className=\"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold\"\n >\n {data?.name}\n </Heading>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n isFirstItemLarger,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n isFirstItemLarger: boolean\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n const totalCategories = configuration?.totalCategories ?? 0\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n return (\n <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n {data?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n isFirstItemLarger={isFirstItemLarger}\n />\n ))}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n const totalCategories = currentData.length\n const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div ref={innerRef} className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{\n list: currentData,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n isHalf={isCardShow}\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "import_heading", "componentType", "componentName", "MOBILE_FULL_PAGE_CAPACITY", "MOBILE_COMPACT_PAGE_SIZE", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "Picture", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "currentData", "isCardShow", "totalCategories", "mobileSlides", "innerRef", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var le=Object.create;var
|
|
1
|
+
"use strict";"use client";var le=Object.create;var k=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var ce=(t,r)=>{for(var s in r)k(t,s,{get:r[s],enumerable:!0})},F=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ne(r))!ie.call(t,a)&&a!==s&&k(t,a,{get:()=>r[a],enumerable:!(l=se(r,a))||l.enumerable});return t};var $=(t,r,s)=>(s=t!=null?le(pe(t)):{},F(r||!t||!t.__esModule?k(s,"default",{value:t,enumerable:!0}):s,t)),ue=t=>F(k({},"__esModule",{value:!0}),t);var ge={};ce(ge,{default:()=>me});module.exports=ue(ge);var e=require("react/jsx-runtime"),o=$(require("react")),v=$(require("gsap")),y=require("gsap/dist/ScrollTrigger"),R=require("react-responsive"),A=require("react-intersection-observer"),Q=$(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),Z=$(require("./Countdown.js")),d=require("../../helpers/index.js"),G=require("../../shared/Styles.js"),J=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),K=require("../../components/button.js"),O=require("../VideoModal/index.js");const i="image",c="hero_banner",de=({size:t="base"})=>{const{width:r,height:s}=K.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},q=o.default.forwardRef(({data:t,className:r},s)=>{const{title:l,subtitle:a,endDate:P,endDate_tz:W,dateFormat:X,pcImage:T,padImage:M,mobileImage:w,pcVideo:Y,padVideo:ee,mobileVideo:C,isShowVideo:te,primaryButton:b,secondaryButton:p,theme:ae="light",size:B="default",caption:z=[],blockLink:L,iconArray:re}=t,D=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),S=(0,R.useMediaQuery)({query:"(max-width: 1024px)"}),[E,U]=(0,o.useState)(!1),{ref:oe,inView:_}=(0,A.useInView)(),H=(0,o.useRef)(null),V=(0,o.useRef)(null),I=(0,o.useRef)(null),x=(0,o.useRef)(null),u=(0,o.useRef)(null);return(0,J.useExposure)(u,{componentType:i,componentName:c,componentTitle:l,componentDescription:a}),(0,o.useImperativeHandle)(s,()=>u.current),(0,o.useEffect)(()=>{v.default.registerPlugin(y.ScrollTrigger);function m(){if(!x.current)return;const g=u.current?.clientHeight||100;window.innerHeight<=g?H.current=y.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:f=>{const h=f.progress*40-20;v.default.set(x.current,{yPercent:h})}}):(I.current=y.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:f=>{const h=f.progress*20-20;v.default.set(x.current,{yPercent:h})}}),V.current=y.ScrollTrigger.create({trigger:u.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:f=>{const h=f.progress*20;v.default.set(x.current,{yPercent:h})}}))}return _&&m(),()=>{H.current&&H.current.kill(),I.current&&I.current.kill(),V.current&&V.current.kill()}},[_]),(0,e.jsx)("div",{ref:oe,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:u,className:(0,d.cn)(ae==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},r),children:[L&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,N.trackUrlRef)(L,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${l}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":l}),(0,e.jsx)("div",{ref:x,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:te?(0,e.jsx)(Q.default,{poster:D?w?.url:S?M?.url||w?.url:T?.url,src:D?C?.url:S?ee?.url||C?.url:Y?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:T?.alt||"",source:`${T?.url||""} , ${M?.url??(w?.url||"")} 1024, ${w?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[l&&(0,e.jsx)(n.Heading,{as:"h2",size:B==="sm"?4:5,className:(0,d.cn)("hero-banner-title"),html:l}),a&&(0,e.jsx)(n.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(Z.default,{endDate:P,endDate_tz:W,dateFormat:X})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[p?.isShowPlayVideoButton&&p?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${p?.playVideoButtonText}`,children:[p?.playVideoButtonText," ",(0,e.jsx)(de,{size:"lg"})]}):p?.text?(0,e.jsxs)(n.Button,{"aria-label":l??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,N.trackUrlRef)(p?.link,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${p?.text}`,children:[p?.text,(0,e.jsx)("span",{className:"sr-only",children:l??a})]}):null,b&&b.text&&(0,e.jsx)(n.Button,{"aria-label":l??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,N.trackUrlRef)(b.link,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${b?.text}`,children:b.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:re?.map((m,g)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:m?.pcImage?.alt||"",source:m?.pcImage?.url})},g))})]}),z.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:z.map((m,g)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:m.title}),g<z.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},g))}),E&&(0,e.jsx)(O.VideoModal,{visible:E,videoUrl:p?.videoUrl?.url,youTubeId:p?.youtubeId,onCloseModal:()=>U(!1)})]})})});q.displayName="HeroBanner";var me=(0,G.withLayout)(q);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_Countdown", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "Countdown", "icon", "index", "c"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var re=Object.create;var _=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var fe=(e,n)=>{for(var a in n)_(e,a,{get:n[a],enumerable:!0})},z=(e,n,a,p)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of le(n))!ce.call(e,l)&&l!==a&&_(e,l,{get:()=>n[l],enumerable:!(p=oe(n,l))||p.enumerable});return e};var S=(e,n,a)=>(a=e!=null?re(me(e)):{},z(n||!e||!e.__esModule?_(a,"default",{value:e,enumerable:!0}):a,e)),pe=e=>z(_({},"__esModule",{value:!0}),e);var _e={};fe(_e,{default:()=>be});module.exports=pe(_e);var o=require("react/jsx-runtime"),s=S(require("react")),A=require("../../helpers/utils.js"),$=S(require("./tabSwitch.js")),q=S(require("../Title/index.js")),O=S(require("../SwiperBox/index.js")),K=require("../../shared/Styles.js"),R=require("../../shared/track.js"),Q=require("react-responsive"),W=require("../../hooks/useRollout.js"),y=require("./shelfDisplayItem.js");const de="image",ue="product_shelf",he=e=>e==null?"default":String(e).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,ge=s.default.forwardRef(({key:e,data:n,event:a,buildData:p,breakpoints:l,className:Z="",recommendedData:c,target:j="_self",metafields:F,isDisplayGudgments:M=!1,isDisplayBackImage:G=!1},J)=>{const{productsTab:f=[],productsCard:D=[],title:P,isShowTab:w=!0,tabShape:U="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:x=!1,...ee}=n,[v,C]=(0,s.useState)(""),[m,T]=(0,s.useState)([]),H=(0,s.useRef)(!1),k=(0,s.useRef)(!1),B=(0,s.useRef)(null),te=(0,s.useRef)(we()),ne=(0,Q.useMediaQuery)({query:"(max-width: 768px)"}),[se,E]=(0,W.useRollout)({threshold:0}),g=m?.length<=1&&M,d=!ne&&m?.length<=2&&M,I=t=>{switch(t){case 1440:return d?m?.length:4;case 1024:return d?m?.length:3;default:return d?m?.length:2.3}},V=()=>{(0,R.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((t,h)=>{const r=t?.variants?.find(i=>i?.sku===t?.sku)||t?.variants?.[0];return{item_id:t?.sku||r?.sku,item_name:t?.name,item_variant:r?.name,price:r?.price,index:h+1}})}})},u=(t,h)=>{if(h){const b=c?.map?.(r=>({...r,isShowRecommended:!0}));T(b?.length?b||[]:[])}else if(Array.isArray(t)){const r=t?.map?.(i=>{const N=p?.products?.find(ie=>ie?.handle===i?.handle);if(N)return{sku:i.sku,isShowRecommended:!1,custom_name:i.custom_name,custom_description:i.custom_description,custom_image:i.custom_image,custom_theme:i.custom_theme,...N}})?.filter(i=>i);T(r?.length?r||[]:[])}else T([])};(0,s.useImperativeHandle)(J,()=>B.current),(0,s.useEffect)(()=>{E&&c?.length&&!H.current&&(H.current=!0,V())},[E,c]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&c?.length&&(k.current=!0),w){C(f?.[0]?.tab||""),u(f?.[0]?.data||[],f?.[0]?.isShowRecommendedTab);return}u(D,x)}},[c]),(0,s.useEffect)(()=>{if(w){const t=f?.find(h=>h?.tab===v)||f?.[0];u(t?.data||[],t?.isShowRecommendedTab);return}u(D,x)},[p]);const ae=he(v),L=`${te.current}-${ae}`;return(0,o.jsxs)("div",{ref:B,className:(0,A.cn)("shelf-display-wrap w-full",Z,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(q.default,{data:{title:P}}),w&&(0,o.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,o.jsx)($.default,{value:v,tabs:f,tabShape:U,onTabClick:t=>{if(C(t?.tab),u(t?.data||[],t?.isShowRecommendedTab),!t?.isShowRecommendedTab){(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:ue,component_title:n?.title,component_position:1,navigation:t?.tab}});return}V()}})}),(0,o.jsx)("div",{ref:se,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(O.default,{data:{list:m,configuration:{...ee,event:a,isShowTag:X,isShowOriginalPrice:Y,target:j,metafields:F,itemLength:m?.length,isDisplayBackImage:G}},id:L,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:d?"flex-1":"",Slide:d?y.ShelfDisplayHorizontalItem:y.ShelfDisplayWrapItem,breakpoints:l||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:g?1:1.2},768:{spaceBetween:g?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:g?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:g?0:16,freeMode:!1,slidesPerView:I(1440)}}},L)})]})});var be=(0,K.withLayout)(ge);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"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={
|
|
5
|
-
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "ShelfDisplay", "React", "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", "Title", "TabSwitch", "SwiperBox"]
|
|
4
|
+
"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 sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\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 const instanceIdRef = useRef<string>(createInstanceId())\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 useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\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 key={swiperInstanceId}\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={swiperInstanceId}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "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", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "TabSwitch", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -29,8 +29,8 @@ export declare function formatVariantPrice({ amount, baseAmount, currencyCode, l
|
|
|
29
29
|
discountAmount: string | null | undefined;
|
|
30
30
|
};
|
|
31
31
|
type EventType = {
|
|
32
|
-
primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
|
|
33
|
-
secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void;
|
|
32
|
+
primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void;
|
|
33
|
+
secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void;
|
|
34
34
|
};
|
|
35
35
|
export interface ShelfDisplayItem {
|
|
36
36
|
id?: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
|
|
4
|
-
"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"],
|
|
4
|
+
"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, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => 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"],
|
|
5
5
|
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,sBAAAC,IAAA,eAAAC,EAAAN,GAAA,IAAAO,EAAoB,yBAGb,MAAML,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaG,EAAqBG,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,SAASL,EAAY,CAC1B,OAAAM,EACA,aAAAC,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CACD,MAAMC,EAAON,IAAW,KAAO,MAAQE,GAAgB,MACjDK,EAAiBV,EAAkBG,CAAM,EAC/C,GAAI,CAACO,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,SAASD,CAAM,IAChDQ,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,SAASZ,EAAmB,CACjC,OAAAK,EACA,WAAAQ,EACA,aAAAP,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGX,EAAaM,CAAM,CAAC,GAAGC,CAAM,GACvC,UAAW,GAAGP,EAAaM,CAAM,CAAC,GAAGS,CAAU,GAC/C,SAAU,GAAGf,EAAaM,CAAM,CAAC,GAAGS,EAAaR,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcD,EAAaR,EACjC,IAAIU,EAAW,KACf,MAAMC,EAAgBf,EAAkBG,CAAM,EAC9C,GAAIY,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQJ,EAAaR,GAAUQ,CAAU,EAAI,IACvF,CAEA,IAAIK,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAI,EAAAC,QAAQP,CAAU,EAAE,IAAIR,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBnB,EAAY,CAC3B,OAAQoB,EACR,aAAcb,GAAgB,MAC9B,OAAAF,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMiB,EAAQtB,EAAY,CAAE,OAAAM,EAAQ,aAAAC,EAAc,OAAAF,EAAQ,oBAAAK,CAAoB,CAAC,EACzEa,EAAYR,EACdf,EAAY,CACV,OAAQc,EACR,aAAAP,EACA,OAAAF,EACA,sBAAAG,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAY,EAAO,UAAAC,EAAW,SAAAP,EAAU,eAAAG,CAAe,CACtD",
|
|
6
6
|
"names": ["shelfDisplay_exports", "__export", "PRICE_SYMBOL", "formatPrice", "formatVariantPrice", "languageTerritory", "__toCommonJS", "import_decimal", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ce=Object.create;var E=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},ne=(e,t,a,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of me(t))!ue.call(e,u)&&u!==a&&E(e,u,{get:()=>t[u],enumerable:!(f=pe(t,u))||f.enumerable});return e};var Y=(e,t,a)=>(a=e!=null?ce(de(e)):{},ne(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),xe=e=>ne(E({},"__esModule",{value:!0}),e);var ge={};fe(ge,{ShelfDisplayHorizontalItem:()=>ve,ShelfDisplayWrapItem:()=>he,getProductImage:()=>ae});module.exports=xe(ge);var s=require("react/jsx-runtime"),Z=require("../AiuiProvider/index.js"),ee=require("./shelfDisplay.js"),V=Y(require("../../components/picture.js")),q=Y(require("../../components/badge.js")),v=require("../../helpers/utils.js"),te=require("../../components/text.js"),W=Y(require("../../components/button.js")),se=require("../../shared/track.js"),le=require("../../shared/trackUrlRef.js"),oe=require("../../components/heading.js"),ie=require("../../hooks/useExposure.js"),p=require("react");const F="image",M="product_shelf",R=999999999e-2,ae=e=>{const t=e?.sku,a=e?.variants,f=a?.find(_=>_?.sku===t),u=f?.image?.url||a?.[0]?.image?.url||"",k=f?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:u,altText:k}},he=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:f,metafields:u,isTopTag:k=!1,isShowTag:_,isShowOriginalPrice:y}=t||{},{locale:b="us",copyWriting:O}=(0,Z.useAiuiContext)(),{discounts:U,discountsCopy:B}=u||{},z=(0,p.useRef)(null),[A,n]=(0,p.useState)([]),[C,G]=(0,p.useState)(""),J=(l,o,m,d)=>t?.event?.primaryButton?.(l,o+1,m,d),K=(l,o,m,d)=>t?.event?.secondaryButton?.(l,o+1,m,d),r=(0,p.useMemo)(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(o=>o?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),x=r?.id?.split?.("/")||[],D=x?.[x?.length-1],H=!r?.availableForSale&&(r?.price?.amount===R||r?.price===R),g=r?.coupons?.[0],I=!!(y&&g),L=e?.price?.currencyCode||"USD",S=(0,p.useMemo)(()=>(0,ee.formatVariantPrice)({locale:b,amount:I?g?.variant_price4wscode:r?.price,baseAmount:I?r?.price:0,currencyCode:L}),[L,b,I,g?.variant_price4wscode,r]),{price:P,basePrice:Q,discount:N,discountAmount:h}=S,{imageUrl:T,altText:$}=ae(e),w=e?.custom_name||e?.title,j=e?.custom_description||e?.description,i=()=>{if(g?.value_type==="fixed_amount"){const l=h||"",o=l.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(o){const[,m,d,re]=o;let X=d;return d.endsWith(".00")?X=d.replace(/\.00$/,""):d.endsWith(",00")&&(X=d.replace(/,00$/,"")),`${m}${X}${re}`}return l}return N||""};(0,p.useEffect)(()=>{let l=[];if(N||h){const m=`${i()}${U?.off||B?.off||""}`;G(m),l.push(m)}const o=e?.tags?.filter?.(m=>m?.startsWith?.("CLtag"))?.map?.(m=>m?.replace?.("CLtag:",""))?.slice?.(0,N?1:2);n(l.concat(o))},[e?.tags,N,h,U?.off,B?.off]),(0,ie.useExposure)(z,{componentType:F,componentName:M,componentTitle:w,componentDescription:j,position:t?.index+1});const c=()=>(0,s.jsxs)(s.Fragment,{children:[_&&A?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:A?.map?.((l,o)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:l},o))}):null,w?(0,s.jsx)(oe.Heading,{as:"h3",title:w||"",size:2,className:"shelf-display-product-title line-clamp-2",html:w||""}):null,j?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:j||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:H?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:r?.availableForSale&&P||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:r?.availableForSale&&Q||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(W.default,{variant:"secondary",onClick:()=>K(e,t?.index,t,g),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>J(e,t?.index,t,g),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,v.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(V.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:c()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[C&&k&&(0,s.jsx)(q.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:C||""}),(0,s.jsx)("div",{className:(0,v.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":w,target:t?.target,href:(0,le.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${D}`,`${F}_${M}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:T,alt:$,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c()]})},e?.id||e?.handle)},ve=({data:e,configuration:t})=>{const{itemShape:a,itemLength:f,metafields:u}=t||{},{discounts:k,discountsCopy:_}=u||{},{locale:y="us",copyWriting:b}=(0,Z.useAiuiContext)(),[O,U]=(0,p.useState)([]),B=(0,p.useRef)(null),z=(i,c,l,o)=>t?.event?.primaryButton?.(i,c+1,l,o),A=(i,c,l,o)=>t?.event?.secondaryButton?.(i,c+1,l,o),n=(0,p.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(c=>c?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),C=n?.id?.split?.("/")||[],G=C?.[C?.length-1],J=!n?.availableForSale&&(n?.price?.amount===R||n?.price===R),K=t?.isShowTag,r=t?.isShowOriginalPrice,x=n?.coupons?.[0],D=!!(r&&x),H=e?.price?.currencyCode||"USD",g=(0,p.useMemo)(()=>(0,ee.formatVariantPrice)({locale:y,amount:D?x?.variant_price4wscode:n?.price,baseAmount:D?n?.price:0,currencyCode:H}),[H,y,D,x?.variant_price4wscode,n]),{price:I,basePrice:L,discount:S,discountAmount:P}=g,{imageUrl:Q,altText:N}=ae(e),h=e?.custom_name||e?.title,T=e?.custom_description||e?.description;(0,ie.useExposure)(B,{componentType:F,componentName:M,componentTitle:h,componentDescription:T,position:t?.index+1});const $=()=>f>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},w=()=>f>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",j=()=>{if(x?.value_type==="fixed_amount"){const i=P||"",c=i.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(c){const[,l,o,m]=c;let d=o;return o.endsWith(".00")?d=o.replace(/\.00$/,""):o.endsWith(",00")&&(d=o.replace(/,00$/,"")),`${l}${d}${m}`}return i}return S||""};return(0,p.useEffect)(()=>{let i=[];if(S||P){const l=`${j()}${k?.off||_?.off||""}`;i.push(l)}const c=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,S?1:2);U(i.concat(c))},[e?.tags,S,P,k?.off,_?.off]),(0,s.jsx)("div",{ref:B,className:(0,v.cn)($().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,v.cn)(w(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,v.cn)($().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":h,target:t?.target,href:(0,le.trackUrlRef)(`${y==="us"||!y?"":`/${y}`}/products/${e?.handle}?variant=${G}`,`${F}_${M}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(V.default,{source:Q,alt:N,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,v.cn)("flex flex-col items-start justify-center",$().boxItem),children:[K&&O?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:O?.map?.((i,c)=>(0,s.jsx)(q.default,{className:"shelf-items-tag",children:i},c))}):null,h?(0,s.jsx)(oe.Heading,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:h||""}):null,T?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:J?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&I||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&L||""})]})}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(W.default,{variant:"secondary",onClick:()=>A(e,t?.index,t,x),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(
|
|
7
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(W.default,{variant:"primary",onClick:()=>z(e,t?.index,t,x),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
9
9
|
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
10
10
|
//# sourceMappingURL=shelfDisplayItem.js.map
|