npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1763429992784 → 1.0.26-alpha.1763437728495 - Mend

@anker-in/headless-ui 1.0.26-alpha.1763429992784 → 1.0.26-alpha.1763437728495

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.tsx"],
-  "sourcesContent": ["import { cn as classNames } from '../../../../../../helpers/index.js'\nimport { motion } from 'framer-motion'\nimport React, { type PropsWithChildren } from 'react'\nimport Close from '../../../../../HeaderNavigation/icons/Close.js'\n\nconst ModalContainer = ({\n  title,\n  className,\n  showModal,\n  closeModal,\n  children,\n  stickyHeader = true,\n}: PropsWithChildren<{\n  title?: string\n  className?: string\n  showModal: boolean\n  closeModal: () => void\n  needClickAway?: boolean\n  stickyHeader?: boolean\n}>) => {\n  const modalRef = React.useRef<HTMLDivElement>(null)\n\n  return (\n    <motion.div\n      animate={showModal ? { opacity: 1 } : { opacity: 0, pointerEvents: 'none' }}\n      transition={{ duration: 0.1, bounce: 0 }}\n      className=\"fixed left-0 top-0 z-[80] flex h-full w-full items-center justify-center bg-black bg-opacity-50 opacity-0\"\n    >\n      <motion.div\n        transition={{ duration: 0.1, bounce: 0 }}\n        ref={modalRef}\n        animate={showModal ? { scale: 1 } : { scale: 0.7 }}\n      >\n        <div\n          className={classNames(\n            'relative z-1 max-h-[80vh] w-min min-w-[600px] overflow-scroll rounded-xl bg-white md:min-w-[90vw]',\n            className\n          )}\n        >\n          <div className={classNames(stickyHeader && 'sticky top-0 z-[2] bg-white')}>\n            {title && (\n              <p\n                className={classNames(\n                  'w-full border-b border-[#e6e6e6] py-[16px] pl-[20px] pr-[60px] text-[20px] font-bold'\n                )}\n              >\n                {title}\n              </p>\n            )}\n            <button\n              onClick={closeModal}\n              className={'close-button absolute right-4 top-5 z-[2]'}\n              aria-label=\"Close modal\"\n            >\n              <Close className=\"h-[24px] w-[24px]\" />\n            </button>\n          </div>\n          {children}\n        </div>\n      </motion.div>\n    </motion.div>\n  )\n}\n\nexport default ModalContainer\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAAiC,8CACjCC,EAAuB,yBACvBC,EAA8C,oBAC9CC,EAAkB,6DAElB,MAAMC,EAAiB,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,EACjB,IAOO,CACL,MAAMC,EAAW,EAAAC,QAAM,OAAuB,IAAI,EAElD,SACE,OAAC,SAAO,IAAP,CACC,QAASL,EAAY,CAAE,QAAS,CAAE,EAAI,CAAE,QAAS,EAAG,cAAe,MAAO,EAC1E,WAAY,CAAE,SAAU,GAAK,OAAQ,CAAE,EACvC,UAAU,4GAEV,mBAAC,SAAO,IAAP,CACC,WAAY,CAAE,SAAU,GAAK,OAAQ,CAAE,EACvC,IAAKI,EACL,QAASJ,EAAY,CAAE,MAAO,CAAE,EAAI,CAAE,MAAO,EAAI,EAEjD,oBAAC,OACC,aAAW,EAAAM,IACT,oGACAP,CACF,EAEA,qBAAC,OAAI,aAAW,EAAAO,IAAWH,GAAgB,6BAA6B,EACrE,UAAAL,MACC,OAAC,KACC,aAAW,EAAAQ,IACT,sFACF,EAEC,SAAAR,EACH,KAEF,OAAC,UACC,QAASG,EACT,UAAW,4CACX,aAAW,cAEX,mBAAC,EAAAM,QAAA,CAAM,UAAU,oBAAoB,EACvC,GACF,EACCL,GACH,EACF,EACF,CAEJ,EAEA,IAAOZ,EAAQO",
+  "sourcesContent": ["import { cn as classNames } from '../../../../../../helpers/index.js'\nimport { motion } from 'framer-motion'\nimport React, { type PropsWithChildren } from 'react'\nimport Close from '../../../../../HeaderNavigation/icons/Close.js'\n\nconst ModalContainer = ({\n  title,\n  className,\n  showModal,\n  closeModal,\n  children,\n  stickyHeader = true,\n}: PropsWithChildren<{\n  title?: string\n  className?: string\n  showModal: boolean\n  closeModal: () => void\n  needClickAway?: boolean\n  stickyHeader?: boolean\n}>) => {\n  const modalRef = React.useRef<HTMLDivElement>(null)\n\n  return (\n    <motion.div\n      animate={showModal ? { opacity: 1 } : { opacity: 0, pointerEvents: 'none' }}\n      transition={{ duration: 0.1, bounce: 0 }}\n      className=\"fixed left-0 top-0 z-[1000] flex h-full w-full items-center justify-center bg-black bg-opacity-50 opacity-0\"\n    >\n      <motion.div\n        transition={{ duration: 0.1, bounce: 0 }}\n        ref={modalRef}\n        animate={showModal ? { scale: 1 } : { scale: 0.7 }}\n      >\n        <div\n          className={classNames(\n            'relative z-1 max-h-[80vh] w-min min-w-[600px] overflow-scroll rounded-xl bg-white md:min-w-[90vw]',\n            className\n          )}\n        >\n          <div className={classNames(stickyHeader && 'sticky top-0 z-[2] bg-white')}>\n            {title && (\n              <p\n                className={classNames(\n                  'w-full border-b border-[#e6e6e6] py-[16px] pl-[20px] pr-[60px] text-[20px] font-bold'\n                )}\n              >\n                {title}\n              </p>\n            )}\n            <button\n              onClick={closeModal}\n              className={'close-button absolute right-4 top-5 z-[2]'}\n              aria-label=\"Close modal\"\n            >\n              <Close className=\"h-[24px] w-[24px]\" />\n            </button>\n          </div>\n          {children}\n        </div>\n      </motion.div>\n    </motion.div>\n  )\n}\n\nexport default ModalContainer\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAAiC,8CACjCC,EAAuB,yBACvBC,EAA8C,oBAC9CC,EAAkB,6DAElB,MAAMC,EAAiB,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,EACjB,IAOO,CACL,MAAMC,EAAW,EAAAC,QAAM,OAAuB,IAAI,EAElD,SACE,OAAC,SAAO,IAAP,CACC,QAASL,EAAY,CAAE,QAAS,CAAE,EAAI,CAAE,QAAS,EAAG,cAAe,MAAO,EAC1E,WAAY,CAAE,SAAU,GAAK,OAAQ,CAAE,EACvC,UAAU,8GAEV,mBAAC,SAAO,IAAP,CACC,WAAY,CAAE,SAAU,GAAK,OAAQ,CAAE,EACvC,IAAKI,EACL,QAASJ,EAAY,CAAE,MAAO,CAAE,EAAI,CAAE,MAAO,EAAI,EAEjD,oBAAC,OACC,aAAW,EAAAM,IACT,oGACAP,CACF,EAEA,qBAAC,OAAI,aAAW,EAAAO,IAAWH,GAAgB,6BAA6B,EACrE,UAAAL,MACC,OAAC,KACC,aAAW,EAAAQ,IACT,sFACF,EAEC,SAAAR,EACH,KAEF,OAAC,UACC,QAASG,EACT,UAAW,4CACX,aAAW,cAEX,mBAAC,EAAAM,QAAA,CAAM,UAAU,oBAAoB,EACvC,GACF,EACCL,GACH,EACF,EACF,CAEJ,EAEA,IAAOZ,EAAQO",
   "names": ["ModalContainer_exports", "__export", "ModalContainer_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_framer_motion", "import_react", "import_Close", "ModalContainer", "title", "className", "showModal", "closeModal", "children", "stickyHeader", "modalRef", "React", "classNames", "Close"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var z=(a,r)=>{for(var c in r)n(a,c,{get:r[c],enumerable:!0})},w=(a,r,c,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of P(r))!L.call(a,l)&&l!==c&&n(a,l,{get:()=>r[l],enumerable:!(s=E(r,l))||s.enumerable});return a};var D=a=>w(n({},"__esModule",{value:!0}),a);var O={};z(O,{default:()=>F});module.exports=D(O);var t=require("react/jsx-runtime"),o=require("../../../../../../components"),p=require("../../../../../../helpers/index.js"),g=require("../../../../../AiuiProvider"),h=require("../../../../BizProductProvider.js"),m=require("../../../../utils"),k=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:a="us"}=(0,g.useAiuiContext)(),{variant:r,bundle:c,checkedBundle:s,setCheckedBundle:l,setCheckedGift:S,savingDetail:j,setSavingDetail:R,setCheckedExchangePurchase:G,setJoinedRecommendBuyProducts:u,joinedRecommendBuyProducts:f,setAddOrder:v}=(0,h.useBizProductContext)(),{title:y,bundleList:C,showAtListing:N}=c||{},x=C?.filter(e=>e.variants.slice(1,e.variants.length).every(d=>d.variant.availableForSale));if(!x?.length&&N)return null;const b=e=>{s?.id===e.id?(l?.(void 0),u?.({...f,bundle:{value:void 0,canOperate:!0}}),v?.(d=>d.filter(i=>i!=="bundle"))):(l?.(e),u?.({...f,bundle:{value:e,canOperate:!1}}),v?.(d=>[...d.filter(B=>B!=="bundle"),"bundle"]))};return(0,t.jsxs)("div",{className:"ipc-product-detail-bundle",children:[(0,t.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:y}),(0,t.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 lg-desktop:mt-4",children:x?.map(e=>{const d=e.variants.filter(i=>i.variant.sku!==r.sku);return(0,t.jsx)("div",{children:(0,t.jsxs)("div",{className:(0,p.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":s?.id===e.id}),children:[(0,t.jsx)(o.Checkbox,{onCheckedChange:()=>b(e),size:"lg",className:(0,p.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":s?.id===e.id}),id:e.id,value:e.id,checked:s?.id===e.id}),(0,t.jsx)("label",{htmlFor:e.id,className:"size-full cursor-pointer py-6",children:d?.map(i=>(0,t.jsxs)("div",{className:"flex justify-between items-center gap-6 ",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(o.Picture,{source:i?.variant?.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(o.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:i.variant.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0",children:[(0,t.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:i.price,locale:a,currencyCode:i.variant.price.currencyCode})}),i.price<i.variant.price.amount&&(0,t.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:i.variant.price.amount,locale:a,currencyCode:i.variant.price.currencyCode})})]})]},i.variant.id))})]})},e.id)})})]})};var F=(0,k.withLayout)(A);
+"use strict";var n=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var z=(a,r)=>{for(var c in r)n(a,c,{get:r[c],enumerable:!0})},w=(a,r,c,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of P(r))!L.call(a,d)&&d!==c&&n(a,d,{get:()=>r[d],enumerable:!(l=E(r,d))||l.enumerable});return a};var D=a=>w(n({},"__esModule",{value:!0}),a);var O={};z(O,{default:()=>F});module.exports=D(O);var t=require("react/jsx-runtime"),o=require("../../../../../../components"),p=require("../../../../../../helpers/index.js"),g=require("../../../../../AiuiProvider"),h=require("../../../../BizProductProvider.js"),m=require("../../../../utils"),k=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:a="us"}=(0,g.useAiuiContext)(),{variant:r,bundle:c,checkedBundle:l,setCheckedBundle:d,setCheckedGift:S,savingDetail:j,setSavingDetail:R,setCheckedExchangePurchase:G,setJoinedRecommendBuyProducts:u,joinedRecommendBuyProducts:f,setAddOrder:v}=(0,h.useBizProductContext)(),{title:y,bundleList:C,showAtListing:N}=c||{},x=C?.filter(e=>e.variants.slice(1,e.variants.length).every(s=>s.variant.availableForSale));if(!x?.length&&N)return null;const b=e=>{l?.id===e.id?(d?.(void 0),u?.({...f,bundle:{value:void 0,canOperate:!0}}),v?.(s=>s.filter(i=>i!=="bundle"))):(d?.(e),u?.({...f,bundle:{value:e,canOperate:!1}}),v?.(s=>[...s.filter(B=>B!=="bundle"),"bundle"]))};return(0,t.jsxs)("div",{className:"ipc-product-detail-bundle",children:[(0,t.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:y}),(0,t.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 mid-desktop:grid-cols-1 lg-desktop:mt-4",children:x?.map(e=>{const s=e.variants.filter(i=>i.variant.sku!==r.sku);return(0,t.jsx)("div",{children:(0,t.jsxs)("div",{className:(0,p.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(o.Checkbox,{onCheckedChange:()=>b(e),size:"lg",className:(0,p.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":l?.id===e.id}),id:e.id,value:e.id,checked:l?.id===e.id}),(0,t.jsx)("label",{htmlFor:e.id,className:"size-full cursor-pointer py-6",children:s?.map(i=>(0,t.jsxs)("div",{className:"flex justify-between items-center gap-6 ",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(o.Picture,{source:i?.variant?.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(o.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:i.variant.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0",children:[(0,t.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:i.price,locale:a,currencyCode:i.variant.price.currencyCode})}),i.price<i.variant.price.amount&&(0,t.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,m.formatPrice)({amount:i.variant.price.amount,locale:a,currencyCode:i.variant.price.currencyCode})})]})]},i.variant.id))})]})},e.id)})})]})};var F=(0,k.withLayout)(A);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductBundle = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    bundle,\n    checkedBundle,\n    setCheckedBundle,\n    setCheckedGift,\n    savingDetail,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n\n  const { title, bundleList, showAtListing } = bundle || {}\n\n  const availableBundleList = bundleList?.filter(bundle =>\n    bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n  )\n\n  if (!availableBundleList?.length && showAtListing) return null\n\n  const handleSelectedChange = (bundleItem: BundleListItem) => {\n    if (checkedBundle?.id === bundleItem.id) {\n      setCheckedBundle?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n    } else {\n      setCheckedBundle?.(bundleItem)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        bundle: {\n          value: bundleItem,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'bundle')\n        return [...filtered, 'bundle']\n      })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 lg-desktop:mt-4\">\n        {availableBundleList?.map(bundle => {\n          const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n          return (\n            <div key={bundle.id}>\n              <div\n                className={cn(\n                  'flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2',\n                  {\n                    ['border-brand']: checkedBundle?.id === bundle.id,\n                  }\n                )}\n              >\n                <Checkbox\n                  onCheckedChange={() => handleSelectedChange(bundle)}\n                  size=\"lg\"\n                  className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                    'border-brand': checkedBundle?.id === bundle.id,\n                  })}\n                  id={bundle.id}\n                  value={bundle.id}\n                  checked={checkedBundle?.id === bundle.id}\n                />\n                <label htmlFor={bundle.id} className=\"size-full cursor-pointer py-6\">\n                  {bundleVariants?.map(bundleVariant => {\n                    return (\n                      <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n                        <div className=\"flex items-center gap-2\">\n                          <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n                          <Text\n                            className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                            html={bundleVariant.variant.product.title}\n                          />\n                        </div>\n                        <div className=\"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0\">\n                          <Text\n                            className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                            html={formatPrice({\n                              amount: bundleVariant.price,\n                              locale,\n                              currencyCode: bundleVariant.variant.price.currencyCode,\n                            })}\n                          />\n                          {bundleVariant.price < bundleVariant.variant.price.amount && (\n                            <Text\n                              className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                              html={formatPrice({\n                                amount: bundleVariant.variant.price.amount,\n                                locale,\n                                currencyCode: bundleVariant.variant.price.currencyCode,\n                              })}\n                            />\n                          )}\n                        </div>\n                      </div>\n                    )\n                  })}\n                </label>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductBundle)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductBundle = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    bundle,\n    checkedBundle,\n    setCheckedBundle,\n    setCheckedGift,\n    savingDetail,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n\n  const { title, bundleList, showAtListing } = bundle || {}\n\n  const availableBundleList = bundleList?.filter(bundle =>\n    bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n  )\n\n  if (!availableBundleList?.length && showAtListing) return null\n\n  const handleSelectedChange = (bundleItem: BundleListItem) => {\n    if (checkedBundle?.id === bundleItem.id) {\n      setCheckedBundle?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n    } else {\n      setCheckedBundle?.(bundleItem)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        bundle: {\n          value: bundleItem,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'bundle')\n        return [...filtered, 'bundle']\n      })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 mid-desktop:grid-cols-1 lg-desktop:mt-4\">\n        {availableBundleList?.map(bundle => {\n          const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n          return (\n            <div key={bundle.id}>\n              <div\n                className={cn(\n                  'flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2',\n                  {\n                    ['border-brand']: checkedBundle?.id === bundle.id,\n                  }\n                )}\n              >\n                <Checkbox\n                  onCheckedChange={() => handleSelectedChange(bundle)}\n                  size=\"lg\"\n                  className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                    'border-brand': checkedBundle?.id === bundle.id,\n                  })}\n                  id={bundle.id}\n                  value={bundle.id}\n                  checked={checkedBundle?.id === bundle.id}\n                />\n                <label htmlFor={bundle.id} className=\"size-full cursor-pointer py-6\">\n                  {bundleVariants?.map(bundleVariant => {\n                    return (\n                      <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n                        <div className=\"flex items-center gap-2\">\n                          <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n                          <Text\n                            className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                            html={bundleVariant.variant.product.title}\n                          />\n                        </div>\n                        <div className=\"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0\">\n                          <Text\n                            className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                            html={formatPrice({\n                              amount: bundleVariant.price,\n                              locale,\n                              currencyCode: bundleVariant.variant.price.currencyCode,\n                            })}\n                          />\n                          {bundleVariant.price < bundleVariant.variant.price.amount && (\n                            <Text\n                              className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                              html={formatPrice({\n                                amount: bundleVariant.variant.price.amount,\n                                locale,\n                                currencyCode: bundleVariant.variant.price.currencyCode,\n                              })}\n                            />\n                          )}\n                        </div>\n                      </div>\n                    )\n                  })}\n                </label>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductBundle)\n"],
+  "mappings": "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",
   "names": ["ProductBundle_exports", "__export", "ProductBundle_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_AiuiProvider", "import_BizProductProvider", "import_utils", "import_Styles", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "savingDetail", "setSavingDetail", "setCheckedExchangePurchase", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "prev", "t", "bundleVariants", "bundleVariant"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var F=(a,t)=>{for(var l in t)s(a,l,{get:t[l],enumerable:!0})},L=(a,t,l,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!B.call(a,c)&&c!==l&&s(a,c,{get:()=>t[c],enumerable:!(d=w(t,c))||d.enumerable});return a};var O=a=>L(s({},"__esModule",{value:!0}),a);var A={};F(A,{default:()=>V});module.exports=O(A);var r=require("react/jsx-runtime"),o=require("../../../../../../components"),n=require("../../../../../../helpers/index.js"),P=require("react"),g=require("../../../../BizProductProvider.js"),m=require("../../../../utils"),k=require("../../../../../AiuiProvider"),v=require("../../../../../../shared/Styles.js");const S=()=>{const{locale:a="us"}=(0,k.useAiuiContext)(),{checkedExchangePurchase:t,exchangePurchase:l,setCheckedBundle:d,setJoinedRecommendBuyProducts:c,setSavingDetail:C,setCheckedExchangePurchase:u,joinedRecommendBuyProducts:p,savingDetail:y,setAddOrder:x}=(0,g.useBizProductContext)(),{title:N,giftList:h=[],freeLabel:R}=l||{},f=(0,P.useMemo)(()=>h?.filter(e=>e.availableForSale),[h]),E=e=>{t?.id===e.id?(u?.(void 0),c?.({...p,exchange:{value:void 0,canOperate:!0}}),C?.({...y,exchangePurchase:0}),x?.(i=>i.filter(b=>b!=="exchange"))):(u?.(e),c?.({...p,exchange:{value:e,canOperate:!1}}),x?.(i=>[...i.filter(D=>D!=="exchange"),"exchange"]))};return f?.length?(0,r.jsxs)("div",{className:"ipc-product-detail-exchange-purchase",children:[(0,r.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:N}),(0,r.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 lg-desktop:mt-4",children:f.map(e=>(0,r.jsxs)("div",{className:(0,n.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":t?.id===e.id}),children:[(0,r.jsx)(o.Checkbox,{onCheckedChange:()=>E(e),size:"lg",className:(0,n.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":t?.id===e.id}),id:e.id,checked:t?.id===e.id,value:e.id}),(0,r.jsxs)("label",{htmlFor:e.id,className:"flex py-6 cursor-pointer justify-between items-center gap-4 w-full",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)(o.Picture,{source:e.image?.url,className:"size-12 flex-shrink-0"}),(0,r.jsx)(o.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),(0,r.jsxs)("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[(0,r.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:e?.finalPrice?.amount||0,locale:a,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),(0,r.jsx)(o.Text,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:(0,m.formatPrice)({amount:e.price.amount,locale:a,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=(0,v.withLayout)(S);
+"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var F=(a,t)=>{for(var d in t)s(a,d,{get:t[d],enumerable:!0})},L=(a,t,d,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!B.call(a,c)&&c!==d&&s(a,c,{get:()=>t[c],enumerable:!(l=w(t,c))||l.enumerable});return a};var O=a=>L(s({},"__esModule",{value:!0}),a);var A={};F(A,{default:()=>V});module.exports=O(A);var r=require("react/jsx-runtime"),o=require("../../../../../../components"),n=require("../../../../../../helpers/index.js"),P=require("react"),g=require("../../../../BizProductProvider.js"),m=require("../../../../utils"),k=require("../../../../../AiuiProvider"),v=require("../../../../../../shared/Styles.js");const S=()=>{const{locale:a="us"}=(0,k.useAiuiContext)(),{checkedExchangePurchase:t,exchangePurchase:d,setCheckedBundle:l,setJoinedRecommendBuyProducts:c,setSavingDetail:C,setCheckedExchangePurchase:u,joinedRecommendBuyProducts:p,savingDetail:y,setAddOrder:x}=(0,g.useBizProductContext)(),{title:N,giftList:h=[],freeLabel:R}=d||{},f=(0,P.useMemo)(()=>h?.filter(e=>e.availableForSale),[h]),E=e=>{t?.id===e.id?(u?.(void 0),c?.({...p,exchange:{value:void 0,canOperate:!0}}),C?.({...y,exchangePurchase:0}),x?.(i=>i.filter(b=>b!=="exchange"))):(u?.(e),c?.({...p,exchange:{value:e,canOperate:!1}}),x?.(i=>[...i.filter(D=>D!=="exchange"),"exchange"]))};return f?.length?(0,r.jsxs)("div",{className:"ipc-product-detail-exchange-purchase",children:[(0,r.jsx)(o.Text,{size:3,className:"font-bold leading-[1.2]",html:N}),(0,r.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mid-desktop:grid-cols-1 mt-3 lg-desktop:mt-4",children:f.map(e=>(0,r.jsxs)("div",{className:(0,n.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":t?.id===e.id}),children:[(0,r.jsx)(o.Checkbox,{onCheckedChange:()=>E(e),size:"lg",className:(0,n.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":t?.id===e.id}),id:e.id,checked:t?.id===e.id,value:e.id}),(0,r.jsxs)("label",{htmlFor:e.id,className:"flex py-6 cursor-pointer justify-between items-center gap-4 w-full",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)(o.Picture,{source:e.image?.url,className:"size-12 flex-shrink-0"}),(0,r.jsx)(o.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),(0,r.jsxs)("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[(0,r.jsx)(o.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:(0,m.formatPrice)({amount:e?.finalPrice?.amount||0,locale:a,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),(0,r.jsx)(o.Text,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:(0,m.formatPrice)({amount:e.price.amount,locale:a,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=(0,v.withLayout)(S);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 lg-desktop:mt-4\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedExchangePurchase?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                'border-brand': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex py-6 cursor-pointer justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text\n                  className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductExchangePurchase)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,wCACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,6CAA8C,CAC1D,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
+  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mid-desktop:grid-cols-1 mt-3 lg-desktop:mt-4\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedExchangePurchase?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                'border-brand': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex py-6 cursor-pointer justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text\n                  className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductExchangePurchase)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,wCACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,yFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,6CAA8C,CAC1D,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
   "names": ["ProductExchangePurchase_exports", "__export", "ProductExchangePurchase_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var l in r)c(o,l,{get:r[l],enumerable:!0})},L=(o,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of B(r))!D.call(o,d)&&d!==l&&c(o,d,{get:()=>r[d],enumerable:!(a=z(r,d))||a.enumerable});return o};var O=o=>L(c({},"__esModule",{value:!0}),o);var S={};F(S,{default:()=>R});module.exports=O(S);var t=require("react/jsx-runtime"),i=require("../../../../../../components"),n=require("../../../../../../helpers/index.js"),h=require("react"),g=require("../../../../BizProductProvider.js"),k=require("../../../../utils"),v=require("../../../../../AiuiProvider"),C=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:o="us"}=(0,v.useAiuiContext)(),{freeGift:r,checkedGift:l,setCheckedGift:a,setCheckedBundle:d,setSavingDetail:N,savingDetail:y,setJoinedRecommendBuyProducts:m,joinedRecommendBuyProducts:p,setAddOrder:f}=(0,g.useBizProductContext)(),{title:P,giftList:u=[],freeLabel:E}=r||{},x=(0,h.useMemo)(()=>u?.filter(e=>e.availableForSale),[u]),G=e=>{l?.id===e.id?(a?.(void 0),N?.({...y,freeGift:0}),m?.({...p,gift:{value:void 0,canOperate:!0}}),f?.(s=>s.filter(b=>b!=="gift"))):(a?.(e),m?.({...p,gift:{value:e,canOperate:!1}}),f?.(s=>[...s.filter(w=>w!=="gift"),"gift"]))};return x?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(i.Text,{size:3,className:"font-bold leading-[1.2]",html:P}),(0,t.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 lg-desktop:mt-4",children:x.map(e=>(0,t.jsxs)("div",{className:(0,n.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(i.Checkbox,{onCheckedChange:()=>G(e),size:"lg",className:(0,n.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex justify-between items-center cursor-pointer gap-4 w-full py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(i.Picture,{source:e.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(i.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[(0,t.jsx)(i.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:E}),(0,t.jsx)(i.Text,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:(0,k.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=(0,C.withLayout)(A);
+"use strict";var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var l in r)c(o,l,{get:r[l],enumerable:!0})},L=(o,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of B(r))!D.call(o,d)&&d!==l&&c(o,d,{get:()=>r[d],enumerable:!(a=z(r,d))||a.enumerable});return o};var O=o=>L(c({},"__esModule",{value:!0}),o);var S={};F(S,{default:()=>R});module.exports=O(S);var t=require("react/jsx-runtime"),i=require("../../../../../../components"),n=require("../../../../../../helpers/index.js"),h=require("react"),g=require("../../../../BizProductProvider.js"),k=require("../../../../utils"),v=require("../../../../../AiuiProvider"),C=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:o="us"}=(0,v.useAiuiContext)(),{freeGift:r,checkedGift:l,setCheckedGift:a,setCheckedBundle:d,setSavingDetail:N,savingDetail:y,setJoinedRecommendBuyProducts:m,joinedRecommendBuyProducts:p,setAddOrder:f}=(0,g.useBizProductContext)(),{title:P,giftList:u=[],freeLabel:E}=r||{},x=(0,h.useMemo)(()=>u?.filter(e=>e.availableForSale),[u]),G=e=>{l?.id===e.id?(a?.(void 0),N?.({...y,freeGift:0}),m?.({...p,gift:{value:void 0,canOperate:!0}}),f?.(s=>s.filter(b=>b!=="gift"))):(a?.(e),m?.({...p,gift:{value:e,canOperate:!1}}),f?.(s=>[...s.filter(w=>w!=="gift"),"gift"]))};return x?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(i.Text,{size:3,className:"font-bold leading-[1.2]",html:P}),(0,t.jsx)("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mid-desktop:grid-cols-1 mt-3 lg-desktop:mt-4",children:x.map(e=>(0,t.jsxs)("div",{className:(0,n.cn)("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(i.Checkbox,{onCheckedChange:()=>G(e),size:"lg",className:(0,n.cn)("rounded-full border-[#E4E5E6] border-[2px]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex justify-between items-center cursor-pointer gap-4 w-full py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(i.Picture,{source:e.image?.url,className:"size-12 flex-shrink-0"}),(0,t.jsx)(i.Text,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[(0,t.jsx)(i.Text,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:E}),(0,t.jsx)(i.Text,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:(0,k.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=(0,C.withLayout)(A);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n    } else {\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'gift')\n        return [...filtered, 'gift']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 lg-desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedGift?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                'border-brand': checkedGift?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center cursor-pointer gap-4 w-full py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,wCACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAIM,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBjB,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,6CAA8C,CAC1D,eAAgBjB,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAMP,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQO,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAe",
+  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n    } else {\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'gift')\n        return [...filtered, 'gift']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mid-desktop:grid-cols-1 mt-3 lg-desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedGift?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#E4E5E6] border-[2px]', {\n                'border-brand': checkedGift?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center cursor-pointer gap-4 w-full py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,wCACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,yFACZ,SAAAG,EAAe,IAAIM,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBjB,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,6CAA8C,CAC1D,eAAgBjB,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAMP,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQO,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAe",
   "names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var g=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},D=(e,o,r,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of k(o))!w.call(e,n)&&n!==r&&g(e,n,{get:()=>o[n],enumerable:!(i=N(o,n))||i.enumerable});return e};var T=e=>D(g({},"__esModule",{value:!0}),e);var I={};C(I,{default:()=>z});module.exports=T(I);var t=require("react/jsx-runtime"),a=require("../../../../../../components"),p=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers"),v=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js");const E=()=>{const{product:e}=(0,v.useBizProductContext)(),[o,r]=(0,s.useState)(!1),i=(0,s.useMemo)(()=>e?.payload?.components?.find(d=>d.componentKey==="ProductHighlight")?.data||{},[e?.payload]),[n,u]=(0,s.useState)(i?.ksp?.[0]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[i?.title&&(0,t.jsx)(a.Text,{size:3,className:"font-bold leading-[1.2]",html:i?.title}),(0,t.jsxs)(a.Dialog,{open:o,onOpenChange:r,children:[(0,t.jsx)(a.DialogTrigger,{asChild:!0,children:(0,t.jsx)(a.Button,{variant:"link",className:"font-bold !p-0 text-base",children:i?.view})}),(0,t.jsx)(H,{ksp:i?.ksp||[],clickActiveKspItem:n})]})]}),(0,t.jsx)("div",{className:"flex flex-wrap gap-4 mt-3 lg-desktop:mt-4",children:i?.ksp?.map(d=>(0,t.jsx)("div",{className:"product-highlight-item px-4 h-[36px] leading-[36px] lg-desktop:h-[38px] lg-desktop:leading-[38px] cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:(0,t.jsx)(a.Text,{size:3,onClick:()=>{u(d),r(!0)},className:"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 overflow-hidden",html:d?.title},d?.title)}))})]})},H=({ksp:e,clickActiveKspItem:o})=>{const r=(0,s.useRef)([]),i=(0,s.useRef)(null),[n,u]=(0,s.useState)(null),d=(0,s.useCallback)(l=>{const f=e.findIndex(m=>m.title===l?.title),c=r.current[f];if(c&&i.current){const m=i.current,h=c,y=h.offsetLeft-m.offsetWidth/2+h.offsetWidth/2;m.scrollTo({left:y,behavior:"smooth"})}},[o,e]);return(0,s.useEffect)(()=>{o&&(u(o),setTimeout(()=>{d(n)},100))},[o,d]),(0,t.jsx)(a.DialogContent,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:(0,t.jsxs)(p.Root,{defaultValue:n?.title,className:"w-full overflow-hidden",children:[e?.map(l=>(0,t.jsx)(p.Content,{value:l.title,children:(0,t.jsx)(a.Picture,{source:`${l?.mobileImg}, ${l?.img} 767`,className:"w-full h-[304px] desktop:h-[480px]",alt:l.img.alt,imgClassName:"object-cover h-full"})},l.title)),(0,t.jsxs)("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:[(0,t.jsx)("div",{ref:i,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"px-4 desktop:px-6 overflow-x-auto",children:(0,t.jsx)("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:(0,t.jsx)(p.List,{className:"flex p-1 w-max",children:e?.map?.((l,f)=>(0,t.jsx)(p.Trigger,{ref:c=>{c&&(r.current[f]=c)},className:(0,x.cn)("lg-desktop:px-7 shrink-0 h-[38px] leading-[38px] rounded-full px-5",l.title===n?.title&&"bg-white"),onClick:()=>{d(l),u(l)},value:l.title,children:(0,t.jsx)(a.Text,{html:l.title,className:"font-bold text-[14px] leading-[1.2]"})},f))})})}),(0,t.jsx)("div",{className:"mt-4 px-4 desktop:px-6",children:e.map(l=>(0,t.jsx)(p.Content,{value:l.title,className:"font-bold text-base desktop:text-[18px]",children:l.description}))})]})]})})};var z=(0,b.withLayout)(E);
+"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(i,l)=>{for(var r in l)f(i,r,{get:l[r],enumerable:!0})},D=(i,l,r,d)=>{if(l&&typeof l=="object"||typeof l=="function")for(let e of N(l))!C.call(i,e)&&e!==r&&f(i,e,{get:()=>l[e],enumerable:!(d=y(l,e))||d.enumerable});return i};var E=i=>D(f({},"__esModule",{value:!0}),i);var L={};T(L,{default:()=>I});module.exports=E(L);var t=require("react/jsx-runtime"),a=require("../../../../../../components"),p=require("@radix-ui/react-tabs"),n=require("react"),h=require("../../../../../../helpers"),x=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js"),k=require("../../../../../../shared/track.js");const H=()=>{const{product:i,variant:l}=(0,x.useBizProductContext)(),[r,d]=(0,n.useState)(!1),e=(0,n.useMemo)(()=>i?.payload?.components?.find(s=>s.componentKey==="ProductHighlight")?.data||{},[i?.payload]),[u,c]=(0,n.useState)(e?.ksp?.[0]),o=(0,n.useCallback)(s=>{(0,k.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${l.sku}`,position:e?.title||"",button_name:s||e?.view||""}})},[e?.title,e?.view,l.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[e?.title&&(0,t.jsx)(a.Text,{size:3,className:"font-bold leading-[1.2]",html:e?.title}),(0,t.jsxs)(a.Dialog,{open:r,onOpenChange:d,children:[(0,t.jsx)(a.DialogTrigger,{asChild:!0,children:(0,t.jsx)(a.Button,{variant:"link",className:"font-bold !p-0 text-base",onClick:()=>o(),children:e?.view})}),(0,t.jsx)(P,{ksp:e?.ksp||[],clickActiveKspItem:u})]})]}),(0,t.jsx)("div",{className:"flex flex-wrap gap-4 mt-3 lg-desktop:mt-4",children:e?.ksp?.map(s=>(0,t.jsx)("div",{className:"product-highlight-item px-4 h-[36px] leading-[36px] lg-desktop:h-[38px] lg-desktop:leading-[38px] cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:(0,t.jsx)(a.Text,{size:3,onClick:()=>{c(s),d(!0),o(s?.title)},className:"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 overflow-hidden",html:s?.title},s?.title)}))})]})},P=({ksp:i,clickActiveKspItem:l})=>{const r=(0,n.useRef)([]),d=(0,n.useRef)(null),[e,u]=(0,n.useState)(null),c=(0,n.useCallback)(o=>{const s=i.findIndex(g=>g.title===o?.title),m=r.current[s];if(m&&d.current){const g=d.current,v=m,w=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:w,behavior:"smooth"})}},[l,i]);return(0,n.useEffect)(()=>{l&&(u(l),setTimeout(()=>{c(e)},100))},[l,c]),(0,t.jsx)(a.DialogContent,{className:"tablet:max-w-[896px] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 max-w-[326px] mx-auto w-full border-none overflow-hidden p-0",children:(0,t.jsxs)(p.Root,{defaultValue:e?.title,className:"w-full overflow-hidden",children:[i?.map(o=>(0,t.jsx)(p.Content,{value:o.title,children:(0,t.jsx)(a.Picture,{source:`${o?.mobileImg}, ${o?.img} 767`,className:"w-full h-[304px] mid-desktop:h-[480px]",alt:o.img.alt,imgClassName:"object-cover h-full"})},o.title)),(0,t.jsxs)("div",{className:"py-4 mid-desktop:py-6 w-full overflow-visible",children:[(0,t.jsx)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"px-4 mid-desktop:px-6 overflow-x-auto",children:(0,t.jsx)("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:(0,t.jsx)(p.List,{className:"flex p-1 w-max",children:i?.map?.((o,s)=>(0,t.jsx)(p.Trigger,{ref:m=>{m&&(r.current[s]=m)},className:(0,h.cn)("lg-desktop:px-7 shrink-0 h-[38px] leading-[38px] rounded-full px-5",o.title===e?.title&&"bg-white"),onClick:()=>{c(o),u(o)},value:o.title,children:(0,t.jsx)(a.Text,{html:o.title,className:"font-bold text-[14px] leading-[1.2]"})},s))})})}),(0,t.jsx)("div",{className:"mt-4 px-4 mid-desktop:px-6",children:i.map(o=>(0,t.jsx)(p.Content,{value:o.title,className:"font-bold text-base mid-desktop:text-[18px]",children:o.description}))})]})]})})};var I=(0,b.withLayout)(H);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductHighlight = () => {\n  const { product } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"font-bold !p-0 text-base\">\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal ksp={productHighlightData?.ksp || []} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 lg-desktop:mt-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div className=\"product-highlight-item px-4 h-[36px] leading-[36px] lg-desktop:h-[38px] lg-desktop:leading-[38px] cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.title}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 overflow-hidden\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg}, ${item?.img} 767`}\n              className=\"w-full h-[304px] desktop:h-[480px]\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"py-4 desktop:py-6 w-full overflow-visible\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"px-4 desktop:px-6 overflow-x-auto\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex p-1 w-max\">\n                {ksp?.map?.((item: any, index: number) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 shrink-0 h-[38px] leading-[38px] rounded-full px-5',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"font-bold text-[14px] leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"mt-4 px-4 desktop:px-6\">\n            {ksp.map(item => (\n              <Content value={item.title} className=\"font-bold text-base desktop:text-[18px]\">\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
-  "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "ProductHighlight", "product", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightModal", "ksp", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
+  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback((buttonName?: string) => {\n    gaTrack({\n      event: 'ga4Event',\n      event_name: 'lp_button',\n      event_parameters: {\n        page_group: `Product Detail Page${variant.sku}`,\n        position: productHighlightData?.title || '',\n        button_name: buttonName || productHighlightData?.view || '',\n      },\n    })\n  }, [productHighlightData?.title, productHighlightData?.view, variant.sku])\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"font-bold !p-0 text-base\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal ksp={productHighlightData?.ksp || []} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 lg-desktop:mt-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div className=\"product-highlight-item px-4 h-[36px] leading-[36px] lg-desktop:h-[38px] lg-desktop:leading-[38px] cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.title}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"font-bold text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 overflow-hidden\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] rounded-xl tablet:rounded-2xl [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:laptop:size-6 max-w-[326px] mx-auto w-full border-none overflow-hidden p-0\">\n      <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg}, ${item?.img} 767`}\n              className=\"w-full h-[304px] mid-desktop:h-[480px]\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"py-4 mid-desktop:py-6 w-full overflow-visible\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"px-4 mid-desktop:px-6 overflow-x-auto\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex p-1 w-max\">\n                {ksp?.map?.((item: any, index: number) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 shrink-0 h-[38px] leading-[38px] rounded-full px-5',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"font-bold text-[14px] leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"mt-4 px-4 mid-desktop:px-6\">\n            {ksp.map(item => (\n              <Content value={item.title} className=\"font-bold text-base mid-desktop:text-[18px]\">\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
+  "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var P=(s,o)=>{for(var n in o)l(s,n,{get:o[n],enumerable:!0})},C=(s,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of _(o))!E.call(s,i)&&i!==n&&l(s,i,{get:()=>o[i],enumerable:!(a=k(o,i))||a.enumerable});return s};var L=s=>C(l({},"__esModule",{value:!0}),s);var B={};P(B,{default:()=>O});module.exports=L(B);var e=require("react/jsx-runtime"),d=require("../../../../../../components"),u=require("../../../../../../helpers/index.js"),p=require("react"),f=require("../../../../BizProductProvider.js"),v=require("../../../../../AiuiProvider/index.js"),g=require("../../../../utils/helper.js"),x=require("../../../../../../shared/Styles.js");const z=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:a}=(0,f.useBizProductContext)(),{storeDomain:i}=(0,v.useAiuiContext)(),[y,N]=(0,p.useState)({});return s.options.length?(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(r=>{const h=r.name.toLowerCase();return["color","colour","couleur"].some(t=>h.includes(t))?(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:"Select Color: "+o[r.name]}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1",children:r.values.map(({label:t},m)=>{const b=`https://${i}/cdn/shop/files/${(0,g.handle)(t)}.png`;return(0,e.jsxs)("div",{className:"relative ipc-product-detail-options-value",children:[(0,e.jsx)("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{n(c=>({...c,[r.name]:t})),a?.({gift:void 0,bundle:void 0})},className:(0,u.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[r.name]===t}),children:!y[t]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(d.Picture,{className:"w-full",source:b,onError:({currentTarget:c})=>{c.onerror=null,N(w=>({...w,[t]:!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)]"})]},t+m)})})]},r.id):(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:r.name}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t})=>(0,e.jsx)("button",{onClick:()=>{n(m=>({...m,[r.name]:t}))},className:(0,u.cn)("w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2",{"border-brand":o[r.name]===t}),children:t},t))})]},r.id)})}):null};var O=(0,x.withLayout)(z);
+"use strict";var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var C=(s,o)=>{for(var n in o)l(s,n,{get:o[n],enumerable:!0})},O=(s,o,n,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of _(o))!E.call(s,i)&&i!==n&&l(s,i,{get:()=>o[i],enumerable:!(d=P(o,i))||d.enumerable});return s};var L=s=>O(l({},"__esModule",{value:!0}),s);var K={};C(K,{default:()=>B});module.exports=L(K);var e=require("react/jsx-runtime"),a=require("../../../../../../components"),p=require("../../../../../../helpers/index.js"),c=require("react"),f=require("../../../../BizProductProvider.js"),v=require("../../../../../AiuiProvider/index.js"),y=require("../../../../utils/helper.js"),g=require("../../../../../../shared/Styles.js");const z=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:d}=(0,f.useBizProductContext)(),{storeDomain:i}=(0,v.useAiuiContext)(),[x,N]=(0,c.useState)({});if(!s.options.length)return null;const h=(0,c.useMemo)(()=>s?.payload?.components?.find(r=>r.componentKey==="ProductOptions")?.data||{},[s?.payload]);return(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(r=>{const b=r.name.toLowerCase();return["color","colour","couleur"].some(t=>b.includes(t))?(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(a.Text,{as:"p",size:3,className:"font-bold leading-[1.2]",html:h?.selectColor+o[r.name]}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1",children:r.values.map(({label:t},m)=>{const w=`https://${i}/cdn/shop/files/${(0,y.handle)(t)}.png`;return(0,e.jsxs)("div",{className:"relative ipc-product-detail-options-value",children:[(0,e.jsx)("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{n(u=>({...u,[r.name]:t})),d?.({gift:void 0,bundle:void 0})},className:(0,p.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[r.name]===t}),children:!x[t]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.Picture,{className:"w-full",source:w,onError:({currentTarget:u})=>{u.onerror=null,N(k=>({...k,[t]:!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)]"})]},t+m)})})]},r.id):(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(a.Text,{as:"p",size:3,className:"font-bold",html:r.name}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t})=>(0,e.jsx)("button",{onClick:()=>{n(m=>({...m,[r.name]:t}))},className:(0,p.cn)("w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2",{"border-brand":o[r.name]===t}),children:t},t))})]},r.id)})})};var B=(0,g.withLayout)(z);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } 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 } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\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 as=\"p\" size={3} className=\"font-bold leading-[1.2]\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1\">\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=\"relative ipc-product-detail-options-value\">\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          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2', {\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"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBc,IAAAI,EAAA,6BAvBdC,EAAsC,wCAEtCC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,OAAKN,EAAQ,QAAQ,UAEnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,0BAA0B,KAAM,iBAAmBR,EAAgBM,EAAO,IAAI,EAAG,KACjH,OAAC,OAAI,UAAU,oDACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,sBAAmB,UAAOM,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBT,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOlB,KAAQ,cAAWU,CAAc",
-  "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", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\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 } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n\n\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\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=\"flex items-center gap-4 mt-4 lg-desktop:mt-5 ml-1\">\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=\"relative ipc-product-detail-options-value\">\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          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-box border-[#E4E5E6] border-2', {\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"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6Bc,IAAAI,EAAA,6BA7BdC,EAAsC,wCAEtCC,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,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,GAAI,CAACN,EAAQ,QAAQ,OAAQ,OAAO,KAGpC,MAAMO,KAAqB,WAAQ,IAC1BP,GAAS,SAAS,YAAY,KAAMQ,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACR,GAAS,OAAO,CAAC,EAErB,SACE,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIS,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,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,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,CAEJ,EAEA,IAAOpB,KAAQ,cAAWU,CAAc",
+  "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"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)d(o,r,{get:t[r],enumerable:!0})},m=(o,t,r,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&d(o,i,{get:()=>t[i],enumerable:!(f=x(t,i))||f.enumerable});return o};var e=(o,t,r)=>(r=o!=null?n(b(o)):{},m(t||!o||!o.__esModule?d(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>m(d({},"__esModule",{value:!0}),o);var k={};B(k,{default:()=>T});module.exports=h(k);var p=require("react/jsx-runtime"),D=require("./ProductBenefitsTabs/index.js"),l=e(require("./ProductHighlight/index.js")),a=e(require("./ProductFreeGift/index.js")),c=e(require("./ProductOptions/index.js")),u=e(require("./ProductBundle/index.js")),s=e(require("./BenefitsTab"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
+"use strict";var n=Object.create;var e=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)e(o,r,{get:t[r],enumerable:!0})},f=(o,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&e(o,i,{get:()=>t[i],enumerable:!(m=x(t,i))||m.enumerable});return o};var d=(o,t,r)=>(r=o!=null?n(b(o)):{},f(t||!o||!o.__esModule?e(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>f(e({},"__esModule",{value:!0}),o);var k={};B(k,{default:()=>T});module.exports=h(k);var p=require("react/jsx-runtime"),D=require("./ProductBenefitsTabs/index.js"),l=d(require("./ProductHighlight/index.js")),a=d(require("./ProductFreeGift/index.js")),c=d(require("./ProductOptions/index.js")),u=d(require("./ProductBundle/index.js")),s=d(require("./BenefitsTab"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 mid-desktop:px-0 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
-  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab'\n\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,4BAGxB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
+  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab'\n\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 mid-desktop:px-0 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,4BAGxB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,sEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
   "names": ["ProductDetail_exports", "__export", "ProductDetail_default", "__toCommonJS", "import_jsx_runtime", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductOptions", "import_ProductBundle", "import_BenefitsTab", "ProductDetail", "props", "BenefitsTab", "ProductHighlight", "ProductOptions", "ProductFreeGift", "ProductBundle"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var ee=Object.create;var V=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var re=(t,a)=>{for(var s in a)V(t,s,{get:a[s],enumerable:!0})},W=(t,a,s,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of le(a))!ie.call(t,n)&&n!==s&&V(t,n,{get:()=>a[n],enumerable:!(h=te(a,n))||h.enumerable});return t};var oe=(t,a,s)=>(s=t!=null?ee(ae(t)):{},W(a||!t||!t.__esModule?V(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>W(V({},"__esModule",{value:!0}),t);var pe={};re(pe,{default:()=>ue});module.exports=se(pe);var e=require("react/jsx-runtime"),$=require("../../../../AiuiProvider/index.js"),N=require("../../../../../components"),l=require("react"),G=require("swiper/react"),g=require("swiper/modules"),T=require("../../../../../helpers/index.js"),E=require("./types.js"),P=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),K=require("../../../hooks/use-variant-media.js"),U=require("./components/SpecsModal.js"),Z=oe(require("./components/CompareModal.js")),q=require("../../../utils/index.js"),J=require("../../../../../shared/Styles.js"),Q=require("../../../../../shared/track.js"),X=require("../../../../../components/index.js");const Y=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ne=()=>{const{copyWriting:t}=(0,$.useAiuiContext)(),{product:a,variant:s,selectedOptions:h}=(0,z.useBizProductContext)(),n=(0,K.useVariantMedia)({product:a,variant:s}),[p,x]=(0,l.useState)(null),M=(0,l.useRef)(null),b=s?.metafields?.component?.custom_media_list;let y,w,A,S;b&&b?.available?(y=b?.product||[],w=b?.scenarios||[],A=b?.keyFeatures||[],S=b?.video||[]):(y=n?.productList,w=n?.sceneList,A=n?.keyFeaturesList,S=n?.videoList);const r=(0,l.useMemo)(()=>[...y,...w,...S],[y,w,S]),m={productList:y,sceneList:w,keyFeaturesList:A,videoList:S},i=(0,l.useMemo)(()=>(a?.payload?.components?.find(d=>d.componentKey==="ProductGallery")?.data||[])?.map(d=>{let F=m[d?.galleries]||[];if(d?.images&&Array.isArray(d.images)&&d.images.length>0){const j=d.images.map(u=>{const I=[];if(u.image_390&&u.image_390.trim()&&I.push(`${u.image_390} 390`),u.image_768&&u.image_768.trim()&&I.push(`${u.image_768} 768`),u.image_1024&&u.image_1024.trim()&&I.push(`${u.image_1024} 1024`),u.image_1440&&u.image_1440.trim()&&I.push(`${u.image_1440} 1440`),u.image_1920&&u.image_1920.trim()&&I.push(`${u.image_1920} 1920`),I.length>0){const H=I.join(", ");return{image:{url:H,altText:d.comment?.content||""},_fromImages:!0,_responsiveSource:H}}return null}).filter(u=>u!==null);j.length>0&&(F=j)}return{...d,galleries:F}}).filter(d=>d.galleries.length>0),[a?.payload,m]),[k,L]=(0,l.useState)(i?.[0]),[f,_]=(0,l.useState)(0),[C,o]=(0,l.useState)(null),v=(0,l.useCallback)(()=>{const c=(f+1)%i.length;_(c),L(i[c]),o(0)},[f,i]),R=(0,l.useCallback)(()=>{const c=f===0?i.length-1:f-1;_(c),L(i[c]);const d=i[c]?.galleries||[];o(d.length-1)},[f,i]);(0,l.useEffect)(()=>{f!=null&&requestAnimationFrame(()=>{M.current?.scrollToTab(f)})},[f]),(0,l.useEffect)(()=>{L(i[0]),_(0)},[s?.id]);const D=(c,d)=>{switch(c?.galleryTabType){case E.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(de,{...c,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(P.Root,{className:"relative",value:k?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:i.map((c,d)=>(0,e.jsx)(P.Content,{className:"h-full",value:c.tabValue,children:D(c,d)},c.tabValue))}),(0,e.jsx)(ce,{ref:M,galleryTabs:i,activeGalleryTab:k,setActiveGalleryTab:L,setActiveTabIndex:_,setTargetSlideIndex:o})]})})},ce=(0,l.forwardRef)((t,a)=>{const{galleryTabs:s,activeGalleryTab:h,setActiveGalleryTab:n,setActiveTabIndex:p,setTargetSlideIndex:x}=t,{product:M}=(0,z.useBizProductContext)(),b=(0,l.useRef)(null),y=(0,l.useRef)(new Map),w=(0,l.useCallback)((r,m,i)=>{n(m),p(i),x(0),A(r)},[n,p,x]),A=(0,l.useCallback)(r=>{if(b.current){const m=b.current,i=r.currentTarget,k=i.offsetLeft-m.offsetWidth/2+i.offsetWidth/2;m.scrollTo({left:k,behavior:"smooth"})}},[]),S=(0,l.useCallback)(r=>{if(b.current&&s[r]){const m=b.current,i=s[r],k=y.current.get(i.tabValue);if(k){const L=k.offsetLeft-m.offsetWidth/2+k.offsetWidth/2;m.scrollTo({left:L,behavior:"smooth"})}}},[s]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:S})),(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(P.List,{ref:b,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:s?.map((r,m)=>(0,e.jsx)(P.Trigger,{ref:i=>{i?y.current.set(r.tabValue,i):y.current.delete(r.tabValue)},className:(0,T.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",r.tabValue===h?.tabValue&&"bg-white"),onClick:i=>w(i,r,m),value:r.tabValue,children:r.tabLabel},r.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:M.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(U.SpecsModal,{})," | ",(0,e.jsx)(Z.default,{})]})})]})}),B=(0,l.forwardRef)((t,a)=>{const{locale:s="us",copyWriting:h}=(0,$.useAiuiContext)(),{variant:n,totalSavings:p}=(0,z.useBizProductContext)(),x=(0,l.useRef)(null),[M,b]=(0,l.useState)(null),[y,w]=(0,l.useState)(!0),[A,S]=(0,l.useState)(!1),[r,m]=(0,l.useState)(null),i=(0,l.useRef)(null),[k,L]=(0,l.useState)(!1),f=(0,l.useMemo)(()=>{if(t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,E.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),_=(0,l.useCallback)(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),C=(0,l.useCallback)(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return(0,l.useEffect)(()=>{r&&t.targetSlideIndex&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{ref:a,className:"h-full",onSwiper:m,onProgress:o=>{w(o.isBeginning),S(o.isEnd)},onTouchEnd:(o,v)=>{o.isBeginning&&o.swipeDirection==="prev"?_():o.isEnd&&o.swipeDirection==="next"&&C()},pagination:{clickable:!0,el:x.current},thumbs:{swiper:M},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,v)=>{const R=`${t.tabValue}-${v}`,D=()=>{(0,Q.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:v+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},c=o?._responsiveSource||o?.image?.url||"";return(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsx)(X.ExposureDetector,{onExposure:D,exposureKey:R,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(N.Picture,{source:c,alt:o?.image?.altText,className:(0,T.cn)("h-full",f),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+v)})}),n.availableForSale&&!!p&&!t.index&&(0,e.jsx)(N.Badge,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${(0,q.formatPrice)({amount:p,currencyCode:n?.price?.currencyCode,locale:s})} ${h?.off}`}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:_,children:(0,e.jsx)(Y,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:C,children:(0,e.jsx)(O,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(G.Swiper,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[g.Navigation,g.Thumbs],children:t?.galleries?.map((o,v)=>(0,e.jsx)(G.SwiperSlide,{className:"!w-auto border border-transparent cursor-pointer [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(N.Picture,{source:o.image?.url,alt:o.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(N.Picture,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"overflow-hidden  max-w-[528px] relative",children:(0,e.jsx)("div",{ref:i,className:(0,T.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(N.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:x,className:"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),de=t=>{const[a,s]=(0,l.useState)(null),h=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),n=(0,l.useCallback)(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return(0,l.useEffect)(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{className:"h-full",onSwiper:s,onTouchEnd:(p,x)=>{p.isBeginning&&p.swipeDirection==="prev"?h():p.isEnd&&p.swipeDirection==="next"&&n()},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((p,x)=>(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+x))}),(0,e.jsx)("div",{className:(0,T.cn)("hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:h,children:(0,e.jsx)(Y,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:n,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ge=t=>(0,e.jsx)("div",{children:"3D View"});var ue=(0,J.withLayout)(ne);
+"use strict";var ee=Object.create;var V=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var re=(t,a)=>{for(var s in a)V(t,s,{get:a[s],enumerable:!0})},W=(t,a,s,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of le(a))!ie.call(t,n)&&n!==s&&V(t,n,{get:()=>a[n],enumerable:!(h=te(a,n))||h.enumerable});return t};var oe=(t,a,s)=>(s=t!=null?ee(ae(t)):{},W(a||!t||!t.__esModule?V(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>W(V({},"__esModule",{value:!0}),t);var pe={};re(pe,{default:()=>ue});module.exports=se(pe);var e=require("react/jsx-runtime"),$=require("../../../../AiuiProvider/index.js"),N=require("../../../../../components"),l=require("react"),G=require("swiper/react"),g=require("swiper/modules"),T=require("../../../../../helpers/index.js"),E=require("./types.js"),P=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),K=require("../../../hooks/use-variant-media.js"),U=require("./components/SpecsModal.js"),Z=oe(require("./components/CompareModal.js")),q=require("../../../utils/index.js"),J=require("../../../../../shared/Styles.js"),Q=require("../../../../../shared/track.js"),X=require("../../../../../components/index.js");const Y=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ne=()=>{const{copyWriting:t}=(0,$.useAiuiContext)(),{product:a,variant:s,selectedOptions:h}=(0,z.useBizProductContext)(),n=(0,K.useVariantMedia)({product:a,variant:s}),[p,x]=(0,l.useState)(null),M=(0,l.useRef)(null),m=s?.metafields?.component?.custom_media_list;let y,w,A,S;m&&m?.available?(y=m?.product||[],w=m?.scenarios||[],A=m?.keyFeatures||[],S=m?.video||[]):(y=n?.productList,w=n?.sceneList,A=n?.keyFeaturesList,S=n?.videoList);const r=(0,l.useMemo)(()=>[...y,...w,...S],[y,w,S]),b={productList:y,sceneList:w,keyFeaturesList:A,videoList:S},i=(0,l.useMemo)(()=>(a?.payload?.components?.find(d=>d.componentKey==="ProductGallery")?.data||[])?.map(d=>{let F=b[d?.galleries]||[];if(d?.images&&Array.isArray(d.images)&&d.images.length>0){const j=d.images.map(u=>{const I=[];if(u.image_390&&u.image_390.trim()&&I.push(`${u.image_390} 390`),u.image_768&&u.image_768.trim()&&I.push(`${u.image_768} 768`),u.image_1024&&u.image_1024.trim()&&I.push(`${u.image_1024} 1024`),u.image_1440&&u.image_1440.trim()&&I.push(`${u.image_1440} 1440`),u.image_1920&&u.image_1920.trim()&&I.push(`${u.image_1920} 1920`),I.length>0){const H=I.join(", ");return{image:{url:H,altText:d.comment?.content||""},_fromImages:!0,_responsiveSource:H}}return null}).filter(u=>u!==null);j.length>0&&(F=j)}return{...d,galleries:F}}).filter(d=>d.galleries.length>0),[a?.payload,b]),[k,L]=(0,l.useState)(i?.[0]),[f,_]=(0,l.useState)(0),[C,o]=(0,l.useState)(null),v=(0,l.useCallback)(()=>{const c=(f+1)%i.length;_(c),L(i[c]),o(0)},[f,i]),R=(0,l.useCallback)(()=>{const c=f===0?i.length-1:f-1;_(c),L(i[c]);const d=i[c]?.galleries||[];o(d.length-1)},[f,i]);(0,l.useEffect)(()=>{f!=null&&requestAnimationFrame(()=>{M.current?.scrollToTab(f)})},[f]),(0,l.useEffect)(()=>{L(i[0]),_(0)},[s?.id]);const D=(c,d)=>{switch(c?.galleryTabType){case E.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});case E.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(de,{...c,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>o(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(P.Root,{className:"relative",value:k?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] mid-desktop:rounded-2xl mid-desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] mid-desktop:relative ",children:i.map((c,d)=>(0,e.jsx)(P.Content,{className:"h-full",value:c.tabValue,children:D(c,d)},c.tabValue))}),(0,e.jsx)(ce,{ref:M,galleryTabs:i,activeGalleryTab:k,setActiveGalleryTab:L,setActiveTabIndex:_,setTargetSlideIndex:o})]})})},ce=(0,l.forwardRef)((t,a)=>{const{galleryTabs:s,activeGalleryTab:h,setActiveGalleryTab:n,setActiveTabIndex:p,setTargetSlideIndex:x}=t,{product:M}=(0,z.useBizProductContext)(),m=(0,l.useRef)(null),y=(0,l.useRef)(new Map),w=(0,l.useCallback)((r,b,i)=>{n(b),p(i),x(0),A(r)},[n,p,x]),A=(0,l.useCallback)(r=>{if(m.current){const b=m.current,i=r.currentTarget,k=i.offsetLeft-b.offsetWidth/2+i.offsetWidth/2;b.scrollTo({left:k,behavior:"smooth"})}},[]),S=(0,l.useCallback)(r=>{if(m.current&&s[r]){const b=m.current,i=s[r],k=y.current.get(i.tabValue);if(k){const L=k.offsetLeft-b.offsetWidth/2+k.offsetWidth/2;b.scrollTo({left:L,behavior:"smooth"})}}},[s]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:S})),(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 mid-desktop:static",children:[(0,e.jsx)(P.List,{ref:m,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 mid-desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:s?.map((r,b)=>(0,e.jsx)(P.Trigger,{ref:i=>{i?y.current.set(r.tabValue,i):y.current.delete(r.tabValue)},className:(0,T.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",r.tabValue===h?.tabValue&&"bg-white"),onClick:i=>w(i,r,b),value:r.tabValue,children:r.tabLabel},r.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:M.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(U.SpecsModal,{})," | ",(0,e.jsx)(Z.default,{})]})})]})}),B=(0,l.forwardRef)((t,a)=>{const{locale:s="us",copyWriting:h}=(0,$.useAiuiContext)(),{variant:n,totalSavings:p}=(0,z.useBizProductContext)(),x=(0,l.useRef)(null),[M,m]=(0,l.useState)(null),[y,w]=(0,l.useState)(!0),[A,S]=(0,l.useState)(!1),[r,b]=(0,l.useState)(null),i=(0,l.useRef)(null),[k,L]=(0,l.useState)(!1),f=(0,l.useMemo)(()=>{if(t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===E.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,E.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),_=(0,l.useCallback)(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),C=(0,l.useCallback)(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return(0,l.useEffect)(()=>{r&&t.targetSlideIndex&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{ref:a,className:"h-full",onSwiper:b,onProgress:o=>{w(o.isBeginning),S(o.isEnd)},onTouchEnd:(o,v)=>{o.isBeginning&&o.swipeDirection==="prev"?_():o.isEnd&&o.swipeDirection==="next"&&C()},pagination:{clickable:!0,el:x.current},thumbs:{swiper:M},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,v)=>{const R=`${t.tabValue}-${v}`,D=()=>{(0,Q.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:v+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},c=o?._responsiveSource||o?.image?.url||"";return(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsx)(X.ExposureDetector,{onExposure:D,exposureKey:R,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(N.Picture,{source:c,alt:o?.image?.altText,className:(0,T.cn)("h-full",f),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+v)})}),n.availableForSale&&!!p&&!t.index&&(0,e.jsx)(N.Badge,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] mid-desktop:left-6 mid-desktop:top-6",children:`${(0,q.formatPrice)({amount:p,currencyCode:n?.price?.currencyCode,locale:s})} ${h?.off}`}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 mid-desktop:left-6 z-10 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:_,children:(0,e.jsx)(Y,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 mid-desktop:right-6 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:C,children:(0,e.jsx)(O,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 mid-desktop:bottom-[20px] mid-desktop:right-6 mid-desktop:left-6",children:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(G.Swiper,{className:"flex items-center justify-between",onSwiper:m,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[g.Navigation,g.Thumbs],children:t?.galleries?.map((o,v)=>(0,e.jsx)(G.SwiperSlide,{className:"!w-auto border border-transparent cursor-pointer [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(N.Picture,{source:o.image?.url,alt:o.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(N.Picture,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"overflow-hidden  max-w-[528px] relative",children:(0,e.jsx)("div",{ref:i,className:(0,T.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(N.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:x,className:"tablet:hidden [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100 [&_.swiper-pagination-bullet]:bg-white text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),de=t=>{const[a,s]=(0,l.useState)(null),h=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),n=(0,l.useCallback)(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return(0,l.useEffect)(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{className:"h-full",onSwiper:s,onTouchEnd:(p,x)=>{p.isBeginning&&p.swipeDirection==="prev"?h():p.isEnd&&p.swipeDirection==="next"&&n()},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((p,x)=>(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+x))}),(0,e.jsx)("div",{className:(0,T.cn)("hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:h,children:(0,e.jsx)(Y,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,T.cn)("hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:n,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ge=t=>(0,e.jsx)("div",{children:"3D View"});var ue=(0,J.withLayout)(ne);
 //# sourceMappingURL=index.js.map