@anker-in/headless-ui 1.0.26-alpha.1763020181700 → 1.0.26-alpha.1763024077250
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/DownLoad/index.js +1 -1
- package/dist/cjs/biz-components/DownLoad/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.js +1 -1
- package/dist/cjs/biz-components/SelectStore/index.js.map +2 -2
- package/dist/esm/biz-components/DownLoad/index.js +1 -1
- package/dist/esm/biz-components/DownLoad/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- package/dist/esm/biz-components/SelectStore/index.js +1 -1
- package/dist/esm/biz-components/SelectStore/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(l,e)=>{for(var o in e)i(l,o,{get:e[o],enumerable:!0})},m=(l,e,o,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of r(e))!d.call(l,a)&&a!==o&&i(l,a,{get:()=>e[a],enumerable:!(p=x(e,a))||p.enumerable});return l};var f=l=>m(i({},"__esModule",{value:!0}),l);var v={};g(v,{default:()=>c});module.exports=f(v);var t=require("react/jsx-runtime"),h=require("../../helpers/utils.js"),n=require("../../shared/Styles.js"),s=require("../../components/index.js");const w=l=>{const{data:e}=l,{list:o}=e;return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("div",{className:"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]",children:o?.map((p,a)=>(0,t.jsx)("div",{className:"w-full",children:(0,t.jsxs)("
|
|
1
|
+
"use strict";"use client";var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(l,e)=>{for(var o in e)i(l,o,{get:e[o],enumerable:!0})},m=(l,e,o,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of r(e))!d.call(l,a)&&a!==o&&i(l,a,{get:()=>e[a],enumerable:!(p=x(e,a))||p.enumerable});return l};var f=l=>m(i({},"__esModule",{value:!0}),l);var v={};g(v,{default:()=>c});module.exports=f(v);var t=require("react/jsx-runtime"),h=require("../../helpers/utils.js"),n=require("../../shared/Styles.js"),s=require("../../components/index.js");const w=l=>{const{data:e}=l,{list:o}=e;return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("div",{className:"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]",children:o?.map((p,a)=>(0,t.jsx)("div",{className:"w-full",children:(0,t.jsxs)(s.Link,{href:p?.link,target:"_blank",className:"w-full flex items-center justify-between py-[12px] px-[24px]",children:[(0,t.jsxs)("div",{className:"flex items-center flex-row laptop:gap-[24px] gap-[12px]",children:[(0,t.jsx)(s.Text,{html:p?.title,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"}),p?.text&&(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"2",height:"17",viewBox:"0 0 2 17",fill:"none",children:(0,t.jsx)("path",{d:"M1 0.5V16.5",stroke:"#3D3D3F"})}),(0,t.jsx)(s.Text,{html:p?.text,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"})]}),(0,t.jsxs)("div",{className:"flex items-center justify-center flex-row laptop:gap-[24px] gap-[4px]",children:[(0,t.jsx)(s.Text,{html:p?.time,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"}),(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("path",{d:"M21 11.5C21.5523 11.5 22 11.9477 22 12.5V18.5C22 20.1569 20.6569 21.5 19 21.5H5C3.34315 21.5 2 20.1569 2 18.5V12.5C2 11.9477 2.44772 11.5 3 11.5C3.55228 11.5 4 11.9477 4 12.5V18.5C4 19.0523 4.44772 19.5 5 19.5H19C19.5523 19.5 20 19.0523 20 18.5V12.5C20 11.9477 20.4477 11.5 21 11.5ZM12.0039 2.25391C12.5562 2.25391 13.0039 2.70162 13.0039 3.25391V13.4736L16.4893 9.98828C16.8798 9.59777 17.5128 9.59779 17.9033 9.98828C18.2938 10.3788 18.2938 11.0118 17.9033 11.4023L13.4541 15.8516C12.6471 16.6583 11.3392 16.6582 10.5322 15.8516L6.08984 11.4092C5.69932 11.0187 5.69932 10.3856 6.08984 9.99512C6.48037 9.60466 7.11341 9.60462 7.50391 9.99512L11.0039 13.4951V3.25391C11.0039 2.70162 11.4516 2.25391 12.0039 2.25391Z",fill:"#1D1D1F"})})]})]})},a))})})};var c=(0,n.withLayout)(w);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/DownLoad/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text ,Link} from '../../components/index.js'\n\nexport type DownLoadDataType = {\n title: string\n text: string\n time: string\n link: string\n line: Img\n icon: Img\n}\n\ntype DownLoadType = {\n data: {\n list:DownLoadDataType[]\n }\n className?: string\n}\n\nconst DownLoad = (props: DownLoadType) => {\n const { data } = props\n const { list } = data\n\n return (\n <>\n <div className=\"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]\">\n {list?.map((item, index) => (\n <div key={index} className=\"w-full\">\n <
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BI,IAAAI,EAAA,6BA1BJC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAAmC,qCAkBnC,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,KAAAE,CAAK,EAAID,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,oEACd,SAAAC,GAAM,IAAI,CAACC,EAAMC,OAChB,OAAC,OAAgB,UAAU,SACzB,oBAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text ,Link} from '../../components/index.js'\n\nexport type DownLoadDataType = {\n title: string\n text: string\n time: string\n link: string\n line: Img\n icon: Img\n}\n\ntype DownLoadType = {\n data: {\n list:DownLoadDataType[]\n }\n className?: string\n}\n\nconst DownLoad = (props: DownLoadType) => {\n const { data } = props\n const { list } = data\n\n return (\n <>\n <div className=\"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]\">\n {list?.map((item, index) => (\n <div key={index} className=\"w-full\">\n <Link \n href={item?.link}\n target=\"_blank\" \n className=\"w-full flex items-center justify-between py-[12px] px-[24px]\">\n <div className=\"flex items-center flex-row laptop:gap-[24px] gap-[12px]\">\n <Text\n html={item?.title}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n {/* <Picture\n className=\"h-[16px]\"\n source={item.line?.url}\n alt={item.line?.alt || ''}\n /> */}\n {\n item?.text && (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"2\" height=\"17\" viewBox=\"0 0 2 17\" fill=\"none\">\n <path d=\"M1 0.5V16.5\" stroke=\"#3D3D3F\"/>\n </svg>\n )\n }\n <Text\n html={item?.text}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n </div>\n\n {/* <Link\n href={item?.link}\n target=\"_blank\"\n > */}\n <div className=\"flex items-center justify-center flex-row laptop:gap-[24px] gap-[4px]\">\n <Text\n html={item?.time}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n {/* <Picture\n className=\"w-[24px]\"\n imgClassName=\"w-full h-auto\"\n source={item.icon?.url}\n alt={item.icon?.alt || ''}\n /> */}\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <path d=\"M21 11.5C21.5523 11.5 22 11.9477 22 12.5V18.5C22 20.1569 20.6569 21.5 19 21.5H5C3.34315 21.5 2 20.1569 2 18.5V12.5C2 11.9477 2.44772 11.5 3 11.5C3.55228 11.5 4 11.9477 4 12.5V18.5C4 19.0523 4.44772 19.5 5 19.5H19C19.5523 19.5 20 19.0523 20 18.5V12.5C20 11.9477 20.4477 11.5 21 11.5ZM12.0039 2.25391C12.5562 2.25391 13.0039 2.70162 13.0039 3.25391V13.4736L16.4893 9.98828C16.8798 9.59777 17.5128 9.59779 17.9033 9.98828C18.2938 10.3788 18.2938 11.0118 17.9033 11.4023L13.4541 15.8516C12.6471 16.6583 11.3392 16.6582 10.5322 15.8516L6.08984 11.4092C5.69932 11.0187 5.69932 10.3856 6.08984 9.99512C6.48037 9.60466 7.11341 9.60462 7.50391 9.99512L11.0039 13.4951V3.25391C11.0039 2.70162 11.4516 2.25391 12.0039 2.25391Z\" fill=\"#1D1D1F\"/>\n </svg>\n </div>\n \n {/* </Link> */}\n </Link>\n </div>\n ))}\n</div>\n\n </>\n )\n}\n\nexport default withLayout(DownLoad)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BI,IAAAI,EAAA,6BA1BJC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAAmC,qCAkBnC,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,KAAAE,CAAK,EAAID,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,oEACd,SAAAC,GAAM,IAAI,CAACC,EAAMC,OAChB,OAAC,OAAgB,UAAU,SACzB,oBAAC,QACC,KAAMD,GAAM,KACZ,OAAO,SACP,UAAU,+DACV,qBAAC,OAAI,UAAU,0DACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,yDACZ,EAOEA,GAAM,SACJ,OAAC,OAAI,MAAM,6BAA6B,MAAM,IAAI,OAAO,KAAK,QAAQ,WAAW,KAAK,OACpF,mBAAC,QAAK,EAAE,cAAc,OAAO,UAAS,EACxC,KAGJ,OAAC,QACC,KAAMA,GAAM,KACZ,UAAU,yDACZ,GACF,KAME,QAAC,OAAI,UAAU,wEACb,oBAAC,QACC,KAAMA,GAAM,KACZ,UAAU,yDACZ,KAOA,OAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QAAK,EAAE,8sBAA8sB,KAAK,UAAS,EACtuB,GACF,GAGJ,GAjDQC,CAkDV,CACL,EACH,EAEI,CAEJ,EAEA,IAAOX,KAAQ,cAAWM,CAAQ",
|
|
6
6
|
"names": ["DownLoad_exports", "__export", "DownLoad_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_components", "DownLoad", "props", "data", "list", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var se=Object.create;var
|
|
1
|
+
"use strict";var se=Object.create;var M=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var de=(t,s)=>{for(var n in s)M(t,n,{get:s[n],enumerable:!0})},$=(t,s,n,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of re(s))!pe.call(t,p)&&p!==n&&M(t,p,{get:()=>s[p],enumerable:!(l=le(s,p))||l.enumerable});return t};var L=(t,s,n)=>(n=t!=null?se(ce(t)):{},$(s||!t||!t.__esModule?M(n,"default",{value:t,enumerable:!0}):n,t)),ue=t=>$(M({},"__esModule",{value:!0}),t);var Ce={};de(Ce,{default:()=>xe});module.exports=ue(Ce);var e=require("react/jsx-runtime"),i=require("../../../../../components/index.js"),b=L(require("./ProductBenefitsTabs/index.js")),E=require("../../../BizProductProvider.js"),W=require("../../../hooks/useBenefits"),g=require("../../../utils/index.js"),P=require("../../../utils/textFormat"),c=require("react"),G=require("../../../../AiuiProvider/index.js"),q=L(require("../../../../../hooks/useCountDown.js")),Y=L(require("../../../hooks/useCopy")),I=require("../../../../../helpers/index.js"),K=L(require("./ProductBenefitsTabs/ModalContainer.js"));const fe={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},be=({item:t,textConfig:s,benefitPayloadData:n})=>{const{trackingData:l}=(0,G.useAiuiContext)(),{copied:p,copy:h}=(0,Y.default)(),[y,F]=(0,c.useState)(!1),u=l?.common?.coupon,{days:B,hours:N,minutes:A,seconds:H}=(0,q.default)({endTime:t?.ends_at||""}),{openModal:k}=(0,E.useBizProductContext)();return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{jsx:!0,children:`
|
|
2
2
|
.coupon-card {
|
|
3
3
|
/* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */
|
|
4
4
|
mask:
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
bottom left;
|
|
15
15
|
mask-repeat: no-repeat;
|
|
16
16
|
}
|
|
17
|
-
`}),(0,e.jsxs)("div",{style:{background:t.couponBgColor||"white"},className:(0,
|
|
17
|
+
`}),(0,e.jsxs)("div",{style:{background:t.couponBgColor||"white"},className:(0,I.cn)("relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]",t.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...t.useAble&&{role:"button",tabIndex:0,onClick:()=>{t?.onUseChange?.(y)!==!1&&F(!y)}},children:[t?.bgImage?.url&&(0,e.jsx)(i.Picture,{source:t.bgImage.url,alt:t.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),(0,e.jsxs)("div",{className:"relative z-1 ",children:[(0,e.jsxs)("div",{className:"flex items-center justify-start",children:[t.useAble&&(0,e.jsx)(i.Checkbox,{size:"lg",className:"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary",checked:t?.isAutoUse}),(0,e.jsx)(i.Text,{html:t.title,className:"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]"})]}),t.description&&(0,e.jsx)(i.Text,{...typeof t.description=="string"?{html:t.description}:{},as:"p",className:"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]",children:t.description}),t.code&&(0,e.jsxs)("div",{className:"desktop:mt-2 flex items-center gap-2",children:[(0,e.jsx)(i.Text,{html:`${n?.couponBenefitData?.commonCoupon?.couponCode}: ${t.code}`,className:"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]"}),(0,e.jsx)("button",{className:"text-[14px] lg-desktop:text-[16px] font-bold underline",role:"button",tabIndex:0,onClick:d=>{d.preventDefault(),d.stopPropagation(),h(t.code||"")},children:p?u?.copied||n?.couponBenefitData?.commonCoupon?.copied:u?.copy||n?.couponBenefitData?.commonCoupon?.copyCode})]}),t.ends_at&&(0,e.jsx)("button",{onClick:()=>{u?.modal&&k(u?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden",children:Number(B)<Number(u?.hurry?.daysLeft)?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{children:u?.ends}),(0,e.jsx)("span",{className:"font-bold",children:` ${B} ${N.toString().padStart(2,"0")}:${A.toString().padStart(2,"0")}:${H.toString().padStart(2,"0")}`})]}):u?.hurry?.label||n?.couponBenefitData?.commonCoupon?.expired})]})]})]})},me=({coupons:t,className:s,textConfig:n,benefitPayloadData:l})=>(0,e.jsx)("div",{className:(0,I.cn)("flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1",s),children:t?.map((p,h)=>(0,e.jsx)(be,{item:p,textConfig:n,benefitPayloadData:l},h))}),ge=({textConfig:t})=>{const{isLogin:s,profile:n,variant:l,renderInstallments:p,onUseCouponChange:h,onUseMemberDiscountChange:y,discount:F,savingDetail:u,openModal:B,openSignInPopup:N,openAuthCodePopup:A,openSignUpPopup:H,product:k}=(0,E.useBizProductContext)(),d=(0,c.useMemo)(()=>k?.payload?.components?.find(o=>o.componentKey==="ProductBenefits")?.data||{},[k?.payload]),[J,j]=(0,c.useState)(!1),Q=(0,W.useBenefits)({variant:l}),{locale:x="us",copyWriting:X}=(0,G.useAiuiContext)(),V=(0,c.useRef)(null),ee={...fe,...t},{activated:te=!1}=n||{},{memberDiscount:C,commonCoupon:m,creditsRedemption:w,freeGift:z,bundle:_,paidShipping:oe,fullGift:R,levelDiscount:U}=Q,a=(0,c.useMemo)(()=>{const o=d?.benefitTabs?.find(f=>f?.value==="coupon")??{},r=d?.benefitTabs?.find(f=>f?.value==="membership")??{},D=d?.benefitTabs?.find(f=>f?.value==="installment")??{},T=d?.benefitTabs?.find(f=>f?.value==="pay")??{};return{couponBenefitData:o,membershipBenefitData:r,installmentBenefitData:D,payBenefitData:T}},[d]),v=[m?.enable?{...m.config,isAutoUse:u?.coupon>0,useAble:!0,borderStyle:"rounded",code:m?.config?.title??"",description:m?.config?.desc??"",onUseChange:o=>{const r=o?F?.codeSavings??0:0;h?.(r)},title:(0,P.replaceTemplate)(a?.couponBenefitData?.commonCoupon?.offCoupon,{discount:m?.config?.value_type=="percentage"?Math.abs(Number(m?.config?.value||0))+"%":(0,g.formatPrice)({amount:Math.abs(Number(m?.config?.fixed_value||0)),currencyCode:l.price.currencyCode,locale:x})})}:null,C.enable?{useAble:!0,isAutoUse:!!n?.email&&!!u?.member,title:(0,P.replaceTemplate)(a?.couponBenefitData?.member?.offMemberOnly,{amount:(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:l.price.currencyCode,locale:x})}),description:(0,e.jsxs)(e.Fragment,{children:[n?.email?a?.couponBenefitData?.member?.memberDiscounts:a?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:l.price.currencyCode,locale:x}))??""," ",n?.email?"":(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>N?.(),className:"underline",children:a?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:o=>{if(n?.email){const r=o?C?.config?.amount??0:0;return y?.(r),!0}else return N?.(),!1}}:null,U.enable?{title:U?.config?.title??"",description:U?.config?.tag??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.levelDiscount?.bgImage}}:null,z.enable?{title:z?.config?.title??"",description:a?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,_.enable?{title:`${a?.couponBenefitData?.bundle?.bundleSaveUpTo} ${(0,g.formatPrice)({amount:Math.max(..._?.config?.bundleList?.map(o=>o.savings??0)??[]),currencyCode:l.price.currencyCode,locale:x})}`,borderStyle:"inset",description:a?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",_?.config?.bundleList?.length?.toString()??""),bgImage:{url:a?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,R.enable?{title:R?.config?.title??"",description:R?.config?.desc??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,w.enable?{title:a?.couponBenefitData?.creditsRedemption?.creditsTitle,description:a?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);(0,c.useEffect)(()=>{Z(v?.length?"coupon":"membership")},[l?.id]);const[O,Z]=(0,c.useState)("coupon"),ne=()=>{A?.()};if(!b.default)return null;const ae=(o,r)=>{if(Z(r),V.current){const D=V.current,T=o.currentTarget,f=T.offsetLeft-D.offsetWidth/2+T.offsetWidth/2;D.scrollTo({left:f,behavior:"smooth"})}},ie=(0,c.useMemo)(()=>d?.benefitTabs?.map(o=>o?.value==="coupon"&&!v?.length?null:o).filter(Boolean),[d,v]);return(0,e.jsxs)(b.default,{className:"relative",onValueChange:o=>Z(o),value:O,children:[(0,e.jsx)("div",{className:"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),(0,e.jsx)(b.default.List,{ref:V,children:ie?.map(o=>(0,e.jsx)(b.default.Trigger,{className:(0,I.cn)(O===o.value&&"text-[#1D1D1F]"),value:o.value,onClick:r=>ae(r,o?.value),children:o.label},o?.value))}),(0,e.jsx)("style",{global:!0,jsx:!0,children:`
|
|
18
18
|
.benefits-tabs-content::-webkit-scrollbar {
|
|
19
19
|
width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */
|
|
20
20
|
height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
.benefits-tabs-content::-webkit-scrollbar-thumb:hover {
|
|
33
33
|
background-color: rgba(100, 100, 100, 0.6);
|
|
34
34
|
}
|
|
35
|
-
`}),v?.length?(0,e.jsx)(
|
|
35
|
+
`}),v?.length?(0,e.jsx)(b.default.Content,{value:"coupon",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]",children:(0,e.jsx)("div",{className:"p-3 lg-desktop:p-4",children:(0,e.jsx)(me,{coupons:v,textConfig:ee,benefitPayloadData:a})})}):null,(0,e.jsx)(b.default.Content,{value:"membership",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]",children:(0,e.jsxs)("div",{className:"p-3 lg-desktop:p-4",children:[!n?.email&&(0,e.jsx)("h3",{className:"mb-2 text-left text-lg font-bold",children:a?.membershipBenefitData?.memberBenefitsNotLoginText}),(0,e.jsx)("div",{className:"rounded-[16px]",children:(0,e.jsxs)("ul",{className:`list-none [&_li:first-child]:rounded-t-[16px]
|
|
36
36
|
[&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2
|
|
37
37
|
[&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4
|
|
38
38
|
[&_li]:py-4
|
|
39
|
-
[&_li]:text-left`,children:[C.enable&&(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,e.jsx)("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:(0,
|
|
39
|
+
[&_li]:text-left`,children:[C.enable&&(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,e.jsx)("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:(0,P.replaceTemplate)(a?.membershipBenefitData?.forNewMember,{amount:(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:l.price.currencyCode,locale:x})})})]}),!!n?.email&&(0,e.jsx)(S,{})]}),a?.membershipBenefitData?.equities?.map((o,r)=>o.modalText?(0,e.jsxs)("li",{className:"justify-between gap-2",children:[(0,e.jsxs)("button",{onClick:()=>B?.({title:o.label,content:o.modalText}),className:"flex justify-between",children:[(0,e.jsx)(i.Picture,{source:o.icon,alt:o.text,className:"size-6 shrink-0"}),(0,e.jsx)(i.Text,{className:"text-left text-[16px] font-bold x:text-[14px]",children:o.text})]},r),!!n?.email&&(0,e.jsx)(S,{})]},r):(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)(i.Picture,{source:o.icon,alt:o.text,className:" size-6 shrink-0"}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:o.label})]}),!!n?.email&&(0,e.jsx)(S,{})]},r)),oe.enable?(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:a?.membershipBenefitData?.expressShipping})]}),!!n?.email&&(0,e.jsx)(S,{})]}):null,w.enable?(0,e.jsxs)("li",{children:[(0,e.jsx)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:!te&&n?.email?(0,e.jsxs)(e.Fragment,{children:[a?.membershipBenefitData?.creditsAfterActivation,(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>ne(),className:"underline",children:a?.membershipBenefitData?.active})]}):w?.config?.label?.replace("{{amount}}",(0,g.formatPrice)({amount:w?.config?.amount??0,currencyCode:l.price.currencyCode,locale:x}))})]}):null]})}),!n?.email&&(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(i.Button,{variant:"primary",className:"w-full",onClick:()=>H?.(),children:X?.signUp})})]})}),(0,e.jsxs)(b.default.Content,{value:"pay",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] ",children:[(0,e.jsxs)("div",{className:"p-3 lg-desktop:p-4",children:[(0,e.jsx)(i.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.payBenefitData?.payMethod}),(0,e.jsxs)("div",{className:"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(i.Picture,{source:a?.payBenefitData?.icon,className:"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0"}),(0,e.jsx)(i.Text,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",html:a?.payBenefitData?.withCheckout})]}),(0,e.jsx)("button",{className:"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]",onClick:()=>j(!0),children:a?.payBenefitData?.learnMore})]})]}),(0,e.jsx)(K.default,{showModal:J,closeModal:()=>j(!1),children:(0,e.jsx)(i.Picture,{source:a?.payBenefitData?.payImage})})]}),(0,e.jsx)(b.default.Content,{value:"installment",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] ",children:(0,e.jsxs)("div",{className:"p-3 lg-desktop:p-4",children:[(0,e.jsx)(i.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.installmentBenefitData?.flexibleInstallment}),(0,e.jsx)("div",{className:"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white",children:p})]})})]})},S=t=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...t,children:(0,e.jsx)("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var xe=ge;
|
|
40
40
|
//# sourceMappingURL=BenefitsTab.js.map
|
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { Button, Checkbox, Text, Picture, Heading } from '../../../../../components/index.js'\nimport ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useBenefits } from '../../../hooks/useBenefits'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../hooks/useCountDown.js'\nimport useCopy from '../../../hooks/useCopy'\nimport { cn } from '../../../../../helpers/index.js'\nimport ModalContainer from './ProductBenefitsTabs/ModalContainer.js'\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\ninterface BenefitsTabTextConfig {\n // Coupon \u76F8\u5173\n couponCode?: string // \"Code\"\n copyCode?: string // \"Copy Code\"\n copied?: string // \"Copied\"\n expired?: string // \"Expired\"\n offCoupon?: string // \"off coupon\"\n offMemberOnly?: string // \"{amount} off Member Only\"\n loginNow?: string // \"login now\"\n selectFreeGift?: string // \"You can select the free gift below.\"\n bundleSaveUpTo?: string // \"Bundle purchases save extra up to\"\n bundleOffer?: string // \"We offer {count} bundle for you\"\n creditsTitle?: string // \"Soundcore credits for cash\"\n creditsDesc?: string // \"100 Soundcore credits=$1\"\n\n // Tab \u6807\u7B7E\n off?: string // \"off\"\n memberBenefitsNotLogin?: string // \"Member Benefits\"\n memberBenefitsNotLoginText?: string //\n\n // Member Benefits \u90E8\u5206\n forNewMember?: string // \"for New Member\"\n expressShipping?: string // \"Express Shipping Method\"\n creditsAfterActivation?: string // \"You will get soundcoreCredits after activation.\"\n active?: string // \"Active\"\n\n // Installment \u90E8\u5206\n flexibleInstallment?: string // \"Flexible installment payment\"\n}\n\nexport type ProductBenefitsTabsValueType = 'coupon' | 'membership' | 'pay' | 'installment'\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\ninterface BenefitsTabProps {\n textConfig?: BenefitsTabTextConfig\n}\n\n// \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\nconst defaultTextConfig: Required<BenefitsTabTextConfig> = {\n couponCode: 'Code',\n copyCode: 'Copy Code',\n copied: 'Copied',\n expired: 'Expired',\n offCoupon: '{discount} off coupon',\n offMemberOnly: '{amount} off Member Only',\n loginNow: 'Login now',\n selectFreeGift: 'You can select the free gift below.',\n bundleSaveUpTo: 'Bundle purchases save extra up to',\n bundleOffer: 'We offer {count} bundle for you',\n creditsTitle: 'Soundcore credits for cash',\n creditsDesc: '100 Soundcore credits=$1',\n off: ' off',\n memberBenefitsNotLogin: 'You will enjoy a {amount} member discount after logging in.',\n memberBenefitsNotLoginText: 'Sign Up to Get Benefits Below',\n forNewMember: '{amount} off for New Member',\n expressShipping: 'Express Shipping Method',\n creditsAfterActivation: 'You will get soundcoreCredits after activation. ',\n active: 'Active',\n flexibleInstallment: 'Flexible installment payment ',\n}\n\n// Coupon content component (commonly used)\ninterface CouponContentProps {\n coupons?: Array<{\n borderStyle: 'inset' | 'rounded' // \u8FD9\u4E24\u79CD\u6837\u5F0F\u4E0D\u4E00\u6837\uFF0C inset \u56DB\u89D2\u662F\u5185\u5207\u5706\u89D2\uFF0C rounded \u56DB\u89D2\u662F\u666E\u901A\u5706\u89D2\n useAble?: boolean\n isAutoUse?: boolean\n onUseChange?: (useAble: boolean) => void\n code?: string\n title: string\n description: string | React.ReactNode\n discount?: number\n couponBgColor?: string\n bgImage?: { url: string; alt?: string }\n ends_at?: string\n }>\n className?: string\n}\n\nconst CouponItem = ({\n item,\n textConfig,\n benefitPayloadData,\n}: {\n item: NonNullable<CouponContentProps['coupons']>[number]\n textConfig: Required<BenefitsTabTextConfig>\n benefitPayloadData: any\n}) => {\n const { trackingData } = useAiuiContext()\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n const couponCopy = trackingData?.common?.coupon\n const { days, hours, minutes, seconds } = useCountDown({ endTime: item?.ends_at || '' })\n const { openModal } = useBizProductContext()\n return (\n <>\n <style jsx>{`\n .coupon-card {\n /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */\n mask:\n radial-gradient(circle at 0 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 100%, transparent 12px, white 12px),\n radial-gradient(circle at 0 100%, transparent 12px, white 12px);\n mask-size: 50% 50%;\n mask-position:\n top left,\n top right,\n bottom right,\n bottom left;\n mask-repeat: no-repeat;\n }\n `}</style>\n <div\n style={{\n background: item.couponBgColor || 'white',\n }}\n className={cn(\n 'relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]',\n item.borderStyle === 'inset' ? 'coupon-card ' : 'rounded-[8px]'\n )}\n >\n {item?.bgImage?.url && (\n <Picture\n source={item.bgImage.url}\n alt={item.bgImage.alt}\n className=\"absolute bottom-0 right-0 w-auto\"\n imgClassName=\"object-contain\"\n />\n )}\n <div className=\"relative z-1 \">\n <div className=\"flex items-center justify-start\">\n {item.useAble && (\n <Checkbox\n size=\"lg\"\n className=\"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary\"\n checked={item?.isAutoUse}\n onCheckedChange={(e: boolean) => {\n item?.onUseChange?.(e)\n }}\n />\n )}\n <Text\n html={item.title}\n className=\"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]\"\n />\n </div>\n {item.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]\"\n >\n {item.description}\n </Text>\n )}\n {item.code && (\n <div className=\"desktop:mt-2 flex items-center gap-2\">\n <Text\n html={`${benefitPayloadData?.couponBenefitData?.commonCoupon?.couponCode}: ${item.code}`}\n className=\"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]\"\n />\n <button\n className=\"text-[14px] lg-desktop:text-[16px] font-bold underline\"\n onClick={() => copyToClipboard(item.code ?? '')}\n >\n {isCopied\n ? couponCopy?.copied || benefitPayloadData?.couponBenefitData?.commonCoupon?.copied\n : couponCopy?.copy || benefitPayloadData?.couponBenefitData?.commonCoupon?.copyCode}\n </button>\n </div>\n )}\n {item.ends_at && (\n <button\n onClick={() => {\n if (couponCopy?.modal) {\n openModal(couponCopy?.modal!)\n }\n }}\n className=\"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden\"\n >\n {Number(days) < Number(couponCopy?.hurry?.daysLeft) ? (\n <>\n <span>{couponCopy?.ends}</span>\n <span className=\"font-bold\">\n {` ${days} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`}\n </span>\n </>\n ) : (\n couponCopy?.hurry?.label || benefitPayloadData?.couponBenefitData?.commonCoupon?.expired\n )}\n </button>\n )}\n </div>\n </div>\n </>\n )\n}\n\nconst CouponContent = ({\n coupons,\n className,\n textConfig,\n benefitPayloadData,\n}: CouponContentProps & { textConfig: Required<BenefitsTabTextConfig>; benefitPayloadData: any }) => {\n return (\n <div className={cn('flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1', className)}>\n {coupons?.map((item, index) => (\n <CouponItem key={index} item={item} textConfig={textConfig} benefitPayloadData={benefitPayloadData} />\n ))}\n </div>\n )\n}\n\nconst BenefitsTab = ({ textConfig }: BenefitsTabProps) => {\n const {\n isLogin,\n profile,\n variant,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n savingDetail,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n product,\n } = useBizProductContext()\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n // \u5408\u5E76\u9ED8\u8BA4\u914D\u7F6E\u548C\u4F20\u5165\u7684\u914D\u7F6E\n const mergedTextConfig = { ...defaultTextConfig, ...textConfig }\n\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n const { memberDiscount, commonCoupon, creditsRedemption, freeGift, bundle, paidShipping, fullGift, levelDiscount } =\n benefits\n\n const benefitPayloadData = useMemo(() => {\n const couponBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'coupon') ?? {}\n const membershipBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'membership') ?? {}\n const installmentBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'installment') ?? {}\n const payBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'pay') ?? {}\n return { couponBenefitData, membershipBenefitData, installmentBenefitData, payBenefitData }\n }, [productBenefitsData])\n\n const coupons = [\n commonCoupon?.enable\n ? {\n ...commonCoupon.config,\n isAutoUse: savingDetail?.coupon > 0,\n useAble: true,\n borderStyle: 'rounded',\n code: commonCoupon?.config?.title ?? '',\n description: commonCoupon?.config?.desc ?? '',\n onUseChange: (value: boolean) => {\n const couponSaving = value ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n },\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.commonCoupon?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n }\n : null,\n memberDiscount.enable\n ? {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.member?.offMemberOnly, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: (\n <>\n {Boolean(profile?.email)\n ? benefitPayloadData?.couponBenefitData?.member?.memberDiscounts\n : (benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLogin?.replace(\n '{amount}',\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n ) ?? '')}{' '}\n {Boolean(profile?.email) ? (\n ''\n ) : (\n <span role=\"button\" tabIndex={0} onClick={() => openSignInPopup?.()} className=\"underline\">\n {benefitPayloadData?.couponBenefitData?.member?.loginNow}\n </span>\n )}\n </>\n ),\n borderStyle: 'rounded',\n onUseChange: (value: boolean) => {\n if (Boolean(profile?.email)) {\n const memberSaving = value ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n // setSavingDetail(prev => ({\n // ...prev,\n // member: value ? (memberDiscount?.config?.amount ?? 0) : 0,\n // }))\n } else {\n openSignInPopup?.()\n }\n },\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.levelDiscount?.bgImage,\n },\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n description: benefitPayloadData?.couponBenefitData?.freeGift?.selectFreeGift,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.freeGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n bundle.enable\n ? {\n title: `${benefitPayloadData?.couponBenefitData?.bundle?.bundleSaveUpTo} ${formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n })}`,\n borderStyle: 'inset',\n description: benefitPayloadData?.couponBenefitData?.bundle?.bundleOffer.replace(\n '{count}',\n bundle?.config?.bundleList?.length?.toString() ?? ''\n ),\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.bundle?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.fullGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n creditsRedemption.enable\n ? {\n title: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsTitle,\n description: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsDesc,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.creditsRedemption?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n ].filter(Boolean)\n\n useEffect(() => {\n setProductBenefitsTabsValue(coupons?.length ? 'coupon' : 'membership')\n }, [variant?.id])\n\n const [productBenefitsTabsValue, setProductBenefitsTabsValue] = useState<ProductBenefitsTabsValueType>('coupon')\n\n const handleActivate = () => {\n openAuthCodePopup?.()\n }\n\n if (!ProductBenefitsTabs) return null\n\n const handleProductBenefitsTabListClick = (\n el: React.MouseEvent<HTMLButtonElement>,\n value: ProductBenefitsTabsValueType\n ) => {\n setProductBenefitsTabsValue(value)\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n\n const benefitTabs = useMemo(() => {\n return productBenefitsData?.benefitTabs\n ?.map((item: any) => {\n if (item?.value === 'coupon' && !coupons?.length) {\n return null\n }\n return item\n })\n .filter(Boolean)\n }, [productBenefitsData, coupons])\n\n return (\n <ProductBenefitsTabs\n className=\"relative\"\n onValueChange={value => setProductBenefitsTabsValue(value as 'coupon' | 'membership' | 'installment')}\n value={productBenefitsTabsValue}\n >\n <div className=\"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]\"></div>\n <ProductBenefitsTabs.List ref={scrollContainerRef}>\n {benefitTabs?.map((item: any) => (\n <ProductBenefitsTabs.Trigger\n key={item?.value}\n className={cn(productBenefitsTabsValue === item.value && 'text-[#1D1D1F]')}\n value={item.value}\n onClick={e => handleProductBenefitsTabListClick(e, item?.value)}\n >\n {item.label}\n </ProductBenefitsTabs.Trigger>\n ))}\n </ProductBenefitsTabs.List>\n <style global jsx>\n {`\n .benefits-tabs-content::-webkit-scrollbar {\n width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */\n height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-track {\n background: transparent; /* \u6EDA\u52A8\u6761\u8F68\u9053\u80CC\u666F */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb {\n background-color: #d1d1d1; /* \u6EDA\u52A8\u6761\u989C\u8272 */\n border-radius: 9999px; /* \u5706\u89D2 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(100, 100, 100, 0.6);\n }\n `}\n </style>\n {/* \u4F7F\u7528\u5185\u7F6E\u7684 CouponContent \u5B50\u7EC4\u4EF6 */}\n {coupons?.length ? (\n <ProductBenefitsTabs.Content\n value=\"coupon\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <CouponContent\n coupons={coupons as NonNullable<CouponContentProps['coupons']>}\n textConfig={mergedTextConfig}\n benefitPayloadData={benefitPayloadData}\n />\n </div>\n </ProductBenefitsTabs.Content>\n ) : null}\n <ProductBenefitsTabs.Content\n value=\"membership\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n {!profile?.email && (\n <h3 className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLoginText}\n </h3>\n )}\n <div className={`rounded-[16px]`}>\n <ul\n className={`list-none [&_li:first-child]:rounded-t-[16px] \n [&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2\n [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4\n [&_li]:py-4 \n [&_li]:text-left`}\n >\n {memberDiscount.enable && (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {replaceTemplate(benefitPayloadData?.membershipBenefitData?.forNewMember, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )}\n {benefitPayloadData?.membershipBenefitData?.equities?.map((item: any, index: number) =>\n item.modalText ? (\n <li key={index} className=\"justify-between gap-2\">\n <button\n onClick={() => openModal?.({ title: item.label, content: item.modalText })}\n key={index}\n className=\"flex justify-between\"\n >\n <Picture source={item.icon} alt={item.text} className=\"size-6 shrink-0\" />\n <Text className=\"text-left text-[16px] font-bold x:text-[14px]\">{item.text}</Text>\n </button>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : (\n <li key={index} className=\"justify-between\">\n <div className=\"flex gap-2\">\n <Picture source={item.icon} alt={item.text} className=\" size-6 shrink-0\" />\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {item.label}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )\n )}\n {/* \u9AD8\u6807\u7269\u6D41 */}\n {paidShipping.enable ? (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {benefitPayloadData?.membershipBenefitData?.expressShipping}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : null}\n {/* \u79EF\u5206\u62B5\u73B0 */}\n {creditsRedemption.enable ? (\n <li>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {/* \u7528\u6237\u672A\u6FC0\u6D3B\uFF0C\u4E14\u672A\u767B\u5F55\uFF0C\u5219\u663E\u793A\u6FC0\u6D3B\u94FE\u63A5 */}\n {!activated && Boolean(profile?.email) ? (\n <>\n {benefitPayloadData?.membershipBenefitData?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => handleActivate()} className=\"underline\">\n {benefitPayloadData?.membershipBenefitData?.active}\n </span>\n </>\n ) : (\n creditsRedemption?.config?.label?.replace(\n '{{amount}}',\n formatPrice({\n amount: creditsRedemption?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n )\n )}\n </Text>\n </li>\n ) : null}\n </ul>\n </div>\n {!profile?.email && (\n <div className=\"pt-4\">\n <Button variant=\"primary\" className=\"w-full\" onClick={() => openSignUpPopup?.()}>\n {copyWriting?.signUp}\n </Button>\n </div>\n )}\n </div>\n </ProductBenefitsTabs.Content>\n <ProductBenefitsTabs.Content\n value=\"pay\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.payBenefitData?.payMethod}\n </Heading>\n <div className=\"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white\">\n <div className=\"flex items-center gap-2\">\n <Picture\n source={benefitPayloadData?.payBenefitData?.icon}\n className=\"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0\"\n />\n <Text\n as=\"p\"\n className=\"text-left text-[16px] font-bold x:text-[14px]\"\n html={benefitPayloadData?.payBenefitData?.withCheckout}\n />\n </div>\n <button\n className=\"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]\"\n onClick={() => setIsFlexModalOpen(true)}\n >\n {benefitPayloadData?.payBenefitData?.learnMore}\n </button>\n </div>\n </div>\n\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={benefitPayloadData?.payBenefitData?.payImage}></Picture>\n </ModalContainer>\n </ProductBenefitsTabs.Content>\n {/* \u81EA\u5B9A\u4E49\u5185\u5BB9 */}\n <ProductBenefitsTabs.Content\n value=\"installment\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.installmentBenefitData?.flexibleInstallment}\n </Heading>\n <div className=\"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white\">{renderInstallments}</div>\n </div>\n </ProductBenefitsTabs.Content>\n </ProductBenefitsTabs>\n )\n}\n\nconst CheckedIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n <path\n d=\"M4 9.19472L8.51935 13.667L16.2668 6.00024\"\n stroke=\"#2BBC4F\"\n strokeWidth=\"1.67\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport default BenefitsTab\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["BenefitsTab_exports", "__export", "BenefitsTab_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_ProductBenefitsTabs", "import_BizProductProvider", "import_useBenefits", "import_utils", "import_textFormat", "import_react", "import_AiuiProvider", "import_useCountDown", "import_useCopy", "import_helpers", "import_ModalContainer", "defaultTextConfig", "CouponItem", "item", "textConfig", "benefitPayloadData", "trackingData", "isCopied", "copyToClipboard", "useCopy", "couponCopy", "days", "hours", "minutes", "seconds", "useCountDown", "openModal", "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { Button, Checkbox, Text, Picture, Heading } from '../../../../../components/index.js'\nimport ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useBenefits } from '../../../hooks/useBenefits'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../hooks/useCountDown.js'\nimport useCopy from '../../../hooks/useCopy'\nimport { cn } from '../../../../../helpers/index.js'\nimport ModalContainer from './ProductBenefitsTabs/ModalContainer.js'\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\ninterface BenefitsTabTextConfig {\n // Coupon \u76F8\u5173\n couponCode?: string // \"Code\"\n copyCode?: string // \"Copy Code\"\n copied?: string // \"Copied\"\n expired?: string // \"Expired\"\n offCoupon?: string // \"off coupon\"\n offMemberOnly?: string // \"{amount} off Member Only\"\n loginNow?: string // \"login now\"\n selectFreeGift?: string // \"You can select the free gift below.\"\n bundleSaveUpTo?: string // \"Bundle purchases save extra up to\"\n bundleOffer?: string // \"We offer {count} bundle for you\"\n creditsTitle?: string // \"Soundcore credits for cash\"\n creditsDesc?: string // \"100 Soundcore credits=$1\"\n\n // Tab \u6807\u7B7E\n off?: string // \"off\"\n memberBenefitsNotLogin?: string // \"Member Benefits\"\n memberBenefitsNotLoginText?: string //\n\n // Member Benefits \u90E8\u5206\n forNewMember?: string // \"for New Member\"\n expressShipping?: string // \"Express Shipping Method\"\n creditsAfterActivation?: string // \"You will get soundcoreCredits after activation.\"\n active?: string // \"Active\"\n\n // Installment \u90E8\u5206\n flexibleInstallment?: string // \"Flexible installment payment\"\n}\n\nexport type ProductBenefitsTabsValueType = 'coupon' | 'membership' | 'pay' | 'installment'\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\ninterface BenefitsTabProps {\n textConfig?: BenefitsTabTextConfig\n}\n\n// \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\nconst defaultTextConfig: Required<BenefitsTabTextConfig> = {\n couponCode: 'Code',\n copyCode: 'Copy Code',\n copied: 'Copied',\n expired: 'Expired',\n offCoupon: '{discount} off coupon',\n offMemberOnly: '{amount} off Member Only',\n loginNow: 'Login now',\n selectFreeGift: 'You can select the free gift below.',\n bundleSaveUpTo: 'Bundle purchases save extra up to',\n bundleOffer: 'We offer {count} bundle for you',\n creditsTitle: 'Soundcore credits for cash',\n creditsDesc: '100 Soundcore credits=$1',\n off: ' off',\n memberBenefitsNotLogin: 'You will enjoy a {amount} member discount after logging in.',\n memberBenefitsNotLoginText: 'Sign Up to Get Benefits Below',\n forNewMember: '{amount} off for New Member',\n expressShipping: 'Express Shipping Method',\n creditsAfterActivation: 'You will get soundcoreCredits after activation. ',\n active: 'Active',\n flexibleInstallment: 'Flexible installment payment ',\n}\n\n// Coupon content component (commonly used)\ninterface CouponContentProps {\n coupons?: Array<{\n borderStyle: 'inset' | 'rounded' // \u8FD9\u4E24\u79CD\u6837\u5F0F\u4E0D\u4E00\u6837\uFF0C inset \u56DB\u89D2\u662F\u5185\u5207\u5706\u89D2\uFF0C rounded \u56DB\u89D2\u662F\u666E\u901A\u5706\u89D2\n useAble?: boolean\n isAutoUse?: boolean\n onUseChange?: (useAble: boolean) => boolean | undefined\n code?: string\n title: string\n description: string | React.ReactNode\n discount?: number\n couponBgColor?: string\n bgImage?: { url: string; alt?: string }\n ends_at?: string\n }>\n className?: string\n}\n\nconst CouponItem = ({\n item,\n textConfig,\n benefitPayloadData,\n}: {\n item: NonNullable<CouponContentProps['coupons']>[number]\n textConfig: Required<BenefitsTabTextConfig>\n benefitPayloadData: any\n}) => {\n const { trackingData } = useAiuiContext()\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n const [checked, setChecked] = useState(false)\n const couponCopy = trackingData?.common?.coupon\n const { days, hours, minutes, seconds } = useCountDown({ endTime: item?.ends_at || '' })\n const { openModal } = useBizProductContext()\n return (\n <>\n <style jsx>{`\n .coupon-card {\n /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */\n mask:\n radial-gradient(circle at 0 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 100%, transparent 12px, white 12px),\n radial-gradient(circle at 0 100%, transparent 12px, white 12px);\n mask-size: 50% 50%;\n mask-position:\n top left,\n top right,\n bottom right,\n bottom left;\n mask-repeat: no-repeat;\n }\n `}</style>\n <div\n style={{\n background: item.couponBgColor || 'white',\n }}\n className={cn(\n 'relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]',\n item.borderStyle === 'inset' ? 'coupon-card ' : 'rounded-[8px]'\n )}\n {...(item.useAble && {\n role: 'button',\n tabIndex: 0,\n onClick: () => {\n const shouldChange = item?.onUseChange?.(checked)\n if (shouldChange !== false) {\n setChecked(!checked)\n }\n },\n })}\n >\n {item?.bgImage?.url && (\n <Picture\n source={item.bgImage.url}\n alt={item.bgImage.alt}\n className=\"absolute bottom-0 right-0 w-auto\"\n imgClassName=\"object-contain\"\n />\n )}\n <div className=\"relative z-1 \">\n <div className=\"flex items-center justify-start\">\n {item.useAble && (\n <Checkbox\n size=\"lg\"\n className=\"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary\"\n checked={item?.isAutoUse}\n />\n )}\n <Text\n html={item.title}\n className=\"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]\"\n />\n </div>\n {item.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]\"\n >\n {item.description}\n </Text>\n )}\n {item.code && (\n <div className=\"desktop:mt-2 flex items-center gap-2\">\n <Text\n html={`${benefitPayloadData?.couponBenefitData?.commonCoupon?.couponCode}: ${item.code}`}\n className=\"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]\"\n />\n <button\n className=\"text-[14px] lg-desktop:text-[16px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(item.code || '')\n }}\n >\n {isCopied\n ? couponCopy?.copied || benefitPayloadData?.couponBenefitData?.commonCoupon?.copied\n : couponCopy?.copy || benefitPayloadData?.couponBenefitData?.commonCoupon?.copyCode}\n </button>\n </div>\n )}\n {item.ends_at && (\n <button\n onClick={() => {\n if (couponCopy?.modal) {\n openModal(couponCopy?.modal!)\n }\n }}\n className=\"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden\"\n >\n {Number(days) < Number(couponCopy?.hurry?.daysLeft) ? (\n <>\n <span>{couponCopy?.ends}</span>\n <span className=\"font-bold\">\n {` ${days} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`}\n </span>\n </>\n ) : (\n couponCopy?.hurry?.label || benefitPayloadData?.couponBenefitData?.commonCoupon?.expired\n )}\n </button>\n )}\n </div>\n </div>\n </>\n )\n}\n\nconst CouponContent = ({\n coupons,\n className,\n textConfig,\n benefitPayloadData,\n}: CouponContentProps & { textConfig: Required<BenefitsTabTextConfig>; benefitPayloadData: any }) => {\n return (\n <div className={cn('flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1', className)}>\n {coupons?.map((item, index) => (\n <CouponItem key={index} item={item} textConfig={textConfig} benefitPayloadData={benefitPayloadData} />\n ))}\n </div>\n )\n}\n\nconst BenefitsTab = ({ textConfig }: BenefitsTabProps) => {\n const {\n isLogin,\n profile,\n variant,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n savingDetail,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n product,\n } = useBizProductContext()\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n // \u5408\u5E76\u9ED8\u8BA4\u914D\u7F6E\u548C\u4F20\u5165\u7684\u914D\u7F6E\n const mergedTextConfig = { ...defaultTextConfig, ...textConfig }\n\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n const { memberDiscount, commonCoupon, creditsRedemption, freeGift, bundle, paidShipping, fullGift, levelDiscount } =\n benefits\n\n const benefitPayloadData = useMemo(() => {\n const couponBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'coupon') ?? {}\n const membershipBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'membership') ?? {}\n const installmentBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'installment') ?? {}\n const payBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'pay') ?? {}\n return { couponBenefitData, membershipBenefitData, installmentBenefitData, payBenefitData }\n }, [productBenefitsData])\n\n const coupons = [\n commonCoupon?.enable\n ? {\n ...commonCoupon.config,\n isAutoUse: savingDetail?.coupon > 0,\n useAble: true,\n borderStyle: 'rounded',\n code: commonCoupon?.config?.title ?? '',\n description: commonCoupon?.config?.desc ?? '',\n onUseChange: (value: boolean) => {\n const couponSaving = value ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n },\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.commonCoupon?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n }\n : null,\n memberDiscount.enable\n ? {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.member?.offMemberOnly, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: (\n <>\n {Boolean(profile?.email)\n ? benefitPayloadData?.couponBenefitData?.member?.memberDiscounts\n : (benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLogin?.replace(\n '{amount}',\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n ) ?? '')}{' '}\n {Boolean(profile?.email) ? (\n ''\n ) : (\n <span role=\"button\" tabIndex={0} onClick={() => openSignInPopup?.()} className=\"underline\">\n {benefitPayloadData?.couponBenefitData?.member?.loginNow}\n </span>\n )}\n </>\n ),\n borderStyle: 'rounded',\n onUseChange: (value: boolean) => {\n if (Boolean(profile?.email)) {\n const memberSaving = value ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n // setSavingDetail(prev => ({\n // ...prev,\n // member: value ? (memberDiscount?.config?.amount ?? 0) : 0,\n // }))\n return true\n } else {\n openSignInPopup?.()\n return false\n }\n },\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.levelDiscount?.bgImage,\n },\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n description: benefitPayloadData?.couponBenefitData?.freeGift?.selectFreeGift,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.freeGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n bundle.enable\n ? {\n title: `${benefitPayloadData?.couponBenefitData?.bundle?.bundleSaveUpTo} ${formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n })}`,\n borderStyle: 'inset',\n description: benefitPayloadData?.couponBenefitData?.bundle?.bundleOffer.replace(\n '{count}',\n bundle?.config?.bundleList?.length?.toString() ?? ''\n ),\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.bundle?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.fullGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n creditsRedemption.enable\n ? {\n title: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsTitle,\n description: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsDesc,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.creditsRedemption?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n ].filter(Boolean)\n\n useEffect(() => {\n setProductBenefitsTabsValue(coupons?.length ? 'coupon' : 'membership')\n }, [variant?.id])\n\n const [productBenefitsTabsValue, setProductBenefitsTabsValue] = useState<ProductBenefitsTabsValueType>('coupon')\n\n const handleActivate = () => {\n openAuthCodePopup?.()\n }\n\n if (!ProductBenefitsTabs) return null\n\n const handleProductBenefitsTabListClick = (\n el: React.MouseEvent<HTMLButtonElement>,\n value: ProductBenefitsTabsValueType\n ) => {\n setProductBenefitsTabsValue(value)\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n\n const benefitTabs = useMemo(() => {\n return productBenefitsData?.benefitTabs\n ?.map((item: any) => {\n if (item?.value === 'coupon' && !coupons?.length) {\n return null\n }\n return item\n })\n .filter(Boolean)\n }, [productBenefitsData, coupons])\n\n return (\n <ProductBenefitsTabs\n className=\"relative\"\n onValueChange={value => setProductBenefitsTabsValue(value as 'coupon' | 'membership' | 'installment')}\n value={productBenefitsTabsValue}\n >\n <div className=\"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]\"></div>\n <ProductBenefitsTabs.List ref={scrollContainerRef}>\n {benefitTabs?.map((item: any) => (\n <ProductBenefitsTabs.Trigger\n key={item?.value}\n className={cn(productBenefitsTabsValue === item.value && 'text-[#1D1D1F]')}\n value={item.value}\n onClick={e => handleProductBenefitsTabListClick(e, item?.value)}\n >\n {item.label}\n </ProductBenefitsTabs.Trigger>\n ))}\n </ProductBenefitsTabs.List>\n <style global jsx>\n {`\n .benefits-tabs-content::-webkit-scrollbar {\n width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */\n height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-track {\n background: transparent; /* \u6EDA\u52A8\u6761\u8F68\u9053\u80CC\u666F */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb {\n background-color: #d1d1d1; /* \u6EDA\u52A8\u6761\u989C\u8272 */\n border-radius: 9999px; /* \u5706\u89D2 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(100, 100, 100, 0.6);\n }\n `}\n </style>\n {/* \u4F7F\u7528\u5185\u7F6E\u7684 CouponContent \u5B50\u7EC4\u4EF6 */}\n {coupons?.length ? (\n <ProductBenefitsTabs.Content\n value=\"coupon\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <CouponContent\n coupons={coupons as NonNullable<CouponContentProps['coupons']>}\n textConfig={mergedTextConfig}\n benefitPayloadData={benefitPayloadData}\n />\n </div>\n </ProductBenefitsTabs.Content>\n ) : null}\n <ProductBenefitsTabs.Content\n value=\"membership\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n {!profile?.email && (\n <h3 className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLoginText}\n </h3>\n )}\n <div className={`rounded-[16px]`}>\n <ul\n className={`list-none [&_li:first-child]:rounded-t-[16px] \n [&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2\n [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4\n [&_li]:py-4 \n [&_li]:text-left`}\n >\n {memberDiscount.enable && (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {replaceTemplate(benefitPayloadData?.membershipBenefitData?.forNewMember, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )}\n {benefitPayloadData?.membershipBenefitData?.equities?.map((item: any, index: number) =>\n item.modalText ? (\n <li key={index} className=\"justify-between gap-2\">\n <button\n onClick={() => openModal?.({ title: item.label, content: item.modalText })}\n key={index}\n className=\"flex justify-between\"\n >\n <Picture source={item.icon} alt={item.text} className=\"size-6 shrink-0\" />\n <Text className=\"text-left text-[16px] font-bold x:text-[14px]\">{item.text}</Text>\n </button>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : (\n <li key={index} className=\"justify-between\">\n <div className=\"flex gap-2\">\n <Picture source={item.icon} alt={item.text} className=\" size-6 shrink-0\" />\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {item.label}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )\n )}\n {/* \u9AD8\u6807\u7269\u6D41 */}\n {paidShipping.enable ? (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {benefitPayloadData?.membershipBenefitData?.expressShipping}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : null}\n {/* \u79EF\u5206\u62B5\u73B0 */}\n {creditsRedemption.enable ? (\n <li>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {/* \u7528\u6237\u672A\u6FC0\u6D3B\uFF0C\u4E14\u672A\u767B\u5F55\uFF0C\u5219\u663E\u793A\u6FC0\u6D3B\u94FE\u63A5 */}\n {!activated && Boolean(profile?.email) ? (\n <>\n {benefitPayloadData?.membershipBenefitData?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => handleActivate()} className=\"underline\">\n {benefitPayloadData?.membershipBenefitData?.active}\n </span>\n </>\n ) : (\n creditsRedemption?.config?.label?.replace(\n '{{amount}}',\n formatPrice({\n amount: creditsRedemption?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n )\n )}\n </Text>\n </li>\n ) : null}\n </ul>\n </div>\n {!profile?.email && (\n <div className=\"pt-4\">\n <Button variant=\"primary\" className=\"w-full\" onClick={() => openSignUpPopup?.()}>\n {copyWriting?.signUp}\n </Button>\n </div>\n )}\n </div>\n </ProductBenefitsTabs.Content>\n <ProductBenefitsTabs.Content\n value=\"pay\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.payBenefitData?.payMethod}\n </Heading>\n <div className=\"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white\">\n <div className=\"flex items-center gap-2\">\n <Picture\n source={benefitPayloadData?.payBenefitData?.icon}\n className=\"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0\"\n />\n <Text\n as=\"p\"\n className=\"text-left text-[16px] font-bold x:text-[14px]\"\n html={benefitPayloadData?.payBenefitData?.withCheckout}\n />\n </div>\n <button\n className=\"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]\"\n onClick={() => setIsFlexModalOpen(true)}\n >\n {benefitPayloadData?.payBenefitData?.learnMore}\n </button>\n </div>\n </div>\n\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={benefitPayloadData?.payBenefitData?.payImage}></Picture>\n </ModalContainer>\n </ProductBenefitsTabs.Content>\n {/* \u81EA\u5B9A\u4E49\u5185\u5BB9 */}\n <ProductBenefitsTabs.Content\n value=\"installment\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.installmentBenefitData?.flexibleInstallment}\n </Heading>\n <div className=\"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white\">{renderInstallments}</div>\n </div>\n </ProductBenefitsTabs.Content>\n </ProductBenefitsTabs>\n )\n}\n\nconst CheckedIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n <path\n d=\"M4 9.19472L8.51935 13.667L16.2668 6.00024\"\n stroke=\"#2BBC4F\"\n strokeWidth=\"1.67\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport default BenefitsTab\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["BenefitsTab_exports", "__export", "BenefitsTab_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_ProductBenefitsTabs", "import_BizProductProvider", "import_useBenefits", "import_utils", "import_textFormat", "import_react", "import_AiuiProvider", "import_useCountDown", "import_useCopy", "import_helpers", "import_ModalContainer", "defaultTextConfig", "CouponItem", "item", "textConfig", "benefitPayloadData", "trackingData", "isCopied", "copyToClipboard", "useCopy", "checked", "setChecked", "couponCopy", "days", "hours", "minutes", "seconds", "useCountDown", "openModal", "event", "CouponContent", "coupons", "className", "index", "BenefitsTab", "isLogin", "profile", "variant", "renderInstallments", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "savingDetail", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "product", "productBenefitsData", "isFlexModalOpen", "setIsFlexModalOpen", "benefits", "locale", "copyWriting", "scrollContainerRef", "mergedTextConfig", "activated", "memberDiscount", "commonCoupon", "creditsRedemption", "freeGift", "bundle", "paidShipping", "fullGift", "levelDiscount", "couponBenefitData", "membershipBenefitData", "installmentBenefitData", "payBenefitData", "value", "couponSaving", "memberSaving", "setProductBenefitsTabsValue", "productBenefitsTabsValue", "handleActivate", "ProductBenefitsTabs", "handleProductBenefitsTabListClick", "el", "container", "button", "scrollLeft", "benefitTabs", "e", "CheckedIcon", "ModalContainer", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var m=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var x=(o,l)=>{for(var p in l)m(o,p,{get:l[p],enumerable:!0})},n=(o,l,p,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of c(l))!g.call(o,t)&&t!==p&&m(o,t,{get:()=>l[t],enumerable:!(s=d(l,t))||s.enumerable});return o};var f=o=>n(m({},"__esModule",{value:!0}),o);var b={};x(b,{default:()=>v});module.exports=f(b);var e=require("react/jsx-runtime"),S=require("../../helpers/utils.js"),N=require("../SwiperBox/index.js"),r=require("../../shared/Styles.js"),a=require("../../components/index.js");const u=o=>{const{data:l,className:p}=o,{list:s}=l;return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:"",children:(0,e.jsx)("div",{className:"grid laptop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:s.map((t,i)=>(0,e.jsxs)("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[(0,e.jsx)(a.Picture,{className:"w-full h-full object-cover",imgClassName:"w-full h-full object-cover",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),(0,e.jsxs)("div",{className:"absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]",children:[" ",(0,e.jsx)(a.Text,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),(0,e.jsx)(a.Text,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},i))})})})};var v=(0,r.withLayout)(u);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BArCJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,GACb,mBAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid laptop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full h-full object-cover\"\n imgClassName=\"w-full h-full object-cover\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]'> <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BArCJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,GACb,mBAAC,OAAI,UAAU,+DACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAAgB,UAAU,qIACnB,oBAAC,WACC,UAAU,6BACV,aAAa,6BACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACJ,QAAC,OAAI,UAAU,8HAA8H,kCAAkB,OAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,0FAAyF,KACzR,OAAC,QAAK,KAAMA,GAAM,KAAM,UAAU,+EAA8E,GAClH,IARMC,CASV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWO,CAAW",
|
|
6
6
|
"names": ["SelectStore_exports", "__export", "SelectStore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "SelectStore", "props", "data", "className", "list", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as d,jsx as t,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import{withLayout as n}from"../../shared/Styles.js";import{Text as l,Link as x}from"../../components/index.js";const r=a=>{const{data:o}=a,{list:s}=o;return t(d,{children:t("div",{className:"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]",children:s?.map((e,i)=>t("div",{className:"w-full",children:p("
|
|
1
|
+
"use client";import{Fragment as d,jsx as t,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import{withLayout as n}from"../../shared/Styles.js";import{Text as l,Link as x}from"../../components/index.js";const r=a=>{const{data:o}=a,{list:s}=o;return t(d,{children:t("div",{className:"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]",children:s?.map((e,i)=>t("div",{className:"w-full",children:p(x,{href:e?.link,target:"_blank",className:"w-full flex items-center justify-between py-[12px] px-[24px]",children:[p("div",{className:"flex items-center flex-row laptop:gap-[24px] gap-[12px]",children:[t(l,{html:e?.title,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"}),e?.text&&t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"2",height:"17",viewBox:"0 0 2 17",fill:"none",children:t("path",{d:"M1 0.5V16.5",stroke:"#3D3D3F"})}),t(l,{html:e?.text,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"})]}),p("div",{className:"flex items-center justify-center flex-row laptop:gap-[24px] gap-[4px]",children:[t(l,{html:e?.time,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"}),t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("path",{d:"M21 11.5C21.5523 11.5 22 11.9477 22 12.5V18.5C22 20.1569 20.6569 21.5 19 21.5H5C3.34315 21.5 2 20.1569 2 18.5V12.5C2 11.9477 2.44772 11.5 3 11.5C3.55228 11.5 4 11.9477 4 12.5V18.5C4 19.0523 4.44772 19.5 5 19.5H19C19.5523 19.5 20 19.0523 20 18.5V12.5C20 11.9477 20.4477 11.5 21 11.5ZM12.0039 2.25391C12.5562 2.25391 13.0039 2.70162 13.0039 3.25391V13.4736L16.4893 9.98828C16.8798 9.59777 17.5128 9.59779 17.9033 9.98828C18.2938 10.3788 18.2938 11.0118 17.9033 11.4023L13.4541 15.8516C12.6471 16.6583 11.3392 16.6582 10.5322 15.8516L6.08984 11.4092C5.69932 11.0187 5.69932 10.3856 6.08984 9.99512C6.48037 9.60466 7.11341 9.60462 7.50391 9.99512L11.0039 13.4951V3.25391C11.0039 2.70162 11.4516 2.25391 12.0039 2.25391Z",fill:"#1D1D1F"})})]})]})},i))})})};var v=n(r);export{v as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/DownLoad/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text ,Link} from '../../components/index.js'\n\nexport type DownLoadDataType = {\n title: string\n text: string\n time: string\n link: string\n line: Img\n icon: Img\n}\n\ntype DownLoadType = {\n data: {\n list:DownLoadDataType[]\n }\n className?: string\n}\n\nconst DownLoad = (props: DownLoadType) => {\n const { data } = props\n const { list } = data\n\n return (\n <>\n <div className=\"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]\">\n {list?.map((item, index) => (\n <div key={index} className=\"w-full\">\n <
|
|
5
|
-
"mappings": "aA2BI,mBAAAA,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text ,Link} from '../../components/index.js'\n\nexport type DownLoadDataType = {\n title: string\n text: string\n time: string\n link: string\n line: Img\n icon: Img\n}\n\ntype DownLoadType = {\n data: {\n list:DownLoadDataType[]\n }\n className?: string\n}\n\nconst DownLoad = (props: DownLoadType) => {\n const { data } = props\n const { list } = data\n\n return (\n <>\n <div className=\"bg-[#EAEAEC] rounded-2xl w-full p-[12px] flex flex-col gap-[12px]\">\n {list?.map((item, index) => (\n <div key={index} className=\"w-full\">\n <Link \n href={item?.link}\n target=\"_blank\" \n className=\"w-full flex items-center justify-between py-[12px] px-[24px]\">\n <div className=\"flex items-center flex-row laptop:gap-[24px] gap-[12px]\">\n <Text\n html={item?.title}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n {/* <Picture\n className=\"h-[16px]\"\n source={item.line?.url}\n alt={item.line?.alt || ''}\n /> */}\n {\n item?.text && (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"2\" height=\"17\" viewBox=\"0 0 2 17\" fill=\"none\">\n <path d=\"M1 0.5V16.5\" stroke=\"#3D3D3F\"/>\n </svg>\n )\n }\n <Text\n html={item?.text}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n </div>\n\n {/* <Link\n href={item?.link}\n target=\"_blank\"\n > */}\n <div className=\"flex items-center justify-center flex-row laptop:gap-[24px] gap-[4px]\">\n <Text\n html={item?.time}\n className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\"\n />\n {/* <Picture\n className=\"w-[24px]\"\n imgClassName=\"w-full h-auto\"\n source={item.icon?.url}\n alt={item.icon?.alt || ''}\n /> */}\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <path d=\"M21 11.5C21.5523 11.5 22 11.9477 22 12.5V18.5C22 20.1569 20.6569 21.5 19 21.5H5C3.34315 21.5 2 20.1569 2 18.5V12.5C2 11.9477 2.44772 11.5 3 11.5C3.55228 11.5 4 11.9477 4 12.5V18.5C4 19.0523 4.44772 19.5 5 19.5H19C19.5523 19.5 20 19.0523 20 18.5V12.5C20 11.9477 20.4477 11.5 21 11.5ZM12.0039 2.25391C12.5562 2.25391 13.0039 2.70162 13.0039 3.25391V13.4736L16.4893 9.98828C16.8798 9.59777 17.5128 9.59779 17.9033 9.98828C18.2938 10.3788 18.2938 11.0118 17.9033 11.4023L13.4541 15.8516C12.6471 16.6583 11.3392 16.6582 10.5322 15.8516L6.08984 11.4092C5.69932 11.0187 5.69932 10.3856 6.08984 9.99512C6.48037 9.60466 7.11341 9.60462 7.50391 9.99512L11.0039 13.4951V3.25391C11.0039 2.70162 11.4516 2.25391 12.0039 2.25391Z\" fill=\"#1D1D1F\"/>\n </svg>\n </div>\n \n {/* </Link> */}\n </Link>\n </div>\n ))}\n</div>\n\n </>\n )\n}\n\nexport default withLayout(DownLoad)\n"],
|
|
5
|
+
"mappings": "aA2BI,mBAAAA,EASU,OAAAC,EADF,QAAAC,MARR,oBA1BJ,MAAmB,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAkB,QAAAC,EAAM,QAAAC,MAAW,4BAkBnC,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,KAAAE,CAAK,EAAID,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,oEACd,SAAAQ,GAAM,IAAI,CAACC,EAAMC,IAChBV,EAAC,OAAgB,UAAU,SACzB,SAAAC,EAACG,EAAA,CACC,KAAMK,GAAM,KACZ,OAAO,SACP,UAAU,+DACV,UAAAR,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACG,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,yDACZ,EAOEA,GAAM,MACJT,EAAC,OAAI,MAAM,6BAA6B,MAAM,IAAI,OAAO,KAAK,QAAQ,WAAW,KAAK,OACpF,SAAAA,EAAC,QAAK,EAAE,cAAc,OAAO,UAAS,EACxC,EAGJA,EAACG,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,yDACZ,GACF,EAMER,EAAC,OAAI,UAAU,wEACb,UAAAD,EAACG,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,yDACZ,EAOAT,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QAAK,EAAE,8sBAA8sB,KAAK,UAAS,EACtuB,GACF,GAGJ,GAjDQU,CAkDV,CACL,EACH,EAEI,CAEJ,EAEA,IAAOC,EAAQT,EAAWG,CAAQ",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "withLayout", "Text", "Link", "DownLoad", "props", "data", "list", "item", "index", "DownLoad_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as L,jsx as e,jsxs as a}from"react/jsx-runtime";import{Button as ae,Checkbox as ie,Text as d,Picture as v,Heading as $}from"../../../../../components/index.js";import u from"./ProductBenefitsTabs/index.js";import{useBizProductContext as W}from"../../../BizProductProvider.js";import{useBenefits as se}from"../../../hooks/useBenefits";import{formatPrice as g}from"../../../utils/index.js";import{replaceTemplate as U}from"../../../utils/textFormat";import{useEffect as le,useMemo as Z,useRef as re,useState as E}from"react";import{useAiuiContext as q}from"../../../../AiuiProvider/index.js";import ce from"../../../../../hooks/useCountDown.js";import pe from"../../../hooks/useCopy";import{cn as G}from"../../../../../helpers/index.js";import de from"./ProductBenefitsTabs/ModalContainer.js";const ue={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},fe=({item:n,textConfig:S,benefitPayloadData:i})=>{const{trackingData:l}=q(),{copied:x,copy:C}=pe(),[y,P]=E(!1),c=l?.common?.coupon,{days:B,hours:N,minutes:I,seconds:F}=ce({endTime:n?.ends_at||""}),{openModal:k}=W();return a(L,{children:[e("style",{jsx:!0,children:`
|
|
2
2
|
.coupon-card {
|
|
3
3
|
/* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */
|
|
4
4
|
mask:
|
|
@@ -14,7 +14,7 @@ import{Fragment as M,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as
|
|
|
14
14
|
bottom left;
|
|
15
15
|
mask-repeat: no-repeat;
|
|
16
16
|
}
|
|
17
|
-
`}),
|
|
17
|
+
`}),a("div",{style:{background:n.couponBgColor||"white"},className:G("relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]",n.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...n.useAble&&{role:"button",tabIndex:0,onClick:()=>{n?.onUseChange?.(y)!==!1&&P(!y)}},children:[n?.bgImage?.url&&e(v,{source:n.bgImage.url,alt:n.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),a("div",{className:"relative z-1 ",children:[a("div",{className:"flex items-center justify-start",children:[n.useAble&&e(ie,{size:"lg",className:"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary",checked:n?.isAutoUse}),e(d,{html:n.title,className:"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]"})]}),n.description&&e(d,{...typeof n.description=="string"?{html:n.description}:{},as:"p",className:"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]",children:n.description}),n.code&&a("div",{className:"desktop:mt-2 flex items-center gap-2",children:[e(d,{html:`${i?.couponBenefitData?.commonCoupon?.couponCode}: ${n.code}`,className:"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]"}),e("button",{className:"text-[14px] lg-desktop:text-[16px] font-bold underline",role:"button",tabIndex:0,onClick:r=>{r.preventDefault(),r.stopPropagation(),C(n.code||"")},children:x?c?.copied||i?.couponBenefitData?.commonCoupon?.copied:c?.copy||i?.couponBenefitData?.commonCoupon?.copyCode})]}),n.ends_at&&e("button",{onClick:()=>{c?.modal&&k(c?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden",children:Number(B)<Number(c?.hurry?.daysLeft)?a(L,{children:[e("span",{children:c?.ends}),e("span",{className:"font-bold",children:` ${B} ${N.toString().padStart(2,"0")}:${I.toString().padStart(2,"0")}:${F.toString().padStart(2,"0")}`})]}):c?.hurry?.label||i?.couponBenefitData?.commonCoupon?.expired})]})]})]})},be=({coupons:n,className:S,textConfig:i,benefitPayloadData:l})=>e("div",{className:G("flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1",S),children:n?.map((x,C)=>e(fe,{item:x,textConfig:i,benefitPayloadData:l},C))}),me=({textConfig:n})=>{const{isLogin:S,profile:i,variant:l,renderInstallments:x,onUseCouponChange:C,onUseMemberDiscountChange:y,discount:P,savingDetail:c,openModal:B,openSignInPopup:N,openAuthCodePopup:I,openSignUpPopup:F,product:k}=W(),r=Z(()=>k?.payload?.components?.find(t=>t.componentKey==="ProductBenefits")?.data||{},[k?.payload]),[Y,j]=E(!1),K=se({variant:l}),{locale:b="us",copyWriting:J}=q(),A=re(null),Q={...ue,...n},{activated:X=!1}=i||{},{memberDiscount:m,commonCoupon:f,creditsRedemption:w,freeGift:z,bundle:H,paidShipping:ee,fullGift:V,levelDiscount:_}=K,o=Z(()=>{const t=r?.benefitTabs?.find(p=>p?.value==="coupon")??{},s=r?.benefitTabs?.find(p=>p?.value==="membership")??{},D=r?.benefitTabs?.find(p=>p?.value==="installment")??{},T=r?.benefitTabs?.find(p=>p?.value==="pay")??{};return{couponBenefitData:t,membershipBenefitData:s,installmentBenefitData:D,payBenefitData:T}},[r]),h=[f?.enable?{...f.config,isAutoUse:c?.coupon>0,useAble:!0,borderStyle:"rounded",code:f?.config?.title??"",description:f?.config?.desc??"",onUseChange:t=>{const s=t?P?.codeSavings??0:0;C?.(s)},title:U(o?.couponBenefitData?.commonCoupon?.offCoupon,{discount:f?.config?.value_type=="percentage"?Math.abs(Number(f?.config?.value||0))+"%":g({amount:Math.abs(Number(f?.config?.fixed_value||0)),currencyCode:l.price.currencyCode,locale:b})})}:null,m.enable?{useAble:!0,isAutoUse:!!i?.email&&!!c?.member,title:U(o?.couponBenefitData?.member?.offMemberOnly,{amount:g({amount:m?.config?.amount??0,currencyCode:l.price.currencyCode,locale:b})}),description:a(L,{children:[i?.email?o?.couponBenefitData?.member?.memberDiscounts:o?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",g({amount:m?.config?.amount??0,currencyCode:l.price.currencyCode,locale:b}))??""," ",i?.email?"":e("span",{role:"button",tabIndex:0,onClick:()=>N?.(),className:"underline",children:o?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:t=>{if(i?.email){const s=t?m?.config?.amount??0:0;return y?.(s),!0}else return N?.(),!1}}:null,_.enable?{title:_?.config?.title??"",description:_?.config?.tag??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.levelDiscount?.bgImage}}:null,z.enable?{title:z?.config?.title??"",description:o?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,H.enable?{title:`${o?.couponBenefitData?.bundle?.bundleSaveUpTo} ${g({amount:Math.max(...H?.config?.bundleList?.map(t=>t.savings??0)??[]),currencyCode:l.price.currencyCode,locale:b})}`,borderStyle:"inset",description:o?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",H?.config?.bundleList?.length?.toString()??""),bgImage:{url:o?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,V.enable?{title:V?.config?.title??"",description:V?.config?.desc??"",borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,w.enable?{title:o?.couponBenefitData?.creditsRedemption?.creditsTitle,description:o?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:o?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);le(()=>{R(h?.length?"coupon":"membership")},[l?.id]);const[O,R]=E("coupon"),te=()=>{I?.()};if(!u)return null;const oe=(t,s)=>{if(R(s),A.current){const D=A.current,T=t.currentTarget,p=T.offsetLeft-D.offsetWidth/2+T.offsetWidth/2;D.scrollTo({left:p,behavior:"smooth"})}},ne=Z(()=>r?.benefitTabs?.map(t=>t?.value==="coupon"&&!h?.length?null:t).filter(Boolean),[r,h]);return a(u,{className:"relative",onValueChange:t=>R(t),value:O,children:[e("div",{className:"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),e(u.List,{ref:A,children:ne?.map(t=>e(u.Trigger,{className:G(O===t.value&&"text-[#1D1D1F]"),value:t.value,onClick:s=>oe(s,t?.value),children:t.label},t?.value))}),e("style",{global:!0,jsx:!0,children:`
|
|
18
18
|
.benefits-tabs-content::-webkit-scrollbar {
|
|
19
19
|
width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */
|
|
20
20
|
height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */
|
|
@@ -32,9 +32,9 @@ import{Fragment as M,jsx as e,jsxs as n}from"react/jsx-runtime";import{Button as
|
|
|
32
32
|
.benefits-tabs-content::-webkit-scrollbar-thumb:hover {
|
|
33
33
|
background-color: rgba(100, 100, 100, 0.6);
|
|
34
34
|
}
|
|
35
|
-
`}),h?.length?e(
|
|
35
|
+
`}),h?.length?e(u.Content,{value:"coupon",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]",children:e("div",{className:"p-3 lg-desktop:p-4",children:e(be,{coupons:h,textConfig:Q,benefitPayloadData:o})})}):null,e(u.Content,{value:"membership",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]",children:a("div",{className:"p-3 lg-desktop:p-4",children:[!i?.email&&e("h3",{className:"mb-2 text-left text-lg font-bold",children:o?.membershipBenefitData?.memberBenefitsNotLoginText}),e("div",{className:"rounded-[16px]",children:a("ul",{className:`list-none [&_li:first-child]:rounded-t-[16px]
|
|
36
36
|
[&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2
|
|
37
37
|
[&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4
|
|
38
38
|
[&_li]:py-4
|
|
39
|
-
[&_li]:text-left`,children:[
|
|
39
|
+
[&_li]:text-left`,children:[m.enable&&a("li",{className:"justify-between",children:[a("div",{className:"flex gap-2",children:[e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:e("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),e(d,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:U(o?.membershipBenefitData?.forNewMember,{amount:g({amount:m?.config?.amount??0,currencyCode:l.price.currencyCode,locale:b})})})]}),!!i?.email&&e(M,{})]}),o?.membershipBenefitData?.equities?.map((t,s)=>t.modalText?a("li",{className:"justify-between gap-2",children:[a("button",{onClick:()=>B?.({title:t.label,content:t.modalText}),className:"flex justify-between",children:[e(v,{source:t.icon,alt:t.text,className:"size-6 shrink-0"}),e(d,{className:"text-left text-[16px] font-bold x:text-[14px]",children:t.text})]},s),!!i?.email&&e(M,{})]},s):a("li",{className:"justify-between",children:[a("div",{className:"flex gap-2",children:[e(v,{source:t.icon,alt:t.text,className:" size-6 shrink-0"}),e(d,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:t.label})]}),!!i?.email&&e(M,{})]},s)),ee.enable?a("li",{className:"justify-between",children:[a("div",{className:"flex gap-2",children:[e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),e(d,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:o?.membershipBenefitData?.expressShipping})]}),!!i?.email&&e(M,{})]}):null,w.enable?a("li",{children:[e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),e(d,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",children:!X&&i?.email?a(L,{children:[o?.membershipBenefitData?.creditsAfterActivation,e("span",{role:"button",tabIndex:0,onClick:()=>te(),className:"underline",children:o?.membershipBenefitData?.active})]}):w?.config?.label?.replace("{{amount}}",g({amount:w?.config?.amount??0,currencyCode:l.price.currencyCode,locale:b}))})]}):null]})}),!i?.email&&e("div",{className:"pt-4",children:e(ae,{variant:"primary",className:"w-full",onClick:()=>F?.(),children:J?.signUp})})]})}),a(u.Content,{value:"pay",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] ",children:[a("div",{className:"p-3 lg-desktop:p-4",children:[e($,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.payBenefitData?.payMethod}),a("div",{className:"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white",children:[a("div",{className:"flex items-center gap-2",children:[e(v,{source:o?.payBenefitData?.icon,className:"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0"}),e(d,{as:"p",className:"text-left text-[16px] font-bold x:text-[14px]",html:o?.payBenefitData?.withCheckout})]}),e("button",{className:"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]",onClick:()=>j(!0),children:o?.payBenefitData?.learnMore})]})]}),e(de,{showModal:Y,closeModal:()=>j(!1),children:e(v,{source:o?.payBenefitData?.payImage})})]}),e(u.Content,{value:"installment",className:"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] ",children:a("div",{className:"p-3 lg-desktop:p-4",children:[e($,{size:2,className:"mb-2 text-left text-lg font-bold",children:o?.installmentBenefitData?.flexibleInstallment}),e("div",{className:"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white",children:x})]})})]})},M=n=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...n,children:e("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var Le=me;export{Le as default};
|
|
40
40
|
//# sourceMappingURL=BenefitsTab.js.map
|
package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { Button, Checkbox, Text, Picture, Heading } from '../../../../../components/index.js'\nimport ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useBenefits } from '../../../hooks/useBenefits'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../hooks/useCountDown.js'\nimport useCopy from '../../../hooks/useCopy'\nimport { cn } from '../../../../../helpers/index.js'\nimport ModalContainer from './ProductBenefitsTabs/ModalContainer.js'\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\ninterface BenefitsTabTextConfig {\n // Coupon \u76F8\u5173\n couponCode?: string // \"Code\"\n copyCode?: string // \"Copy Code\"\n copied?: string // \"Copied\"\n expired?: string // \"Expired\"\n offCoupon?: string // \"off coupon\"\n offMemberOnly?: string // \"{amount} off Member Only\"\n loginNow?: string // \"login now\"\n selectFreeGift?: string // \"You can select the free gift below.\"\n bundleSaveUpTo?: string // \"Bundle purchases save extra up to\"\n bundleOffer?: string // \"We offer {count} bundle for you\"\n creditsTitle?: string // \"Soundcore credits for cash\"\n creditsDesc?: string // \"100 Soundcore credits=$1\"\n\n // Tab \u6807\u7B7E\n off?: string // \"off\"\n memberBenefitsNotLogin?: string // \"Member Benefits\"\n memberBenefitsNotLoginText?: string //\n\n // Member Benefits \u90E8\u5206\n forNewMember?: string // \"for New Member\"\n expressShipping?: string // \"Express Shipping Method\"\n creditsAfterActivation?: string // \"You will get soundcoreCredits after activation.\"\n active?: string // \"Active\"\n\n // Installment \u90E8\u5206\n flexibleInstallment?: string // \"Flexible installment payment\"\n}\n\nexport type ProductBenefitsTabsValueType = 'coupon' | 'membership' | 'pay' | 'installment'\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\ninterface BenefitsTabProps {\n textConfig?: BenefitsTabTextConfig\n}\n\n// \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\nconst defaultTextConfig: Required<BenefitsTabTextConfig> = {\n couponCode: 'Code',\n copyCode: 'Copy Code',\n copied: 'Copied',\n expired: 'Expired',\n offCoupon: '{discount} off coupon',\n offMemberOnly: '{amount} off Member Only',\n loginNow: 'Login now',\n selectFreeGift: 'You can select the free gift below.',\n bundleSaveUpTo: 'Bundle purchases save extra up to',\n bundleOffer: 'We offer {count} bundle for you',\n creditsTitle: 'Soundcore credits for cash',\n creditsDesc: '100 Soundcore credits=$1',\n off: ' off',\n memberBenefitsNotLogin: 'You will enjoy a {amount} member discount after logging in.',\n memberBenefitsNotLoginText: 'Sign Up to Get Benefits Below',\n forNewMember: '{amount} off for New Member',\n expressShipping: 'Express Shipping Method',\n creditsAfterActivation: 'You will get soundcoreCredits after activation. ',\n active: 'Active',\n flexibleInstallment: 'Flexible installment payment ',\n}\n\n// Coupon content component (commonly used)\ninterface CouponContentProps {\n coupons?: Array<{\n borderStyle: 'inset' | 'rounded' // \u8FD9\u4E24\u79CD\u6837\u5F0F\u4E0D\u4E00\u6837\uFF0C inset \u56DB\u89D2\u662F\u5185\u5207\u5706\u89D2\uFF0C rounded \u56DB\u89D2\u662F\u666E\u901A\u5706\u89D2\n useAble?: boolean\n isAutoUse?: boolean\n onUseChange?: (useAble: boolean) => void\n code?: string\n title: string\n description: string | React.ReactNode\n discount?: number\n couponBgColor?: string\n bgImage?: { url: string; alt?: string }\n ends_at?: string\n }>\n className?: string\n}\n\nconst CouponItem = ({\n item,\n textConfig,\n benefitPayloadData,\n}: {\n item: NonNullable<CouponContentProps['coupons']>[number]\n textConfig: Required<BenefitsTabTextConfig>\n benefitPayloadData: any\n}) => {\n const { trackingData } = useAiuiContext()\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n const couponCopy = trackingData?.common?.coupon\n const { days, hours, minutes, seconds } = useCountDown({ endTime: item?.ends_at || '' })\n const { openModal } = useBizProductContext()\n return (\n <>\n <style jsx>{`\n .coupon-card {\n /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */\n mask:\n radial-gradient(circle at 0 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 100%, transparent 12px, white 12px),\n radial-gradient(circle at 0 100%, transparent 12px, white 12px);\n mask-size: 50% 50%;\n mask-position:\n top left,\n top right,\n bottom right,\n bottom left;\n mask-repeat: no-repeat;\n }\n `}</style>\n <div\n style={{\n background: item.couponBgColor || 'white',\n }}\n className={cn(\n 'relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]',\n item.borderStyle === 'inset' ? 'coupon-card ' : 'rounded-[8px]'\n )}\n >\n {item?.bgImage?.url && (\n <Picture\n source={item.bgImage.url}\n alt={item.bgImage.alt}\n className=\"absolute bottom-0 right-0 w-auto\"\n imgClassName=\"object-contain\"\n />\n )}\n <div className=\"relative z-1 \">\n <div className=\"flex items-center justify-start\">\n {item.useAble && (\n <Checkbox\n size=\"lg\"\n className=\"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary\"\n checked={item?.isAutoUse}\n onCheckedChange={(e: boolean) => {\n item?.onUseChange?.(e)\n }}\n />\n )}\n <Text\n html={item.title}\n className=\"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]\"\n />\n </div>\n {item.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]\"\n >\n {item.description}\n </Text>\n )}\n {item.code && (\n <div className=\"desktop:mt-2 flex items-center gap-2\">\n <Text\n html={`${benefitPayloadData?.couponBenefitData?.commonCoupon?.couponCode}: ${item.code}`}\n className=\"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]\"\n />\n <button\n className=\"text-[14px] lg-desktop:text-[16px] font-bold underline\"\n onClick={() => copyToClipboard(item.code ?? '')}\n >\n {isCopied\n ? couponCopy?.copied || benefitPayloadData?.couponBenefitData?.commonCoupon?.copied\n : couponCopy?.copy || benefitPayloadData?.couponBenefitData?.commonCoupon?.copyCode}\n </button>\n </div>\n )}\n {item.ends_at && (\n <button\n onClick={() => {\n if (couponCopy?.modal) {\n openModal(couponCopy?.modal!)\n }\n }}\n className=\"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden\"\n >\n {Number(days) < Number(couponCopy?.hurry?.daysLeft) ? (\n <>\n <span>{couponCopy?.ends}</span>\n <span className=\"font-bold\">\n {` ${days} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`}\n </span>\n </>\n ) : (\n couponCopy?.hurry?.label || benefitPayloadData?.couponBenefitData?.commonCoupon?.expired\n )}\n </button>\n )}\n </div>\n </div>\n </>\n )\n}\n\nconst CouponContent = ({\n coupons,\n className,\n textConfig,\n benefitPayloadData,\n}: CouponContentProps & { textConfig: Required<BenefitsTabTextConfig>; benefitPayloadData: any }) => {\n return (\n <div className={cn('flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1', className)}>\n {coupons?.map((item, index) => (\n <CouponItem key={index} item={item} textConfig={textConfig} benefitPayloadData={benefitPayloadData} />\n ))}\n </div>\n )\n}\n\nconst BenefitsTab = ({ textConfig }: BenefitsTabProps) => {\n const {\n isLogin,\n profile,\n variant,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n savingDetail,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n product,\n } = useBizProductContext()\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n // \u5408\u5E76\u9ED8\u8BA4\u914D\u7F6E\u548C\u4F20\u5165\u7684\u914D\u7F6E\n const mergedTextConfig = { ...defaultTextConfig, ...textConfig }\n\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n const { memberDiscount, commonCoupon, creditsRedemption, freeGift, bundle, paidShipping, fullGift, levelDiscount } =\n benefits\n\n const benefitPayloadData = useMemo(() => {\n const couponBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'coupon') ?? {}\n const membershipBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'membership') ?? {}\n const installmentBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'installment') ?? {}\n const payBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'pay') ?? {}\n return { couponBenefitData, membershipBenefitData, installmentBenefitData, payBenefitData }\n }, [productBenefitsData])\n\n const coupons = [\n commonCoupon?.enable\n ? {\n ...commonCoupon.config,\n isAutoUse: savingDetail?.coupon > 0,\n useAble: true,\n borderStyle: 'rounded',\n code: commonCoupon?.config?.title ?? '',\n description: commonCoupon?.config?.desc ?? '',\n onUseChange: (value: boolean) => {\n const couponSaving = value ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n },\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.commonCoupon?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n }\n : null,\n memberDiscount.enable\n ? {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.member?.offMemberOnly, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: (\n <>\n {Boolean(profile?.email)\n ? benefitPayloadData?.couponBenefitData?.member?.memberDiscounts\n : (benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLogin?.replace(\n '{amount}',\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n ) ?? '')}{' '}\n {Boolean(profile?.email) ? (\n ''\n ) : (\n <span role=\"button\" tabIndex={0} onClick={() => openSignInPopup?.()} className=\"underline\">\n {benefitPayloadData?.couponBenefitData?.member?.loginNow}\n </span>\n )}\n </>\n ),\n borderStyle: 'rounded',\n onUseChange: (value: boolean) => {\n if (Boolean(profile?.email)) {\n const memberSaving = value ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n // setSavingDetail(prev => ({\n // ...prev,\n // member: value ? (memberDiscount?.config?.amount ?? 0) : 0,\n // }))\n } else {\n openSignInPopup?.()\n }\n },\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.levelDiscount?.bgImage,\n },\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n description: benefitPayloadData?.couponBenefitData?.freeGift?.selectFreeGift,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.freeGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n bundle.enable\n ? {\n title: `${benefitPayloadData?.couponBenefitData?.bundle?.bundleSaveUpTo} ${formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n })}`,\n borderStyle: 'inset',\n description: benefitPayloadData?.couponBenefitData?.bundle?.bundleOffer.replace(\n '{count}',\n bundle?.config?.bundleList?.length?.toString() ?? ''\n ),\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.bundle?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.fullGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n creditsRedemption.enable\n ? {\n title: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsTitle,\n description: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsDesc,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.creditsRedemption?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n ].filter(Boolean)\n\n useEffect(() => {\n setProductBenefitsTabsValue(coupons?.length ? 'coupon' : 'membership')\n }, [variant?.id])\n\n const [productBenefitsTabsValue, setProductBenefitsTabsValue] = useState<ProductBenefitsTabsValueType>('coupon')\n\n const handleActivate = () => {\n openAuthCodePopup?.()\n }\n\n if (!ProductBenefitsTabs) return null\n\n const handleProductBenefitsTabListClick = (\n el: React.MouseEvent<HTMLButtonElement>,\n value: ProductBenefitsTabsValueType\n ) => {\n setProductBenefitsTabsValue(value)\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n\n const benefitTabs = useMemo(() => {\n return productBenefitsData?.benefitTabs\n ?.map((item: any) => {\n if (item?.value === 'coupon' && !coupons?.length) {\n return null\n }\n return item\n })\n .filter(Boolean)\n }, [productBenefitsData, coupons])\n\n return (\n <ProductBenefitsTabs\n className=\"relative\"\n onValueChange={value => setProductBenefitsTabsValue(value as 'coupon' | 'membership' | 'installment')}\n value={productBenefitsTabsValue}\n >\n <div className=\"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]\"></div>\n <ProductBenefitsTabs.List ref={scrollContainerRef}>\n {benefitTabs?.map((item: any) => (\n <ProductBenefitsTabs.Trigger\n key={item?.value}\n className={cn(productBenefitsTabsValue === item.value && 'text-[#1D1D1F]')}\n value={item.value}\n onClick={e => handleProductBenefitsTabListClick(e, item?.value)}\n >\n {item.label}\n </ProductBenefitsTabs.Trigger>\n ))}\n </ProductBenefitsTabs.List>\n <style global jsx>\n {`\n .benefits-tabs-content::-webkit-scrollbar {\n width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */\n height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-track {\n background: transparent; /* \u6EDA\u52A8\u6761\u8F68\u9053\u80CC\u666F */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb {\n background-color: #d1d1d1; /* \u6EDA\u52A8\u6761\u989C\u8272 */\n border-radius: 9999px; /* \u5706\u89D2 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(100, 100, 100, 0.6);\n }\n `}\n </style>\n {/* \u4F7F\u7528\u5185\u7F6E\u7684 CouponContent \u5B50\u7EC4\u4EF6 */}\n {coupons?.length ? (\n <ProductBenefitsTabs.Content\n value=\"coupon\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <CouponContent\n coupons={coupons as NonNullable<CouponContentProps['coupons']>}\n textConfig={mergedTextConfig}\n benefitPayloadData={benefitPayloadData}\n />\n </div>\n </ProductBenefitsTabs.Content>\n ) : null}\n <ProductBenefitsTabs.Content\n value=\"membership\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n {!profile?.email && (\n <h3 className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLoginText}\n </h3>\n )}\n <div className={`rounded-[16px]`}>\n <ul\n className={`list-none [&_li:first-child]:rounded-t-[16px] \n [&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2\n [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4\n [&_li]:py-4 \n [&_li]:text-left`}\n >\n {memberDiscount.enable && (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {replaceTemplate(benefitPayloadData?.membershipBenefitData?.forNewMember, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )}\n {benefitPayloadData?.membershipBenefitData?.equities?.map((item: any, index: number) =>\n item.modalText ? (\n <li key={index} className=\"justify-between gap-2\">\n <button\n onClick={() => openModal?.({ title: item.label, content: item.modalText })}\n key={index}\n className=\"flex justify-between\"\n >\n <Picture source={item.icon} alt={item.text} className=\"size-6 shrink-0\" />\n <Text className=\"text-left text-[16px] font-bold x:text-[14px]\">{item.text}</Text>\n </button>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : (\n <li key={index} className=\"justify-between\">\n <div className=\"flex gap-2\">\n <Picture source={item.icon} alt={item.text} className=\" size-6 shrink-0\" />\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {item.label}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )\n )}\n {/* \u9AD8\u6807\u7269\u6D41 */}\n {paidShipping.enable ? (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {benefitPayloadData?.membershipBenefitData?.expressShipping}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : null}\n {/* \u79EF\u5206\u62B5\u73B0 */}\n {creditsRedemption.enable ? (\n <li>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {/* \u7528\u6237\u672A\u6FC0\u6D3B\uFF0C\u4E14\u672A\u767B\u5F55\uFF0C\u5219\u663E\u793A\u6FC0\u6D3B\u94FE\u63A5 */}\n {!activated && Boolean(profile?.email) ? (\n <>\n {benefitPayloadData?.membershipBenefitData?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => handleActivate()} className=\"underline\">\n {benefitPayloadData?.membershipBenefitData?.active}\n </span>\n </>\n ) : (\n creditsRedemption?.config?.label?.replace(\n '{{amount}}',\n formatPrice({\n amount: creditsRedemption?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n )\n )}\n </Text>\n </li>\n ) : null}\n </ul>\n </div>\n {!profile?.email && (\n <div className=\"pt-4\">\n <Button variant=\"primary\" className=\"w-full\" onClick={() => openSignUpPopup?.()}>\n {copyWriting?.signUp}\n </Button>\n </div>\n )}\n </div>\n </ProductBenefitsTabs.Content>\n <ProductBenefitsTabs.Content\n value=\"pay\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.payBenefitData?.payMethod}\n </Heading>\n <div className=\"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white\">\n <div className=\"flex items-center gap-2\">\n <Picture\n source={benefitPayloadData?.payBenefitData?.icon}\n className=\"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0\"\n />\n <Text\n as=\"p\"\n className=\"text-left text-[16px] font-bold x:text-[14px]\"\n html={benefitPayloadData?.payBenefitData?.withCheckout}\n />\n </div>\n <button\n className=\"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]\"\n onClick={() => setIsFlexModalOpen(true)}\n >\n {benefitPayloadData?.payBenefitData?.learnMore}\n </button>\n </div>\n </div>\n\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={benefitPayloadData?.payBenefitData?.payImage}></Picture>\n </ModalContainer>\n </ProductBenefitsTabs.Content>\n {/* \u81EA\u5B9A\u4E49\u5185\u5BB9 */}\n <ProductBenefitsTabs.Content\n value=\"installment\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.installmentBenefitData?.flexibleInstallment}\n </Heading>\n <div className=\"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white\">{renderInstallments}</div>\n </div>\n </ProductBenefitsTabs.Content>\n </ProductBenefitsTabs>\n )\n}\n\nconst CheckedIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n <path\n d=\"M4 9.19472L8.51935 13.667L16.2668 6.00024\"\n stroke=\"#2BBC4F\"\n strokeWidth=\"1.67\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport default BenefitsTab\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Button", "Checkbox", "Text", "Picture", "Heading", "ProductBenefitsTabs", "useBizProductContext", "useBenefits", "formatPrice", "replaceTemplate", "useEffect", "useMemo", "useRef", "useState", "useAiuiContext", "useCountDown", "useCopy", "cn", "ModalContainer", "defaultTextConfig", "CouponItem", "item", "textConfig", "benefitPayloadData", "trackingData", "isCopied", "copyToClipboard", "couponCopy", "days", "hours", "minutes", "seconds", "openModal", "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { Button, Checkbox, Text, Picture, Heading } from '../../../../../components/index.js'\nimport ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useBenefits } from '../../../hooks/useBenefits'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../hooks/useCountDown.js'\nimport useCopy from '../../../hooks/useCopy'\nimport { cn } from '../../../../../helpers/index.js'\nimport ModalContainer from './ProductBenefitsTabs/ModalContainer.js'\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\ninterface BenefitsTabTextConfig {\n // Coupon \u76F8\u5173\n couponCode?: string // \"Code\"\n copyCode?: string // \"Copy Code\"\n copied?: string // \"Copied\"\n expired?: string // \"Expired\"\n offCoupon?: string // \"off coupon\"\n offMemberOnly?: string // \"{amount} off Member Only\"\n loginNow?: string // \"login now\"\n selectFreeGift?: string // \"You can select the free gift below.\"\n bundleSaveUpTo?: string // \"Bundle purchases save extra up to\"\n bundleOffer?: string // \"We offer {count} bundle for you\"\n creditsTitle?: string // \"Soundcore credits for cash\"\n creditsDesc?: string // \"100 Soundcore credits=$1\"\n\n // Tab \u6807\u7B7E\n off?: string // \"off\"\n memberBenefitsNotLogin?: string // \"Member Benefits\"\n memberBenefitsNotLoginText?: string //\n\n // Member Benefits \u90E8\u5206\n forNewMember?: string // \"for New Member\"\n expressShipping?: string // \"Express Shipping Method\"\n creditsAfterActivation?: string // \"You will get soundcoreCredits after activation.\"\n active?: string // \"Active\"\n\n // Installment \u90E8\u5206\n flexibleInstallment?: string // \"Flexible installment payment\"\n}\n\nexport type ProductBenefitsTabsValueType = 'coupon' | 'membership' | 'pay' | 'installment'\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\ninterface BenefitsTabProps {\n textConfig?: BenefitsTabTextConfig\n}\n\n// \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\nconst defaultTextConfig: Required<BenefitsTabTextConfig> = {\n couponCode: 'Code',\n copyCode: 'Copy Code',\n copied: 'Copied',\n expired: 'Expired',\n offCoupon: '{discount} off coupon',\n offMemberOnly: '{amount} off Member Only',\n loginNow: 'Login now',\n selectFreeGift: 'You can select the free gift below.',\n bundleSaveUpTo: 'Bundle purchases save extra up to',\n bundleOffer: 'We offer {count} bundle for you',\n creditsTitle: 'Soundcore credits for cash',\n creditsDesc: '100 Soundcore credits=$1',\n off: ' off',\n memberBenefitsNotLogin: 'You will enjoy a {amount} member discount after logging in.',\n memberBenefitsNotLoginText: 'Sign Up to Get Benefits Below',\n forNewMember: '{amount} off for New Member',\n expressShipping: 'Express Shipping Method',\n creditsAfterActivation: 'You will get soundcoreCredits after activation. ',\n active: 'Active',\n flexibleInstallment: 'Flexible installment payment ',\n}\n\n// Coupon content component (commonly used)\ninterface CouponContentProps {\n coupons?: Array<{\n borderStyle: 'inset' | 'rounded' // \u8FD9\u4E24\u79CD\u6837\u5F0F\u4E0D\u4E00\u6837\uFF0C inset \u56DB\u89D2\u662F\u5185\u5207\u5706\u89D2\uFF0C rounded \u56DB\u89D2\u662F\u666E\u901A\u5706\u89D2\n useAble?: boolean\n isAutoUse?: boolean\n onUseChange?: (useAble: boolean) => boolean | undefined\n code?: string\n title: string\n description: string | React.ReactNode\n discount?: number\n couponBgColor?: string\n bgImage?: { url: string; alt?: string }\n ends_at?: string\n }>\n className?: string\n}\n\nconst CouponItem = ({\n item,\n textConfig,\n benefitPayloadData,\n}: {\n item: NonNullable<CouponContentProps['coupons']>[number]\n textConfig: Required<BenefitsTabTextConfig>\n benefitPayloadData: any\n}) => {\n const { trackingData } = useAiuiContext()\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n const [checked, setChecked] = useState(false)\n const couponCopy = trackingData?.common?.coupon\n const { days, hours, minutes, seconds } = useCountDown({ endTime: item?.ends_at || '' })\n const { openModal } = useBizProductContext()\n return (\n <>\n <style jsx>{`\n .coupon-card {\n /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */\n mask:\n radial-gradient(circle at 0 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 0, transparent 12px, white 12px),\n radial-gradient(circle at 100% 100%, transparent 12px, white 12px),\n radial-gradient(circle at 0 100%, transparent 12px, white 12px);\n mask-size: 50% 50%;\n mask-position:\n top left,\n top right,\n bottom right,\n bottom left;\n mask-repeat: no-repeat;\n }\n `}</style>\n <div\n style={{\n background: item.couponBgColor || 'white',\n }}\n className={cn(\n 'relative h-[100px] p-3 overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]',\n item.borderStyle === 'inset' ? 'coupon-card ' : 'rounded-[8px]'\n )}\n {...(item.useAble && {\n role: 'button',\n tabIndex: 0,\n onClick: () => {\n const shouldChange = item?.onUseChange?.(checked)\n if (shouldChange !== false) {\n setChecked(!checked)\n }\n },\n })}\n >\n {item?.bgImage?.url && (\n <Picture\n source={item.bgImage.url}\n alt={item.bgImage.alt}\n className=\"absolute bottom-0 right-0 w-auto\"\n imgClassName=\"object-contain\"\n />\n )}\n <div className=\"relative z-1 \">\n <div className=\"flex items-center justify-start\">\n {item.useAble && (\n <Checkbox\n size=\"lg\"\n className=\"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary\"\n checked={item?.isAutoUse}\n />\n )}\n <Text\n html={item.title}\n className=\"text-[16px] leading-[1.2] font-bold laptop:text-[20px] lg-desktop:text-[24px]\"\n />\n </div>\n {item.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]\"\n >\n {item.description}\n </Text>\n )}\n {item.code && (\n <div className=\"desktop:mt-2 flex items-center gap-2\">\n <Text\n html={`${benefitPayloadData?.couponBenefitData?.commonCoupon?.couponCode}: ${item.code}`}\n className=\"text-[14px] lg-desktop:text-[16px] font-bold text-[#3D3D3F]\"\n />\n <button\n className=\"text-[14px] lg-desktop:text-[16px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(item.code || '')\n }}\n >\n {isCopied\n ? couponCopy?.copied || benefitPayloadData?.couponBenefitData?.commonCoupon?.copied\n : couponCopy?.copy || benefitPayloadData?.couponBenefitData?.commonCoupon?.copyCode}\n </button>\n </div>\n )}\n {item.ends_at && (\n <button\n onClick={() => {\n if (couponCopy?.modal) {\n openModal(couponCopy?.modal!)\n }\n }}\n className=\"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 mt-[14px] text-left text-[14px] font-bold lg-desktop:text-[16px] text-[#1F2021] md-l:hidden\"\n >\n {Number(days) < Number(couponCopy?.hurry?.daysLeft) ? (\n <>\n <span>{couponCopy?.ends}</span>\n <span className=\"font-bold\">\n {` ${days} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`}\n </span>\n </>\n ) : (\n couponCopy?.hurry?.label || benefitPayloadData?.couponBenefitData?.commonCoupon?.expired\n )}\n </button>\n )}\n </div>\n </div>\n </>\n )\n}\n\nconst CouponContent = ({\n coupons,\n className,\n textConfig,\n benefitPayloadData,\n}: CouponContentProps & { textConfig: Required<BenefitsTabTextConfig>; benefitPayloadData: any }) => {\n return (\n <div className={cn('flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1', className)}>\n {coupons?.map((item, index) => (\n <CouponItem key={index} item={item} textConfig={textConfig} benefitPayloadData={benefitPayloadData} />\n ))}\n </div>\n )\n}\n\nconst BenefitsTab = ({ textConfig }: BenefitsTabProps) => {\n const {\n isLogin,\n profile,\n variant,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n savingDetail,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n product,\n } = useBizProductContext()\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n // \u5408\u5E76\u9ED8\u8BA4\u914D\u7F6E\u548C\u4F20\u5165\u7684\u914D\u7F6E\n const mergedTextConfig = { ...defaultTextConfig, ...textConfig }\n\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n const { memberDiscount, commonCoupon, creditsRedemption, freeGift, bundle, paidShipping, fullGift, levelDiscount } =\n benefits\n\n const benefitPayloadData = useMemo(() => {\n const couponBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'coupon') ?? {}\n const membershipBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'membership') ?? {}\n const installmentBenefitData =\n productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'installment') ?? {}\n const payBenefitData = productBenefitsData?.benefitTabs?.find((item: any) => item?.value === 'pay') ?? {}\n return { couponBenefitData, membershipBenefitData, installmentBenefitData, payBenefitData }\n }, [productBenefitsData])\n\n const coupons = [\n commonCoupon?.enable\n ? {\n ...commonCoupon.config,\n isAutoUse: savingDetail?.coupon > 0,\n useAble: true,\n borderStyle: 'rounded',\n code: commonCoupon?.config?.title ?? '',\n description: commonCoupon?.config?.desc ?? '',\n onUseChange: (value: boolean) => {\n const couponSaving = value ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n },\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.commonCoupon?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n }\n : null,\n memberDiscount.enable\n ? {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: replaceTemplate(benefitPayloadData?.couponBenefitData?.member?.offMemberOnly, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: (\n <>\n {Boolean(profile?.email)\n ? benefitPayloadData?.couponBenefitData?.member?.memberDiscounts\n : (benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLogin?.replace(\n '{amount}',\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n ) ?? '')}{' '}\n {Boolean(profile?.email) ? (\n ''\n ) : (\n <span role=\"button\" tabIndex={0} onClick={() => openSignInPopup?.()} className=\"underline\">\n {benefitPayloadData?.couponBenefitData?.member?.loginNow}\n </span>\n )}\n </>\n ),\n borderStyle: 'rounded',\n onUseChange: (value: boolean) => {\n if (Boolean(profile?.email)) {\n const memberSaving = value ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n // setSavingDetail(prev => ({\n // ...prev,\n // member: value ? (memberDiscount?.config?.amount ?? 0) : 0,\n // }))\n return true\n } else {\n openSignInPopup?.()\n return false\n }\n },\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.levelDiscount?.bgImage,\n },\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n description: benefitPayloadData?.couponBenefitData?.freeGift?.selectFreeGift,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.freeGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n bundle.enable\n ? {\n title: `${benefitPayloadData?.couponBenefitData?.bundle?.bundleSaveUpTo} ${formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n })}`,\n borderStyle: 'inset',\n description: benefitPayloadData?.couponBenefitData?.bundle?.bundleOffer.replace(\n '{count}',\n bundle?.config?.bundleList?.length?.toString() ?? ''\n ),\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.bundle?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.fullGift?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n creditsRedemption.enable\n ? {\n title: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsTitle,\n description: benefitPayloadData?.couponBenefitData?.creditsRedemption?.creditsDesc,\n borderStyle: 'inset',\n bgImage: {\n url: benefitPayloadData?.couponBenefitData?.creditsRedemption?.bgImage,\n },\n couponBgColor:\n 'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n }\n : null,\n ].filter(Boolean)\n\n useEffect(() => {\n setProductBenefitsTabsValue(coupons?.length ? 'coupon' : 'membership')\n }, [variant?.id])\n\n const [productBenefitsTabsValue, setProductBenefitsTabsValue] = useState<ProductBenefitsTabsValueType>('coupon')\n\n const handleActivate = () => {\n openAuthCodePopup?.()\n }\n\n if (!ProductBenefitsTabs) return null\n\n const handleProductBenefitsTabListClick = (\n el: React.MouseEvent<HTMLButtonElement>,\n value: ProductBenefitsTabsValueType\n ) => {\n setProductBenefitsTabsValue(value)\n if (scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = el.currentTarget\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n\n const benefitTabs = useMemo(() => {\n return productBenefitsData?.benefitTabs\n ?.map((item: any) => {\n if (item?.value === 'coupon' && !coupons?.length) {\n return null\n }\n return item\n })\n .filter(Boolean)\n }, [productBenefitsData, coupons])\n\n return (\n <ProductBenefitsTabs\n className=\"relative\"\n onValueChange={value => setProductBenefitsTabsValue(value as 'coupon' | 'membership' | 'installment')}\n value={productBenefitsTabsValue}\n >\n <div className=\"absolute right-0 z-[1] top-0 w-[25px] h-[40px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]\"></div>\n <ProductBenefitsTabs.List ref={scrollContainerRef}>\n {benefitTabs?.map((item: any) => (\n <ProductBenefitsTabs.Trigger\n key={item?.value}\n className={cn(productBenefitsTabsValue === item.value && 'text-[#1D1D1F]')}\n value={item.value}\n onClick={e => handleProductBenefitsTabListClick(e, item?.value)}\n >\n {item.label}\n </ProductBenefitsTabs.Trigger>\n ))}\n </ProductBenefitsTabs.List>\n <style global jsx>\n {`\n .benefits-tabs-content::-webkit-scrollbar {\n width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */\n height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-track {\n background: transparent; /* \u6EDA\u52A8\u6761\u8F68\u9053\u80CC\u666F */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb {\n background-color: #d1d1d1; /* \u6EDA\u52A8\u6761\u989C\u8272 */\n border-radius: 9999px; /* \u5706\u89D2 */\n }\n\n .benefits-tabs-content::-webkit-scrollbar-thumb:hover {\n background-color: rgba(100, 100, 100, 0.6);\n }\n `}\n </style>\n {/* \u4F7F\u7528\u5185\u7F6E\u7684 CouponContent \u5B50\u7EC4\u4EF6 */}\n {coupons?.length ? (\n <ProductBenefitsTabs.Content\n value=\"coupon\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <CouponContent\n coupons={coupons as NonNullable<CouponContentProps['coupons']>}\n textConfig={mergedTextConfig}\n benefitPayloadData={benefitPayloadData}\n />\n </div>\n </ProductBenefitsTabs.Content>\n ) : null}\n <ProductBenefitsTabs.Content\n value=\"membership\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px]\"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n {!profile?.email && (\n <h3 className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.membershipBenefitData?.memberBenefitsNotLoginText}\n </h3>\n )}\n <div className={`rounded-[16px]`}>\n <ul\n className={`list-none [&_li:first-child]:rounded-t-[16px] \n [&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2\n [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4\n [&_li]:py-4 \n [&_li]:text-left`}\n >\n {memberDiscount.enable && (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {replaceTemplate(benefitPayloadData?.membershipBenefitData?.forNewMember, {\n amount: formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )}\n {benefitPayloadData?.membershipBenefitData?.equities?.map((item: any, index: number) =>\n item.modalText ? (\n <li key={index} className=\"justify-between gap-2\">\n <button\n onClick={() => openModal?.({ title: item.label, content: item.modalText })}\n key={index}\n className=\"flex justify-between\"\n >\n <Picture source={item.icon} alt={item.text} className=\"size-6 shrink-0\" />\n <Text className=\"text-left text-[16px] font-bold x:text-[14px]\">{item.text}</Text>\n </button>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : (\n <li key={index} className=\"justify-between\">\n <div className=\"flex gap-2\">\n <Picture source={item.icon} alt={item.text} className=\" size-6 shrink-0\" />\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {item.label}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n )\n )}\n {/* \u9AD8\u6807\u7269\u6D41 */}\n {paidShipping.enable ? (\n <li className=\"justify-between\">\n <div className=\"flex gap-2\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {benefitPayloadData?.membershipBenefitData?.expressShipping}\n </Text>\n </div>\n {Boolean(profile?.email) && <CheckedIcon />}\n </li>\n ) : null}\n {/* \u79EF\u5206\u62B5\u73B0 */}\n {creditsRedemption.enable ? (\n <li>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n <Text as=\"p\" className=\"text-left text-[16px] font-bold x:text-[14px]\">\n {/* \u7528\u6237\u672A\u6FC0\u6D3B\uFF0C\u4E14\u672A\u767B\u5F55\uFF0C\u5219\u663E\u793A\u6FC0\u6D3B\u94FE\u63A5 */}\n {!activated && Boolean(profile?.email) ? (\n <>\n {benefitPayloadData?.membershipBenefitData?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => handleActivate()} className=\"underline\">\n {benefitPayloadData?.membershipBenefitData?.active}\n </span>\n </>\n ) : (\n creditsRedemption?.config?.label?.replace(\n '{{amount}}',\n formatPrice({\n amount: creditsRedemption?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n })\n )\n )}\n </Text>\n </li>\n ) : null}\n </ul>\n </div>\n {!profile?.email && (\n <div className=\"pt-4\">\n <Button variant=\"primary\" className=\"w-full\" onClick={() => openSignUpPopup?.()}>\n {copyWriting?.signUp}\n </Button>\n </div>\n )}\n </div>\n </ProductBenefitsTabs.Content>\n <ProductBenefitsTabs.Content\n value=\"pay\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.payBenefitData?.payMethod}\n </Heading>\n <div className=\"flex items-center gap-2 justify-between rounded-[16px] p-3 lg-desktop:p-4 bg-white\">\n <div className=\"flex items-center gap-2\">\n <Picture\n source={benefitPayloadData?.payBenefitData?.icon}\n className=\"size-[40px] h-[20px] desktop:size-[70px] desktop:h-[34px] shrink-0\"\n />\n <Text\n as=\"p\"\n className=\"text-left text-[16px] font-bold x:text-[14px]\"\n html={benefitPayloadData?.payBenefitData?.withCheckout}\n />\n </div>\n <button\n className=\"underline hover:text-brand-0 whitespace-nowrap text-sm font-bold desktop:text-[16px]\"\n onClick={() => setIsFlexModalOpen(true)}\n >\n {benefitPayloadData?.payBenefitData?.learnMore}\n </button>\n </div>\n </div>\n\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={benefitPayloadData?.payBenefitData?.payImage}></Picture>\n </ModalContainer>\n </ProductBenefitsTabs.Content>\n {/* \u81EA\u5B9A\u4E49\u5185\u5BB9 */}\n <ProductBenefitsTabs.Content\n value=\"installment\"\n className=\"benefits-tabs-content overflow-y-auto lg-desktop:h-[240px] desktop:h-[196px] h-[180px] laptop:h-[220px] \"\n >\n <div className=\"p-3 lg-desktop:p-4\">\n <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n {benefitPayloadData?.installmentBenefitData?.flexibleInstallment}\n </Heading>\n <div className=\"overflow-hidden rounded-[16px] p-3 lg-desktop:p-4 bg-white\">{renderInstallments}</div>\n </div>\n </ProductBenefitsTabs.Content>\n </ProductBenefitsTabs>\n )\n}\n\nconst CheckedIcon = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n <path\n d=\"M4 9.19472L8.51935 13.667L16.2668 6.00024\"\n stroke=\"#2BBC4F\"\n strokeWidth=\"1.67\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport default BenefitsTab\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Button", "Checkbox", "Text", "Picture", "Heading", "ProductBenefitsTabs", "useBizProductContext", "useBenefits", "formatPrice", "replaceTemplate", "useEffect", "useMemo", "useRef", "useState", "useAiuiContext", "useCountDown", "useCopy", "cn", "ModalContainer", "defaultTextConfig", "CouponItem", "item", "textConfig", "benefitPayloadData", "trackingData", "isCopied", "copyToClipboard", "checked", "setChecked", "couponCopy", "days", "hours", "minutes", "seconds", "openModal", "event", "CouponContent", "coupons", "className", "index", "BenefitsTab", "isLogin", "profile", "variant", "renderInstallments", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "savingDetail", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "product", "productBenefitsData", "isFlexModalOpen", "setIsFlexModalOpen", "benefits", "locale", "copyWriting", "scrollContainerRef", "mergedTextConfig", "activated", "memberDiscount", "commonCoupon", "creditsRedemption", "freeGift", "bundle", "paidShipping", "fullGift", "levelDiscount", "couponBenefitData", "membershipBenefitData", "installmentBenefitData", "payBenefitData", "value", "couponSaving", "memberSaving", "setProductBenefitsTabsValue", "productBenefitsTabsValue", "handleActivate", "handleProductBenefitsTabListClick", "el", "container", "button", "scrollLeft", "benefitTabs", "e", "CheckedIcon", "props", "BenefitsTab_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as c,jsx as e,jsxs as
|
|
1
|
+
"use client";import{Fragment as c,jsx as e,jsxs as o}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as r}from"../../shared/Styles.js";import{Picture as i,Text as l}from"../../components/index.js";const d=p=>{const{data:a,className:g}=p,{list:s}=a;return e(c,{children:e("div",{className:"",children:e("div",{className:"grid laptop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:s.map((t,m)=>o("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[e(i,{className:"w-full h-full object-cover",imgClassName:"w-full h-full object-cover",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),o("div",{className:"absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]",children:[" ",e(l,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),e(l,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},m))})})})};var I=r(d);export{I as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid
|
|
5
|
-
"mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid laptop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full h-full object-cover\"\n imgClassName=\"w-full h-full object-cover\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]'> <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
|
|
5
|
+
"mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,+DACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qIACnB,UAAAD,EAACG,EAAA,CACC,UAAU,6BACV,aAAa,6BACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACJT,EAAC,OAAI,UAAU,8HAA8H,+BAAkBD,EAACI,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,0FAAyF,EACzRV,EAACI,EAAA,CAAK,KAAMM,GAAM,KAAM,UAAU,+EAA8E,GAClH,IARMC,CASV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "props", "data", "className", "list", "item", "index", "SelectStore_default"]
|
|
7
7
|
}
|