npm - @anker-in/headless-ui - Versions diffs - 1.0.20-alpha.1761817874871 → 1.0.20-alpha.1761830686599 - Mend

@anker-in/headless-ui 1.0.20-alpha.1761817874871 → 1.0.20-alpha.1761830686599

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 (45) hide show

package/dist/esm/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, Button, RadioGroup, RadioGroupItem, 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'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\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      setJoinedRecommendBuyProducts?.({ gift: undefined })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({ gift: value })\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\" html={title} />\n      <div className=\"mt-3 flex flex-col gap-4 desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedGift?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\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 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 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] desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] 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 ProductFreeGift\n"],
-  "mappings": "AAoCM,cAAAA,EAoBQ,QAAAC,MApBR,oBApCN,OAAS,QAAAC,EAAM,WAAAC,EAA6C,YAAAC,MAAgB,+BAC5E,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,MAAe,QACxB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,8BAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIF,EAAe,EACnC,CACJ,SAAAG,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,EAAIV,EAAqB,EACnB,CAAE,MAAAW,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,EAAiBf,EAAQ,IAAMa,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDX,GAAa,KAAOW,EAAM,IAC5BV,IAAiB,MAAS,EAC1BE,IAAgC,CAAE,KAAM,MAAU,CAAC,IAEnDD,IAAmB,MAAS,EAC5BD,IAAiBU,CAAK,EACtBR,IAAgC,CAAE,KAAMQ,CAAM,CAAC,EAEnD,EAEA,OAAKH,GAAgB,OAGnBpB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMgB,EAAO,EAClDlB,EAAC,OAAI,UAAU,wCACZ,SAAAqB,EAAe,IAAII,GAClBxB,EAAC,OAEC,UAAWI,EACT,8FACA,CACG,eAAiBQ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,UAAAzB,EAACI,EAAA,CACC,gBAAiB,IAAMmB,EAAoBE,CAAI,EAC/C,KAAK,KACL,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,EACDxB,EAAC,SAAM,QAASwB,EAAK,GAAI,UAAU,iDACjC,UAAAxB,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQsB,EAAK,OAAO,IAAK,UAAU,wBAAwB,EACpEzB,EAACE,EAAA,CACC,UAAU,wEACV,KAAMuB,EAAK,QAAQ,MACrB,GACF,EACAxB,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,0DAA0D,KAAMkB,EAAW,EAC3FpB,EAACE,EAAA,CACC,UAAU,sFACV,KAAMM,EAAY,CAChB,OAAQiB,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAOC,EAAQhB",
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, 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'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\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      setJoinedRecommendBuyProducts?.({ gift: undefined })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({ gift: value })\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\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedGift?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className=\"rounded-full\"\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 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 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] desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] 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 ProductFreeGift\n"],
+  "mappings": "AAoCM,cAAAA,EAqBQ,QAAAC,MArBR,oBApCN,OAAS,QAAAC,EAAM,WAAAC,EAA6C,YAAAC,MAAgB,+BAC5E,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,MAAe,QACxB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,8BAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIF,EAAe,EACnC,CACJ,SAAAG,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,EAAIV,EAAqB,EACnB,CAAE,MAAAW,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,EAAiBf,EAAQ,IAAMa,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDX,GAAa,KAAOW,EAAM,IAC5BV,IAAiB,MAAS,EAC1BE,IAAgC,CAAE,KAAM,MAAU,CAAC,IAEnDD,IAAmB,MAAS,EAC5BD,IAAiBU,CAAK,EACtBR,IAAgC,CAAE,KAAMQ,CAAM,CAAC,EAEnD,EAEA,OAAKH,GAAgB,OAGnBpB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMgB,EAAO,EAClDlB,EAAC,OAAI,UAAU,kFACZ,SAAAqB,EAAe,IAAII,GAClBxB,EAAC,OAEC,UAAWI,EACT,8FACA,CACG,eAAiBQ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,UAAAzB,EAACI,EAAA,CACC,gBAAiB,IAAMmB,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,EACDxB,EAAC,SAAM,QAASwB,EAAK,GAAI,UAAU,iDACjC,UAAAxB,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQsB,EAAK,OAAO,IAAK,UAAU,wBAAwB,EACpEzB,EAACE,EAAA,CACC,UAAU,wEACV,KAAMuB,EAAK,QAAQ,MACrB,GACF,EACAxB,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,0DAA0D,KAAMkB,EAAW,EAC3FpB,EAACE,EAAA,CACC,UAAU,sFACV,KAAMM,EAAY,CAChB,OAAQiB,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAnCKA,EAAK,EAoCZ,CACD,EACH,GACF,EA/CkC,IAiDtC,EAEA,IAAOC,EAAQhB",
   "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift", "ProductFreeGift_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as c}from"react/jsx-runtime";import{Text as m,Picture as b,Button as k,Dialog as w,DialogContent as y,DialogTrigger as N}from"../../../../../../components";import{Content as x,List as C,Root as D,Trigger as E}from"@radix-ui/react-tabs";import{useEffect as T,useMemo as g,useRef as v,useState as f}from"react";import{cn as H}from"../../../../../../helpers";import{useBizProductContext as L}from"../../../../BizProductProvider.js";const P=()=>{const{product:s,variant:a,isMobile:r}=L(),[p,d]=f(!1),n=g(()=>{const l=a.metafields?.component?.ksp||s.metafields?.component?.ksp;return(r?l?.mobileList:l?.list)?.filter(h=>!!h?.text)},[a.metafields?.component?.ksp,r]),[e,i]=f(n?.[0]),o=g(()=>s?.payload?.components?.find(l=>l.componentKey==="ProductHighlight")?.data||{},[s?.payload]);return n?.length?c("div",{className:"ipc-product-detail-highlight",children:[c("div",{className:"flex items-center justify-between",children:[o?.title&&t(m,{size:3,className:"font-bold",html:o?.title}),c(w,{open:p,onOpenChange:d,children:[t(N,{asChild:!0,children:t(k,{variant:"link",className:"font-bold !p-0 text-base",children:o?.view})}),t(R,{ksp:n,clickActiveKspItem:e})]})]}),t("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:n.map(l=>t("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] rounded-full bg-[#F5F5F7]",children:t(m,{size:3,onClick:()=>{i(l),d(!0)},className:"font-bold  text-[#1D1D1F] text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:l?.text},l?.text)}))})]}):null},R=({ksp:s,clickActiveKspItem:a})=>{const r=v([]),p=v(null),[d,n]=f(null);return T(()=>{a&&(n(a),setTimeout(()=>{const e=s.findIndex(o=>o.text===a?.text),i=r.current[e];if(i&&p.current){const o=p.current,l=i,u=l.offsetLeft-o.offsetWidth/2+l.offsetWidth/2;o.scrollTo({left:u,behavior:"smooth"})}},100))},[a,s]),t(y,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:c(D,{defaultValue:d?.text,className:"w-full overflow-hidden",children:[s.map(e=>t(x,{value:e.text,children:t(b,{source:e.img,className:"w-full h-[304px] desktop:h-[480px]",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.text)),t("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:c("div",{ref:p,className:"px-4 desktop:px-6 overflow-x-auto",children:[t("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t(C,{className:"flex p-1 w-max",children:s.map((e,i)=>t(E,{ref:o=>{o&&(r.current[i]=o)},className:H("lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]",e.text===d?.text&&"bg-white"),onClick:()=>{n(e)},value:e.text,children:t(m,{html:e.text,className:"font-bold text-[14px] leading-tight"})},i))})}),t("div",{className:"mt-4",children:s.map(e=>t(x,{value:e.label,className:"font-bold text-base desktop:text-[18px]",children:e.description}))})]})})]})})};var K=P;export{K as default};
+import{jsx as t,jsxs as c}from"react/jsx-runtime";import{Text as m,Picture as b,Button as k,Dialog as w,DialogContent as y,DialogTrigger as N}from"../../../../../../components";import{Content as x,List as C,Root as D,Trigger as E}from"@radix-ui/react-tabs";import{useEffect as T,useMemo as g,useRef as v,useState as f}from"react";import{cn as H}from"../../../../../../helpers";import{useBizProductContext as L}from"../../../../BizProductProvider.js";const P=()=>{const{product:s,variant:a,isMobile:r}=L(),[p,d]=f(!1),n=g(()=>{const l=a.metafields?.component?.ksp||s.metafields?.component?.ksp;return(r?l?.mobileList:l?.list)?.filter(h=>!!h?.text)},[a.metafields?.component?.ksp,r]),[e,i]=f(n?.[0]),o=g(()=>s?.payload?.components?.find(l=>l.componentKey==="ProductHighlight")?.data||{},[s?.payload]);return n?.length?c("div",{className:"ipc-product-detail-highlight",children:[c("div",{className:"flex items-center justify-between",children:[o?.title&&t(m,{size:3,className:"font-bold",html:o?.title}),c(w,{open:p,onOpenChange:d,children:[t(N,{asChild:!0,children:t(k,{variant:"link",className:"font-bold !p-0 text-base",children:o?.view})}),t(R,{ksp:n,clickActiveKspItem:e})]})]}),t("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:n.map(l=>t("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] rounded-full bg-[#F5F5F7]",children:t(m,{size:3,onClick:()=>{i(l),d(!0)},className:"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:l?.text},l?.text)}))})]}):null},R=({ksp:s,clickActiveKspItem:a})=>{const r=v([]),p=v(null),[d,n]=f(null);return T(()=>{a&&(n(a),setTimeout(()=>{const e=s.findIndex(o=>o.text===a?.text),i=r.current[e];if(i&&p.current){const o=p.current,l=i,u=l.offsetLeft-o.offsetWidth/2+l.offsetWidth/2;o.scrollTo({left:u,behavior:"smooth"})}},100))},[a,s]),t(y,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:c(D,{defaultValue:d?.text,className:"w-full overflow-hidden",children:[s.map(e=>t(x,{value:e.text,children:t(b,{source:e.img,className:"w-full h-[304px] desktop:h-[480px]",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.text)),t("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:c("div",{ref:p,className:"px-4 desktop:px-6 overflow-x-auto",children:[t("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t(C,{className:"flex p-1 w-max",children:s.map((e,i)=>t(E,{ref:o=>{o&&(r.current[i]=o)},className:H("lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]",e.text===d?.text&&"bg-white"),onClick:()=>{n(e)},value:e.text,children:t(m,{html:e.text,className:"font-bold text-[14px] leading-tight"})},i))})}),t("div",{className:"mt-4",children:s.map(e=>t(x,{value:e.label,className:"font-bold text-base desktop:text-[18px]",children:e.description}))})]})})]})})};var K=P;export{K as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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 { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    const ksp_value = variant.metafields?.component?.ksp || product.metafields?.component?.ksp\n    const result = isMobile ? ksp_value?.mobileList : ksp_value?.list\n    return result?.filter((item: any) => !!item?.text)\n  }, [variant.metafields?.component?.ksp, isMobile])\n\n  const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n  const ProductHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  if (!ksp?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\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={ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {ksp.map((item: any) => (\n          <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.text}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.text}\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  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      const curIndex = ksp.findIndex(item => item.text === clickActiveKspItem?.text)\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    }, 100)\n  }, [clickActiveKspItem, ksp])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.text} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.text} key={item.text}>\n            <Picture\n              source={item.img}\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 ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n            <div\n              className=\"w-fit rounded-full bg-[#EAEAEC]\"\n              style={{\n                scrollbarWidth: 'none',\n                msOverflowStyle: 'none',\n              }}\n            >\n              <List className=\"flex p-1 w-max\">\n                {ksp.map((item, index) => (\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 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n                      item.text === activeKspItem?.text && 'bg-white'\n                    )}\n                    onClick={() => {\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.text}\n                  >\n                    <Text html={item.text} className=\"font-bold text-[14px] leading-tight\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n            <div className=\"mt-4\">\n              {ksp.map(item => (\n                <Content value={item.label} className=\"font-bold text-base desktop:text-[18px]\">\n                  {item.description}\n                </Content>\n              ))}\n            </div>\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default ProductHighlight\n"],
-  "mappings": "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",
+  "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 { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    const ksp_value = variant.metafields?.component?.ksp || product.metafields?.component?.ksp\n    const result = isMobile ? ksp_value?.mobileList : ksp_value?.list\n    return result?.filter((item: any) => !!item?.text)\n  }, [variant.metafields?.component?.ksp, isMobile])\n\n  const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n  const ProductHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  if (!ksp?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\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={ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {ksp.map((item: any) => (\n          <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.text}\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 desktop:text-base overflow-hidden\"\n              html={item?.text}\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  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      const curIndex = ksp.findIndex(item => item.text === clickActiveKspItem?.text)\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    }, 100)\n  }, [clickActiveKspItem, ksp])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.text} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.text} key={item.text}>\n            <Picture\n              source={item.img}\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 ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n            <div\n              className=\"w-fit rounded-full bg-[#EAEAEC]\"\n              style={{\n                scrollbarWidth: 'none',\n                msOverflowStyle: 'none',\n              }}\n            >\n              <List className=\"flex p-1 w-max\">\n                {ksp.map((item, index) => (\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 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n                      item.text === activeKspItem?.text && 'bg-white'\n                    )}\n                    onClick={() => {\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.text}\n                  >\n                    <Text html={item.text} className=\"font-bold text-[14px] leading-tight\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n            <div className=\"mt-4\">\n              {ksp.map(item => (\n                <Content value={item.label} className=\"font-bold text-base desktop:text-[18px]\">\n                  {item.description}\n                </Content>\n              ))}\n            </div>\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default ProductHighlight\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "ProductHighlight", "product", "variant", "isMobile", "open", "setOpen", "ksp", "ksp_value", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as ee,jsx as e,jsxs as n}from"react/jsx-runtime";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{Text as $,Picture as T,Badge as j}from"../../../../../components";import{useMemo as V,useState as g,forwardRef as F,useRef as k}from"react";import{Swiper as N,SwiperSlide as L}from"swiper/react";import{Navigation as G,Mousewheel as z,Thumbs as C,Pagination as I}from"swiper/modules";import{cn as b}from"../../../../../helpers/index.js";import{GalleryTabType as R}from"./types.js";import{Content as _,List as W,Root as O,Trigger as H}from"@radix-ui/react-tabs";import{useBizProductContext as P}from"../../../BizProductProvider.js";import{useVariantMedia as Y}from"../../../hooks/use-variant-media.js";import{SpecsModal as Z}from"./components/SpecsModal.js";import K from"./components/CompareModal.js";import{formatPrice as q}from"../../../utils/index.js";const A=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("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"})]}),B=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("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"})]}),J=()=>{const{copyWriting:t}=E(),{product:o,variant:p,isMobile:h}=P(),r=Y({product:o,variant:p}),[c,y]=g(null),i=p?.metafields?.component?.custom_media_list;let s,d,w,f;i&&i?.available?(s=i?.product||[],d=i?.scenarios||[],w=i?.keyFeatures||[],f=i?.video||[]):(s=r?.productList,d=r?.sceneList,w=r?.keyFeaturesList,f=r?.videoList);const M=V(()=>[...s,...d,...f],[s,d,f]),S={productList:s,sceneList:d,keyFeaturesList:w,videoList:f},u=V(()=>(o?.payload?.components?.find(l=>l.componentKey==="ProductGallery")?.data||[])?.map(l=>({...l,galleries:S[l?.galleries]||[]})).filter(l=>l.galleries.length>0),[o?.payload,S]),a=k({}),[v,x]=g(u?.[0]),D=(m,l)=>{switch(m?.galleryTabType){case R.GALLERY_IMAGE:return e(U,{...m,onCurrentTabLoopEnd:()=>{x(u?.[l])},onCurrentTabLoopStart:()=>{x(u?.[l])},index:l});case R.GALLERY_VIDEO:return e(X,{...m});default:return null}};return e("div",{id:"ipc-product-gallery",children:n(O,{className:"relative",defaultValue:u?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:u.map((m,l)=>e(_,{className:"h-full",value:m.tabValue,children:D(m,l)},m.tabValue))}),e(Q,{galleryTabs:u,activeGalleryTab:v,setActiveGalleryTab:x})]})})},Q=({galleryTabs:t,activeGalleryTab:o,setActiveGalleryTab:p})=>{const{product:h}=P(),r=k(null);return n("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:[e(W,{ref:r,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map(c=>e(H,{className:b("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",c.tabValue===o?.tabValue&&"bg-white"),onClick:y=>{if(p(c),r.current){const i=r.current,s=y.currentTarget,d=s.offsetLeft-i.offsetWidth/2+s.offsetWidth/2;i.scrollTo({left:d,behavior:"smooth"})}},value:c.tabValue,children:c.tabLabel},c.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:h.metafields?.global?.specifications&&n(ee,{children:[e(Z,{})," | ",e(K,{})]})})]})},U=F((t,o)=>{const{locale:p="us",copyWriting:h}=E(),{variant:r,totalSavings:c}=P(),y=k(null),[i,s]=g(null),[d,w]=g(!0),[f,M]=g(!1),[S,u]=g(null);return n("div",{className:b("h-full","[&_.swiper-button]:hover:opacity-100"),children:[e(N,{ref:o,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:u,onProgress:a=>{w(a.isBeginning),M(a.isEnd)},pagination:{clickable:!0,el:y.current},onSlideChange:a=>{a&&(a.isEnd?t?.onCurrentTabLoopEnd?.():a.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:i},modules:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((a,v)=>e(L,{className:"h-full",children:e(T,{source:a?.image?.url,alt:a?.image?.altText,className:"h-full",imgClassName:"object-contain h-full "})},t?.id+"SwiperSlideItem"+v))}),r.availableForSale&&!!c&&!t.index&&e(j,{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:`${q({amount:c,currencyCode:r?.price?.currencyCode,locale:p})} ${h?.off}`}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`,"swiper-button"),children:e(A,{className:b("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`,"swiper-button"),children:e(B,{className:b("tablet:size-10 lg-desktop:size-12")})}),n("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:[e("div",{className:"hidden tablet:block",children:e(N,{className:"flex items-center justify-between",onSwiper:s,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[G,C],children:t?.galleries?.map((a,v)=>e(L,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand",children:e(T,{source:a.image?.url,alt:a.image?.altText,className:"size-10 lg-desktop:size-12 rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&n("div",{className:"flex items-center gap-2",children:[e(T,{source:t?.comment?.avatar?.url,className:"size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e($,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2"})]})]}),e("div",{ref:y,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),X=t=>n("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(N,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,p)=>e(L,{className:"h-full",children:n("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:o?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:o?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:o?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+p))}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:e(A,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:e(B,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ye=t=>e("div",{children:"3D View"});var we=J;export{we as default};
+import{Fragment as ee,jsx as e,jsxs as n}from"react/jsx-runtime";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{Text as $,Picture as T,Badge as j}from"../../../../../components";import{useMemo as V,useState as g,forwardRef as F,useRef as k}from"react";import{Swiper as N,SwiperSlide as L}from"swiper/react";import{Navigation as G,Mousewheel as z,Thumbs as C,Pagination as I}from"swiper/modules";import{cn as b}from"../../../../../helpers/index.js";import{GalleryTabType as R}from"./types.js";import{Content as _,List as W,Root as O,Trigger as H}from"@radix-ui/react-tabs";import{useBizProductContext as P}from"../../../BizProductProvider.js";import{useVariantMedia as Y}from"../../../hooks/use-variant-media.js";import{SpecsModal as Z}from"./components/SpecsModal.js";import K from"./components/CompareModal.js";import{formatPrice as q}from"../../../utils/index.js";const A=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("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"})]}),B=t=>n("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("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"})]}),J=()=>{const{copyWriting:t}=E(),{product:o,variant:p,isMobile:h}=P(),r=Y({product:o,variant:p}),[c,y]=g(null),i=p?.metafields?.component?.custom_media_list;let s,d,w,f;i&&i?.available?(s=i?.product||[],d=i?.scenarios||[],w=i?.keyFeatures||[],f=i?.video||[]):(s=r?.productList,d=r?.sceneList,w=r?.keyFeaturesList,f=r?.videoList);const M=V(()=>[...s,...d,...f],[s,d,f]),S={productList:s,sceneList:d,keyFeaturesList:w,videoList:f},u=V(()=>(o?.payload?.components?.find(l=>l.componentKey==="ProductGallery")?.data||[])?.map(l=>({...l,galleries:S[l?.galleries]||[]})).filter(l=>l.galleries.length>0),[o?.payload,S]),a=k({}),[v,x]=g(u?.[0]),D=(m,l)=>{switch(m?.galleryTabType){case R.GALLERY_IMAGE:return e(U,{...m,onCurrentTabLoopEnd:()=>{x(u?.[l])},onCurrentTabLoopStart:()=>{x(u?.[l])},index:l});case R.GALLERY_VIDEO:return e(X,{...m});default:return null}};return e("div",{id:"ipc-product-gallery",children:n(O,{className:"relative",defaultValue:u?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:u.map((m,l)=>e(_,{className:"h-full",value:m.tabValue,children:D(m,l)},m.tabValue))}),e(Q,{galleryTabs:u,activeGalleryTab:v,setActiveGalleryTab:x})]})})},Q=({galleryTabs:t,activeGalleryTab:o,setActiveGalleryTab:p})=>{const{product:h}=P(),r=k(null);return n("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:[e(W,{ref:r,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map(c=>e(H,{className:b("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",c.tabValue===o?.tabValue&&"bg-white"),onClick:y=>{if(p(c),r.current){const i=r.current,s=y.currentTarget,d=s.offsetLeft-i.offsetWidth/2+s.offsetWidth/2;i.scrollTo({left:d,behavior:"smooth"})}},value:c.tabValue,children:c.tabLabel},c.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:h.metafields?.global?.specifications&&n(ee,{children:[e(Z,{})," | ",e(K,{})]})})]})},U=F((t,o)=>{const{locale:p="us",copyWriting:h}=E(),{variant:r,totalSavings:c}=P(),y=k(null),[i,s]=g(null),[d,w]=g(!0),[f,M]=g(!1),[S,u]=g(null);return n("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(N,{ref:o,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:u,onProgress:a=>{w(a.isBeginning),M(a.isEnd)},pagination:{clickable:!0,el:y.current},onSlideChange:a=>{a&&(a.isEnd?t?.onCurrentTabLoopEnd?.():a.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:i},modules:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((a,v)=>e(L,{className:"h-full",children:e(T,{source:a?.image?.url,alt:a?.image?.altText,className:"h-full",imgClassName:"object-contain"})},t?.id+"SwiperSlideItem"+v))}),r.availableForSale&&!!c&&!t.index&&e(j,{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:`${q({amount:c,currencyCode:r?.price?.currencyCode,locale:p})} ${h?.off}`}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`,"swiper-button"),children:e(A,{className:b("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`,"swiper-button"),children:e(B,{className:b("tablet:size-10 lg-desktop:size-12")})}),n("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:[e("div",{className:"hidden tablet:block",children:e(N,{className:"flex items-center justify-between",onSwiper:s,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[G,C],children:t?.galleries?.map((a,v)=>e(L,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand",children:e(T,{source:a.image?.url,alt:a.image?.altText,className:"size-10 lg-desktop:size-12 rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&n("div",{className:"flex items-center gap-2",children:[e(T,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e($,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2"})]})]}),e("div",{ref:y,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),X=t=>n("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(N,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[z,C,G,I],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,p)=>e(L,{className:"h-full",children:n("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:o?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:o?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:o?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+p))}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:e(A,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:b("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:e(B,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ye=t=>e("div",{children:"3D View"});var we=J;export{we as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, isMobile } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\n\n  // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n  const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            onCurrentTabLoopEnd={() => {\n              setActiveGalleryTab(galleryTabs?.[index])\n            }}\n            onCurrentTabLoopStart={() => {\n              setActiveGalleryTab(galleryTabs?.[index])\n            }}\n            index={index}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return <ProductGalleryTabVideo {...tab} />\n      // case GalleryTabType.GALLERY_3D_VIEW:\n      //   return <ProductGalleryTab3DView {...item} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n        {/* <Swiper\n          className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n          onSwiper={setSwiper}\n          loop={true}\n          // onProgress={swiper => {\n          //   setStart(swiper.isBeginning)\n          //   setEnd(swiper.isEnd)\n          // }}\n          modules={[Mousewheel]}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n        >\n          {galleryTabs.map((item, index) => {\n            return (\n              <Content forceMount key={item.tabValue} value={item.tabValue}>\n                <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n              </Content>\n            )\n          })}\n        </Swiper>\n        <div\n          className={cn(\n            'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-prev`\n          )}\n        >\n          <SwiperLeftButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slidePrev()\n              }\n            }}\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-next`\n          )}\n        >\n          <SwiperRightButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slideNext()\n              }\n            }}\n          />\n        </div> */}\n        <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n}) => {\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <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\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map(item => {\n            return (\n              <Trigger\n                className={cn(\n                  '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',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={(el) => {\n                  setActiveGalleryTab(item)\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.currentTarget\n                    const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n                    container.scrollTo({\n                      left: scrollLeft,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  return (\n    <div className={cn('h-full', `[&_.swiper-button]:hover:opacity-100`)}>\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        navigation={{\n          nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        onSlideChange={swiper => {\n          if (swiper) {\n            if (swiper.isEnd) {\n              props?.onCurrentTabLoopEnd?.()\n            } else if (swiper.isBeginning) {\n              props?.onCurrentTabLoopStart?.()\n            }\n          }\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className=\"h-full\"\n                imgClassName=\"object-contain h-full \"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <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\">\n        <div className=\"hidden tablet:block\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <Text\n              html={props?.comment?.content}\n              className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#6D6D6F] line-clamp-2\"\n            />\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        navigation={{\n          nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
-  "mappings": "AA8BI,OA6NM,YAAAA,GA5NJ,OAAAC,EADF,QAAAC,MAAA,oBA9BJ,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,QAAAC,EAAM,WAAAC,EAAiB,SAAAC,MAAa,4BAC7C,OAEE,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,UAAAC,MAKK,QACP,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,cAAAC,EAAY,cAAAC,EAAY,UAAAC,EAAQ,cAAAC,MAAkB,iBAC3D,OAAS,MAAAC,MAAU,kCACnB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,mBAAAC,MAAuB,sCAChC,OAAS,cAAAC,MAAkB,6BAC3B,OAAOC,MAAkB,+BACzB,OAAS,eAAAC,MAAmB,0BAM5B,MAAMC,EAAwBC,GAE1B3B,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAG2B,EACjG,UAAA5B,EAAC,QAAK,EAAE,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,qBAAqB,KAAK,QAAQ,EAC/FA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIE6B,EAAyBD,GAE3B3B,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAG2B,EACjG,UAAA5B,EAAC,QAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,8CAA8C,KAAK,QAAQ,EAC1GA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIE8B,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,CAAY,EAAI7B,EAAe,EACjC,CAAE,QAAA8B,EAAS,QAAAC,EAAS,SAAAC,CAAS,EAAIZ,EAAqB,EACtDa,EAAmBZ,EAAgB,CAAE,QAAAS,EAAS,QAAAC,CAAQ,CAAC,EACvD,CAACG,EAAQC,CAAS,EAAI9B,EAA4B,IAAI,EAEtD+B,EAAkBL,GAAS,YAAY,WAAW,kBACxD,IAAIM,EAA2BC,EAAyBC,EAA+BC,EAEnFJ,GAAmBA,GAAiB,WACtCC,EAAcD,GAAiB,SAAW,CAAC,EAC3CE,EAAYF,GAAiB,WAAa,CAAC,EAC3CG,EAAkBH,GAAiB,aAAe,CAAC,EACnDI,EAAYJ,GAAiB,OAAS,CAAC,IAEvCC,EAAcJ,GAAkB,YAChCK,EAAYL,GAAkB,UAC9BM,EAAkBN,GAAkB,gBACpCO,EAAYP,GAAkB,WAGhC,MAAMQ,EAAWrC,EAAQ,IAAM,CAAC,GAAGiC,EAAa,GAAGC,EAAW,GAAGE,CAAS,EAAG,CAACH,EAAaC,EAAWE,CAAS,CAAC,EAE1GE,EAA0D,CAC9D,YAAaL,EACb,UAAWC,EACX,gBAAiBC,EACjB,UAAWC,CACb,EAEMG,EAAcvC,EAAQ,KAExB0B,GAAS,SAAS,YAAY,KAAMc,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,IAGlG,IAAKA,IAAe,CACpB,GAAGA,EACH,UAAWF,EAAWE,GAAM,SAAS,GAAK,CAAC,CAC7C,EAAE,EACD,OAAQA,GAAcA,EAAK,UAAU,OAAS,CAAC,EACjD,CAACd,GAAS,QAASY,CAAU,CAAC,EAG3BG,EAAoBtC,EAA4C,CAAC,CAAC,EAElE,CAACuC,EAAkBC,CAAmB,EAAI1C,EAA8BsC,IAAc,CAAC,CAAC,EAGxFK,EAAsB,CAACC,EAAUC,IAAkB,CACvD,OAAQD,GAAK,eAAgB,CAC3B,KAAKlC,EAAe,cAClB,OACEjB,EAACqD,EAAA,CACE,GAAGF,EACJ,oBAAqB,IAAM,CACzBF,EAAoBJ,IAAcO,CAAK,CAAC,CAC1C,EACA,sBAAuB,IAAM,CAC3BH,EAAoBJ,IAAcO,CAAK,CAAC,CAC1C,EACA,MAAOA,EACT,EAEJ,KAAKnC,EAAe,cAClB,OAAOjB,EAACsD,EAAA,CAAwB,GAAGH,EAAK,EAG1C,QACE,OAAO,IACX,CACF,EAEA,OACEnD,EAAC,OAAI,GAAG,sBACN,SAAAC,EAACmB,EAAA,CAAK,UAAU,WAAW,aAAcyB,IAAc,CAAC,GAAG,SAsDzD,UAAA7C,EAAC,OAAI,UAAU,uIACZ,SAAA6C,EAAY,IAAI,CAACC,EAAWM,IAEzBpD,EAACkB,EAAA,CAA4B,UAAU,SAAS,MAAO4B,EAAK,SACzD,SAAAI,EAAoBJ,EAAMM,CAAK,GADpBN,EAAK,QAEnB,CAEH,EACH,EACA9C,EAACuD,EAAA,CACC,YAAaV,EACb,iBAAkBG,EAClB,oBAAqBC,EACvB,GACF,EACF,CAEJ,EAEMM,EAAoB,CAAC,CACzB,YAAAV,EACA,iBAAAG,EACA,oBAAAC,CACF,IAIM,CACJ,KAAM,CAAE,QAAAjB,CAAQ,EAAIV,EAAqB,EACnCkC,EAAqB/C,EAAuB,IAAI,EACtD,OACER,EAAC,OAAI,UAAU,qIACb,UAAAD,EAACmB,EAAA,CACC,IAAKqC,EACL,UAAU,uEACV,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EAEA,SAAAxD,EAAC,OAAI,UAAU,oBACZ,SAAA6C,GAAa,IAAIC,GAEd9C,EAACqB,EAAA,CACC,UAAWL,EACT,6JACA8B,EAAK,WAAaE,GAAkB,UAAY,UAClD,EACA,QAAUS,GAAO,CAEf,GADAR,EAAoBH,CAAI,EACpBU,EAAmB,QAAS,CAC9B,MAAME,EAAYF,EAAmB,QAC/BG,EAASF,EAAG,cACZG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EACxFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAEA,MAAOd,EAAK,SAEX,SAAAA,EAAK,UAHDA,EAAK,QAIZ,CAEH,EACH,EACF,EACA9C,EAAC,OAAI,UAAU,kCACZ,SAAAgC,EAAQ,YAAY,QAAQ,gBAC3B/B,EAAAF,GAAA,CACE,UAAAC,EAACwB,EAAA,EAAW,EAAE,MAAGxB,EAACyB,EAAA,EAAa,GACjC,EAEJ,GACF,CAEJ,EAEM4B,EAAyB7C,EAAkD,CAACoB,EAAOiC,IAAQ,CAC/F,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAA/B,CAAY,EAAI7B,EAAe,EAChD,CAAE,QAAA+B,EAAS,aAAA8B,CAAa,EAAIzC,EAAqB,EACjD0C,EAAgBvD,EAAuB,IAAI,EAC3C,CAACwD,EAAcC,CAAe,EAAI3D,EAA4B,IAAI,EAClE,CAAC4D,EAASC,CAAQ,EAAI7D,EAAS,EAAI,EACnC,CAAC8D,EAAOC,CAAM,EAAI/D,EAAS,EAAK,EAChC,CAAC6B,EAAQC,CAAS,EAAI9B,EAA4B,IAAI,EAE5D,OACEN,EAAC,OAAI,UAAWe,EAAG,SAAU,sCAAsC,EACjE,UAAAhB,EAACU,EAAA,CACC,IAAKmD,EACL,UAAU,SACV,WAAY,CACV,OAAQ,wBAAwBjC,GAAO,EAAE,6BACzC,OAAQ,wBAAwBA,GAAO,EAAE,4BAC3C,EACA,SAAUS,EACV,WAAYD,GAAU,CACpBgC,EAAShC,EAAO,WAAW,EAC3BkC,EAAOlC,EAAO,KAAK,CACrB,EACA,WAAY,CACV,UAAW,GACX,GAAI4B,EAAc,OACpB,EACA,cAAe5B,GAAU,CACnBA,IACEA,EAAO,MACTR,GAAO,sBAAsB,EACpBQ,EAAO,aAChBR,GAAO,wBAAwB,EAGrC,EACA,OAAQ,CAAE,OAAQqC,CAAa,EAC/B,QAAS,CAACpD,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAa,GAAO,WAAW,IAAI,CAACkB,EAAMyB,IAE1BvE,EAACW,EAAA,CAAY,UAAU,SACrB,SAAAX,EAACI,EAAA,CACC,OAAQ0C,GAAM,OAAO,IACrB,IAAKA,GAAM,OAAO,QAClB,UAAU,SACV,aAAa,yBACf,GANmClB,GAAO,GAAK,kBAAoB2C,CAOrE,CAEH,EACH,EACCtC,EAAQ,kBAAoB,CAAC,CAAC8B,GAAgB,CAACnC,EAAM,OACpD5B,EAACK,EAAA,CACC,KAAK,KACL,UAAU,2GAET,YAAGqB,EAAY,CACd,OAAQqC,EACR,aAAc9B,GAAS,OAAO,aAC9B,OAAQ6B,CACV,CAAC,CAAC,IAAI/B,GAAa,GAAG,GACxB,EAEF/B,EAAC,OACC,UAAWgB,EACT,uJACA,uBAAuBY,GAAO,EAAE,6BAChC,eACF,EAEA,SAAA5B,EAAC2B,EAAA,CAAqB,UAAWX,EAAG,mCAAmC,EAAG,EAC5E,EACAhB,EAAC,OACC,UAAWgB,EACT,0JACA,uBAAuBY,GAAO,EAAE,6BAChC,eACF,EAEA,SAAA5B,EAAC6B,EAAA,CAAsB,UAAWb,EAAG,mCAAmC,EAAG,EAC7E,EAYAf,EAAC,OAAI,UAAU,+LACb,UAAAD,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACU,EAAA,CACC,UAAU,oCACV,SAAUwD,EACV,aAAc,GACd,cAAe,EACf,SAAU,GACV,oBAAqB,GACrB,QAAS,CAACtD,EAAYE,CAAM,EAE3B,SAAAc,GAAO,WAAW,IAAI,CAACkB,EAAMyB,IAC5BvE,EAACW,EAAA,CAEC,UAAU,0FAEV,SAAAX,EAACI,EAAA,CACC,OAAQ0C,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,QACjB,UAAU,qCACV,aAAa,wBACf,GARKlB,GAAO,GAAK,uBAAyB2C,CAS5C,CACD,EACH,EACF,EACC,CAAC3C,GAAO,OACP3B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CACC,OAAQwB,GAAO,SAAS,QAAQ,IAChC,UAAU,gCACV,aAAa,gBACf,EACA5B,EAACG,EAAA,CACC,KAAMyB,GAAO,SAAS,QACtB,UAAU,mFACZ,GACF,GAEJ,EACA5B,EAAC,OAAI,IAAKgE,EAAe,UAAU,wEAAwE,GAC7G,CAEJ,CAAC,EAEKV,EAA0B1B,GAE5B3B,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACU,EAAA,CACC,UAAU,SACV,WAAY,CACV,OAAQ,wBAAwBkB,GAAO,EAAE,6BACzC,OAAQ,wBAAwBA,GAAO,EAAE,4BAC3C,EACA,QAAS,CAACf,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAa,GAAO,WAAW,IAAI,CAACkB,EAAMyB,IAE1BvE,EAACW,EAAA,CAAY,UAAU,SACrB,SAAAV,EAAC,SAAM,SAAQ,GAAC,UAAU,YACxB,UAAAD,EAAC,SAAM,KAAK,WAAW,EACvBA,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,EACvD9C,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,aAAa,EACxD9C,EAAC,UAAO,IAAK8C,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,GACzD,GANmClB,GAAO,GAAK,kBAAoB2C,CAOrE,CAEH,EACH,EACAvE,EAAC,OACC,UAAWgB,EACT,uIACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC2B,EAAA,CAAqB,UAAU,oCAAoC,EACtE,EACA3B,EAAC,OACC,UAAWgB,EACT,wIACA,uBAAuBY,GAAO,EAAE,4BAClC,EAEA,SAAA5B,EAAC6B,EAAA,CAAsB,UAAU,oCAAoC,EACvE,GACF,EAIE2C,GAA2B5C,GACxB5B,EAAC,OAAI,mBAAO,EAGrB,IAAOyE,GAAQ3C",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, isMobile } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\n\n  // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n  const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            onCurrentTabLoopEnd={() => {\n              setActiveGalleryTab(galleryTabs?.[index])\n            }}\n            onCurrentTabLoopStart={() => {\n              setActiveGalleryTab(galleryTabs?.[index])\n            }}\n            index={index}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return <ProductGalleryTabVideo {...tab} />\n      // case GalleryTabType.GALLERY_3D_VIEW:\n      //   return <ProductGalleryTab3DView {...item} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n        {/* <Swiper\n          className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n          onSwiper={setSwiper}\n          loop={true}\n          // onProgress={swiper => {\n          //   setStart(swiper.isBeginning)\n          //   setEnd(swiper.isEnd)\n          // }}\n          modules={[Mousewheel]}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n        >\n          {galleryTabs.map((item, index) => {\n            return (\n              <Content forceMount key={item.tabValue} value={item.tabValue}>\n                <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n              </Content>\n            )\n          })}\n        </Swiper>\n        <div\n          className={cn(\n            'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-prev`\n          )}\n        >\n          <SwiperLeftButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slidePrev()\n              }\n            }}\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-next`\n          )}\n        >\n          <SwiperRightButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slideNext()\n              }\n            }}\n          />\n        </div> */}\n        <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n}) => {\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <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\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map(item => {\n            return (\n              <Trigger\n                className={cn(\n                  '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',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={(el) => {\n                  setActiveGalleryTab(item)\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.currentTarget\n                    const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n                    container.scrollTo({\n                      left: scrollLeft,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        navigation={{\n          nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        onSlideChange={swiper => {\n          if (swiper) {\n            if (swiper.isEnd) {\n              props?.onCurrentTabLoopEnd?.()\n            } else if (swiper.isBeginning) {\n              props?.onCurrentTabLoopStart?.()\n            }\n          }\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className=\"h-full\"\n                imgClassName=\"object-contain\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <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\">\n        <div className=\"hidden tablet:block\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <Text\n              html={props?.comment?.content}\n              className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2\"\n            />\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        navigation={{\n          nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          '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',\n          `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useMemo", "useState", "forwardRef", "useRef", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "isMobile", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "gallerySwiperRefs", "activeGalleryTab", "setActiveGalleryTab", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as a}from"react/jsx-runtime";import{Grid as s,GridItem as t}from"../../../../components";const c=({BoxLeftGallery:e,BoxRightDetail:p,BoxBottomSummary:d})=>a("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(s,{className:"laptop:gap-6 gap-8",children:[o(t,{className:"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:e}),o(t,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:p})]}),d]});var r=c;export{r as default};
+import{jsx as o,jsxs as a}from"react/jsx-runtime";import{Grid as s,GridItem as t}from"../../../../components";const c=({BoxLeftGallery:e,BoxRightDetail:p,BoxBottomSummary:d})=>a("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(s,{className:"laptop:gap-6 gap-8",children:[o(t,{className:"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:e}),o(t,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:p})]}),d]});var r=c;export{r as default};
 //# sourceMappingURL=ProductGridBox.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/ProductCard/ProductGridBox.tsx"],
-  "sourcesContent": ["import { Grid, GridItem } from '../../../../components'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop:gap-6 gap-8\">\n        <GridItem className=\"col-span-12 tablet:px-8 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"col-span-12 desktop:col-start-9 desktop:col-span-4\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
-  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,yBAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,qBACd,UAAAF,EAACG,EAAA,CAAS,UAAU,sHACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,qDAAsD,SAAAG,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
+  "sourcesContent": ["import { Grid, GridItem } from '../../../../components'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop:gap-6 gap-8\">\n        <GridItem className=\"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"col-span-12 desktop:col-start-9 desktop:col-span-4\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
+  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,yBAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,qBACd,UAAAF,EAACG,EAAA,CAAS,UAAU,0GACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,qDAAsD,SAAAG,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
   "names": ["jsx", "jsxs", "Grid", "GridItem", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary", "ProductGridBox_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as s,Button as g,Grid as I,GridItem as G,Picture as N,Heading as L}from"../../../../../components";import{useBizProductContext as y}from"../../../BizProductProvider";import{useEffect as R,useMemo as A,useState as O}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as C}from"../../../../AiuiProvider";import{cn as F}from"../../../../../helpers";import V from"decimal.js";const S=({})=>{const{locale:d="us",copyWriting:a}=C(),{product:l,variant:i,finalPrice:p,comparePrice:m,coupon:n,selectedOptions:r,onAddToCart:k,onBuyNow:h,savingDetail:b,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:u}=y();if(!i.availableForSale)return null;const{bundleVariant:B,giftVariant:w}=$()||{},[c,v]=O();R(()=>{v({bundle:o.bundle?void 0:B,gift:o.gift?void 0:w})},[B,w,o]);const D=A(()=>new V(m).minus(b.freeGift).toNumber(),[m,b]);return e("div",{className:"ipc-product-summary bg-[#F5F5F7] mt-16 laptop:rounded-2xl",children:t(I,{className:"px-4 py-6 tablet:p-8",children:[t(G,{className:"col-span-12 desktop:col-start-1 desktop:col-span-5",children:[e(L,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${l.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"aspect-[644/320]",children:e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-contain h-full"})})]}),t(G,{className:"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between",children:[t("div",{children:[t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"shrink-0 flex items-center gap-4",children:[e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r.color||r.colour||r.couleur}`})]})]}),t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:p,currencyCode:i.price.currencyCode,locale:d})}),n&&e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})})]})]}),o?.gift&&e(z,{giftOperation:x=>{u?.({...o,gift:void 0}),v?.({...c,gift:x})},giftStatus:!!o?.gift,gift:o?.gift}),o?.bundle&&e(j,{bundleOperation:x=>{u?.({...o,bundle:void 0}),v?.({...c,bundle:x})},bundleStatus:!!o?.bundle,bundleListItem:o?.bundle})]}),(c?.bundle||c?.gift)&&t("div",{className:"mt-6",children:[e(s,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),t("div",{className:"flex flex-col gap-6 mt-6",children:[c?.gift&&e(z,{giftOperation:x=>{u?.({gift:x}),v?.({...c,gift:void 0})},giftStatus:!c?.gift,gift:c?.gift}),c?.bundle&&e(j,{bundleOperation:x=>{u?.({bundle:x}),v?.({...c,bundle:void 0})},bundleStatus:!c?.bundle,bundleListItem:c?.bundle})]})]})]}),t("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${a?.totalPrice} ${f({amount:p,currencyCode:i.price.currencyCode,locale:d})}`}),n&&e(s,{className:"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})}),t("div",{className:"flex gap-3 mt-2",children:[e(g,{size:"lg",variant:"secondary",className:"w-1/2",onClick:()=>k?.(),children:a?.addToCart}),e(g,{size:"lg",variant:"primary",className:"w-1/2",onClick:()=>h?.(),children:a?.shopNow})]})]})]})]})})},$=()=>{const{bundle:d,variant:a,checkedBundle:l,freeGift:i,checkedGift:p}=y();let m,n;const{bundleList:r}=d||{},{giftList:k=[]}=i||{},h=r?.filter(u=>u.variants.slice(1,u.variants.length).every(P=>P.variant.availableForSale))||[],[b]=h;m=l||b;const[o]=k?.filter(u=>u.availableForSale);return n=p||o,{bundleVariant:m,giftVariant:n}},j=({bundleOperation:d,bundleStatus:a,bundleListItem:l})=>{const{locale:i="us"}=C(),{variant:p,setCheckedBundle:m}=y(),n=l?.variants.filter(r=>r.variant.sku!==p.sku);return t("div",{className:"flex items-center justify-between",children:[n?.map(r=>t("div",{className:"flex items-center gap-4",children:[e(N,{source:r?.variant?.image?.url,className:"size-16 object-cover"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(s,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:r.variant.product.title})})]},r.variant.id)),t("div",{className:"flex flex-col items-end gap-1 justify-center",children:[a&&e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:n[0]?.price,locale:i,currencyCode:n[0]?.variant?.price?.currencyCode})}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})},z=({giftOperation:d,giftStatus:a,gift:l})=>{const{locale:i="us"}=C(),{freeGift:p,setCheckedGift:m}=y(),{freeLabel:n}=p||{};return t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-4",children:[e(N,{source:l?.image?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l?.product?.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${n}`})]})]}),t("div",{className:"flex flex-col items-end gap-2 justify-center",children:[a&&t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:n}),e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:l.price.amount,locale:i,currencyCode:l.price.currencyCode})})]}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})};var Q=S;export{Q as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as s,Button as g,Grid as I,GridItem as G,Picture as N,Heading as L}from"../../../../../components";import{useBizProductContext as y}from"../../../BizProductProvider";import{useEffect as R,useMemo as A,useState as O}from"react";import{formatPrice as f}from"../../../utils";import{useAiuiContext as C}from"../../../../AiuiProvider";import{cn as F}from"../../../../../helpers";import V from"decimal.js";const S=({})=>{const{locale:d="us",copyWriting:a}=C(),{product:l,variant:i,finalPrice:u,comparePrice:m,coupon:n,selectedOptions:r,onAddToCart:k,onBuyNow:h,savingDetail:b,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:p}=y();if(!i.availableForSale)return null;const{bundleVariant:B,giftVariant:w}=$()||{},[c,v]=O();R(()=>{v({bundle:o.bundle?void 0:B,gift:o.gift?void 0:w})},[B,w,o]);const D=A(()=>new V(m).minus(b.freeGift).toNumber(),[m,b]);return e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-8 ",children:e("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:t(I,{className:"px-4 py-6 tablet:p-8",children:[t(G,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5",children:[e(L,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${l.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"aspect-[644/320]",children:e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-contain h-full"})})]}),t(G,{className:"col-span-12 mt-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[t("div",{children:[t("div",{className:"flex flex-col gap-4",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"shrink-0 flex items-center gap-4",children:[e(N,{source:i.image?.url||l?.images?.[0]?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${r.color||r.colour||r.couleur}`})]})]}),t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl laptop:text-xl font-bold",html:f({amount:u,currencyCode:i.price.currencyCode,locale:d})}),n&&e(s,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})})]})]}),o?.gift&&e(z,{giftOperation:x=>{p?.({...o,gift:void 0}),v?.({...c,gift:x})},giftStatus:!!o?.gift,gift:o?.gift}),o?.bundle&&e(j,{bundleOperation:x=>{p?.({...o,bundle:void 0}),v?.({...c,bundle:x})},bundleStatus:!!o?.bundle,bundleListItem:o?.bundle})]}),(c?.bundle||c?.gift)&&t("div",{className:"mt-6",children:[e(s,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),t("div",{className:"flex flex-col gap-6 mt-6",children:[c?.gift&&e(z,{giftOperation:x=>{p?.({gift:x}),v?.({...c,gift:void 0})},giftStatus:!c?.gift,gift:c?.gift}),c?.bundle&&e(j,{bundleOperation:x=>{p?.({bundle:x}),v?.({...c,bundle:void 0})},bundleStatus:!c?.bundle,bundleListItem:c?.bundle})]})]})]}),t("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${a?.totalPrice} ${f({amount:u,currencyCode:i.price.currencyCode,locale:d})}`}),n&&e(s,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:f({amount:D,currencyCode:i.price.currencyCode,locale:d})}),t("div",{className:"flex gap-3 mt-2",children:[e(g,{size:"lg",variant:"secondary",className:"w-1/2",onClick:()=>k?.(),children:a?.addToCart}),e(g,{size:"lg",variant:"primary",className:"w-1/2",onClick:()=>h?.(),children:a?.shopNow})]})]})]})]})})})},$=()=>{const{bundle:d,variant:a,checkedBundle:l,freeGift:i,checkedGift:u}=y();let m,n;const{bundleList:r}=d||{},{giftList:k=[]}=i||{},h=r?.filter(p=>p.variants.slice(1,p.variants.length).every(P=>P.variant.availableForSale))||[],[b]=h;m=l||b;const[o]=k?.filter(p=>p.availableForSale);return n=u||o,{bundleVariant:m,giftVariant:n}},j=({bundleOperation:d,bundleStatus:a,bundleListItem:l})=>{const{locale:i="us"}=C(),{variant:u,setCheckedBundle:m}=y(),n=l?.variants.filter(r=>r.variant.sku!==u.sku);return t("div",{className:"flex items-center justify-between",children:[n?.map(r=>t("div",{className:"flex items-center gap-4",children:[e(N,{source:r?.variant?.image?.url,className:"size-16 object-cover"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(s,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:r.variant.product.title})})]},r.variant.id)),t("div",{className:"flex flex-col items-end gap-1 justify-center",children:[a&&e(s,{className:"text-base desktop:text-2xl font-bold",html:f({amount:n[0]?.price,locale:i,currencyCode:n[0]?.variant?.price?.currencyCode})}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})},z=({giftOperation:d,giftStatus:a,gift:l})=>{const{locale:i="us"}=C(),{freeGift:u,setCheckedGift:m}=y(),{freeLabel:n}=u||{};return t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-4",children:[e(N,{source:l?.image?.url,className:"size-16 object-cover"}),t("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(s,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:l?.product?.title}),e(s,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${n}`})]})]}),t("div",{className:"flex flex-col items-end gap-2 justify-center",children:[a&&t("div",{className:"flex items-center gap-1",children:[e(s,{className:"text-base desktop:text-2xl font-bold",html:n}),e(s,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:f({amount:l.price.amount,locale:i,currencyCode:l.price.currencyCode})})]}),e(g,{size:a?"icon":"lg",variant:a?"link":"primary",onClick:()=>{m?.(a?void 0:l),d(l)},className:F("shrink-0 size-auto",{underline:a}),children:a?"Remove":"Add +"})]})]})};var Q=S;export{Q as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n    })\n  }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  return (\n    <div className=\"ipc-product-summary bg-[#F5F5F7] mt-16 laptop:rounded-2xl\">\n      <Grid className=\"px-4 py-6 tablet:p-8\">\n        <GridItem className=\"col-span-12 desktop:col-start-1 desktop:col-span-5\">\n          <Heading\n            className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n            html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n          />\n          <div className=\"aspect-[644/320]\">\n            <Picture\n              source={variant.image?.url || product?.images?.[0]?.url}\n              className=\"h-full w-full\"\n              imgClassName=\"object-contain h-full\"\n            />\n          </div>\n        </GridItem>\n        <GridItem className=\"col-span-12 mt-8 desktop:col-start-7 laptop:mt-0 desktop:col-span-6 flex flex-col gap-6 justify-between\">\n          <div>\n            <div className=\"flex flex-col gap-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"shrink-0 flex items-center gap-4\">\n                  <Picture source={variant.image?.url || product?.images?.[0]?.url} className=\"size-16 object-cover\" />\n                  <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                    <Text\n                      className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                      html={product.title}\n                    />\n                    <Text\n                      className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                      html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                    />\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-1\">\n                  <Text\n                    className=\"text-base desktop:text-2xl font-bold\"\n                    html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n                  />\n                  {coupon && (\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                      html={formatPrice({\n                        amount: comparePriceRemovedFreeGift,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                  )}\n                </div>\n              </div>\n              {joinedRecommendBuyProducts?.gift && (\n                <ProductGiftSummary\n                  giftOperation={gift => {\n                    setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n                    setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                  }}\n                  giftStatus={!!joinedRecommendBuyProducts?.gift}\n                  gift={joinedRecommendBuyProducts?.gift}\n                />\n              )}\n              {joinedRecommendBuyProducts?.bundle && (\n                <ProductBundleSummary\n                  bundleOperation={bundle => {\n                    setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                    setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                  }}\n                  bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n                  bundleListItem={joinedRecommendBuyProducts?.bundle}\n                />\n              )}\n            </div>\n            {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\n              <div className=\"mt-6\">\n                <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                <div className=\"flex flex-col gap-6 mt-6\">\n                  {initialRecommendBuyProducts?.gift && (\n                    <ProductGiftSummary\n                      giftOperation={gift => {\n                        setJoinedRecommendBuyProducts?.({ gift })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                      }}\n                      giftStatus={!initialRecommendBuyProducts?.gift}\n                      gift={initialRecommendBuyProducts?.gift}\n                    />\n                  )}\n                  {initialRecommendBuyProducts?.bundle && (\n                    <ProductBundleSummary\n                      bundleOperation={bundle => {\n                        setJoinedRecommendBuyProducts?.({ bundle })\n                        setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                      }}\n                      bundleStatus={!initialRecommendBuyProducts?.bundle}\n                      bundleListItem={initialRecommendBuyProducts?.bundle}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n          <div className=\"text-right\">\n            <Text\n              className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n              html={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}`}\n            />\n\n            {coupon && (\n              <Text\n                className=\"text-base desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                html={formatPrice({\n                  amount: comparePriceRemovedFreeGift,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            <div className=\"flex gap-3 mt-2\">\n              <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n                {copyWriting?.addToCart}\n              </Button>\n              <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n                {copyWriting?.shopNow}\n              </Button>\n            </div>\n          </div>\n        </GridItem>\n      </Grid>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift } = useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleStatus,\n  bundleListItem,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleStatus: boolean\n  bundleListItem: BundleListItem\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n            <Picture source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\n            <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n              <Text\n                className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                html={bundleVariant.variant.product.title}\n              />\n            </div>\n          </div>\n        )\n      })}\n      <div className=\"flex flex-col items-end gap-1 justify-center\">\n        {bundleStatus && (\n          <Text\n            className=\"text-base desktop:text-2xl font-bold\"\n            html={formatPrice({\n              amount: bundleVariants[0]?.price,\n              locale,\n              currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n            })}\n          />\n        )}\n        <Button\n          size={bundleStatus ? 'icon' : 'lg'}\n          variant={bundleStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n            bundleOperation(bundleListItem)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: bundleStatus,\n          })}\n        >\n          {bundleStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  giftStatus,\n  gift,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  giftStatus: boolean\n  gift: ProductVariant\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x1 | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {giftStatus && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        <Button\n          size={giftStatus ? 'icon' : 'lg'}\n          variant={giftStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedGift?.(giftStatus ? undefined : gift)\n            giftOperation(gift)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: giftStatus,\n          })}\n        >\n          {giftStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n    })\n  }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-8 \">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 py-6 tablet:p-8\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"aspect-[644/320]\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"h-full w-full\"\n                imgClassName=\"object-contain h-full\"\n              />\n            </div>\n          </GridItem>\n          <GridItem className=\"col-span-12 mt-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-16 object-cover\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl laptop:text-xl font-bold\"\n                      html={formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}\n                    />\n                    {coupon && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: comparePriceRemovedFreeGift,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    giftStatus={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    bundleStatus={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle || initialRecommendBuyProducts?.gift) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setJoinedRecommendBuyProducts?.({ gift })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        giftStatus={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setJoinedRecommendBuyProducts?.({ bundle })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        bundleStatus={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}`}\n              />\n\n              {coupon && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePriceRemovedFreeGift,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2\">\n                <Button size=\"lg\" variant=\"secondary\" className=\"w-1/2\" onClick={() => onAddToCart?.()}>\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button size=\"lg\" variant=\"primary\" className=\"w-1/2\" onClick={() => onBuyNow?.()}>\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift } = useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  return { bundleVariant, giftVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleStatus,\n  bundleListItem,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleStatus: boolean\n  bundleListItem: BundleListItem\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n            <Picture source={bundleVariant?.variant?.image?.url} className=\"size-16 object-cover\" />\n            <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n              <Text\n                className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                html={bundleVariant.variant.product.title}\n              />\n            </div>\n          </div>\n        )\n      })}\n      <div className=\"flex flex-col items-end gap-1 justify-center\">\n        {bundleStatus && (\n          <Text\n            className=\"text-base desktop:text-2xl font-bold\"\n            html={formatPrice({\n              amount: bundleVariants[0]?.price,\n              locale,\n              currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n            })}\n          />\n        )}\n        <Button\n          size={bundleStatus ? 'icon' : 'lg'}\n          variant={bundleStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedBundle?.(bundleStatus ? undefined : bundleListItem)\n            bundleOperation(bundleListItem)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: bundleStatus,\n          })}\n        >\n          {bundleStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  giftStatus,\n  gift,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  giftStatus: boolean\n  gift: ProductVariant\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture source={gift?.image?.url} className=\"size-16 object-cover\" />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x1 | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {giftStatus && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        <Button\n          size={giftStatus ? 'icon' : 'lg'}\n          variant={giftStatus ? 'link' : 'primary'}\n          onClick={() => {\n            setCheckedGift?.(giftStatus ? undefined : gift)\n            giftOperation(gift)\n          }}\n          className={cn('shrink-0 size-auto', {\n            underline: giftStatus,\n          })}\n        >\n          {giftStatus ? 'Remove' : 'Add +'}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
+  "mappings": "AAmDU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAnDV,OAAS,QAAAC,EAAM,UAAAC,EAAmB,QAAAC,EAAM,YAAAC,EAAU,WAAAC,EAAS,WAAAC,MAAe,4BAE1E,OAAS,wBAAAC,MAA4B,8BACrC,OAAS,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QAC7C,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,kBAAAC,MAAsB,2BAE/B,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,aAEpB,MAAMC,EAAiB,CAAC,CAAC,IAA2B,CAClD,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIL,EAAe,EAChD,CACJ,QAAAM,EACA,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,2BAAAC,EACA,8BAAAC,CACF,EAAIrB,EAAqB,EAGzB,GAAI,CADgBY,EAAQ,iBACV,OAAO,KAEzB,KAAM,CAAE,cAAAU,EAAe,YAAAC,CAAY,EAAIC,EAAwB,GAAK,CAAC,EAC/D,CAACC,EAA6BC,CAA8B,EAAIvB,EAGnE,EAEHF,EAAU,IAAM,CACdyB,EAA+B,CAC7B,OAAQN,EAA2B,OAAS,OAAYE,EACxD,KAAMF,EAA2B,KAAO,OAAYG,CACtD,CAAC,CACH,EAAG,CAACD,EAAeC,EAAaH,CAA0B,CAAC,EAE3D,MAAMO,EAA8BzB,EAClC,IAAM,IAAIK,EAAQO,CAAY,EAAE,MAAMK,EAAa,QAAQ,EAAE,SAAS,EACtE,CAACL,EAAcK,CAAY,CAC7B,EAEA,OACE3B,EAAC,OAAI,UAAU,sDACb,SAAAA,EAAC,OAAI,UAAU,kCACb,SAAAC,EAACG,EAAA,CAAK,UAAU,uBACd,UAAAH,EAACI,EAAA,CAAS,UAAU,mDAClB,UAAAL,EAACO,EAAA,CACC,UAAU,+HACV,KAAM,GAAGY,EAAQ,KAAK,wDACxB,EACAnB,EAAC,OAAI,UAAU,mBACb,SAAAA,EAACM,EAAA,CACC,OAAQc,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,gBACV,aAAa,wBACf,EACF,GACF,EACAlB,EAACI,EAAA,CAAS,UAAU,wGAClB,UAAAJ,EAAC,OACC,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAA,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,mCACb,UAAAD,EAACM,EAAA,CACC,OAAQc,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,uBACZ,EACAlB,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACE,EAAA,CACC,UAAU,gFACV,KAAMiB,EAAQ,MAChB,EACAnB,EAACE,EAAA,CACC,UAAU,8EACV,KAAM,QAAQsB,EAAgB,OAASA,EAAgB,QAAUA,EAAgB,OAAO,GAC1F,GACF,GACF,EACAvB,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,sDACV,KAAMU,EAAY,CAAE,OAAQS,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAH,CAAO,CAAC,EAC5F,EACCM,GACCvB,EAACE,EAAA,CACC,UAAU,kFACV,KAAMU,EAAY,CAChB,OAAQuB,EACR,aAAcf,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,GAEJ,GACF,EACCW,GAA4B,MAC3B5B,EAACoC,EAAA,CACC,cAAeC,GAAQ,CACrBR,IAAgC,CAAE,GAAGD,EAA4B,KAAM,MAAU,CAAC,EAClFM,IAAiC,CAAE,GAAGD,EAA6B,KAAAI,CAAK,CAAC,CAC3E,EACA,WAAY,CAAC,CAACT,GAA4B,KAC1C,KAAMA,GAA4B,KACpC,EAEDA,GAA4B,QAC3B5B,EAACsC,EAAA,CACC,gBAAiBC,GAAU,CACzBV,IAAgC,CAAE,GAAGD,EAA4B,OAAQ,MAAU,CAAC,EACpFM,IAAiC,CAAE,GAAGD,EAA6B,OAAAM,CAAO,CAAC,CAC7E,EACA,aAAc,CAAC,CAACX,GAA4B,OAC5C,eAAgBA,GAA4B,OAC9C,GAEJ,GACEK,GAA6B,QAAUA,GAA6B,OACpEhC,EAAC,OAAI,UAAU,OACb,UAAAD,EAACE,EAAA,CAAK,UAAU,wCAAwC,KAAM,gBAAiB,EAC/ED,EAAC,OAAI,UAAU,2BACZ,UAAAgC,GAA6B,MAC5BjC,EAACoC,EAAA,CACC,cAAeC,GAAQ,CACrBR,IAAgC,CAAE,KAAAQ,CAAK,CAAC,EACxCH,IAAiC,CAAE,GAAGD,EAA6B,KAAM,MAAU,CAAC,CACtF,EACA,WAAY,CAACA,GAA6B,KAC1C,KAAMA,GAA6B,KACrC,EAEDA,GAA6B,QAC5BjC,EAACsC,EAAA,CACC,gBAAiBC,GAAU,CACzBV,IAAgC,CAAE,OAAAU,CAAO,CAAC,EAC1CL,IAAiC,CAAE,GAAGD,EAA6B,OAAQ,MAAU,CAAC,CACxF,EACA,aAAc,CAACA,GAA6B,OAC5C,eAAgBA,GAA6B,OAC/C,GAEJ,GACF,GAEJ,EACAhC,EAAC,OAAI,UAAU,aACb,UAAAD,EAACE,EAAA,CACC,UAAU,uDACV,KAAM,GAAGgB,GAAa,UAAU,IAAIN,EAAY,CAAE,OAAQS,EAAY,aAAcD,EAAQ,MAAM,aAAc,OAAAH,CAAO,CAAC,CAAC,GAC3H,EAECM,GACCvB,EAACE,EAAA,CACC,UAAU,uFACV,KAAMU,EAAY,CAChB,OAAQuB,EACR,aAAcf,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,EAEFhB,EAAC,OAAI,UAAU,kBACb,UAAAD,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,QAAQ,QAAS,IAAMsB,IAAc,EAClF,SAAAP,GAAa,UAChB,EACAlB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,QAAQ,QAAS,IAAMuB,IAAW,EAC7E,SAAAR,GAAa,QAChB,GACF,GACF,GACF,GACF,EACF,EACF,CAEJ,EAEMc,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAO,EAAQ,QAAAnB,EAAS,cAAAoB,EAAe,SAAAC,EAAU,YAAAC,CAAY,EAAIlC,EAAqB,EACvF,IAAIsB,EACAC,EACJ,KAAM,CAAE,WAAAY,CAAW,EAAIJ,GAAU,CAAC,EAE5B,CAAE,SAAAK,EAAW,CAAC,CAAE,EAAIH,GAAY,CAAC,EAEjCI,EACJF,GAAY,OAAOJ,GACjBA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMO,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,GAAK,CAAC,EAEF,CAACC,CAAoB,EAAIF,EAC/Bf,EAAgBU,GAAiBO,EAEjC,KAAM,CAACC,CAAkB,EAAIJ,GAAU,OAAOP,GAAQA,EAAK,gBAAgB,EAC3E,OAAAN,EAAcW,GAAeM,EAEtB,CAAE,cAAAlB,EAAe,YAAAC,CAAY,CACtC,EAEMO,EAAuB,CAAC,CAC5B,gBAAAW,EACA,aAAAC,EACA,eAAAC,CACF,IAIM,CACJ,KAAM,CAAE,OAAAlC,EAAS,IAAK,EAAIJ,EAAe,EACnC,CAAE,QAAAO,EAAS,iBAAAgC,CAAiB,EAAI5C,EAAqB,EACrD6C,EAAiBF,GAAgB,SAAS,OAAOL,GAAKA,EAAE,QAAQ,MAAQ1B,EAAQ,GAAG,EAEzF,OACEnB,EAAC,OAAI,UAAU,oCACZ,UAAAoD,GAAgB,IAAIvB,GAEjB7B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CAAQ,OAAQwB,GAAe,SAAS,OAAO,IAAK,UAAU,uBAAuB,EACtF9B,EAAC,OAAI,UAAU,uEACb,SAAAA,EAACE,EAAA,CACC,UAAU,mEACV,KAAM4B,EAAc,QAAQ,QAAQ,MACtC,EACF,IAP4CA,EAAc,QAAQ,EAQpE,CAEH,EACD7B,EAAC,OAAI,UAAU,+CACZ,UAAAiD,GACClD,EAACE,EAAA,CACC,UAAU,uCACV,KAAMU,EAAY,CAChB,OAAQyC,EAAe,CAAC,GAAG,MAC3B,OAAApC,EACA,aAAcoC,EAAe,CAAC,GAAG,SAAS,OAAO,YACnD,CAAC,EACH,EAEFrD,EAACG,EAAA,CACC,KAAM+C,EAAe,OAAS,KAC9B,QAASA,EAAe,OAAS,UACjC,QAAS,IAAM,CACbE,IAAmBF,EAAe,OAAYC,CAAc,EAC5DF,EAAgBE,CAAc,CAChC,EACA,UAAWrC,EAAG,qBAAsB,CAClC,UAAWoC,CACb,CAAC,EAEA,SAAAA,EAAe,SAAW,QAC7B,GACF,GACF,CAEJ,EAEMd,EAAqB,CAAC,CAC1B,cAAAkB,EACA,WAAAC,EACA,KAAAlB,CACF,IAIM,CACJ,KAAM,CAAE,OAAApB,EAAS,IAAK,EAAIJ,EAAe,EACnC,CAAE,SAAA4B,EAAU,eAAAe,CAAe,EAAIhD,EAAqB,EACpD,CAAE,UAAAiD,CAAU,EAAIhB,GAAY,CAAC,EAEnC,OACExC,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CAAQ,OAAQ+B,GAAM,OAAO,IAAK,UAAU,uBAAuB,EACpEpC,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACE,EAAA,CACC,UAAU,gFACV,KAAMmC,GAAM,SAAS,MACvB,EACArC,EAACE,EAAA,CACC,UAAU,8EACV,KAAM,QAAQuD,CAAS,GACzB,GACF,GACF,EACAxD,EAAC,OAAI,UAAU,+CACZ,UAAAsD,GACCtD,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMuD,EAAW,EACxEzD,EAACE,EAAA,CACC,UAAU,mEACV,KAAMU,EAAY,CAChB,OAAQyB,EAAK,MAAM,OACnB,OAAApB,EACA,aAAcoB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,EAEFrC,EAACG,EAAA,CACC,KAAMoD,EAAa,OAAS,KAC5B,QAASA,EAAa,OAAS,UAC/B,QAAS,IAAM,CACbC,IAAiBD,EAAa,OAAYlB,CAAI,EAC9CiB,EAAcjB,CAAI,CACpB,EACA,UAAWvB,EAAG,qBAAsB,CAClC,UAAWyC,CACb,CAAC,EAEA,SAAAA,EAAa,SAAW,QAC3B,GACF,GACF,CAEJ,EAEA,IAAOG,EAAQ1C",
   "names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "cn", "Decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "onAddToCart", "onBuyNow", "savingDetail", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "bundleVariant", "giftVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "checkedBundle", "freeGift", "checkedGift", "bundleList", "giftList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "bundleOperation", "bundleStatus", "bundleListItem", "setCheckedBundle", "bundleVariants", "giftOperation", "giftStatus", "setCheckedGift", "freeLabel", "ProductSummary_default"]
 }

package/dist/esm/biz-components/Listing/hooks/useBenefits.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useBizProductContext as h}from"../BizProductProvider";import{checkItemAvailableForProduct as C}from"../utils/helper";import{useAiuiContext as v}from"../../AiuiProvider/index.js";const x=({variant:t})=>{const{coupon:f,product:c,bundle:o,isLogin:u,freeGift:l,memberFunctionResult:i,creditsRedemptionAmount:s,discount:r}=h(),{codeSavings:m}=r||{},{trackingData:n}=v(),d=Math.max(i?.withCouponMemberTotalSave??0,i?.withoutCouponMaxMemberTotalSave??0),p=!!(n?.paidShipping&&t.requiresShipping&&!t?.metafields?.global?.presell&&!t?.metafields?.global?.HideShipping),a=n?.freeGift,g=a?.excludeProducts?.map(e=>typeof e=="object"&&"sku"in e?e.sku:e)??[],b=n?.levelDiscount&&C({product:c,variant:t,item:n?.levelDiscount}),B=!u&&(m||0)<(i?.withCouponMemberTotalSave||0);return{commonCoupon:{enable:!!f,config:f??{}},freeGift:{enable:!!l&&!!l?.giftList?.length,config:l},bundle:{enable:!!o&&!!o?.bundleList?.length&&Math.max(...o?.bundleList?.map(e=>e.savings??0))>0,config:o},memberDiscount:{enable:B,config:{amount:d,description:i?.labels?.find(e=>e.key==="benefit_tab_string")?.value}},creditsRedemption:{enable:!!s&&s>0,config:{amount:s,label:n?.creditsRedemptionLabel}},paidShipping:{enable:p,config:{}},fullGift:{enable:!!(a&&!g.includes(t.sku)),config:a??{}},levelDiscount:{enable:!!b,config:n?.levelDiscount??{}}}};export{x as useBenefits};
+import{useBizProductContext as B}from"../BizProductProvider";import{checkItemAvailableForProduct as h}from"../utils/helper";import{useAiuiContext as C}from"../../AiuiProvider/index.js";const x=({variant:t})=>{const{coupon:f,product:u,bundle:o,isLogin:r,freeGift:l,memberFunctionResult:i,creditsRedemptionAmount:s,discount:m}=B(),{codeSavings:d}=m||{},{trackingData:n}=C(),c=Math.max(i?.withCouponMemberTotalSave??0,i?.withoutCouponMaxMemberTotalSave??0),p=!!(n?.paidShipping&&t.requiresShipping&&!t?.metafields?.global?.presell&&!t?.metafields?.global?.HideShipping),a=n?.freeGift,g=a?.excludeProducts?.map(e=>typeof e=="object"&&"sku"in e?e.sku:e)??[],b=n?.levelDiscount&&h({product:u,variant:t,item:n?.levelDiscount}),v=!r&&(d||0)<(i?.withCouponMemberTotalSave||0);return{commonCoupon:{enable:!!f,config:f??{}},freeGift:{enable:!!l&&!!l?.giftList?.length,config:l},bundle:{enable:!!o&&!!o?.bundleList?.length&&Math.max(...o?.bundleList?.map(e=>e.savings??0))>0,config:o},memberDiscount:{enable:c>0,config:{amount:c,description:i?.labels?.find(e=>e.key==="benefit_tab_string")?.value}},creditsRedemption:{enable:!!s&&s>0,config:{amount:s,label:n?.creditsRedemptionLabel}},paidShipping:{enable:p,config:{}},fullGift:{enable:!!(a&&!g.includes(t.sku)),config:a??{}},levelDiscount:{enable:!!b,config:n?.levelDiscount??{}}}};export{x as useBenefits};
 //# sourceMappingURL=useBenefits.js.map

package/dist/esm/biz-components/Listing/hooks/useBenefits.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/biz-components/Listing/hooks/useBenefits.ts"],
-  "sourcesContent": ["import { useBizProductContext } from '../BizProductProvider'\nimport type { ProductVariant, FreeGift, Bundle } from '../types/product'\nimport { checkItemAvailableForProduct } from '../utils/helper'\n\nimport { useAiuiContext } from '../../AiuiProvider/index.js'\n\ninterface BenefitsParams {\n  variant: ProductVariant\n}\n\ninterface BenefitItemConfig<T extends Record<string, any> = Record<string, any>> {\n  enable: boolean\n  config?: T // \u539F\u59CB\u914D\u7F6E\n}\n\ninterface BenefitsResult {\n  /**\n   * \u901A\u7528\u4F18\u60E0\u5238\n   */\n  commonCoupon?: BenefitItemConfig\n  /**\n   * \u4E70\u8D60\n   */\n  freeGift: BenefitItemConfig<FreeGift>\n  /**\n   * \u6346\u7ED1\u6298\u6263\n   */\n  bundle: BenefitItemConfig<Bundle>\n  /**\n   * \u4F1A\u5458\u4EF7\n   */\n  memberDiscount: BenefitItemConfig\n  /**\n   * \u79EF\u5206\u62B5\u73B0\n   */\n  creditsRedemption: BenefitItemConfig\n  /**\n   * \u9AD8\u6807\u7269\u6D41\n   */\n  paidShipping: BenefitItemConfig\n\n  /**\n   * \u6EE1\u8D60\n   */\n  fullGift: BenefitItemConfig\n\n  /**\n   * \u6EE1\u51CF\u6298\u6263\n   */\n  levelDiscount: BenefitItemConfig\n}\n\n/**\n * \u5546\u54C1\u6743\u76CA\n * \u83B7\u53D6\u5F53\u524Dsku \u6240\u6709\u7684\u6743\u76CA\n * \u5305\u62EC \u901A\u7528\u4F18\u60E0\u5238\uFF0C\u4F1A\u5458\u4EF7\uFF0C\u6EE1\u51CF\uFF0C\u6346\u7ED1\u6298\u6263\uFF0C\u4E70\u8D60 \uFF0C\u6EE1\u8D60 \uFF0C\u79EF\u5206\u62B5\u73B0\n * @returns\n */\nexport const useBenefits = ({ variant }: BenefitsParams): BenefitsResult => {\n  const { coupon, product, bundle, isLogin, freeGift, memberFunctionResult, creditsRedemptionAmount, discount } =\n    useBizProductContext()\n  const { codeSavings } = discount || {}\n\n  const { trackingData } = useAiuiContext()\n\n  const total = Math.max(\n    memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n    memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n  )\n\n  // \u9AD8\u6807\u7269\u6D41\n  const showPaidShipping = Boolean(\n    trackingData?.paidShipping &&\n      variant.requiresShipping &&\n      !variant?.metafields?.global?.presell &&\n      !variant?.metafields?.global?.HideShipping\n  )\n\n  // \u811A\u672C\u6EE1\u8D60\n  const fullGift = trackingData?.freeGift\n  const excludeProducts =\n    fullGift?.excludeProducts?.map((item: any) => (typeof item === 'object' && 'sku' in item ? item.sku : item)) ?? []\n\n  const showLevelDiscount =\n    trackingData?.levelDiscount && checkItemAvailableForProduct({ product, variant, item: trackingData?.levelDiscount })\n\n  // \u672A\u767B\u5F55\u4E14code\u4F18\u60E0\u5C0F\u4E8E\u4F1A\u5458\u4EF7\u4F18\u60E0\u65F6\uFF0C\u5C55\u793A\u4F1A\u5458\u4EF7\u4F18\u60E0\n  const showMemberDiscount = !isLogin && (codeSavings || 0) < (memberFunctionResult?.withCouponMemberTotalSave || 0)\n\n  return {\n    commonCoupon: {\n      enable: Boolean(coupon),\n      config: coupon ?? {},\n    },\n    freeGift: {\n      enable: Boolean(freeGift) && !!freeGift?.giftList?.length,\n      config: freeGift,\n    },\n    bundle: {\n      enable:\n        Boolean(bundle) &&\n        !!bundle?.bundleList?.length &&\n        Math.max(...bundle?.bundleList?.map(item => item.savings ?? 0)) > 0, // \u6709\u4F18\u60E0\u624D\u5C55\u793A\n      config: bundle,\n    },\n    memberDiscount: {\n      enable: showMemberDiscount,\n      config: {\n        amount: total,\n        description: memberFunctionResult?.labels?.find((item: any) => item.key === 'benefit_tab_string')?.value,\n      },\n    },\n    creditsRedemption: {\n      enable: Boolean(creditsRedemptionAmount) && creditsRedemptionAmount! > 0,\n      config: { amount: creditsRedemptionAmount, label: trackingData?.creditsRedemptionLabel },\n    },\n    paidShipping: {\n      enable: showPaidShipping,\n      config: {},\n    },\n    fullGift: {\n      enable: Boolean(fullGift && !excludeProducts.includes(variant.sku)),\n      config: fullGift ?? {},\n    },\n    levelDiscount: {\n      enable: Boolean(showLevelDiscount),\n      config: trackingData?.levelDiscount ?? {},\n    },\n  }\n}\n"],
-  "mappings": "AAAA,OAAS,wBAAAA,MAA4B,wBAErC,OAAS,gCAAAC,MAAoC,kBAE7C,OAAS,kBAAAC,MAAsB,8BAsDxB,MAAMC,EAAc,CAAC,CAAE,QAAAC,CAAQ,IAAsC,CAC1E,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,qBAAAC,EAAsB,wBAAAC,EAAyB,SAAAC,CAAS,EAC1GZ,EAAqB,EACjB,CAAE,YAAAa,CAAY,EAAID,GAAY,CAAC,EAE/B,CAAE,aAAAE,CAAa,EAAIZ,EAAe,EAElCa,EAAQ,KAAK,IACjBL,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAGMM,EAAmB,GACvBF,GAAc,cACZV,EAAQ,kBACR,CAACA,GAAS,YAAY,QAAQ,SAC9B,CAACA,GAAS,YAAY,QAAQ,cAI5Ba,EAAWH,GAAc,SACzBI,EACJD,GAAU,iBAAiB,IAAKE,GAAe,OAAOA,GAAS,UAAY,QAASA,EAAOA,EAAK,IAAMA,CAAK,GAAK,CAAC,EAE7GC,EACJN,GAAc,eAAiBb,EAA6B,CAAE,QAAAK,EAAS,QAAAF,EAAS,KAAMU,GAAc,aAAc,CAAC,EAG/GO,EAAqB,CAACb,IAAYK,GAAe,IAAMH,GAAsB,2BAA6B,GAEhH,MAAO,CACL,aAAc,CACZ,OAAQ,EAAQL,EAChB,OAAQA,GAAU,CAAC,CACrB,EACA,SAAU,CACR,OAAQ,EAAQI,GAAa,CAAC,CAACA,GAAU,UAAU,OACnD,OAAQA,CACV,EACA,OAAQ,CACN,OACE,EAAQF,GACR,CAAC,CAACA,GAAQ,YAAY,QACtB,KAAK,IAAI,GAAGA,GAAQ,YAAY,IAAIY,GAAQA,EAAK,SAAW,CAAC,CAAC,EAAI,EACpE,OAAQZ,CACV,EACA,eAAgB,CACd,OAAQc,EACR,OAAQ,CACN,OAAQN,EACR,YAAaL,GAAsB,QAAQ,KAAMS,GAAcA,EAAK,MAAQ,oBAAoB,GAAG,KACrG,CACF,EACA,kBAAmB,CACjB,OAAQ,EAAQR,GAA4BA,EAA2B,EACvE,OAAQ,CAAE,OAAQA,EAAyB,MAAOG,GAAc,sBAAuB,CACzF,EACA,aAAc,CACZ,OAAQE,EACR,OAAQ,CAAC,CACX,EACA,SAAU,CACR,OAAQ,GAAQC,GAAY,CAACC,EAAgB,SAASd,EAAQ,GAAG,GACjE,OAAQa,GAAY,CAAC,CACvB,EACA,cAAe,CACb,OAAQ,EAAQG,EAChB,OAAQN,GAAc,eAAiB,CAAC,CAC1C,CACF,CACF",
+  "sourcesContent": ["import { useBizProductContext } from '../BizProductProvider'\nimport type { ProductVariant, FreeGift, Bundle } from '../types/product'\nimport { checkItemAvailableForProduct } from '../utils/helper'\n\nimport { useAiuiContext } from '../../AiuiProvider/index.js'\n\ninterface BenefitsParams {\n  variant: ProductVariant\n}\n\ninterface BenefitItemConfig<T extends Record<string, any> = Record<string, any>> {\n  enable: boolean\n  config?: T // \u539F\u59CB\u914D\u7F6E\n}\n\ninterface BenefitsResult {\n  /**\n   * \u901A\u7528\u4F18\u60E0\u5238\n   */\n  commonCoupon?: BenefitItemConfig\n  /**\n   * \u4E70\u8D60\n   */\n  freeGift: BenefitItemConfig<FreeGift>\n  /**\n   * \u6346\u7ED1\u6298\u6263\n   */\n  bundle: BenefitItemConfig<Bundle>\n  /**\n   * \u4F1A\u5458\u4EF7\n   */\n  memberDiscount: BenefitItemConfig\n  /**\n   * \u79EF\u5206\u62B5\u73B0\n   */\n  creditsRedemption: BenefitItemConfig\n  /**\n   * \u9AD8\u6807\u7269\u6D41\n   */\n  paidShipping: BenefitItemConfig\n\n  /**\n   * \u6EE1\u8D60\n   */\n  fullGift: BenefitItemConfig\n\n  /**\n   * \u6EE1\u51CF\u6298\u6263\n   */\n  levelDiscount: BenefitItemConfig\n}\n\n/**\n * \u5546\u54C1\u6743\u76CA\n * \u83B7\u53D6\u5F53\u524Dsku \u6240\u6709\u7684\u6743\u76CA\n * \u5305\u62EC \u901A\u7528\u4F18\u60E0\u5238\uFF0C\u4F1A\u5458\u4EF7\uFF0C\u6EE1\u51CF\uFF0C\u6346\u7ED1\u6298\u6263\uFF0C\u4E70\u8D60 \uFF0C\u6EE1\u8D60 \uFF0C\u79EF\u5206\u62B5\u73B0\n * @returns\n */\nexport const useBenefits = ({ variant }: BenefitsParams): BenefitsResult => {\n  const { coupon, product, bundle, isLogin, freeGift, memberFunctionResult, creditsRedemptionAmount, discount } =\n    useBizProductContext()\n  const { codeSavings } = discount || {}\n\n  const { trackingData } = useAiuiContext()\n\n  const total = Math.max(\n    memberFunctionResult?.withCouponMemberTotalSave ?? 0,\n    memberFunctionResult?.withoutCouponMaxMemberTotalSave ?? 0\n  )\n\n  // \u9AD8\u6807\u7269\u6D41\n  const showPaidShipping = Boolean(\n    trackingData?.paidShipping &&\n      variant.requiresShipping &&\n      !variant?.metafields?.global?.presell &&\n      !variant?.metafields?.global?.HideShipping\n  )\n\n  // \u811A\u672C\u6EE1\u8D60\n  const fullGift = trackingData?.freeGift\n  const excludeProducts =\n    fullGift?.excludeProducts?.map((item: any) => (typeof item === 'object' && 'sku' in item ? item.sku : item)) ?? []\n\n  const showLevelDiscount =\n    trackingData?.levelDiscount && checkItemAvailableForProduct({ product, variant, item: trackingData?.levelDiscount })\n\n  // \u672A\u767B\u5F55\u4E14code\u4F18\u60E0\u5C0F\u4E8E\u4F1A\u5458\u4EF7\u4F18\u60E0\u65F6\uFF0C\u5C55\u793A\u4F1A\u5458\u4EF7\u4F18\u60E0\n  const showMemberDiscount = !isLogin && (codeSavings || 0) < (memberFunctionResult?.withCouponMemberTotalSave || 0)\n\n  return {\n    commonCoupon: {\n      enable: Boolean(coupon),\n      config: coupon ?? {},\n    },\n    freeGift: {\n      enable: Boolean(freeGift) && !!freeGift?.giftList?.length,\n      config: freeGift,\n    },\n    bundle: {\n      enable:\n        Boolean(bundle) &&\n        !!bundle?.bundleList?.length &&\n        Math.max(...bundle?.bundleList?.map(item => item.savings ?? 0)) > 0, // \u6709\u4F18\u60E0\u624D\u5C55\u793A\n      config: bundle,\n    },\n    memberDiscount: {\n      // enable: showMemberDiscount,\n      enable: total > 0,\n      config: {\n        amount: total,\n        description: memberFunctionResult?.labels?.find((item: any) => item.key === 'benefit_tab_string')?.value,\n      },\n    },\n    creditsRedemption: {\n      enable: Boolean(creditsRedemptionAmount) && creditsRedemptionAmount! > 0,\n      config: { amount: creditsRedemptionAmount, label: trackingData?.creditsRedemptionLabel },\n    },\n    paidShipping: {\n      enable: showPaidShipping,\n      config: {},\n    },\n    fullGift: {\n      enable: Boolean(fullGift && !excludeProducts.includes(variant.sku)),\n      config: fullGift ?? {},\n    },\n    levelDiscount: {\n      enable: Boolean(showLevelDiscount),\n      config: trackingData?.levelDiscount ?? {},\n    },\n  }\n}\n"],
+  "mappings": "AAAA,OAAS,wBAAAA,MAA4B,wBAErC,OAAS,gCAAAC,MAAoC,kBAE7C,OAAS,kBAAAC,MAAsB,8BAsDxB,MAAMC,EAAc,CAAC,CAAE,QAAAC,CAAQ,IAAsC,CAC1E,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,qBAAAC,EAAsB,wBAAAC,EAAyB,SAAAC,CAAS,EAC1GZ,EAAqB,EACjB,CAAE,YAAAa,CAAY,EAAID,GAAY,CAAC,EAE/B,CAAE,aAAAE,CAAa,EAAIZ,EAAe,EAElCa,EAAQ,KAAK,IACjBL,GAAsB,2BAA6B,EACnDA,GAAsB,iCAAmC,CAC3D,EAGMM,EAAmB,GACvBF,GAAc,cACZV,EAAQ,kBACR,CAACA,GAAS,YAAY,QAAQ,SAC9B,CAACA,GAAS,YAAY,QAAQ,cAI5Ba,EAAWH,GAAc,SACzBI,EACJD,GAAU,iBAAiB,IAAKE,GAAe,OAAOA,GAAS,UAAY,QAASA,EAAOA,EAAK,IAAMA,CAAK,GAAK,CAAC,EAE7GC,EACJN,GAAc,eAAiBb,EAA6B,CAAE,QAAAK,EAAS,QAAAF,EAAS,KAAMU,GAAc,aAAc,CAAC,EAG/GO,EAAqB,CAACb,IAAYK,GAAe,IAAMH,GAAsB,2BAA6B,GAEhH,MAAO,CACL,aAAc,CACZ,OAAQ,EAAQL,EAChB,OAAQA,GAAU,CAAC,CACrB,EACA,SAAU,CACR,OAAQ,EAAQI,GAAa,CAAC,CAACA,GAAU,UAAU,OACnD,OAAQA,CACV,EACA,OAAQ,CACN,OACE,EAAQF,GACR,CAAC,CAACA,GAAQ,YAAY,QACtB,KAAK,IAAI,GAAGA,GAAQ,YAAY,IAAIY,GAAQA,EAAK,SAAW,CAAC,CAAC,EAAI,EACpE,OAAQZ,CACV,EACA,eAAgB,CAEd,OAAQQ,EAAQ,EAChB,OAAQ,CACN,OAAQA,EACR,YAAaL,GAAsB,QAAQ,KAAMS,GAAcA,EAAK,MAAQ,oBAAoB,GAAG,KACrG,CACF,EACA,kBAAmB,CACjB,OAAQ,EAAQR,GAA4BA,EAA2B,EACvE,OAAQ,CAAE,OAAQA,EAAyB,MAAOG,GAAc,sBAAuB,CACzF,EACA,aAAc,CACZ,OAAQE,EACR,OAAQ,CAAC,CACX,EACA,SAAU,CACR,OAAQ,GAAQC,GAAY,CAACC,EAAgB,SAASd,EAAQ,GAAG,GACjE,OAAQa,GAAY,CAAC,CACvB,EACA,cAAe,CACb,OAAQ,EAAQG,EAChB,OAAQN,GAAc,eAAiB,CAAC,CAC1C,CACF,CACF",
   "names": ["useBizProductContext", "checkItemAvailableForProduct", "useAiuiContext", "useBenefits", "variant", "coupon", "product", "bundle", "isLogin", "freeGift", "memberFunctionResult", "creditsRedemptionAmount", "discount", "codeSavings", "trackingData", "total", "showPaidShipping", "fullGift", "excludeProducts", "item", "showLevelDiscount", "showMemberDiscount"]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.0.20-alpha.1761817874871",
+  "version": "1.0.20-alpha.1761830686599",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",