@anker-in/headless-ui 0.0.46 → 0.0.48
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/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var P=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)c(t,a,{get:o[a],enumerable:!0})},f=(t,o,a,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of R(o))!C.call(t,l)&&l!==a&&c(t,l,{get:()=>o[l],enumerable:!(i=j(o,l))||i.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(_(t)):{},f(o||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),L=t=>f(c({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>$});module.exports=L(F);var e=require("react/jsx-runtime"),s=D(require("react")),v=require("react-responsive"),p=require("../../components/index.js"),h=require("../../shared/Styles.js"),d=require("../../helpers/utils.js"),y=require("../../shared/mimeType.js"),N=require("../../hooks/useExposure.js"),B=require("../../shared/trackUrlRef.js");const g="image",k="member_area",S=s.default.forwardRef(({data:t,className:o=""},a)=>{const{title:i,description:l,backgroundImage:r,mobileBackgroundImage:m,primaryButton:u,secondaryButton:n,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,v.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,s.useRef)(null);(0,s.useImperativeHandle)(a,()=>x.current),(0,N.useExposure)(x,{componentType:g,componentName:k,componentTitle:i,componentDescription:l});const z=()=>{w?.()},H=()=>{E?.()},b="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,d.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,y.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,y.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(p.Heading,{as:"h2",size:3,className:"member-equity-title ",html:i}),(0,e.jsx)(p.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:l})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[
|
|
4
|
+
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(p.Heading,{as:"h2",size:3,className:"member-equity-title ",html:i}),(0,e.jsx)(p.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:l})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[n&&n.text&&(0,e.jsx)("a",{href:(0,B.trackUrlRef)(n.link,`${g}_${k}`),children:(0,e.jsx)(p.Button,{variant:"secondary",onClick:H,className:(0,d.cn)("member-equity-button-secondary ",b),children:n.text})}),u&&u.text&&(0,e.jsx)(p.Button,{variant:"primary",onClick:z,className:(0,d.cn)("member-equity-button-primary ",b),children:u.text})]})]})})]})});var $=(0,h.withStyles)(S);
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QACC,KAAM,EACN,UAAW,mFACX,KAAMC,EACR,GACF,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n >\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n // <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n >\n {primaryButton.text}\n </Button>\n // </a>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QACC,KAAM,EACN,UAAW,mFACX,KAAMC,EACR,GACF,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UACC,QAAQ,YACR,QAASmB,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAE9B,OAAC,UACC,QAAQ,UACR,QAASQ,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,GAGJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var J=Object.create;var x=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var i in t)x(e,i,{get:t[i],enumerable:!0})},C=(e,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!Z.call(e,a)&&a!==i&&x(e,a,{get:()=>t[a],enumerable:!(p=K(t,a))||p.enumerable});return e};var l=(e,t,i)=>(i=e!=null?J(Y(e)):{},C(t||!e||!e.__esModule?x(i,"default",{value:e,enumerable:!0}):i,e)),te=e=>C(x({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var r=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),N=l(require("../../components/button.js")),M=l(require("../Title/index.js")),$=l(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),le=require("../../components/container.js"),D=require("react-responsive"),q=require("../../hooks/useExposure.js"),L=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),V=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js"),U=require("../../shared/trackUrlRef.js");const T="image",B="product_shelf",re=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),b=(o,s)=>t?.event?.primaryButton?.(o,s+1),m=(o,s)=>t?.event?.secondaryButton?.(o,s+1),c=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===re,w=t?.isShowTag,{price:k,basePrice:d}=(0,H.formatVariantPrice)({locale:i,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const o=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return(0,r.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="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",{"h-[360px]":a}),children:(0,r.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,r.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,r.jsx)("a",{href:(0,U.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.path}`,`${T}_${B}`),children:(0,r.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),w?(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(o=>o.startsWith("CLtag"))?.map(o=>o.replace("CLtag:",""))?.slice(0,2)?.map?.((o,s)=>(0,r.jsx)(V.default,{children:o},s))}):null,e?.title?(0,r.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?(0,r.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,(0,r.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,r.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,r.jsx)(N.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,r.jsx)(N.default,{variant:"primary",onClick:()=>b(e,t?.index),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},oe=n.default.forwardRef(({data:e,buildData:t,className:i="",key:p,event:a},b)=>{const[m,c]=(0,n.useState)(""),[g,w]=(0,n.useState)([]),k=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>d.current),(0,q.useExposure)(d,{componentType:T,componentName:B,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:o=[],title:s,align:j="left",isShowTab:v=!0,tabShape:z="square",isShowTag:W=!1,...F}=e,S=f=>{const Q=f?.map(y=>{const P=t?.products?.find(G=>G?.handle===y?.handle);if(P)return{sku:y.sku,...P}})?.filter(y=>y);w(Q)};return(0,n.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(o)},[]),(0,r.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,r.jsx)(M.default,{data:{title:s}}),v&&(0,r.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,r.jsx)(_.default,{value:m,tabs:u,tabShape:z,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,L.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:T,component_name:B,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,r.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,r.jsx)($.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:g,configuration:{...F,event:a,isShowTag:W}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var se=(0,E.withStyles)(oe);
|
|
6
6
|
//# 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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\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}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\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}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.path}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import w,{useImperativeHandle as E,useRef as T}from"react";import{useMediaQuery as z}from"react-responsive";import{Button as c,Heading as H,Picture as d,Text as P}from"../../components/index.js";import{withStyles as j}from"../../shared/Styles.js";import{cn as i}from"../../helpers/utils.js";import{isVideo as u}from"../../shared/mimeType.js";import{useExposure as R}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";const x="image",y="member_area",C=w.forwardRef(({data:b,className:f=""},g)=>{const{title:r,description:m,backgroundImage:t,mobileBackgroundImage:o,primaryButton:l,secondaryButton:a,theme:k,shape:v,primaryButtonHandler:h,secondaryButtonHandler:N}=b,B=z({query:"(max-width: 768px)"}),s=T(null);E(g,()=>s.current),R(s,{componentType:x,componentName:y,componentTitle:r,componentDescription:m});const q=()=>{h?.()},M=()=>{N?.()},n="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return p("section",{"data-ui-component-id":"MemberEquity",className:i("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",f,{"aiui-dark":k==="dark","rounded-box":v==="rounded","h-[480px]":B}),ref:s,children:[u(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:t?.url,type:"video/mp4"})}):e(d,{source:t?.url,alt:t?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),u(o?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:o?.url,type:"video/mp4"})}):e(d,{source:o?.url,alt:o?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:p("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[
|
|
4
|
+
`,children:[p("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(H,{as:"h2",size:3,className:"member-equity-title ",html:r}),e(P,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:m})]}),p("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&e("a",{href:_(a.link,`${x}_${y}`),children:e(c,{variant:"secondary",onClick:M,className:i("member-equity-button-secondary ",n),children:a.text})}),l&&l.text&&e(c,{variant:"primary",onClick:q,className:i("member-equity-button-primary ",n),children:l.text})]})]})})]})});var V=j(C);export{V as default};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n
|
|
5
|
-
"mappings": "aA4EY,cAAAA,EA2BA,QAAAC,MA3BA,oBA3EZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,2BACxB,OAAS,eAAAC,MAAmB,6BAC5B,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withStyles", "cn", "isVideo", "useExposure", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text\n size={2}\n className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n html={description}\n />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n >\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n // <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n >\n {primaryButton.text}\n </Button>\n // </a>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "aA4EY,cAAAA,EA2BA,QAAAC,MA3BA,oBA3EZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,2BACxB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4Cf,EAAM,WACtD,CAAC,CAAE,KAAAgB,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,EAAW1B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD2B,EAAW5B,EAAuB,IAAI,EAE5CD,EAAoBiB,EAAK,IAAMY,EAAS,OAAyB,EAEjEnB,EAAYmB,EAAU,CACpB,cAAAjB,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,OACElC,EAAC,WACC,uBAAqB,eACrB,UAAWU,EACT,yGACA,6CACAQ,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,UAAApB,EAAQW,GAAiB,QAAQ,EAChCvB,EAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,SAAAA,EAAC,UAAO,IAAKuB,GAAiB,IAAK,KAAK,YAAY,EACtD,EAEAvB,EAACQ,EAAA,CACC,OAAQe,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,EAEDX,EAAQY,GAAuB,QAAQ,EACtCxB,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKwB,GAAuB,IAAK,KAAK,YAAY,EAC5D,EAEAxB,EAACQ,EAAA,CACC,OAAQgB,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,EAEFxB,EAAC,OAAI,UAAW,uEACd,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,UAAAA,EAAC,OAAI,UAAU,mHACb,UAAAD,EAACO,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMc,EAAO,EAC1ErB,EAACS,EAAA,CACC,KAAM,EACN,UAAW,mFACX,KAAMa,EACR,GACF,EAEArB,EAAC,OAAI,UAAU,2CACZ,UAAAyB,GAAmBA,EAAgB,MAClC1B,EAAC,KAAE,KAAMc,EAAYY,EAAgB,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC5E,SAAAhB,EAACM,EAAA,CACC,QAAQ,YACR,QAAS4B,EACT,UAAWvB,EAAG,kCAAmCwB,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,MAE9BzB,EAACM,EAAA,CACC,QAAQ,UACR,QAAS2B,EACT,UAAWtB,EAAG,gCAAiCwB,CAAY,EAE1D,SAAAV,EAAc,KACjB,GAGJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOW,EAAQ1B,EAAWO,CAAY",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withStyles", "cn", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
2
|
-
${
|
|
3
|
-
`,children:
|
|
4
|
-
${
|
|
5
|
-
`,children:
|
|
1
|
+
"use client";import{Fragment as ee,jsx as t,jsxs as f}from"react/jsx-runtime";import E,{useState as B,useEffect as H,useRef as q,useImperativeHandle as L}from"react";import{cn as u}from"../../helpers/utils.js";import R from"../../components/picture.js";import V from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as U}from"../../shared/Styles.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as D}from"react-responsive";import{useExposure as z}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";import{trackUrlRef as K}from"../../shared/trackUrlRef.js";const k="image",S="product_shelf",X=999999999e-2,Y=({data:e,configuration:r})=>{const{locale:s="us",copyWriting:h}=F(),v=D({query:"(max-width: 768px)"}),y=(i,o)=>r?.event?.primaryButton?.(i,o+1),a=(i,o)=>r?.event?.secondaryButton?.(i,o+1),n=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},x=!n?.availableForSale&&n?.price?.amount===X,b=r?.isShowTag,{price:g,basePrice:l}=j({locale:s,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const i=e?.sku,o=e?.variants;return o?.find(m=>m?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="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",{"h-[360px]":v}),children:f("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:u("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:K(`${s==="us"||!s?"":`/${s}`}/products/${e?.path}`,`${k}_${S}`),children:t(R,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(i=>i.startsWith("CLtag"))?.map(i=>i.replace("CLtag:",""))?.slice(0,2)?.map?.((i,o)=>t(Q,{children:i},o))}):null,e?.title?t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:x?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):f(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),f("div",{className:u("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(N,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
|
|
2
|
+
${r.direction==="vertical"?"w-full":""}
|
|
3
|
+
`,children:r?.secondaryButton||""}):null,r?.primaryButton?t(N,{variant:"primary",onClick:()=>y(e,r?.index),className:`
|
|
4
|
+
${r.direction==="vertical"?"w-full":""}
|
|
5
|
+
`,children:r?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Z=E.forwardRef(({data:e,buildData:r,className:s="",key:h,event:v},y)=>{const[a,n]=B(""),[x,b]=B([]),g=D({query:"(max-width: 768px)"}),l=q(null);L(y,()=>l.current),z(l,{componentType:k,componentName:S,componentTitle:e?.title,navigation:a});const{productsTab:p=[],productsCard:i=[],title:o,align:P="left",isShowTab:m=!0,tabShape:C="square",isShowTag:I=!1,..._}=e,w=c=>{const M=c?.map(d=>{const T=r?.products?.find($=>$?.handle===d?.handle);if(T)return{sku:d.sku,...T}})?.filter(d=>d);b(M)};return H(()=>{if(m){n(p?.[0]?.tab||""),w(p?.[0]?.data||[]);return}w(i)},[]),f("div",{ref:l,className:u("w-full",s,{"aiui-dark":e?.theme==="dark"}),children:[o&&t(A,{data:{title:o}}),m&&t("div",{className:`${g?"w-full overflow-hidden":""}`,children:t(V,{value:a,tabs:p,tabShape:C,onTabClick:c=>{n(c?.tab),w(c?.data||[]),W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:S,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(O,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${h}${a}`,data:{list:x,configuration:{..._,event:v,isShowTag:I}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ge=U(Z);export{ge as default};
|
|
6
6
|
//# 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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\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}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\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}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: 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 /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.path}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "aAyIY,OAiCA,YAAAA,GAjCA,OAAAC,EAiCA,QAAAC,MAjCA,oBAxIZ,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,iBACtB,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,MAA0B,gCAC1B,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,WAAAC,MAAe,wBACxB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAOC,MAAW,4BAClB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BAErB,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aA2DjBC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIZ,EAAe,EAChDa,EAAWhB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExDiB,EAAkB,CAACC,EAA0BC,IACjDN,GAAe,OAAO,gBAAgBK,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDN,GAAe,OAAO,kBAAkBK,EAAQC,EAAQ,CAAC,EAErDE,EAAUT,GAAM,UAAU,KAAMU,GAAcA,GAAM,MAAQV,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGW,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWX,EACrEc,EAAYX,GAAe,UAE3B,CAAE,MAAAY,EAAO,UAAAC,CAAU,EAAI3B,EAAmB,CAC9C,OAAQe,EACR,OAAQO,GAAS,OAAO,QAAU,EAClC,WAAYT,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKe,EAAY,IAAM,CACtB,MAAMC,EAAMhB,GAAM,IACZiB,EAAWjB,GAAM,SAEvB,OADgBiB,GAAU,KAAMP,GAAcA,GAAM,MAAQM,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACE5C,EAAC,OAEC,UAAWO,EACT,oHACAqB,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,CACE,YAAaG,CACf,CACF,EAEA,SAAA9B,EAAC,OAAI,UAAU,gFACb,UAAAD,EAAC,OACC,UAAWO,EACT,yGACF,EAEA,SAAAP,EAAC,KACC,KAAMsB,EACJ,GAAGO,IAAW,MAAQ,CAACA,EAAS,GAAK,IAAIA,CAAM,EAAE,aAAaF,GAAM,IAAI,GACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EAEA,SAAAxB,EAACQ,EAAA,CAAQ,OAAQkC,EAAU,EAAG,IAAI,GAAG,UAAU,yDAAyD,EAC1G,EACF,EACCH,EACCvC,EAAC,OAAI,UAAU,2DACZ,SAAA2B,GAAM,MACH,OAAQU,GAAcA,EAAK,WAAW,OAAO,CAAC,GAC9C,IAAKA,GAAcA,EAAK,QAAQ,SAAU,EAAE,CAAC,GAC7C,MAAM,EAAG,CAAC,GACV,MAAM,CAACA,EAAWH,IAAkBlC,EAACmB,EAAA,CAAmB,SAAAkB,GAARH,CAAa,CAAQ,EAC3E,EACE,KACHP,GAAM,MACL3B,EAACoB,EAAA,CACC,MAAOO,GAAM,OAAS,GACtB,KAAM,EACN,UAAU,6EAET,SAAAA,GAAM,OAAS,GAClB,EACE,KACHA,GAAM,YACL3B,EAACqB,EAAA,CACC,KAAM,EACN,UAAU,sJAET,SAAAM,GAAM,aAAe,GACxB,EACE,KACJ3B,EAAC,OAAI,UAAU,mCACZ,SAAAsC,EACCtC,EAAC,OAAI,UAAU,sDAAuD,SAAA8B,GAAa,YAAY,EAE/F7B,EAAAF,GAAA,CACE,UAAAC,EAAC,OAAI,UAAU,sDAAuD,SAAAwC,GAAS,GAAG,EAClFxC,EAAC,OAAI,UAAU,6DAA8D,SAAAyC,GAAa,GAAG,GAC/F,EAEJ,EAEAxC,EAAC,OACC,UAAWM,EACT,2CACAqB,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,gBACd5B,EAACU,EAAA,CACC,QAAQ,YACR,QAAS,IAAMyB,EAAkBR,EAAMC,GAAe,KAAK,EAC3D,UAAW;AAAA,kBACPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,gBAGzD,SAAAA,GAAe,iBAAmB,GACrC,EACE,KACHA,GAAe,cACd5B,EAACU,EAAA,CACC,QAAQ,UACR,QAAS,IAAMsB,EAAgBL,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA,gBACTA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,cAGvD,SAAAA,GAAe,eAAiB,GACnC,EACE,MACN,GACF,GA5FKD,GAAM,IAAMA,GAAM,MA6FzB,CAEJ,EAEMkB,EAAe3C,EAAM,WACzB,CAAC,CAAE,KAAAyB,EAAM,UAAAmB,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,KAAM,CAACC,EAAOC,CAAQ,EAAIjD,EAAiB,EAAE,EACvC,CAACkD,EAAcC,CAAe,EAAInD,EAA6B,CAAC,CAAC,EAEjE4B,EAAWhB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExDwC,EAAWlD,EAAuB,IAAI,EAC5CC,EAAoB4C,EAAK,IAAMK,EAAS,OAAyB,EAEjEvC,EAAYuC,EAAU,CACpB,cAAehC,EACf,cAAeC,EACf,eAAgBG,GAAM,MACtB,WAAYwB,CACd,CAAC,EAED,KAAM,CACJ,YAAAK,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,UAAAtB,EAAY,GACZ,GAAGuB,CACL,EAAInC,EAEEoC,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAI3B,GAAQ,CACZ,MAAM6B,EAAWpB,GAAW,UAAU,KAAKb,GAAUA,GAAQ,SAAWI,GAAM,MAAM,EACpF,GAAI6B,EACF,MAAO,CACL,IAAK7B,EAAK,IACV,GAAG6B,CACL,CAEJ,CAAC,GACC,OAAO7B,GAAQA,CAAI,EACvBiB,EAAgBW,CAAc,CAChC,EAEA,OAAA7D,EAAU,IAAM,CACd,GAAIwD,EAAW,CACbR,EAASI,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,EAGHxD,EAAC,OAAI,IAAKsD,EAAU,UAAWhD,EAAG,SAAUwC,EAAW,CAAE,YAAapB,GAAM,QAAU,MAAO,CAAC,EAC3F,UAAA+B,GAAS1D,EAACW,EAAA,CAAM,KAAM,CAAE,MAAO+C,CAAM,EAAG,EACxCE,GACC5D,EAAC,OAAI,UAAW,GAAG+B,EAAW,yBAA2B,EAAE,GACzD,SAAA/B,EAACS,EAAA,CACC,MAAO0C,EACP,KAAMK,EACN,SAAUK,EACV,WAAYM,GAAK,CACff,EAASe,GAAG,GAAG,EACfJ,EAAiBI,GAAG,MAAQ,CAAC,CAAC,EAC9BlD,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBM,EAChB,eAAgBC,EAChB,gBAAiBG,GAAM,MACvB,mBAAoB,EACpB,WAAYwC,GAAG,GACjB,CACF,CAAC,CACH,EACF,EACF,EAEFnE,EAAC,OAAI,UAAU,2FACb,SAAAA,EAACY,EAAA,CACC,UAAU,yBACV,GAAI,eAAeoC,CAAG,GAAGG,CAAK,GAC9B,KAAM,CAAE,KAAME,EAAc,cAAe,CAAE,GAAGS,EAAO,MAAOb,EAAO,UAAAV,CAAU,CAAE,EACjF,MAAOb,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,CACF,EAEA,IAAO0C,GAAQvD,EAAWgC,CAAY",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|