@anker-in/headless-ui 1.1.9-alpha.1764056831196 → 1.1.9-alpha.1764059925254
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/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +6 -6
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +6 -6
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var P=(s,o)=>{for(var n in o)p(s,n,{get:o[n],enumerable:!0})},z=(s,o,n,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of C(o))!E.call(s,a)&&a!==n&&p(s,a,{get:()=>o[a],enumerable:!(c=_(o,a))||c.enumerable});return s};var L=s=>z(p({},"__esModule",{value:!0}),s);var $={};P($,{default:()=>K});module.exports=L($);var e=require("react/jsx-runtime"),d=require("../../../../../../components/index.js"),f=require("../../../../../../helpers/index.js"),m=require("react"),v=require("../../../../BizProductProvider.js"),g=require("../../../../../AiuiProvider/index.js"),y=require("../../../../utils/helper.js"),x=require("../../../../../../shared/Styles.js");const O=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:c}=(0,v.useBizProductContext)(),{storeDomain:a}=(0,g.useAiuiContext)(),[N,h]=(0,m.useState)({}),b=(0,m.useMemo)(()=>s?.payload?.components?.find(t=>t.componentKey==="ProductOptions")?.data||{},[s?.payload]);return s.options.length?(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(t=>{const w=t.name.toLowerCase();if(["color","colour","couleur"].some(r=>w.includes(r)))return(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold leading-[1.2]",html:b?.selectColor+o[t.name]}),(0,e.jsx)("div",{className:"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-4",children:t.values.map(({label:r},i)=>{const l=`https://${a}/cdn/shop/files/${(0,y.handle)(r)}.png`;return(0,e.jsxs)("div",{className:"ipc-product-detail-options-value relative",children:[(0,e.jsx)("button",{"aria-label":`switch to ${r}`,title:r,onClick:()=>{n(u=>({...u,[t.name]:r})),c?.({gift:void 0,bundle:void 0})},className:(0,f.cn)("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":o[t.name]===r}),children:!N[r]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(d.Picture,{className:"w-full",source:l,onError:({currentTarget:u})=>{u.onerror=null,h(k=>({...k,[r]:!0}))}})})}),(0,e.jsx)("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},r+i)})})]},t.id);{const r=t.name.charAt(0).toUpperCase()+t.name.slice(1);return(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:r}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",children:t.values.map(({label:i})=>(0,e.jsx)("button",{onClick:()=>{n(l=>({...l,[t.name]:i}))},className:(0,f.cn)("rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold",{"border-brand":o[t.name]===i}),children:i},i))})]},t.id)}})}):null};var K=(0,x.withLayout)(O);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
|
|
4
|
+
"sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n const { storeDomain } = useAiuiContext()\n const [imgLoadError, setImgLoadError] = useState({})\n\n const productOptionsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n }, [product?.payload])\n\n if (!product.options.length) return null\n\n return (\n <div className=\"flex flex-col gap-12\">\n {product.options.map(option => {\n const lowercasedName = option.name.toLowerCase()\n const colorKeywords = ['color', 'colour', 'couleur']\n if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n return (\n <div key={option.id} className=\"ipc-product-detail-options\">\n <Text\n as=\"p\"\n size={3}\n className=\"font-bold leading-[1.2]\"\n html={productOptionsData?.selectColor + selectedOptions[option.name]}\n />\n <div className=\"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-4\">\n {option.values.map(({ label }, index) => {\n const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n return (\n <div key={label + index} className=\"ipc-product-detail-options-value relative\">\n <button\n aria-label={`switch to ${label}`}\n title={label}\n onClick={() => {\n setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n }}\n className={cn(\n 'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n {\n 'outline-brand': selectedOptions[option.name] === label,\n }\n )}\n >\n {!imgLoadError[label as keyof typeof imgLoadError] && (\n <>\n <Picture\n className=\"w-full\"\n source={imagePath}\n onError={({ currentTarget }) => {\n currentTarget.onerror = null // prevents looping\n setImgLoadError(prev => ({ ...prev, [label]: true }))\n }}\n />\n </>\n )}\n </button>\n <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n </div>\n )\n })}\n </div>\n </div>\n )\n } else {\n const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n return (\n <div key={option.id} className=\"ipc-product-detail-options\">\n <Text as=\"p\" size={3} className=\"font-bold\" html={capitalizedName} />\n <div className=\"mt-4 flex items-center gap-4\">\n {option.values.map(({ label }) => (\n <button\n key={label}\n onClick={() => {\n setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n }}\n className={cn('rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold', {\n 'border-brand': selectedOptions[option.name] === label,\n })}\n >\n {label}\n </button>\n ))}\n </div>\n </div>\n )\n }\n })}\n </div>\n )\n}\n\nexport default withLayout(ProductOptions)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2Bc,IAAAI,EAAA,6BA3BdC,EAA8B,iDAC9BC,EAAmB,8CACnBC,EAAkC,iBAClCC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAAI,wBAAqB,EACvG,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EAE7CC,KAAqB,WAAQ,IAC1BP,GAAS,SAAS,YAAY,KAAMQ,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACR,GAAS,OAAO,CAAC,EAErB,OAAKA,EAAQ,QAAQ,UAGnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIS,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,GADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAChE,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,KAAM,EACN,UAAU,0BACV,KAAMJ,GAAoB,YAAcN,EAAgBQ,EAAO,IAAI,EACrE,KACA,OAAC,OAAI,UAAU,oDACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWV,CAAW,sBAAmB,UAAOQ,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DT,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBQ,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACP,EAAaO,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBV,EAAgBS,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IA3CQJ,EAAO,EA4CjB,EAEG,CACL,MAAMQ,EAAkBR,EAAO,KAAK,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,KAAK,MAAM,CAAC,EACjF,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMQ,EAAiB,KACnE,OAAC,OAAI,UAAU,+BACZ,SAAAR,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAChE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GARIA,CASP,CACD,EACH,IAhBQH,EAAO,EAiBjB,CAEJ,CACF,CAAC,EACH,EA/EkC,IAiFtC,EAEA,IAAOpB,KAAQ,cAAWU,CAAc",
|
|
6
|
+
"names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "capitalizedName"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.create;var x=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var o in r)x(t,o,{get:r[o],enumerable:!0})},b=(t,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of G(r))!I.call(t,l)&&l!==o&&x(t,l,{get:()=>r[l],enumerable:!(d=h(r,l))||d.enumerable});return t};var z=(t,r,o)=>(o=t!=null?E(w(t)):{},b(r||!t||!t.__esModule?x(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>b(x({},"__esModule",{value:!0}),t);var _={};k(_,{default:()=>T});module.exports=P(_);var e=require("react/jsx-runtime"),u=require("react"),a=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const F=()=>{const{locale:t="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[l,g]=(0,u.useState)();(0,u.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(s=>s.handle===l)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(a.Dialog,{children:[(0,e.jsx)(a.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(a.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 pb-2 pt-4",children:(0,e.jsx)(a.DialogTitle,{className:"text-sm font-bold text-[#6D6D6F]",children:r?.compare})}),(0,e.jsxs)(a.Grid,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(a.Text,{as:"div",className:"flex h-[68px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),l&&(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"h-[68px] px-4",value:l,onChange:s=>{g(s)},list:o.options})})]}),(0,e.jsxs)(a.Grid,{className:"laptop:gap-8 laptop:py-8 grid-cols-3 py-6",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((s,p)=>(0,e.jsx)(a.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:s.images[0].url,alt:s.title,className:"size-[100px]",role:"presentation"})},p))]}),(0,e.jsxs)(a.Grid,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((s,p)=>{const i=s.variants[0];return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:i.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:t,amount:i?.coupons?.[0]?.variant_price4wscode||i.price.amount,currencyCode:i.price.currencyCode})}),Number(i?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:t,amount:i.price.amount,currencyCode:i.price.currencyCode})})]})})})},p)})]}),(0,e.jsxs)(a.Grid,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((s,p)=>{const i=s.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:i?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:i.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},p)})]}),(0,e.jsx)(a.Grid,{className:"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:o.specificationKeys?.map(s=>(0,e.jsxs)(a.GridItem,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:s}),m.map((p,i)=>{let n=p.metafields?.global?.specifications?.find(C=>C?.key===s)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#1D1D1F]",children:n})},i)})]},s))})]})]}):null};var T=F;
|
|
2
2
|
//# sourceMappingURL=CompareModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { compareData, product } = useBizProductContext()\n const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n useEffect(() => {\n setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n }, [compareData?.availableCompareList])\n\n const products = [\n compareData?.currentProductCompareData!?.product,\n compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n ].filter(Boolean) as CompareItem['product'][]\n\n if (!compareData?.specificationKeys) return null\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 pb-2 pt-4\">\n <DialogTitle className=\"text-sm font-bold text-[#6D6D6F]\">{copyWriting?.compare}</DialogTitle>\n </DialogHeader>\n <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n </GridItem>\n <GridItem span={1}>\n <Text\n as=\"div\"\n className=\"flex h-[68px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n html={compareData.currentProductCompareData?.shortName || product.title}\n ></Text>\n </GridItem>\n {selectedProductHandle && (\n <GridItem span={1}>\n <Select\n className=\"h-[68px] px-4\"\n value={selectedProductHandle}\n onChange={value => {\n setSelectedProductHandle(value)\n }}\n list={compareData.options!}\n />\n </GridItem>\n )}\n </Grid>\n <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n return (\n <GridItem key={productIndex} span={1} className=\"flex items-center\">\n <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n <GridItem span={1} />\n {products.map((product, productIndex) => {\n const variant = product.variants[0]\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {/* Price with original price */}\n <div className=\"flex flex-col gap-[8px]\">\n {variant.price.amount < 9999999 && (\n <div className=\"flex items-center gap-[8px]\">\n {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"text-[18px] font-bold\">\n {formatPrice({\n locale,\n amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n {formatPrice({\n locale,\n amount: variant.price.amount,\n currencyCode: variant.price.currencyCode,\n })}\n </span>\n )}\n </div>\n </div>\n )}\n {/* <Button variant=\"primary\" size=\"lg\">\n {copyWriting?.shopNow || 'Shop Now'}\n </Button> */}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n <GridItem span={1}>\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n </GridItem>\n {products.map((product, productIndex) => {\n const colors = product.options\n ?.find(option =>\n ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n )\n ?.values.map(value => value.label)\n return (\n <GridItem span={1} key={productIndex} className=\"flex h-full\">\n {colors?.length && (\n <div className=\"flex items-center gap-4\">\n {colors.map(label => (\n <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n ))}\n </div>\n )}\n </GridItem>\n )\n })}\n </Grid>\n <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n {compareData.specificationKeys?.map((key: string) => {\n return (\n <GridItem\n span={12}\n className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n key={key}\n >\n {/* Detail value */}\n <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n {/* Product Values */}\n {products.map((product, productIndex) => {\n const value =\n product.metafields?.global?.specifications?.find(\n (specification: { key: string }) => specification?.key === key\n )?.value || ''\n let text = value\n switch (text.trim().toLowerCase()) {\n case 'true':\n text = '\u2714\uFE0F'\n break\n case 'false':\n text = '\u274C'\n break\n default:\n break\n }\n return (\n <div key={productIndex} className=\"flex items-center\">\n {/* Other details */}\n <div className=\"text-[16px] font-bold text-[#1D1D1F]\">{text}</div>\n </div>\n )\n })}\n </GridItem>\n )\n })}\n </Grid>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport default CompareModal\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var d=(a,t)=>{for(var l in t)p(a,l,{get:t[l],enumerable:!0})},x=(a,t,l,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of n(t))!m.call(a,s)&&s!==l&&p(a,s,{get:()=>t[s],enumerable:!(i=g(t,s))||i.enumerable});return a};var D=a=>x(p({},"__esModule",{value:!0}),a);var b={};d(b,{SpecsModal:()=>f});module.exports=D(b);var e=require("react/jsx-runtime"),r=require("../../../../../AiuiProvider/index.js"),o=require("../../../../../../components/index.js"),c=require("../../../../BizProductProvider.js");const f=()=>{const{product:a}=(0,c.useBizProductContext)(),{copyWriting:t}=(0,r.useAiuiContext)();return(0,e.jsxs)(o.Dialog,{children:[(0,e.jsx)(o.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:t?.specs}),(0,e.jsxs)(o.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(o.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 pb-2 pt-4",children:(0,e.jsx)(o.DialogTitle,{className:"text-sm font-bold text-[#6D6D6F]",children:t?.specs})}),(0,e.jsx)(o.Grid,{className:"laptop:gap-8 laptop:py-8 py-6",children:a.metafields?.global?.specifications?.map(({key:l,value:i})=>(0,e.jsxs)(o.GridItem,{span:6,className:"flex flex-col gap-1",children:[(0,e.jsx)(o.Text,{className:"text-[18px] font-bold text-[#1D1D1F]",children:l}),(0,e.jsx)(o.Text,{className:"text-[18px] font-bold text-[#86868C]",html:i?.trim().toLowerCase()==="true"?"\u2714\uFE0F":i?.trim().toLowerCase()==="false"?"\u274C":i})]},l))})]})]})};
|
|
2
2
|
//# sourceMappingURL=SpecsModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n const { product } = useBizProductContext()\n const { copyWriting } = useAiuiContext()\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAnBNC,EAA+B,gDAC/BC,EASO,iDACPC,EAAqC,6CAE9B,MAAML,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAM,CAAQ,KAAI,wBAAqB,EACnC,CAAE,YAAAC,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAA,GAAa,MAAM,KACjF,QAAC,iBACC,iBAAiB,UACjB,UAAU,8QAEV,oBAAC,gBAAa,UAAU,
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogTitle,\n Grid,\n GridItem,\n Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n const { product } = useBizProductContext()\n const { copyWriting } = useAiuiContext()\n\n return (\n <Dialog>\n <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 pb-2 pt-4\">\n <DialogTitle className=\"text-sm font-bold text-[#6D6D6F]\">{copyWriting?.specs}</DialogTitle>\n </DialogHeader>\n <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n <Text className=\"text-[18px] font-bold text-[#1D1D1F]\">{key}</Text>\n <Text\n className=\"text-[18px] font-bold text-[#86868C]\"\n html={\n value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n }\n />\n </GridItem>\n ))}\n </Grid>\n </DialogContent>\n </Dialog>\n )\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAnBNC,EAA+B,gDAC/BC,EASO,iDACPC,EAAqC,6CAE9B,MAAML,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAM,CAAQ,KAAI,wBAAqB,EACnC,CAAE,YAAAC,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAA,GAAa,MAAM,KACjF,QAAC,iBACC,iBAAiB,UACjB,UAAU,8QAEV,oBAAC,gBAAa,UAAU,qCACtB,mBAAC,eAAY,UAAU,mCAAoC,SAAAA,GAAa,MAAM,EAChF,KACA,OAAC,QAAK,UAAU,gCACb,SAAAD,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,OAC7D,QAAC,YAAS,KAAM,EAAa,UAAU,sBACrC,oBAAC,QAAK,UAAU,uCAAwC,SAAAD,EAAI,KAC5D,OAAC,QACC,UAAU,uCACV,KACEC,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,IAPsBD,CAQxB,CACD,EACH,GACF,GACF,CAEJ",
|
|
6
6
|
"names": ["SpecsModal_exports", "__export", "SpecsModal", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_BizProductProvider", "product", "copyWriting", "key", "value"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Z=Object.create;var j=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var oe=(o,t)=>{for(var i in t)j(o,i,{get:t[i],enumerable:!0})},W=(o,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of te(t))!ne.call(o,u)&&u!==i&&j(o,u,{get:()=>t[u],enumerable:!(l=ee(t,u))||l.enumerable});return o};var ie=(o,t,i)=>(i=o!=null?Z(ae(o)):{},W(t||!o||!o.__esModule?j(i,"default",{value:o,enumerable:!0}):i,o)),le=o=>W(j({},"__esModule",{value:!0}),o);var de={};oe(de,{default:()=>se});module.exports=le(de);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),h=require("react"),b=require("../../../utils/index.js"),A=require("../../../../AiuiProvider/index.js"),G=ie(require("decimal.js")),K=require("../../../utils/textFormat.js"),Q=require("../../../../../shared/Styles.js"),H=require("../../../../../components/index.js"),U=require("../../../../../shared/track.js");const re=()=>{const{locale:o="us",copyWriting:t}=(0,A.useAiuiContext)(),{product:i,variant:l,finalPrice:u,comparePrice:x,coupon:k,selectedOptions:p,selectedVariants:g,totalSavings:r,onAddToCart:D,onBuyNow:E,savingDetail:v,checkedBundle:y,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:m,setSavingDetail:F,addToCartLoading:N,buyNowLoading:L,profile:T,addOrder:S,setAddOrder:w}=(0,B.useBizProductContext)(),V=(0,h.useMemo)(()=>i?.payload?.components?.find(c=>c.componentKey==="ProductSummary")?.data||{},[i?.payload]),[z]=g,_=(0,h.useMemo)(()=>{const c=y?.variants.find(C=>C.variant.sku===z?.sku),s=new G.default(z?.price?.amount||0).minus(c?.price||z?.price?.amount).toNumber();let f=new G.default(z?.price?.amount||0);T?.email&&(f=f.minus(v?.member||0));const O=f.minus(v?.coupon).minus(s).toNumber();return Math.floor(O*100)/100},[z,y,T,v?.member,v?.coupon]),{bundleVariant:$,giftVariant:I,exchangeVariant:R}=ce()||{},[d,P]=(0,h.useState)();(0,h.useEffect)(()=>{P({bundle:n.bundle?.value?void 0:$,gift:n.gift?.value?void 0:I,exchange:n.exchange?.value?void 0:R})},[$,I,R,n]);const X=(0,h.useMemo)(()=>{const c=[];return S&&S.forEach((s,f)=>{n[s]?.value&&c.push({type:s,key:`${s}-${f}`})}),c},[S,n]),Y=(0,h.useMemo)(()=>{const c=p?.quantity||"",s=p?.color||p?.colour||p?.couleur||"";return`${c&&s?`${c} | ${s}`:c||s}`},[p?.quantity,p?.color,p?.colour,p?.couleur]);return l.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,e.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,e.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,e.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,e.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:V?.readyWant?.replace?.("{title}",i?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:l.image?.url||i?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-[center_36%]"})})]}),(0,e.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(H.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,U.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${l.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:l.image?.url||i?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:i.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:Y})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:_,currencyCode:l.price.currencyCode,locale:o})}),_<l?.price?.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:l?.price?.amount,currencyCode:l.price.currencyCode,locale:o})})]})]})}),X.map(({type:c,key:s})=>c==="gift"&&n?.gift?.value?(0,e.jsx)(M,{giftOperation:f=>{m?.({...n,gift:{value:void 0,canOperate:!0}}),P?.({...d,gift:f}),w?.(O=>O.filter(C=>C!=="gift"))},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate},s):c==="bundle"&&n?.bundle?.value?(0,e.jsx)(q,{bundleOperation:f=>{m?.({...n,bundle:{value:void 0,canOperate:!0}}),P?.({...d,bundle:f}),w?.(O=>O.filter(C=>C!=="bundle"))},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate},s):c==="exchange"&&n?.exchange?.value?(0,e.jsx)(J,{exchangeOperation:f=>{m?.({...n,exchange:{value:void 0,canOperate:!0}}),P?.({...d,exchange:f}),w?.(O=>O.filter(C=>C!=="exchange"))},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value},s):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"desktop:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[18px] text-sm font-bold",html:V?.recommendBuy}),(0,e.jsxs)("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(J,{exchangeOperation:c=>{m?.({...n,exchange:{value:c,canOperate:!0}}),P?.({...d,exchange:void 0}),w?.(s=>[...s,"exchange"])},canOperate:n?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(q,{bundleOperation:c=>{F?.({...v,exchangePurchase:0}),m?.({...n,bundle:{value:c,canOperate:!0}}),P?.({...d,bundle:void 0}),w?.(s=>[...s,"bundle"])},canOperate:n?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(M,{giftOperation:c=>{m?.({...n,gift:{value:c,canOperate:!0}}),P?.({...d,gift:void 0}),w?.(s=>[...s,"gift"])},canOperate:n?.gift?.canOperate,status:!d?.gift,gift:d?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl text-right font-bold",html:`${(0,K.replaceTemplate)(t?.totalPrice||"",{amount:(0,b.formatPrice)({amount:Math.floor(u*100)/100,currencyCode:l.price.currencyCode,locale:o})})}`}),r>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:x,currencyCode:l.price.currencyCode,locale:o})}),(0,e.jsxs)("div",{className:"mt-4 flex justify-end gap-3",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:N,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:L,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:t?.shopNow})]})]})]})]})})}):null},ce=()=>{const{bundle:o,variant:t,checkedBundle:i,freeGift:l,checkedGift:u,exchangePurchase:x,checkedExchangePurchase:k}=(0,B.useBizProductContext)();let p,g,r;const{bundleList:D}=o||{},{giftList:E=[]}=l||{},{giftList:v=[]}=x||{},y=D?.filter(N=>N.variants.slice(1,N.variants.length).every(L=>L.variant.availableForSale))||[],[n]=y;p=i||n;const[m]=E?.filter(N=>N.availableForSale)??[];g=u||m;const[F]=v?.filter(N=>N.availableForSale)??[];return r=k||F,{bundleVariant:p,giftVariant:g,exchangeVariant:r}},q=({bundleOperation:o,bundleListItem:t,canOperate:i,status:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{variant:k,setCheckedBundle:p}=(0,B.useBizProductContext)(),g=t?.variants.filter(r=>r.variant.sku!==k.sku);return(0,e.jsx)("div",{className:"",children:g?.map(r=>(0,e.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:r?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsx)("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:r.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:r?.price||0,locale:u,currencyCode:r.variant?.price?.currencyCode||""})}),r.price<r.variant.price.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:r.variant.price.amount||0,locale:u,currencyCode:r.variant?.price?.currencyCode||""})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(l?void 0:t),o?.(t)},className:"size-auto shrink-0 underline",children:l?x?.remove:x?.add})]})]},r.variant.id))})},M=({giftOperation:o,gift:t,status:i,canOperate:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{freeGift:k,setCheckedGift:p}=(0,B.useBizProductContext)(),{freeLabel:g}=k||{},{options:r}=t||{},D=(0,h.useMemo)(()=>{const E=r?.find(m=>m.name==="color"||m.name==="colour"||m.name==="couleur")||{},v=r?.find(m=>m.name==="quantity")||{},y=E?E.values?.[0]?.label:"",n=v?v.values?.[0]?.label:"";return`${y&&n?n+" | "+y:n||y} | ${g}`},[g,r]);return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:g}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),l&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:i?x?.remove:x?.add})]})]})},J=({exchangeOperation:o,exchange:t,canOperate:i,status:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{setCheckedExchangePurchase:k}=(0,B.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(l?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:l?x?.remove:x?.add})]})]})};var se=(0,Q.withLayout)(re);
|
|
1
|
+
"use strict";var Z=Object.create;var j=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var oe=(o,t)=>{for(var i in t)j(o,i,{get:t[i],enumerable:!0})},W=(o,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of te(t))!ne.call(o,u)&&u!==i&&j(o,u,{get:()=>t[u],enumerable:!(l=ee(t,u))||l.enumerable});return o};var ie=(o,t,i)=>(i=o!=null?Z(ae(o)):{},W(t||!o||!o.__esModule?j(i,"default",{value:o,enumerable:!0}):i,o)),le=o=>W(j({},"__esModule",{value:!0}),o);var de={};oe(de,{default:()=>se});module.exports=le(de);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),h=require("react"),b=require("../../../utils/index.js"),A=require("../../../../AiuiProvider/index.js"),G=ie(require("decimal.js")),K=require("../../../utils/textFormat.js"),Q=require("../../../../../shared/Styles.js"),H=require("../../../../../components/index.js"),U=require("../../../../../shared/track.js");const re=()=>{const{locale:o="us",copyWriting:t}=(0,A.useAiuiContext)(),{product:i,variant:l,finalPrice:u,comparePrice:x,coupon:k,selectedOptions:p,selectedVariants:g,totalSavings:r,onAddToCart:D,onBuyNow:E,savingDetail:v,checkedBundle:y,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:m,setSavingDetail:F,addToCartLoading:N,buyNowLoading:L,profile:T,addOrder:S,setAddOrder:w}=(0,B.useBizProductContext)(),V=(0,h.useMemo)(()=>i?.payload?.components?.find(c=>c.componentKey==="ProductSummary")?.data||{},[i?.payload]),[z]=g,_=(0,h.useMemo)(()=>{const c=y?.variants.find(C=>C.variant.sku===z?.sku),s=new G.default(z?.price?.amount||0).minus(c?.price||z?.price?.amount).toNumber();let f=new G.default(z?.price?.amount||0);T?.email&&(f=f.minus(v?.member||0));const O=f.minus(v?.coupon).minus(s).toNumber();return Math.floor(O*100)/100},[z,y,T,v?.member,v?.coupon]),{bundleVariant:$,giftVariant:I,exchangeVariant:R}=ce()||{},[d,P]=(0,h.useState)();(0,h.useEffect)(()=>{P({bundle:n.bundle?.value?void 0:$,gift:n.gift?.value?void 0:I,exchange:n.exchange?.value?void 0:R})},[$,I,R,n]);const X=(0,h.useMemo)(()=>{const c=[];return S&&S.forEach((s,f)=>{n[s]?.value&&c.push({type:s,key:`${s}-${f}`})}),c},[S,n]),Y=(0,h.useMemo)(()=>{const c=p?.quantity||"",s=p?.color||p?.colour||p?.couleur||"";return`${c&&s?`${c} | ${s}`:c||s}`},[p?.quantity,p?.color,p?.colour,p?.couleur]);return l.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,e.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,e.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,e.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,e.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:V?.readyWant?.replace?.("{title}",i?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:l.image?.url||i?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-[center_32%]"})})]}),(0,e.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(H.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,U.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${l.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:l.image?.url||i?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:i.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:Y})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:_,currencyCode:l.price.currencyCode,locale:o})}),_<l?.price?.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:l?.price?.amount,currencyCode:l.price.currencyCode,locale:o})})]})]})}),X.map(({type:c,key:s})=>c==="gift"&&n?.gift?.value?(0,e.jsx)(M,{giftOperation:f=>{m?.({...n,gift:{value:void 0,canOperate:!0}}),P?.({...d,gift:f}),w?.(O=>O.filter(C=>C!=="gift"))},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate},s):c==="bundle"&&n?.bundle?.value?(0,e.jsx)(q,{bundleOperation:f=>{m?.({...n,bundle:{value:void 0,canOperate:!0}}),P?.({...d,bundle:f}),w?.(O=>O.filter(C=>C!=="bundle"))},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate},s):c==="exchange"&&n?.exchange?.value?(0,e.jsx)(J,{exchangeOperation:f=>{m?.({...n,exchange:{value:void 0,canOperate:!0}}),P?.({...d,exchange:f}),w?.(O=>O.filter(C=>C!=="exchange"))},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value},s):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"desktop:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[18px] text-sm font-bold",html:V?.recommendBuy}),(0,e.jsxs)("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(J,{exchangeOperation:c=>{m?.({...n,exchange:{value:c,canOperate:!0}}),P?.({...d,exchange:void 0}),w?.(s=>[...s,"exchange"])},canOperate:n?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(q,{bundleOperation:c=>{F?.({...v,exchangePurchase:0}),m?.({...n,bundle:{value:c,canOperate:!0}}),P?.({...d,bundle:void 0}),w?.(s=>[...s,"bundle"])},canOperate:n?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(M,{giftOperation:c=>{m?.({...n,gift:{value:c,canOperate:!0}}),P?.({...d,gift:void 0}),w?.(s=>[...s,"gift"])},canOperate:n?.gift?.canOperate,status:!d?.gift,gift:d?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl text-right font-bold",html:`${(0,K.replaceTemplate)(t?.totalPrice||"",{amount:(0,b.formatPrice)({amount:Math.floor(u*100)/100,currencyCode:l.price.currencyCode,locale:o})})}`}),r>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:x,currencyCode:l.price.currencyCode,locale:o})}),(0,e.jsxs)("div",{className:"mt-4 flex justify-end gap-3",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:N,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:L,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:t?.shopNow})]})]})]})]})})}):null},ce=()=>{const{bundle:o,variant:t,checkedBundle:i,freeGift:l,checkedGift:u,exchangePurchase:x,checkedExchangePurchase:k}=(0,B.useBizProductContext)();let p,g,r;const{bundleList:D}=o||{},{giftList:E=[]}=l||{},{giftList:v=[]}=x||{},y=D?.filter(N=>N.variants.slice(1,N.variants.length).every(L=>L.variant.availableForSale))||[],[n]=y;p=i||n;const[m]=E?.filter(N=>N.availableForSale)??[];g=u||m;const[F]=v?.filter(N=>N.availableForSale)??[];return r=k||F,{bundleVariant:p,giftVariant:g,exchangeVariant:r}},q=({bundleOperation:o,bundleListItem:t,canOperate:i,status:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{variant:k,setCheckedBundle:p}=(0,B.useBizProductContext)(),g=t?.variants.filter(r=>r.variant.sku!==k.sku);return(0,e.jsx)("div",{className:"",children:g?.map(r=>(0,e.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:r?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsx)("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:r.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:r?.price||0,locale:u,currencyCode:r.variant?.price?.currencyCode||""})}),r.price<r.variant.price.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:r.variant.price.amount||0,locale:u,currencyCode:r.variant?.price?.currencyCode||""})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(l?void 0:t),o?.(t)},className:"size-auto shrink-0 underline",children:l?x?.remove:x?.add})]})]},r.variant.id))})},M=({giftOperation:o,gift:t,status:i,canOperate:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{freeGift:k,setCheckedGift:p}=(0,B.useBizProductContext)(),{freeLabel:g}=k||{},{options:r}=t||{},D=(0,h.useMemo)(()=>{const E=r?.find(m=>m.name==="color"||m.name==="colour"||m.name==="couleur")||{},v=r?.find(m=>m.name==="quantity")||{},y=E?E.values?.[0]?.label:"",n=v?v.values?.[0]?.label:"";return`${y&&n?n+" | "+y:n||y} | ${g}`},[g,r]);return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:g}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),l&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:i?x?.remove:x?.add})]})]})},J=({exchangeOperation:o,exchange:t,canOperate:i,status:l})=>{const{locale:u="us",copyWriting:x}=(0,A.useAiuiContext)(),{setCheckedExchangePurchase:k}=(0,B.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(l?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:l?x?.remove:x?.add})]})]})};var se=(0,Q.withLayout)(re);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { BundleListItem, ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n const productSummaryData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n return Math.floor(finalPrice * 100) / 100\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n imgClassName=\"object-cover h-full object-[center_36%]\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n return (\n <ProductBundleSummary\n key={key}\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )\n }\n if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n return (\n <ProductExchangeSummary\n key={key}\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\n )\n }\n return null\n })}\n </div>\n {(initialRecommendBuyProducts?.bundle ||\n initialRecommendBuyProducts?.gift ||\n initialRecommendBuyProducts?.exchange) && (\n <div className=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop:gap-4 mt-4 flex flex-col gap-6\">\n {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n useBizProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n let exchangeVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleListItem,\n canOperate,\n status,\n}: {\n bundleOperation: (bundle?: BundleListItem) => void\n bundleListItem?: BundleListItem\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, setCheckedBundle } = useBizProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-1\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: bundleVariant?.price || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n )}\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedBundle?.(status ? undefined : bundleListItem)\n bundleOperation?.(bundleListItem)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductExchangeSummary = ({\n exchangeOperation,\n exchange,\n canOperate,\n status,\n}: {\n exchangeOperation: (exchange?: ProductVariant) => void\n exchange?: ProductVariant & { finalPrice?: ProductPrice }\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={exchange?.product?.title}\n />\n <Text className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { BundleListItem, ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n const productSummaryData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n return Math.floor(finalPrice * 100) / 100\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n imgClassName=\"object-cover h-full object-[center_32%]\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n return (\n <ProductBundleSummary\n key={key}\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )\n }\n if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n return (\n <ProductExchangeSummary\n key={key}\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\n )\n }\n return null\n })}\n </div>\n {(initialRecommendBuyProducts?.bundle ||\n initialRecommendBuyProducts?.gift ||\n initialRecommendBuyProducts?.exchange) && (\n <div className=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop:gap-4 mt-4 flex flex-col gap-6\">\n {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n useBizProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n let exchangeVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleListItem,\n canOperate,\n status,\n}: {\n bundleOperation: (bundle?: BundleListItem) => void\n bundleListItem?: BundleListItem\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, setCheckedBundle } = useBizProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-1\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: bundleVariant?.price || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n )}\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedBundle?.(status ? undefined : bundleListItem)\n bundleOperation?.(bundleListItem)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductExchangeSummary = ({\n exchangeOperation,\n exchange,\n canOperate,\n status,\n}: {\n exchangeOperation: (exchange?: ProductVariant) => void\n exchange?: ProductVariant & { finalPrice?: ProductPrice }\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={exchange?.product?.title}\n />\n <Text className=\"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"desktop:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "item", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "key", "ProductGiftSummary", "gift", "prev", "t", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Text as a,Link as m}from"../../../../components/index.js";import{Dialog as g,DialogContent as d,DialogHeader as c,DialogTitle as x}from"../../../../components/index.js";import"react";const N=({data:e,onClose:p,open:s})=>t(g,{open:s,onOpenChange:p,children:i(d,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(c,{className:"laptop:pt-4 laptop:pb-3 pb-2 pt-4",children:t(x,{className:"text-left text-sm font-bold text-[#6D6D6F]",children:e?.title})}),i("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(a,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((l,o)=>i("li",{className:"text-[18px]",children:[i("span",{className:"text-[#86868C]",children:[o+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:l})]},o))}),i("div",{className:"mt-[24px] md:mt-[16px]",children:[t(a,{className:"text-[18px] font-bold leading-[1.2]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((l,o)=>i("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(a,{as:"p",className:"text-base font-bold leading-[1.2]",html:l.title}),t("div",{className:"mt-3 grid grid-flow-row gap-[4px]",children:l.list.map((n,r)=>t(a,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},o))})]}),t(m,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{N as ShippingPolicyModal};
|
|
2
2
|
//# sourceMappingURL=ShippingPolicyModal.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
|
|
4
|
+
"sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n text: string\n url: string\n}\n\ninterface List {\n title: string\n list: string[]\n}\n\ninterface ShippingService {\n title: string\n list: List[]\n}\n\ninterface Data {\n title: string\n shippingCoupon: List\n shippingService: ShippingService\n terms: Terms\n}\n\ninterface Props {\n data: Data\n onClose: () => void\n open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n return (\n <Dialog open={open} onOpenChange={onClose}>\n <DialogContent\n overlayClassName=\"z-[100]\"\n className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110] h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n >\n <DialogHeader className=\"laptop:pt-4 laptop:pb-3 pb-2 pt-4\">\n <DialogTitle className=\"text-left text-sm font-bold text-[#6D6D6F]\">{data?.title}</DialogTitle>\n </DialogHeader>\n <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n {data?.shippingCoupon?.list.map((item, index) => (\n <li className=\"text-[18px]\" key={index}>\n <span className=\"text-[#86868C]\">{index + 1}.</span>\n <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n </li>\n ))}\n </ul>\n <div className=\"mt-[24px] md:mt-[16px]\">\n <Text className=\"text-[18px] font-bold leading-[1.2]\" html={data?.shippingService?.title} />\n <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n {data?.shippingService?.list.map((item, index) => (\n <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n <Text as=\"p\" className=\"text-base font-bold leading-[1.2]\" html={item.title} />\n <div className=\"mt-3 grid grid-flow-row gap-[4px]\">\n {item.list.map((subItem, subIndex) => (\n <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n {subItem}\n </Text>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n <Link\n className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n href={`${data?.terms?.url}`}\n >\n {data?.terms?.text}\n </Link>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAwCU,cAAAA,EAOM,QAAAC,MAPN,oBAxCV,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,gBAAAC,EAAc,eAAAC,MAAkC,kCAChF,MAAwB,QA8BjB,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACI,EAAA,CAAO,KAAMO,EAAM,aAAcD,EAChC,SAAAT,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,oWAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,qCACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,6CAA8C,SAAAE,GAAM,MAAM,EACnF,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMO,GAAM,gBAAgB,MAAO,EACxGT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,cACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAF3BC,CAGjC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,sCAAsC,KAAMO,GAAM,iBAAiB,MAAO,EAC1FT,EAAC,OAAI,UAAU,yDACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,oCAAoC,KAAMU,EAAK,MAAO,EAC7EZ,EAAC,OAAI,UAAU,oCACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAY,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACG,EAAA,CACC,UAAU,0EACV,KAAM,GAAGM,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "DialogHeader", "DialogTitle", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
|
|
7
7
|
}
|