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

@anker-in/headless-ui 1.0.20-alpha.1761793143802 → 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 (69) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.tsx"],
-  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport { createContext, useContext, useState, type ReactNode, type HTMLAttributes, useEffect } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n  activeValue: string | undefined\n  setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n  const context = useContext(BenefitsTabsContext)\n  if (!context) {\n    throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n  }\n  return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({ \n  defaultValue, \n  value, \n  onValueChange, \n  children, \n  className,\n  ...props \n}: BenefitsTabsProps) => {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n  \n  const activeValue = value ?? internalValue\n  const setActiveValue = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n      <div \n        id=\"ipc-product-detail-benefits-tabs\" \n        className={cn(\"bg-[#EAEAEC] rounded-xl py-4\", className)}\n        {...props}\n      >\n        <Root value={activeValue} onValueChange={setActiveValue}>\n          {children}\n        </Root>\n      </div>\n    </BenefitsTabsContext.Provider>\n  )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsList = ({ children, className, ...props }: BenefitsTabsListProps) => {\n  return (\n    <List\n      className={cn(\"flex space-x-6 overflow-x-auto px-4\", className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    >\n      {children}\n    </List>\n  )\n}\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n  const { activeValue } = useBenefitsTabsContext()\n  const isActive = activeValue === value\n\n  return (\n    <Trigger\n      value={value}\n      className={cn(\n        'text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]',\n        className\n      )}\n      {...props}\n    >\n      <Text\n        className={cn(\n          'absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300',\n          isActive && 'w-full'\n        )}\n      />\n      {children}\n    </Trigger>\n  )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n  return (\n    <Text\n      size={1}\n      className={cn(\n        \"font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsContent = ({ value, children, className, ...props }: BenefitsTabsContentProps) => {\n  return (\n    <Content \n      value={value} \n      className={cn(\"mt-4\", className)}\n      {...props}\n    >\n      {children}\n    </Content>\n  )\n}\n\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDQ,IAAAI,EAAA,6BAvDRC,EAAqB,iDACrBC,EAAoG,iBACpGC,EAAmB,8CACnBC,EAA6C,gCAS7C,MAAMC,KAAsB,iBAAmD,MAAS,EAElFC,EAAyB,IAAM,CACnC,MAAMC,KAAU,cAAWF,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,KAAI,YAASP,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,SACE,OAACd,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,mBAAC,OACC,GAAG,mCACH,aAAW,MAAG,+BAAgCL,CAAS,EACtD,GAAGC,EAEJ,mBAAC,QAAK,MAAOG,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmB,CAAC,CAAE,SAAAR,EAAU,UAAAC,EAAW,GAAGC,CAAM,OAEtD,OAAC,QACC,aAAW,MAAG,sCAAuCD,CAAS,EAC9D,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGC,EAEH,SAAAF,EACH,EAUES,EAAsB,CAAC,CAAE,MAAAX,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCgB,EAAWL,IAAgBP,EAEjC,SACE,QAAC,WACC,MAAOA,EACP,aAAW,MACT,mFACAG,CACF,EACC,GAAGC,EAEJ,oBAAC,QACC,aAAW,MACT,wFACAQ,GAAY,QACd,EACF,EACCV,GACH,CAEJ,EAOMW,EAAoB,CAAC,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,CAAM,OAEvD,OAAC,QACC,KAAM,EACN,aAAW,MACT,+EACAD,CACF,EACC,GAAGC,EAEH,SAAAF,EACH,EAUEY,EAAsB,CAAC,CAAE,MAAAd,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,OAEhE,OAAC,WACC,MAAOJ,EACP,aAAW,MAAG,OAAQG,CAAS,EAC9B,GAAGC,EAEH,SAAAF,EACH,EAKJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUa,EAC9Bb,EAAoB,MAAQe,EAC5Bf,EAAoB,QAAUgB,EAE9B,IAAO1B,EAAQU",
-  "names": ["ProductBenefitsTabs_exports", "__export", "ProductBenefitsTabs_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "import_helpers", "import_react_tabs", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent"]
+  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n  activeValue: string | undefined\n  setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n  const context = useContext(BenefitsTabsContext)\n  if (!context) {\n    throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n  }\n  return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: BenefitsTabsProps) => {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n\n  const activeValue = value ?? internalValue\n  const setActiveValue = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n      <div\n        id=\"ipc-product-detail-benefits-tabs\"\n        className={cn('bg-[#EAEAEC] rounded-xl py-[10px] lg-desktop:py-4', className)}\n        {...props}\n      >\n        <Root value={activeValue} onValueChange={setActiveValue}>\n          {children}\n        </Root>\n      </div>\n    </BenefitsTabsContext.Provider>\n  )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsList = forwardRef<HTMLDivElement, BenefitsTabsListProps>(({ children, className, ...props }, ref) => {\n  return (\n    <List\n      className={cn('flex space-x-6 overflow-x-auto px-4 relative', className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List>\n  )\n})\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n  const { activeValue } = useBenefitsTabsContext()\n  const isActive = activeValue === value\n\n  return (\n    <Trigger\n      value={value}\n      className={cn(\n        'text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]',\n        className\n      )}\n      {...props}\n    >\n      <Text\n        className={cn(\n          'absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300',\n          isActive && 'w-full'\n        )}\n      />\n      {children}\n    </Trigger>\n  )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n  return (\n    <Text\n      size={1}\n      className={cn('font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsContent = ({ value, children, className, ...props }: BenefitsTabsContentProps) => {\n  return (\n    <Content value={value} className={cn(className)} {...props}>\n      {children}\n    </Content>\n  )\n}\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+DQ,IAAAI,EAAA,6BA/DRC,EAAqB,iDACrBC,EASO,iBACPC,EAAmB,8CACnBC,EAA6C,gCAQ7C,MAAMC,KAAsB,iBAAmD,MAAS,EAElFC,EAAyB,IAAM,CACnC,MAAMC,KAAU,cAAWF,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,KAAI,YAASP,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,SACE,OAACd,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,mBAAC,OACC,GAAG,mCACH,aAAW,MAAG,oDAAqDL,CAAS,EAC3E,GAAGC,EAEJ,mBAAC,QAAK,MAAOG,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,KAAmB,cAAkD,CAAC,CAAE,SAAAR,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGO,OAE3G,OAAC,QACC,aAAW,MAAG,+CAAgDR,CAAS,EACvE,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,IAAKQ,EACJ,GAAGP,EAEH,SAAAF,EACH,CAEH,EAQKU,EAAsB,CAAC,CAAE,MAAAZ,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCiB,EAAWN,IAAgBP,EAEjC,SACE,QAAC,WACC,MAAOA,EACP,aAAW,MACT,sGACAG,CACF,EACC,GAAGC,EAEJ,oBAAC,QACC,aAAW,MACT,wFACAS,GAAY,QACd,EACF,EACCX,GACH,CAEJ,EAOMY,EAAoB,CAAC,CAAE,SAAAZ,EAAU,UAAAC,EAAW,GAAGC,CAAM,OAEvD,OAAC,QACC,KAAM,EACN,aAAW,MAAG,+EAAgFD,CAAS,EACtG,GAAGC,EAEH,SAAAF,EACH,EAUEa,EAAsB,CAAC,CAAE,MAAAf,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,OAEhE,OAAC,WAAQ,MAAOJ,EAAO,aAAW,MAAGG,CAAS,EAAI,GAAGC,EAClD,SAAAF,EACH,EAIJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUc,EAC9Bd,EAAoB,MAAQgB,EAC5BhB,EAAoB,QAAUiB,EAE9B,IAAO3B,EAAQU",
+  "names": ["ProductBenefitsTabs_exports", "__export", "ProductBenefitsTabs_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "import_helpers", "import_react_tabs", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "ref", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\n\nconst ProductBundle = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    bundle,\n    checkedBundle,\n    setCheckedBundle,\n    setCheckedGift,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const { title, bundleList, showAtListing } = bundle || {}\n\n  const availableBundleList = bundleList?.filter(bundle =>\n    bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n  )\n\n  if (!availableBundleList?.length && showAtListing) return null\n\n  const handleSelectedChange = (bundleItem: BundleListItem) => {\n    if (checkedBundle?.id === bundleItem.id) {\n      setCheckedBundle?.(undefined)\n      setJoinedRecommendBuyProducts?.({ bundle: undefined })\n    } else {\n      setCheckedGift?.(undefined)\n      setCheckedBundle?.(bundleItem)\n      setJoinedRecommendBuyProducts?.({ bundle: bundleItem })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      {availableBundleList?.map(bundle => {\n        const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n        return (\n          <div key={bundle.id} className=\"flex flex-col gap-4 mt-3 desktop:mt-4\">\n            <div\n              className={cn(\n                'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border',\n                {\n                  ['border-brand outline outline-1 outline-brand']: checkedBundle?.id === bundle.id,\n                }\n              )}\n            >\n              <Checkbox\n                onCheckedChange={() => handleSelectedChange(bundle)}\n                size=\"lg\"\n                id={bundle.id}\n                value={bundle.id}\n                checked={checkedBundle?.id === bundle.id}\n              />\n              <label htmlFor={bundle.id} className=\"size-full cursor-pointer\">\n                {bundleVariants?.map(bundleVariant => {\n                  return (\n                    <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n                      <div className=\"flex items-center gap-2\">\n                        <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n                        <Text\n                          className=\"text-sm laptop:text-[16px] laptop:text-[20px] desktop:text-[18px] font-bold\"\n                          html={bundleVariant.variant.product.title}\n                        />\n                      </div>\n                      <div className=\"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0\">\n                        <Text\n                          className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold\"\n                          html={formatPrice({\n                            amount: bundleVariant.price,\n                            locale,\n                            currencyCode: bundleVariant.variant.price.currencyCode,\n                          })}\n                        />\n                        {bundleVariant.price < bundleVariant.variant.price.amount && (\n                          <Text\n                            className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                            html={formatPrice({\n                              amount: bundleVariant.variant.price.amount,\n                              locale,\n                              currencyCode: bundleVariant.variant.price.currencyCode,\n                            })}\n                          />\n                        )}\n                      </div>\n                    </div>\n                  )\n                })}\n              </label>\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default ProductBundle\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwCM,IAAAI,EAAA,6BAxCNC,EAAgD,wCAChDC,EAAmB,8CACnBC,EAA+B,uCAC/BC,EAAqC,6CACrCC,EAA4B,6BAG5B,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,QAAAC,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,wBAAqB,EAEnB,CAAE,MAAAC,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIR,GAAU,CAAC,EAElDS,EAAsBF,GAAY,OAAOP,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMU,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDX,GAAe,KAAOW,EAAW,IACnCV,IAAmB,MAAS,EAC5BE,IAAgC,CAAE,OAAQ,MAAU,CAAC,IAErDD,IAAiB,MAAS,EAC1BD,IAAmBU,CAAU,EAC7BR,IAAgC,CAAE,OAAQQ,CAAW,CAAC,EAE1D,EAEA,SACE,QAAC,OAAI,UAAU,4BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMN,EAAO,EACjDG,GAAqB,IAAIT,GAAU,CAClC,MAAMa,EAAiBb,EAAO,SAAS,OAAOU,GAAKA,EAAE,QAAQ,MAAQX,EAAQ,GAAG,EAChF,SACE,OAAC,OAAoB,UAAU,wCAC7B,oBAAC,OACC,aAAW,MACT,4FACA,CACG,+CAAiDE,GAAe,KAAOD,EAAO,EACjF,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMW,EAAqBX,CAAM,EAClD,KAAK,KACL,GAAIA,EAAO,GACX,MAAOA,EAAO,GACd,QAASC,GAAe,KAAOD,EAAO,GACxC,KACA,OAAC,SAAM,QAASA,EAAO,GAAI,UAAU,2BAClC,SAAAa,GAAgB,IAAIC,MAEjB,QAAC,OAAI,UAAU,2CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,GAAe,SAAS,OAAO,IAAK,UAAU,wBAAwB,KACvF,OAAC,QACC,UAAU,8EACV,KAAMA,EAAc,QAAQ,QAAQ,MACtC,GACF,KACA,QAAC,OAAI,UAAU,yEACb,oBAAC,QACC,UAAU,0DACV,QAAM,eAAY,CAChB,OAAQA,EAAc,MACtB,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,WACjD,OAAC,QACC,UAAU,sFACV,QAAM,eAAY,CAChB,OAAQA,EAAc,QAAQ,MAAM,OACpC,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,GAEJ,IA3B6DA,EAAc,QAAQ,EA4BrF,CAEH,EACH,GACF,GAnDQd,EAAO,EAoDjB,CAEJ,CAAC,GACH,CAEJ,EAEA,IAAOX,EAAQQ",
+  "sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\n\nconst ProductBundle = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    bundle,\n    checkedBundle,\n    setCheckedBundle,\n    setCheckedGift,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const { title, bundleList, showAtListing } = bundle || {}\n\n  const availableBundleList = bundleList?.filter(bundle =>\n    bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n  )\n\n  if (!availableBundleList?.length && showAtListing) return null\n\n  const handleSelectedChange = (bundleItem: BundleListItem) => {\n    if (checkedBundle?.id === bundleItem.id) {\n      setCheckedBundle?.(undefined)\n      setJoinedRecommendBuyProducts?.({ bundle: undefined })\n    } else {\n      setCheckedGift?.(undefined)\n      setCheckedBundle?.(bundleItem)\n      setJoinedRecommendBuyProducts?.({ bundle: bundleItem })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 desktop:mt-4\">\n        {availableBundleList?.map(bundle => {\n          const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n          return (\n            <div key={bundle.id}>\n              <div\n                className={cn(\n                  'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2',\n                  {\n                    ['border-brand outline outline-1 outline-brand']: checkedBundle?.id === bundle.id,\n                  }\n                )}\n              >\n                <Checkbox\n                  onCheckedChange={() => handleSelectedChange(bundle)}\n                  size=\"lg\"\n                  className=\"rounded-full\"\n                  id={bundle.id}\n                  value={bundle.id}\n                  checked={checkedBundle?.id === bundle.id}\n                />\n                <label htmlFor={bundle.id} className=\"size-full cursor-pointer\">\n                  {bundleVariants?.map(bundleVariant => {\n                    return (\n                      <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n                        <div className=\"flex items-center gap-2\">\n                          <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n                          <Text\n                            className=\"text-sm laptop:text-[16px] line-clamp-2 laptop:text-[20px] desktop:text-[18px] font-bold\"\n                            html={bundleVariant.variant.product.title}\n                          />\n                        </div>\n                        <div className=\"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0\">\n                          <Text\n                            className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold\"\n                            html={formatPrice({\n                              amount: bundleVariant.price,\n                              locale,\n                              currencyCode: bundleVariant.variant.price.currencyCode,\n                            })}\n                          />\n                          {bundleVariant.price < bundleVariant.variant.price.amount && (\n                            <Text\n                              className=\"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                              html={formatPrice({\n                                amount: bundleVariant.variant.price.amount,\n                                locale,\n                                currencyCode: bundleVariant.variant.price.currencyCode,\n                              })}\n                            />\n                          )}\n                        </div>\n                      </div>\n                    )\n                  })}\n                </label>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductBundle\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwCM,IAAAI,EAAA,6BAxCNC,EAAgD,wCAChDC,EAAmB,8CACnBC,EAA+B,uCAC/BC,EAAqC,6CACrCC,EAA4B,6BAG5B,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,QAAAC,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,wBAAqB,EAEnB,CAAE,MAAAC,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIR,GAAU,CAAC,EAElDS,EAAsBF,GAAY,OAAOP,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMU,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDX,GAAe,KAAOW,EAAW,IACnCV,IAAmB,MAAS,EAC5BE,IAAgC,CAAE,OAAQ,MAAU,CAAC,IAErDD,IAAiB,MAAS,EAC1BD,IAAmBU,CAAU,EAC7BR,IAAgC,CAAE,OAAQQ,CAAW,CAAC,EAE1D,EAEA,SACE,QAAC,OAAI,UAAU,4BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMN,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,GAAqB,IAAIT,GAAU,CAClC,MAAMa,EAAiBb,EAAO,SAAS,OAAOU,GAAKA,EAAE,QAAQ,MAAQX,EAAQ,GAAG,EAChF,SACE,OAAC,OACC,oBAAC,OACC,aAAW,MACT,8FACA,CACG,+CAAiDE,GAAe,KAAOD,EAAO,EACjF,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMW,EAAqBX,CAAM,EAClD,KAAK,KACL,UAAU,eACV,GAAIA,EAAO,GACX,MAAOA,EAAO,GACd,QAASC,GAAe,KAAOD,EAAO,GACxC,KACA,OAAC,SAAM,QAASA,EAAO,GAAI,UAAU,2BAClC,SAAAa,GAAgB,IAAIC,MAEjB,QAAC,OAAI,UAAU,2CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,GAAe,SAAS,OAAO,IAAK,UAAU,wBAAwB,KACvF,OAAC,QACC,UAAU,2FACV,KAAMA,EAAc,QAAQ,QAAQ,MACtC,GACF,KACA,QAAC,OAAI,UAAU,yEACb,oBAAC,QACC,UAAU,0DACV,QAAM,eAAY,CAChB,OAAQA,EAAc,MACtB,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,WACjD,OAAC,QACC,UAAU,sFACV,QAAM,eAAY,CAChB,OAAQA,EAAc,QAAQ,MAAM,OACpC,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,GAEJ,IA3B6DA,EAAc,QAAQ,EA4BrF,CAEH,EACH,GACF,GApDQd,EAAO,EAqDjB,CAEJ,CAAC,EACH,GACF,CAEJ,EAEA,IAAOX,EAAQQ",
   "names": ["ProductBundle_exports", "__export", "ProductBundle_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_AiuiProvider", "import_BizProductProvider", "import_utils", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "bundleVariants", "bundleVariant"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, 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 { freeGift, checkedGift, setCheckedGift, setCheckedBundle, setJoinedRecommendBuyProducts, joinedRecommendBuyProducts } = 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 laptop:gap-0 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text className=\"text-sm laptop:text-[16px] desktop:text-[18px] font-bold\" html={gift.product.title} />\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 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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA7BNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CAAE,SAAAC,EAAU,YAAAC,EAAa,eAAAC,EAAgB,iBAAAC,EAAkB,8BAAAC,EAA+B,2BAAAC,CAA2B,KAAI,wBAAqB,EAC9I,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,KAAiB,WAAQ,IAAMF,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,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,wCACZ,SAAAG,EAAe,IAAII,MAClB,QAAC,OAEC,aAAW,MACT,8FACA,CACG,eAAiBZ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,8DACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QAAK,UAAU,2DAA2D,KAAMA,EAAK,QAAQ,MAAO,GACvG,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,0DAA0D,KAAML,EAAW,KAC3F,OAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAChB,OAAQK,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA/BKA,EAAK,EAgCZ,CACD,EACH,GACF,EA3CkC,IA6CtC,EAEA,IAAOxB,EAAQS",
+  "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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCM,IAAAI,EAAA,6BApCNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,KAAiB,WAAQ,IAAMF,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,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,EAAe,IAAII,MAClB,QAAC,OAEC,aAAW,MACT,8FACA,CACG,eAAiBZ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,iDACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,wEACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,0DAA0D,KAAML,EAAW,KAC3F,OAAC,QACC,UAAU,sFACV,QAAM,eAAY,CAChB,OAAQK,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAnCKA,EAAK,EAoCZ,CACD,EACH,GACF,EA/CkC,IAiDtC,EAEA,IAAOxB,EAAQS",
   "names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { 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] max-w-[227px] 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": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "ProductHighlight", "product", "variant", "isMobile", "open", "setOpen", "ksp", "ksp_value", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

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

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

package/dist/cjs/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] 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  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        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={() => setActiveGalleryTab(item)}\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\">\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: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        )}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block 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        )}\n      >\n        <SwiperRightButtonIcon className=\"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\">\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 tablet:block 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 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": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "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", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView"]
+  "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": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "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", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "jIndex", "ProductGalleryTab3DView"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var e in t)s(o,e,{get:t[e],enumerable:!0})},k=(o,t,e,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of r(t))!i.call(o,p)&&p!==e&&s(o,p,{get:()=>t[p],enumerable:!(c=l(t,p))||c.enumerable});return o};var x=o=>k(s({},"__esModule",{value:!0}),o);var R={};m(R,{default:()=>N});module.exports=x(R);var a=require("react/jsx-runtime"),d=require("../../../../components");const G=({BoxLeftGallery:o,BoxRightDetail:t,BoxBottomSummary:e})=>(0,a.jsxs)("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,a.jsxs)(d.Grid,{className:"laptop:gap-6",children:[(0,a.jsx)(d.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",children:o}),(0,a.jsx)(d.GridItem,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:t})]}),e]});var N=G;
+"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var a in t)s(o,a,{get:t[a],enumerable:!0})},k=(o,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of r(t))!i.call(o,p)&&p!==a&&s(o,p,{get:()=>t[p],enumerable:!(c=l(t,p))||c.enumerable});return o};var x=o=>k(s({},"__esModule",{value:!0}),o);var R={};m(R,{default:()=>N});module.exports=x(R);var e=require("react/jsx-runtime"),d=require("../../../../components");const G=({BoxLeftGallery:o,BoxRightDetail:t,BoxBottomSummary:a})=>(0,e.jsxs)("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,e.jsxs)(d.Grid,{className:"laptop:gap-6 gap-8",children:[(0,e.jsx)(d.GridItem,{className:"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:o}),(0,e.jsx)(d.GridItem,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:t})]}),a]});var N=G;
 //# sourceMappingURL=ProductGridBox.js.map

package/dist/cjs/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\">\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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaM,IAAAI,EAAA,6BAbNC,EAA+B,kCAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,OAMI,QAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,qBAAC,QAAK,UAAU,eACd,oBAAC,YAAS,UAAU,sHACjB,SAAAF,EACH,KACA,OAAC,YAAS,UAAU,qDAAsD,SAAAC,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOP,EAAQI",
+  "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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaM,IAAAI,EAAA,6BAbNC,EAA+B,kCAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,OAMI,QAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,qBAAC,QAAK,UAAU,qBACd,oBAAC,YAAS,UAAU,0GACjB,SAAAF,EACH,KACA,OAAC,YAAS,UAAU,qDAAsD,SAAAC,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOP,EAAQI",
   "names": ["ProductGridBox_exports", "__export", "ProductGridBox_default", "__toCommonJS", "import_jsx_runtime", "import_components", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary"]
 }

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

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