npm - @anker-in/headless-ui - Versions diffs - 1.3.7 → 1.3.9 - Mend

@anker-in/headless-ui 1.3.7 → 1.3.9

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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var z=Object.create;var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var K=(o,t)=>{for(var n in t)b(o,n,{get:t[n],enumerable:!0})},T=(o,t,n,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of H(t))!A.call(o,a)&&a!==n&&b(o,a,{get:()=>t[a],enumerable:!(d=E(t,a))||d.enumerable});return o};var P=(o,t,n)=>(n=o!=null?z(U(o)):{},T(t||!o||!o.__esModule?b(n,"default",{value:o,enumerable:!0}):n,o)),q=o=>T(b({},"__esModule",{value:!0}),o);var J={};K(J,{CouponCard:()=>y,MemberDiscountCard:()=>N,default:()=>G});module.exports=q(J);var e=require("react/jsx-runtime"),M=require("react"),s=require("../../../../../../helpers/index.js"),r=require("../../../../../../components/index.js"),w=P(require("../../../../hooks/useCopy.js")),F=require("../../../../hooks/useBenefits.js"),I=require("../../../../BizProductProvider.js"),m=require("../../../../utils/textFormat.js"),_=require("../../../../../AiuiProvider/index.js"),S=P(require("../../../../../../hooks/useCountDown.js"));const y=({checked:o,discountText:t,codeText:n,code:d,countdownText:a,copyText:C,copiedText:k,onClick:p,className:x})=>{const{copied:u,copy:v}=(0,w.default)();return(0,e.jsx)("div",{className:(0,s.cn)("flex flex-col gap-3 rounded-box overflow-hidden",x),role:"button",tabIndex:0,onClick:p,children:(0,e.jsxs)("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(r.Checkbox,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:o}),(0,e.jsx)(r.Text,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:t})]}),(0,e.jsxs)("div",{className:"flex w-full items-center gap-2",children:[(0,e.jsx)("div",{className:"flex shrink-0 flex-col items-start",children:(0,e.jsx)(r.Text,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]",children:n})}),(0,e.jsx)(r.Link,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:f=>{f.preventDefault(),f.stopPropagation(),v(d)},children:u?k:C})]})]}),a&&(0,e.jsx)(r.Text,{className:"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]",children:a})]})})};y.displayName="CouponCard";const N=({checked:o,discountText:t,description:n,onClick:d,className:a})=>(0,e.jsx)("div",{className:(0,s.cn)("flex flex-col gap-3 rounded-box overflow-hidden",a),role:"button",tabIndex:0,onClick:d,children:(0,e.jsx)("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(r.Checkbox,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:o}),(0,e.jsx)(r.Text,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:t})]}),n&&(0,e.jsx)(r.Text,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8",children:n})]})})});N.displayName="MemberDiscountCard";const D=({className:o})=>{const{profile:t,variant:n,onUseCouponChange:d,onUseMemberDiscountChange:a,openSignInPopup:C,discount:k,savingDetail:p,product:x}=(0,I.useBizProductContext)(),{locale:u="us",trackingData:v}=(0,_.useAiuiContext)(),f=(0,F.useBenefits)({variant:n}),{commonCoupon:c,memberDiscount:g}=f,{days:B,hours:L,minutes:R,seconds:$}=(0,S.default)({endTime:c?.config?.ends_at}),h=v?.common?.coupon,i=(0,M.useMemo)(()=>x?.payload?.components?.find(l=>l.componentKey==="ProductCoupon")?.data||{},[x?.payload]);return!c?.enable&&!g?.enable||!n?.availableForSale?null:(0,e.jsxs)("div",{className:(0,s.cn)("ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4",o),children:[i?.title&&(0,e.jsx)(r.Text,{className:"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]",children:i.title}),c?.enable&&(0,e.jsx)(y,{checked:p?.coupon>0,discountText:(0,m.replaceTemplate)(i?.common?.offCoupon,{discount:c?.config?.value_type=="percentage"?Math.abs(Number(c?.config?.value||0))+"%":(0,s.formatPrice)({amount:Math.abs(Number(c?.config?.fixed_value||0)),currencyCode:n.price.currencyCode,locale:u})||""}),codeText:(0,m.replaceTemplate)(i?.common?.withCode,{code:c?.config?.title??""}),code:c?.config?.title??"",countdownText:c?.config?.ends_at?(0,m.replaceTemplate)(i?.common?.endsIn,{countdown:`${B}:${L}:${R}:${$}`}):void 0,copyText:h?.copy||i?.copyCode,copiedText:h?.copied||i?.copied,onClick:()=>{const l=p?.coupon?0:k?.codeSavings??0;d?.(l)}}),g?.enable&&(0,e.jsx)(N,{checked:!!t?.email&&!!p?.member,discountText:(0,m.replaceTemplate)(i?.member?.offMember,{discount:(0,s.formatPrice)({amount:g?.config?.amount??0,currencyCode:n.price.currencyCode,locale:u})||""}),description:t?.email?i?.member?.loginDesc:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{className:"mr-2",dangerouslySetInnerHTML:{__html:i?.member?.unloginDesc}}),(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:l=>{l?.stopPropagation(),C?.()},className:"underline text-nowrap",dangerouslySetInnerHTML:{__html:i?.member?.login}})]}),onClick:()=>{if(t?.email){const l=p?.member?0:g?.config?.amount??0;a?.(l)}}})]})};D.displayName="ProductCoupon";var G=D;
+"use strict";"use client";var $=Object.create;var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var A=(o,t)=>{for(var n in t)f(o,n,{get:t[n],enumerable:!0})},h=(o,t,n,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of E(t))!U.call(o,a)&&a!==n&&f(o,a,{get:()=>t[a],enumerable:!(d=z(t,a))||d.enumerable});return o};var T=(o,t,n)=>(n=o!=null?$(H(o)):{},h(t||!o||!o.__esModule?f(n,"default",{value:o,enumerable:!0}):n,o)),q=o=>h(f({},"__esModule",{value:!0}),o);var J={};A(J,{CouponCard:()=>v,MemberDiscountCard:()=>y,default:()=>G});module.exports=q(J);var e=require("react/jsx-runtime"),O=require("react"),s=require("../../../../../../helpers/index.js"),r=require("../../../../../../components/index.js"),P=T(require("../../../../hooks/useCopy.js")),w=require("../../../../hooks/useBenefits.js"),F=require("../../../../BizProductProvider.js"),M=require("../../../../hooks/useComponentData.js"),m=require("../../../../utils/textFormat.js"),I=require("../../../../../AiuiProvider/index.js"),_=T(require("../../../../../../hooks/useCountDown.js"));const v=({checked:o,discountText:t,codeText:n,code:d,countdownText:a,copyText:g,copiedText:b,onClick:l,className:x})=>{const{copied:C,copy:k}=(0,P.default)();return(0,e.jsx)("div",{className:(0,s.cn)("flex flex-col gap-3 rounded-box overflow-hidden",x),role:"button",tabIndex:0,onClick:l,children:(0,e.jsxs)("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(r.Checkbox,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:o}),(0,e.jsx)(r.Text,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:t})]}),(0,e.jsxs)("div",{className:"flex w-full items-center gap-2",children:[(0,e.jsx)("div",{className:"flex shrink-0 flex-col items-start",children:(0,e.jsx)(r.Text,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]",children:n})}),(0,e.jsx)(r.Link,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:i=>{i.preventDefault(),i.stopPropagation(),k(d)},children:C?b:g})]})]}),a&&(0,e.jsx)(r.Text,{className:"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]",children:a})]})})};v.displayName="CouponCard";const y=({checked:o,discountText:t,description:n,onClick:d,className:a})=>(0,e.jsx)("div",{className:(0,s.cn)("flex flex-col gap-3 rounded-box overflow-hidden",a),role:"button",tabIndex:0,onClick:d,children:(0,e.jsx)("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(r.Checkbox,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:o}),(0,e.jsx)(r.Text,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:t})]}),n&&(0,e.jsx)(r.Text,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8",children:n})]})})});y.displayName="MemberDiscountCard";const D=({className:o})=>{const{profile:t,variant:n,onUseCouponChange:d,onUseMemberDiscountChange:a,openSignInPopup:g,discount:b,savingDetail:l}=(0,F.useBizProductContext)(),{locale:x="us",trackingData:C}=(0,I.useAiuiContext)(),k=(0,w.useBenefits)({variant:n}),{commonCoupon:i,memberDiscount:u}=k,{days:S,hours:B,minutes:L,seconds:R}=(0,_.default)({endTime:i?.config?.ends_at}),N=C?.common?.coupon,c=(0,M.useComponentData)("ProductCoupon")??{};return!i?.enable&&!u?.enable||!n?.availableForSale?null:(0,e.jsxs)("div",{className:(0,s.cn)("ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4",o),children:[c?.title&&(0,e.jsx)(r.Text,{className:"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]",children:c.title}),i?.enable&&(0,e.jsx)(v,{checked:l?.coupon>0,discountText:(0,m.replaceTemplate)(c?.common?.offCoupon,{discount:i?.config?.value_type=="percentage"?Math.abs(Number(i?.config?.value||0))+"%":(0,s.formatPrice)({amount:Math.abs(Number(i?.config?.fixed_value||0)),currencyCode:n.price.currencyCode,locale:x})||""}),codeText:(0,m.replaceTemplate)(c?.common?.withCode,{code:i?.config?.title??""}),code:i?.config?.title??"",countdownText:i?.config?.ends_at?(0,m.replaceTemplate)(c?.common?.endsIn,{countdown:`${S}:${B}:${L}:${R}`}):void 0,copyText:N?.copy||c?.copyCode,copiedText:N?.copied||c?.copied,onClick:()=>{const p=l?.coupon?0:b?.codeSavings??0;d?.(p)}}),u?.enable&&(0,e.jsx)(y,{checked:!!t?.email&&!!l?.member,discountText:(0,m.replaceTemplate)(c?.member?.offMember,{discount:(0,s.formatPrice)({amount:u?.config?.amount??0,currencyCode:n.price.currencyCode,locale:x})||""}),description:t?.email?c?.member?.loginDesc:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{className:"mr-2",dangerouslySetInnerHTML:{__html:c?.member?.unloginDesc}}),(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:p=>{p?.stopPropagation(),g?.()},className:"underline text-nowrap",dangerouslySetInnerHTML:{__html:c?.member?.login}})]}),onClick:()=>{if(t?.email){const p=l?.member?0:u?.config?.amount??0;a?.(p)}}})]})};D.displayName="ProductCoupon";var G=D;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React, { useMemo } from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\nexport interface ProductCouponProps {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n  /** \u662F\u5426\u9009\u4E2D */\n  checked: boolean\n  /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n  discountText: string\n  /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n  codeText: string\n  /** \u4F18\u60E0\u7801 */\n  code: string\n  /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n  countdownText?: string\n  /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n  copyText: string\n  /** \u5DF2\u590D\u5236\u6587\u6848 */\n  copiedText: string\n  /** \u70B9\u51FB\u4E8B\u4EF6 */\n  onClick?: () => void\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n  checked,\n  discountText,\n  codeText,\n  code,\n  countdownText,\n  copyText,\n  copiedText,\n  onClick,\n  className,\n}) => {\n  const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n  return (\n    <div\n      className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n    >\n      <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center gap-1\">\n            <Checkbox\n              size=\"lg\"\n              className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n              checked={checked}\n            />\n            <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n              {discountText}\n            </Text>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2\">\n            <div className=\"flex shrink-0 flex-col items-start\">\n              <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n                {codeText}\n              </Text>\n            </div>\n            <Link\n              className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n              role=\"button\"\n              tabIndex={0}\n              onClick={event => {\n                event.preventDefault()\n                event.stopPropagation()\n                copyToClipboard(code)\n              }}\n            >\n              {isCopied ? copiedText : copyText}\n            </Link>\n          </div>\n        </div>\n\n        {countdownText && (\n          <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n            {countdownText}\n          </Text>\n        )}\n      </div>\n    </div>\n  )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n  /** \u662F\u5426\u9009\u4E2D */\n  checked: boolean\n  /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n  discountText: string\n  /** \u63CF\u8FF0\u6587\u6848 */\n  description?: string\n  /** \u70B9\u51FB\u4E8B\u4EF6 */\n  onClick?: () => void\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n  checked,\n  discountText,\n  description,\n  onClick,\n  className,\n}) => {\n  return (\n    <div\n      className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n    >\n      <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center gap-1\">\n            <Checkbox\n              size=\"lg\"\n              className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n              checked={checked}\n            />\n            <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n              {discountText}\n            </Text>\n          </div>\n\n          {description && (\n            <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n  const {\n    profile,\n    variant,\n    onUseCouponChange,\n    onUseMemberDiscountChange,\n    openSignInPopup,\n    discount,\n    savingDetail,\n    product,\n  } = useBizProductContext()\n  const { locale = 'us', trackingData } = useAiuiContext()\n  const benefits = useBenefits({ variant })\n  const { commonCoupon, memberDiscount } = benefits\n\n  const { days, hours, minutes, seconds } = useCountDown({ endTime: commonCoupon?.config?.ends_at })\n\n  const couponCopy = trackingData?.common?.coupon\n\n  const productCouponData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductCoupon')?.data || {}\n  }, [product?.payload])\n\n  if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n    return null\n  }\n\n  return (\n    <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n      {productCouponData?.title && (\n        <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n          {productCouponData.title}\n        </Text>\n      )}\n      {commonCoupon?.enable && (\n        <CouponCard\n          checked={savingDetail?.coupon > 0}\n          discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n            discount:\n              commonCoupon?.config?.value_type == 'percentage'\n                ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n                : formatPrice({\n                    amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  }) || '',\n          })}\n          codeText={replaceTemplate(productCouponData?.common?.withCode, {\n            code: commonCoupon?.config?.title ?? '',\n          })}\n          code={commonCoupon?.config?.title ?? ''}\n          countdownText={\n            commonCoupon?.config?.ends_at\n              ? replaceTemplate(productCouponData?.common?.endsIn, {\n                  countdown: `${days}:${hours}:${minutes}:${seconds}`,\n                })\n              : undefined\n          }\n          copyText={couponCopy?.copy || productCouponData?.copyCode}\n          copiedText={couponCopy?.copied || productCouponData?.copied}\n          onClick={() => {\n            const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n            onUseCouponChange?.(couponSaving)\n          }}\n        />\n      )}\n\n      {memberDiscount?.enable && (\n        <MemberDiscountCard\n          checked={Boolean(profile?.email) && !!savingDetail?.member}\n          discountText={replaceTemplate(productCouponData?.member?.offMember, {\n            discount:\n              formatPrice({\n                amount: memberDiscount?.config?.amount ?? 0,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              }) || '',\n          })}\n          description={\n            Boolean(profile?.email) ? (\n              productCouponData?.member?.loginDesc\n            ) : (\n              <>\n                <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={e => {\n                    e?.stopPropagation()\n                    openSignInPopup?.()\n                  }}\n                  className=\"underline text-nowrap\"\n                  dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n                />\n              </>\n            )\n          }\n          onClick={() => {\n            if (profile?.email) {\n              const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n              onUseMemberDiscountChange?.(memberSaving)\n            }\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nProductCoupon.displayName = 'ProductCoupon'\n\nexport default ProductCoupon\n"],
-  "mappings": "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",
-  "names": ["ProductCoupon_exports", "__export", "CouponCard", "MemberDiscountCard", "ProductCoupon_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_helpers", "import_components", "import_useCopy", "import_useBenefits", "import_BizProductProvider", "import_textFormat", "import_AiuiProvider", "import_useCountDown", "checked", "discountText", "codeText", "code", "countdownText", "copyText", "copiedText", "onClick", "className", "isCopied", "copyToClipboard", "useCopy", "event", "description", "ProductCoupon", "profile", "variant", "onUseCouponChange", "onUseMemberDiscountChange", "openSignInPopup", "discount", "savingDetail", "product", "locale", "trackingData", "benefits", "commonCoupon", "memberDiscount", "days", "hours", "minutes", "seconds", "useCountDown", "couponCopy", "productCouponData", "item", "couponSaving", "e", "memberSaving"]
+  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\nexport interface ProductCouponProps {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n  /** \u662F\u5426\u9009\u4E2D */\n  checked: boolean\n  /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n  discountText: string\n  /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n  codeText: string\n  /** \u4F18\u60E0\u7801 */\n  code: string\n  /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n  countdownText?: string\n  /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n  copyText: string\n  /** \u5DF2\u590D\u5236\u6587\u6848 */\n  copiedText: string\n  /** \u70B9\u51FB\u4E8B\u4EF6 */\n  onClick?: () => void\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n  checked,\n  discountText,\n  codeText,\n  code,\n  countdownText,\n  copyText,\n  copiedText,\n  onClick,\n  className,\n}) => {\n  const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n  return (\n    <div\n      className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n    >\n      <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center gap-1\">\n            <Checkbox\n              size=\"lg\"\n              className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n              checked={checked}\n            />\n            <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n              {discountText}\n            </Text>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2\">\n            <div className=\"flex shrink-0 flex-col items-start\">\n              <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n                {codeText}\n              </Text>\n            </div>\n            <Link\n              className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n              role=\"button\"\n              tabIndex={0}\n              onClick={event => {\n                event.preventDefault()\n                event.stopPropagation()\n                copyToClipboard(code)\n              }}\n            >\n              {isCopied ? copiedText : copyText}\n            </Link>\n          </div>\n        </div>\n\n        {countdownText && (\n          <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n            {countdownText}\n          </Text>\n        )}\n      </div>\n    </div>\n  )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n  /** \u662F\u5426\u9009\u4E2D */\n  checked: boolean\n  /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n  discountText: string\n  /** \u63CF\u8FF0\u6587\u6848 */\n  description?: string\n  /** \u70B9\u51FB\u4E8B\u4EF6 */\n  onClick?: () => void\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n  checked,\n  discountText,\n  description,\n  onClick,\n  className,\n}) => {\n  return (\n    <div\n      className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n      role=\"button\"\n      tabIndex={0}\n      onClick={onClick}\n    >\n      <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center gap-1\">\n            <Checkbox\n              size=\"lg\"\n              className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n              checked={checked}\n            />\n            <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n              {discountText}\n            </Text>\n          </div>\n\n          {description && (\n            <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n  const { profile, variant, onUseCouponChange, onUseMemberDiscountChange, openSignInPopup, discount, savingDetail } =\n    useBizProductContext()\n  const { locale = 'us', trackingData } = useAiuiContext()\n  const benefits = useBenefits({ variant })\n  const { commonCoupon, memberDiscount } = benefits\n\n  const { days, hours, minutes, seconds } = useCountDown({ endTime: commonCoupon?.config?.ends_at })\n\n  const couponCopy = trackingData?.common?.coupon\n\n  const productCouponData = useComponentData('ProductCoupon') ?? {}\n\n  if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n    return null\n  }\n\n  return (\n    <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n      {productCouponData?.title && (\n        <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n          {productCouponData.title}\n        </Text>\n      )}\n      {commonCoupon?.enable && (\n        <CouponCard\n          checked={savingDetail?.coupon > 0}\n          discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n            discount:\n              commonCoupon?.config?.value_type == 'percentage'\n                ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n                : formatPrice({\n                    amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  }) || '',\n          })}\n          codeText={replaceTemplate(productCouponData?.common?.withCode, {\n            code: commonCoupon?.config?.title ?? '',\n          })}\n          code={commonCoupon?.config?.title ?? ''}\n          countdownText={\n            commonCoupon?.config?.ends_at\n              ? replaceTemplate(productCouponData?.common?.endsIn, {\n                  countdown: `${days}:${hours}:${minutes}:${seconds}`,\n                })\n              : undefined\n          }\n          copyText={couponCopy?.copy || productCouponData?.copyCode}\n          copiedText={couponCopy?.copied || productCouponData?.copied}\n          onClick={() => {\n            const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n            onUseCouponChange?.(couponSaving)\n          }}\n        />\n      )}\n\n      {memberDiscount?.enable && (\n        <MemberDiscountCard\n          checked={Boolean(profile?.email) && !!savingDetail?.member}\n          discountText={replaceTemplate(productCouponData?.member?.offMember, {\n            discount:\n              formatPrice({\n                amount: memberDiscount?.config?.amount ?? 0,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              }) || '',\n          })}\n          description={\n            Boolean(profile?.email) ? (\n              productCouponData?.member?.loginDesc\n            ) : (\n              <>\n                <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={e => {\n                    e?.stopPropagation()\n                    openSignInPopup?.()\n                  }}\n                  className=\"underline text-nowrap\"\n                  dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n                />\n              </>\n            )\n          }\n          onClick={() => {\n            if (profile?.email) {\n              const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n              onUseMemberDiscountChange?.(memberSaving)\n            }\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nProductCoupon.displayName = 'ProductCoupon'\n\nexport default ProductCoupon\n"],
+  "mappings": "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",
+  "names": ["ProductCoupon_exports", "__export", "CouponCard", "MemberDiscountCard", "ProductCoupon_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_helpers", "import_components", "import_useCopy", "import_useBenefits", "import_BizProductProvider", "import_useComponentData", "import_textFormat", "import_AiuiProvider", "import_useCountDown", "checked", "discountText", "codeText", "code", "countdownText", "copyText", "copiedText", "onClick", "className", "isCopied", "copyToClipboard", "useCopy", "event", "description", "ProductCoupon", "profile", "variant", "onUseCouponChange", "onUseMemberDiscountChange", "openSignInPopup", "discount", "savingDetail", "locale", "trackingData", "benefits", "commonCoupon", "memberDiscount", "days", "hours", "minutes", "seconds", "useCountDown", "couponCopy", "productCouponData", "couponSaving", "e", "memberSaving"]
 }

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

@@ -1,6 +1,6 @@
-"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(a,l)=>{for(var c in l)f(a,c,{get:l[c],enumerable:!0})},D=(a,l,c,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of N(l))!C.call(a,o)&&o!==c&&f(a,o,{get:()=>l[o],enumerable:!(p=y(l,o))||p.enumerable});return a};var E=a=>D(f({},"__esModule",{value:!0}),a);var P={};T(P,{default:()=>L});module.exports=E(P);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),v=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js"),w=require("../../../../../../shared/track.js");const _=()=>{const{product:a,variant:l}=(0,h.useBizProductContext)(),[c,p]=(0,s.useState)(!1),o=(0,s.useMemo)(()=>a?.payload?.components?.find(i=>i.componentKey==="ProductHighlight")?.data||{},[a?.payload]),[u,d]=(0,s.useState)(o?.ksp?.[0]),e=(0,s.useCallback)(i=>{(0,w.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${l.sku}`,position:o?.title||"",button_name:i||o?.view||""}})},[o?.title,o?.view,l.sku]);return Reflect.ownKeys(o).length?(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[o?.title&&(0,t.jsx)(n.Text,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:o?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:p,children:[o?.view&&(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-[14px] lg-desktop:text-[16px] font-bold",onClick:()=>e(),children:o?.view})}),(0,t.jsx)(A,{ksp:o?.ksp||[],activeKspItem:u,setActiveKspItem:d,gaTrackEvent:e})]})]}),(0,t.jsx)("ul",{className:"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5",children:o?.ksp?.map(i=>(0,t.jsx)("li",{className:"product-highlight-item cursor-pointer",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{i?.img&&(d(i),p(!0),e(i?.title))},className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]",html:i?.title})},i?.title))})]}):null},A=({ksp:a,activeKspItem:l,setActiveKspItem:c,gaTrackEvent:p})=>{const o=(0,s.useRef)([]),u=(0,s.useRef)(null),d=(0,s.useCallback)(e=>{const i=a.findIndex(m=>m.title===e?.title),g=o.current[i];if(g&&u.current){const m=u.current,x=g,k=x.offsetLeft-m.offsetWidth/2+x.offsetWidth/2;m.scrollTo({left:k,behavior:"smooth"})}},[a]);return(0,s.useEffect)(()=>{l&&setTimeout(()=>{d(l)},100)},[d,l]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
+"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var D=(i,o)=>{for(var r in o)f(i,r,{get:o[r],enumerable:!0})},E=(i,o,r,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of C(o))!T.call(i,s)&&s!==r&&f(i,s,{get:()=>o[s],enumerable:!(l=y(o,s))||l.enumerable});return i};var _=i=>E(f({},"__esModule",{value:!0}),i);var R={};D(R,{default:()=>P});module.exports=_(R);var e=require("react/jsx-runtime"),a=require("../../../../../../components/index.js"),c=require("@radix-ui/react-tabs"),n=require("react"),v=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),b=require("../../../../hooks/useComponentData.js"),w=require("../../../../../../shared/Styles.js"),k=require("../../../../../../shared/track.js");const A=()=>{const{variant:i}=(0,h.useBizProductContext)(),[o,r]=(0,n.useState)(!1),l=(0,b.useComponentData)("ProductHighlight")??{},[s,d]=(0,n.useState)(l?.ksp?.[0]),p=(0,n.useCallback)(t=>{(0,k.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${i.sku}`,position:l?.title||"",button_name:t||l?.view||""}})},[l?.title,l?.view,i.sku]);return Reflect.ownKeys(l).length?(0,e.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,e.jsx)(a.Text,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:l?.title}),(0,e.jsxs)(a.Dialog,{open:o,onOpenChange:r,children:[l?.view&&(0,e.jsx)(a.DialogTrigger,{asChild:!0,children:(0,e.jsx)(a.Button,{variant:"link",className:"!p-0 text-[14px] lg-desktop:text-[16px] font-bold",onClick:()=>p(),children:l?.view})}),(0,e.jsx)(L,{ksp:l?.ksp||[],activeKspItem:s,setActiveKspItem:d,gaTrackEvent:p})]})]}),(0,e.jsx)("ul",{className:"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5",children:l?.ksp?.map(t=>(0,e.jsx)("li",{className:"product-highlight-item cursor-pointer",children:(0,e.jsx)(a.Text,{size:3,onClick:()=>{t?.img&&(d(t),r(!0),p(t?.title))},className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]",html:t?.title})},t?.title))})]}):null},L=({ksp:i,activeKspItem:o,setActiveKspItem:r,gaTrackEvent:l})=>{const s=(0,n.useRef)([]),d=(0,n.useRef)(null),p=(0,n.useCallback)(t=>{const u=i.findIndex(m=>m.title===t?.title),g=s.current[u];if(g&&d.current){const m=d.current,x=g,N=x.offsetLeft-m.offsetWidth/2+x.offsetWidth/2;m.scrollTo({left:N,behavior:"smooth"})}},[i]);return(0,n.useEffect)(()=>{o&&setTimeout(()=>{p(o)},100)},[p,o]),(0,e.jsxs)(a.DialogContent,{className:"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4",children:[(0,e.jsx)("style",{children:`
         .dialog-close-icon {
-          color: ${l?.closeColor||"#1D1D1F"};
+          color: ${o?.closeColor||"#1D1D1F"};
         }
-      `}),(0,t.jsxs)(r.Root,{value:l?.title,className:"w-full overflow-hidden",children:[a?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:e?.title||"",imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,t.jsx)("div",{ref:u,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:a?.map((e,i)=>(0,t.jsx)(r.Trigger,{ref:g=>{g&&(o.current[i]=g)},className:(0,v.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===l?.title&&"bg-white"),onClick:()=>{d(e),c(e),p(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},i+e.title))})})}),(0,t.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:a?.map((e,i)=>(0,t.jsx)(r.Content,{value:e.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:e.description},i+e.title))})]})]})]})};var L=(0,b.withLayout)(_);
+      `}),(0,e.jsxs)(c.Root,{value:o?.title,className:"w-full overflow-hidden",children:[i?.map(t=>(0,e.jsx)(c.Content,{value:t.title,children:(0,e.jsx)(a.Picture,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:t?.title||"",imgClassName:"object-cover h-full"})},t.title)),(0,e.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,e.jsx)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,e.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,e.jsx)(c.List,{className:"flex w-max p-1",children:i?.map((t,u)=>(0,e.jsx)(c.Trigger,{ref:g=>{g&&(s.current[u]=g)},className:(0,v.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",t.title===o?.title&&"bg-white"),onClick:()=>{p(t),r(t),l(t?.title)},value:t.title,children:(0,e.jsx)(a.Text,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},u+t.title))})})}),(0,e.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:i?.map((t,u)=>(0,e.jsx)(c.Content,{value:t.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:t.description},u+t.title))})]})]})]})};var P=(0,w.withLayout)(A);
 //# 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 { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  if (!Reflect.ownKeys(productHighlightData).length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text\n            className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n            html={productHighlightData?.title}\n          />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          {productHighlightData?.view && (\n            <DialogTrigger asChild>\n              <Button\n                variant=\"link\"\n                className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n                onClick={() => gaTrackEvent()}\n              >\n                {productHighlightData?.view}\n              </Button>\n            </DialogTrigger>\n          )}\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n            <Text\n              size={3}\n              onClick={() => {\n                if (!item?.img) return\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n              html={item?.title}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (_activeKspItem: any) => void\n  gaTrackEvent: (_buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item?.title || ''}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\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 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"laptop-md:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
-  "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
+  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useComponentData('ProductHighlight') ?? {}\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  if (!Reflect.ownKeys(productHighlightData).length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text\n            className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n            html={productHighlightData?.title}\n          />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          {productHighlightData?.view && (\n            <DialogTrigger asChild>\n              <Button\n                variant=\"link\"\n                className=\"!p-0 text-[14px] lg-desktop:text-[16px] font-bold\"\n                onClick={() => gaTrackEvent()}\n              >\n                {productHighlightData?.view}\n              </Button>\n            </DialogTrigger>\n          )}\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <ul className=\"lg-desktop:mt-4 mt-3 flex list-disc flex-col gap-1 pl-5\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <li key={item?.title} className=\"product-highlight-item cursor-pointer\">\n            <Text\n              size={3}\n              onClick={() => {\n                if (!item?.img) return\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#080A0F]\"\n              html={item?.title}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (_activeKspItem: any) => void\n  gaTrackEvent: (_buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[90vw] tablet:w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item?.title || ''}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\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 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"laptop-md:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
+  "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_useComponentData", "import_Styles", "import_track", "ProductHighlight", "variant", "open", "setOpen", "productHighlightData", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "item", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
-  "sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\n\n  if (!product.options.length) return null\n\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 lg-desktop:mt-4 mt-3 flex items-center gap-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"ipc-product-detail-options-value relative\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                size={3}\n                className=\"font-bold text-[14px] leading-[1.2] lg-desktop:text-[16px]\"\n                html={capitalizedName}\n              />\n              <div className=\"lg-desktop:mt-4 mt-3 grid grid-cols-2 gap-3\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                    }}\n                    className={cn('rounded-box border-2 text-[14px] laptop:text-[16px] border-[#E4E5E6] px-4 py-6 text-left font-bold', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2Bc,IAAAI,EAAA,6BA3BdC,EAA8B,iDAC9BC,EAAmB,8CACnBC,EAAkC,iBAClCC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAAI,wBAAqB,EACvG,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EAE7CC,KAAqB,WAAQ,IAC1BP,GAAS,SAAS,YAAY,KAAMQ,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACR,GAAS,OAAO,CAAC,EAErB,OAAKA,EAAQ,QAAQ,UAGnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIS,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,GADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAChE,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,UAAU,6DACV,KAAMJ,GAAoB,YAAcN,EAAgBQ,EAAO,IAAI,EACrE,KACA,OAAC,OAAI,UAAU,oEACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWV,CAAW,sBAAmB,UAAOQ,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DT,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBQ,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACP,EAAaO,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBV,EAAgBS,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IA1CQJ,EAAO,EA2CjB,EAEG,CACL,MAAMQ,EAAkBR,EAAO,KAAK,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,KAAK,MAAM,CAAC,EACjF,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,KAAM,EACN,UAAU,6DACV,KAAMQ,EACR,KACA,OAAC,OAAI,UAAU,8CACZ,SAAAR,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAChE,EACA,aAAW,MAAG,qGAAsG,CAClH,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GARIA,CASP,CACD,EACH,IArBQH,EAAO,EAsBjB,CAEJ,CACF,CAAC,EACH,EAnFkC,IAqFtC,EAEA,IAAOpB,KAAQ,cAAWU,CAAc",
-  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "capitalizedName"]
+  "sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts, product } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const productOptionsData = useComponentData('ProductOptions') ?? {}\n\n  if (!product.options.length) return null\n\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 lg-desktop:mt-4 mt-3 flex items-center gap-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"ipc-product-detail-options-value relative\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text\n                as=\"p\"\n                size={3}\n                className=\"font-bold text-[14px] leading-[1.2] lg-desktop:text-[16px]\"\n                html={capitalizedName}\n              />\n              <div className=\"lg-desktop:mt-4 mt-3 grid grid-cols-2 gap-3\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                    }}\n                    className={cn(\n                      'rounded-box border-2 text-[14px] laptop:text-[16px] border-[#E4E5E6] px-4 py-6 text-left font-bold',\n                      {\n                        'border-brand': selectedOptions[option.name] === label,\n                      }\n                    )}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default withLayout(ProductOptions)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0Bc,IAAAI,EAAA,6BA1BdC,EAA8B,iDAC9BC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAAiC,iDACjCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,EAA+B,QAAAC,CAAQ,KAAI,wBAAqB,EACvG,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EAE7CC,KAAqB,oBAAiB,gBAAgB,GAAK,CAAC,EAElE,OAAKJ,EAAQ,QAAQ,UAGnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIK,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,GADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAChE,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,UAAU,6DACV,KAAMH,GAAoB,YAAcP,EAAgBQ,EAAO,IAAI,EACrE,KACA,OAAC,OAAI,UAAU,oEACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWT,CAAW,sBAAmB,UAAOO,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DT,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBQ,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACN,EAAaM,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBT,EAAgBQ,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IA1CQJ,EAAO,EA2CjB,EAEG,CACL,MAAMQ,EAAkBR,EAAO,KAAK,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,KAAK,MAAM,CAAC,EACjF,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,KAAM,EACN,UAAU,6DACV,KAAMQ,EACR,KACA,OAAC,OAAI,UAAU,8CACZ,SAAAR,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAChE,EACA,aAAW,MACT,qGACA,CACE,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CACF,EAEC,SAAAA,GAXIA,CAYP,CACD,EACH,IAxBQH,EAAO,EAyBjB,CAEJ,CACF,CAAC,EACH,EAtFkC,IAwFtC,EAEA,IAAOpB,KAAQ,cAAWW,CAAc",
+  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_useComponentData", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "product", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "capitalizedName"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductServiceBenefits/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export interface ServiceBenefitItem {
+    /** 图标 URL */
+    icon?: string;
+    label?: string;
+}
+export interface ProductServiceBenefitsProps {
+    showDivider?: boolean;
+    className?: string;
+}
+declare const ProductServiceBenefits: ({ className, showDivider }?: ProductServiceBenefitsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductServiceBenefits;

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

	@@ -0,0 +1,2 @@
1	+ "use strict";var N=Object.create;var r=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var S=(t,i)=>{for(var s in i)r(t,s,{get:i[s],enumerable:!0})},v=(t,i,s,l)=>{if(i&&typeof i=="object"\|\|typeof i=="function")for(let a of M(i))!B.call(t,a)&&a!==s&&r(t,a,{get:()=>i[a],enumerable:!(l=k(i,a))\|\|l.enumerable});return t};var C=(t,i,s)=>(s=t!=null?N(w(t)):{},v(i\|\|!t\|\|!t.__esModule?r(s,"default",{value:t,enumerable:!0}):s,t)),D=t=>v(r({},"__esModule",{value:!0}),t);var L={};S(L,{default:()=>z});module.exports=D(L);var e=require("react/jsx-runtime"),c=require("../../../../../../components/index.js"),x=require("../../../../../../helpers/index.js"),b=require("react"),u=require("../../../../hooks/useComponentData.js"),h=C(require("../../../SlideUpModal/index.js"));const g=()=>(0,e.jsx)("div",{className:"bg-[#DADCE0] h-[1px]"}),P=({className:t})=>(0,e.jsx)("svg",{className:t,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M6.91058 4.4108C7.23602 4.08536 7.76353 4.08536 8.08897 4.4108L13.089 9.41079C13.4144 9.73623 13.4144 10.2637 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2637 6.58514 14.7362 6.91058 14.4108L11.3214 9.99999L6.91058 5.58918C6.58514 5.26374 6.58514 4.73623 6.91058 4.4108Z",fill:"#080A0F"})}),f=t=>typeof t=="object"&&t!==null&&Object.keys(t).length>0,F=({className:t,showDivider:i=!0}={})=>{const s=(0,u.useComponentData)("ProductServiceBenefits")??{},l=f(s.serviceBenefits)?s.serviceBenefits:null,a=f(s.decisionPaymentMethod)?s.decisionPaymentMethod:null,o=f(s.deliveryMethod)?s.deliveryMethod:null,[y,m]=(0,b.useState)(!1),p=[l?"serviceBenefits":null,a?"paymentMethod":null,o?"deliveryMethod":null].filter(Boolean);return p.length===0?null:(0,e.jsxs)("div",{className:(0,x.cn)("rounded-box bg-[#F5F6F7] desktop:px-4 px-3",t),children:[i&&(0,e.jsx)(g,{}),l&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,x.cn)("flex items-center py-3 laptop:py-4",l?.modal&&"cursor-pointer"),onClick:l?.modal?()=>m(!0):void 0,role:l?.modal?"button":void 0,tabIndex:l?.modal?0:void 0,onKeyDown:l?.modal?n=>{(n.key==="Enter"\|\|n.key===" ")&&m(!0)}:void 0,children:[(0,e.jsx)("span",{className:"flex-1 text-[14px] laptop:text-base font-bold leading-[1.2]",children:l.title}),l?.modal&&(0,e.jsx)(P,{className:"size-4 desktop:size-6 shrink-0"})]}),l.items&&l.items.length>0&&(0,e.jsx)("div",{className:"grid grid-cols-1 tablet:grid-cols-2 gap-x-3 tablet:gap-y-2 gap-y-3 desktop:gap-y-3 desktop:gap-x-4 pb-3 laptop:pb-4",children:l.items.map((n,d)=>(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[n.icon&&(0,e.jsx)("img",{src:n.icon,alt:"","aria-hidden":"true",className:"size-5 desktop:size-6 shrink-0"}),(0,e.jsx)(c.Text,{html:n.label,className:"text-[14px] font-bold leading-[1.4]"})]},d))})]}),p.indexOf("serviceBenefits")<p.length-1&&(0,e.jsx)(g,{}),(0,e.jsx)(h.default,{title:l.modal?.title??l.title,showModal:y,closeModal:()=>m(!1),children:(0,e.jsx)("ul",{className:"flex flex-col gap-5 tablet:gap-8 tablet:pt-8 px-4 tablet:px-8 pb-5 tablet:pb-8",children:(l.modal?.benefits??[]).map((n,d)=>(0,e.jsxs)("li",{className:"flex flex-col gap-1",children:[(0,e.jsx)(c.Text,{html:n.title,className:"text-[16px] tablet:text-[18px] font-bold leading-[1.4]"}),(0,e.jsx)(c.Text,{html:n.desc,className:"text-[14px] tablet:text-[16px] leading-[1.6] text-[#6D6D6F]"})]},d))})})]}),a&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"py-3 laptop:py-4",children:[a.title&&(0,e.jsx)("p",{className:"text-[14px] laptop:text-base font-bold leading-[1.2] mb-2 lg-desktop:mb-3",children:a.title}),a.icons&&a.icons.length>0&&(0,e.jsx)("div",{className:"flex flex-wrap gap-2 desktop:gap-3",children:a.icons.map((n,d)=>(0,e.jsx)("img",{src:n,alt:"","aria-hidden":"true",className:"h-[24px] w-[42px]"},d))})]}),p.indexOf("paymentMethod")<p.length-1&&(0,e.jsx)(g,{})]}),o&&(0,e.jsxs)("div",{className:"py-3 laptop:py-4",children:[o.title&&(0,e.jsx)("p",{className:"text-[14px] laptop:text-base font-bold leading-[1.2] mb-2 lg-desktop:mb-3",children:o.title}),o.icons&&o.icons.length>0&&(0,e.jsx)("div",{className:"flex flex-wrap gap-4",children:o.icons.map((n,d)=>(0,e.jsx)("img",{src:n,alt:"","aria-hidden":"true",className:"h-[24px] w-auto"},d))})]})]})};var z=F;
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductServiceBenefits/index.tsx"],
+  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport SlideUpModal from '../../../SlideUpModal/index.js'\n\nexport interface ServiceBenefitItem {\n  /** \u56FE\u6807 URL */\n  icon?: string\n  label?: string\n}\n\nexport interface ProductServiceBenefitsProps {\n  showDivider?: boolean\n  className?: string\n}\n\nconst ServiceDivider = () => <div className=\"bg-[#DADCE0] h-[1px]\" />\n\nconst RightArrowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6.91058 4.4108C7.23602 4.08536 7.76353 4.08536 8.08897 4.4108L13.089 9.41079C13.4144 9.73623 13.4144 10.2637 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2637 6.58514 14.7362 6.91058 14.4108L11.3214 9.99999L6.91058 5.58918C6.58514 5.26374 6.58514 4.73623 6.91058 4.4108Z\"\n      fill=\"#080A0F\"\n    />\n  </svg>\n)\n\nconst isNotEmpty = (obj: unknown): boolean => typeof obj === 'object' && obj !== null && Object.keys(obj).length > 0\n\nconst ProductServiceBenefits = ({ className, showDivider = true }: ProductServiceBenefitsProps = {}) => {\n  const data = useComponentData('ProductServiceBenefits') ?? {}\n\n  const serviceBenefits = isNotEmpty(data.serviceBenefits) ? data.serviceBenefits : null\n  const paymentMethod = isNotEmpty(data.decisionPaymentMethod) ? data.decisionPaymentMethod : null\n  const deliveryMethod = isNotEmpty(data.deliveryMethod) ? data.deliveryMethod : null\n\n  const [serviceBenefitsModal, setServiceBenefitsModal] = useState(false)\n\n  const sections = [\n    serviceBenefits ? 'serviceBenefits' : null,\n    paymentMethod ? 'paymentMethod' : null,\n    deliveryMethod ? 'deliveryMethod' : null,\n  ].filter(Boolean)\n\n  if (sections.length === 0) return null\n\n  return (\n    <div className={cn('rounded-box bg-[#F5F6F7] desktop:px-4 px-3', className)}>\n      {showDivider && <ServiceDivider />}\n\n      {/* \u670D\u52A1\u4E0E\u6743\u76CA */}\n      {serviceBenefits && (\n        <>\n          <div>\n            <div\n              className={cn('flex items-center py-3 laptop:py-4', serviceBenefits?.modal && 'cursor-pointer')}\n              onClick={serviceBenefits?.modal ? () => setServiceBenefitsModal(true) : undefined}\n              role={serviceBenefits?.modal ? 'button' : undefined}\n              tabIndex={serviceBenefits?.modal ? 0 : undefined}\n              onKeyDown={\n                serviceBenefits?.modal\n                  ? e => {\n                      if (e.key === 'Enter' || e.key === ' ') setServiceBenefitsModal(true)\n                    }\n                  : undefined\n              }\n            >\n              <span className=\"flex-1 text-[14px] laptop:text-base font-bold leading-[1.2]\">\n                {serviceBenefits.title}\n              </span>\n              {serviceBenefits?.modal && <RightArrowIcon className=\"size-4 desktop:size-6 shrink-0\" />}\n            </div>\n            {serviceBenefits.items && serviceBenefits.items.length > 0 && (\n              <div className=\"grid grid-cols-1 tablet:grid-cols-2 gap-x-3 tablet:gap-y-2 gap-y-3 desktop:gap-y-3 desktop:gap-x-4 pb-3 laptop:pb-4\">\n                {serviceBenefits.items.map((item: { icon?: string; label?: string }, index: number) => (\n                  <div key={index} className=\"flex items-center gap-2\">\n                    {item.icon && (\n                      <img src={item.icon} alt=\"\" aria-hidden=\"true\" className=\"size-5 desktop:size-6 shrink-0\" />\n                    )}\n                    <Text html={item.label} className=\"text-[14px] font-bold leading-[1.4]\" />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n          {sections.indexOf('serviceBenefits') < sections.length - 1 && <ServiceDivider />}\n          <SlideUpModal\n            title={serviceBenefits.modal?.title ?? serviceBenefits.title}\n            showModal={serviceBenefitsModal}\n            closeModal={() => setServiceBenefitsModal(false)}\n          >\n            <ul className=\"flex flex-col gap-5 tablet:gap-8 tablet:pt-8 px-4 tablet:px-8 pb-5 tablet:pb-8\">\n              {(serviceBenefits.modal?.benefits ?? []).map(\n                (benefit: { title?: string; desc?: string }, index: number) => (\n                  <li key={index} className=\"flex flex-col gap-1\">\n                    <Text html={benefit.title} className=\"text-[16px] tablet:text-[18px] font-bold leading-[1.4]\" />\n                    <Text html={benefit.desc} className=\"text-[14px] tablet:text-[16px] leading-[1.6] text-[#6D6D6F]\" />\n                  </li>\n                )\n              )}\n            </ul>\n          </SlideUpModal>\n        </>\n      )}\n\n      {/* \u652F\u4ED8\u65B9\u5F0F */}\n      {paymentMethod && (\n        <>\n          <div className=\"py-3 laptop:py-4\">\n            {paymentMethod.title && (\n              <p className=\"text-[14px] laptop:text-base font-bold leading-[1.2] mb-2 lg-desktop:mb-3\">\n                {paymentMethod.title}\n              </p>\n            )}\n            {paymentMethod.icons && paymentMethod.icons.length > 0 && (\n              <div className=\"flex flex-wrap gap-2 desktop:gap-3\">\n                {paymentMethod.icons.map((source: string, index: number) => (\n                  <img key={index} src={source} alt=\"\" aria-hidden=\"true\" className=\"h-[24px] w-[42px]\" />\n                ))}\n              </div>\n            )}\n          </div>\n          {sections.indexOf('paymentMethod') < sections.length - 1 && <ServiceDivider />}\n        </>\n      )}\n\n      {/* \u914D\u9001\u65B9\u5F0F */}\n      {deliveryMethod && (\n        <div className=\"py-3 laptop:py-4\">\n          {deliveryMethod.title && (\n            <p className=\"text-[14px] laptop:text-base font-bold leading-[1.2] mb-2 lg-desktop:mb-3\">\n              {deliveryMethod.title}\n            </p>\n          )}\n          {deliveryMethod.icons && deliveryMethod.icons.length > 0 && (\n            <div className=\"flex flex-wrap gap-4\">\n              {deliveryMethod.icons.map((source: string, index: number) => (\n                <img key={index} src={source} alt=\"\" aria-hidden=\"true\" className=\"h-[24px] w-auto\" />\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ProductServiceBenefits\n"],
+  "mappings": "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",
+  "names": ["ProductServiceBenefits_exports", "__export", "ProductServiceBenefits_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_useComponentData", "import_SlideUpModal", "ServiceDivider", "RightArrowIcon", "className", "isNotEmpty", "obj", "ProductServiceBenefits", "showDivider", "data", "serviceBenefits", "paymentMethod", "deliveryMethod", "serviceBenefitsModal", "setServiceBenefitsModal", "sections", "e", "item", "index", "SlideUpModal", "benefit", "source"]
+}

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

@@ -1,2 +1,2 @@
-"use strict";var ie=Object.create;var H=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,l)=>{for(var i in l)H(e,i,{get:l[i],enumerable:!0})},O=(e,l,i,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of re(l))!se.call(e,s)&&s!==i&&H(e,s,{get:()=>l[s],enumerable:!(w=oe(l,s))||w.enumerable});return e};var de=(e,l,i)=>(i=e!=null?ie(ne(e)):{},O(l||!e||!e.__esModule?H(i,"default",{value:e,enumerable:!0}):i,e)),ue=e=>O(H({},"__esModule",{value:!0}),e);var fe={};ce(fe,{default:()=>ge});module.exports=ue(fe);var t=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),I=require("./types.js"),A=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,t.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"})]}),U=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,t.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"})]}),pe=()=>{const{copyWriting:e}=(0,W.useAiuiContext)(),{product:l,variant:i,selectedOptions:w}=(0,j.useBizProductContext)(),s=(0,J.useVariantMedia)({product:l,variant:i}),[y,N]=(0,a.useState)(null),V=(0,a.useRef)(null),f=i?.metafields?.component?.custom_media_list;let d,S,E,L;f&&f?.available?(d=f?.product||[],S=f?.scenarios||[],E=f?.keyFeatures||[],L=f?.video||[]):(d=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const u=(0,a.useMemo)(()=>[...d,...S,...L],[d,S,L]),g={productList:d,sceneList:S,keyFeaturesList:E,videoList:L},o=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],p=i?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return n?.map(v=>{const k=p?.find(F=>v?.galleries===F?.galleries);let D=g[v?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 767`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...v,galleries:D}}).filter(v=>v.galleries.length>0)},[i?.payload,g,l?.payload]),[x,r]=(0,a.useState)(o?.[0]),[c,P]=(0,a.useState)(0),[h,G]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const n=(c+1)%o.length;P(n),r(o[n]),G(0)},[c,o]),z=(0,a.useCallback)(()=>{const n=c===0?o.length-1:c-1;P(n),r(o[n]);const p=o[n]?.galleries||[];G(p.length-1)},[c,o]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{V.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(o[0]),P(0)},[i?.id]);const B=(n,p)=>{switch(n?.galleryTabType){case I.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,t.jsx)($,{...n,index:p,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case I.GalleryTabType.GALLERY_VIDEO:return(0,t.jsx)(be,{...n,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});default:return null}};return(0,t.jsx)("div",{id:"ipc-product-gallery",children:(0,t.jsxs)(A.Root,{className:"relative",value:x?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,t.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((n,p)=>(0,t.jsx)(A.Content,{className:"h-full",value:n.tabValue,children:B(n,p)},n.tabValue))}),(0,t.jsx)(Z,{ref:V,galleryTabs:o,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},Z=(0,a.forwardRef)((e,l)=>{const{galleryTabs:i,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:y,setTargetSlideIndex:N}=e,{product:V}=(0,j.useBizProductContext)(),f=(0,a.useRef)(null),d=(0,a.useRef)(new Map),S=(0,a.useCallback)(u=>{if(f.current){const g=f.current,o=u.currentTarget,x=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((u,g,o)=>{s(g),y(o),N(0),S(u)},[s,y,N,S]),L=(0,a.useCallback)(u=>{if(f.current&&i[u]){const g=f.current,o=i[u],x=d.current.get(o.tabValue);if(x){const r=x.offsetLeft-g.offsetWidth/2+x.offsetWidth/2;g.scrollTo({left:r,behavior:"smooth"})}}},[i]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,t.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,t.jsx)(A.List,{ref:f,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)("div",{className:"whitespace-nowrap",children:i?.map((u,g)=>(0,t.jsx)(A.Trigger,{ref:o=>{o?d.current.set(u.tabValue,o):d.current.delete(u.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===w?.tabValue&&"bg-white"),onClick:o=>E(o,u,g),value:u.tabValue,children:u.tabLabel},u.tabValue+g))})}),(0,t.jsx)("div",{className:"desktop:gap-2 desktop:flex hidden",children:V.metafields?.global?.specifications&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(Q.SpecsModal,{})," | ",(0,t.jsx)(X.default,{})]})})]})});Z.displayName="ProductGalleryTab";const $=(0,a.forwardRef)((e,l)=>{const{locale:i="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:y}=(0,j.useBizProductContext)(),N=(0,a.useRef)(null),[V,f]=(0,a.useState)(null),[d,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),u=(0,a.useRef)(null),g=(0,a.useMemo)(()=>{if(e?.galleryTabType===I.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===I.GalleryTabType.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,I.GalleryTabType.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),o=(0,a.useCallback)(()=>{d?.isBeginning?e.onPrevTab?.():d?.slidePrev()},[d,e]),x=(0,a.useCallback)(()=>{d?.isEnd?e.onNextTab?.():d?.slideNext()},[d,e]);return(0,a.useEffect)(()=>{d&&e.targetSlideIndex&&(d.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[d,e.targetSlideIndex,e]),(0,a.useEffect)(()=>{const r=()=>{if(!e?.comment?.content||!u.current)return;const h=u.current;h.textContent="Test";const R=h.offsetHeight*2+2,B=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let p="";for(let v=0;v<B.length;v++){const k=B[v],D=p?`${p} ${k}`:k;h.textContent=D,h.offsetHeight>R?p?(n.push(p),p=k):(n.push(k),p=""):p=D}p&&n.push(p),h.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[e?.comment?.content]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?o():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:V},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((r,c)=>{const P=`${e.tabValue}-${c}`,h=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,t.jsx)(T.SwiperSlide,{className:"h-full",children:(0,t.jsx)(le.ExposureDetector,{onExposure:h,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,t.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",g),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!y&&!e.index&&(0,t.jsx)(_.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:y,currencyCode:s?.price?.currencyCode,locale:i})} ${w?.off}`}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,t.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,t.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:e?.galleries?.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,t.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+c))})}),!e?.index&&(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(_.Picture,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,t.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,t.jsx)("div",{ref:u,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,t.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,t.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});$.displayName="ProductGalleryTabImage";const me=({src:e})=>{const l=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const i=l.current;i&&(i.muted=!0,i.play().catch(()=>{}))},[]),(0,t.jsxs)("video",{ref:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[(0,t.jsx)("track",{kind:"captions"}),(0,t.jsx)("source",{src:e,type:"video/mp4"}),(0,t.jsx)("source",{src:e,type:"video/webm"}),(0,t.jsx)("source",{src:e,type:"video/ogg"})]})},be=e=>{const[l,i]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?e.onPrevTab?.():l?.slidePrev()},[l,e]),s=(0,a.useCallback)(()=>{l?.isEnd?e.onNextTab?.():l?.slideNext()},[l,e]);return(0,a.useEffect)(()=>{l&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(l.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[l,e.targetSlideIndex,e]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(y,N)=>{y.isBeginning&&y.swipeDirection==="prev"?w():y.isEnd&&y.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((y,N)=>(0,t.jsx)(T.SwiperSlide,{className:"h-full bg-info-primary",children:(0,t.jsx)(me,{src:y?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+N))}),(0,t.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,t.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,t.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ye=e=>(0,t.jsx)("div",{children:"3D View"});var ge=(0,te.withLayout)(pe);
+"use strict";var ie=Object.create;var H=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,l)=>{for(var i in l)H(e,i,{get:l[i],enumerable:!0})},O=(e,l,i,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of re(l))!se.call(e,s)&&s!==i&&H(e,s,{get:()=>l[s],enumerable:!(w=oe(l,s))||w.enumerable});return e};var de=(e,l,i)=>(i=e!=null?ie(ne(e)):{},O(l||!e||!e.__esModule?H(i,"default",{value:e,enumerable:!0}):i,e)),ue=e=>O(H({},"__esModule",{value:!0}),e);var fe={};ce(fe,{default:()=>ge});module.exports=ue(fe);var t=require("react/jsx-runtime"),W=require("../../../../AiuiProvider/index.js"),_=require("../../../../../components/index.js"),a=require("react"),T=require("swiper/react"),b=require("swiper/modules"),C=require("../../../../../helpers/index.js"),A=require("./types.js"),I=require("@radix-ui/react-tabs"),j=require("../../../BizProductProvider.js"),J=require("../../../hooks/use-variant-media.js"),Q=require("./components/SpecsModal.js"),X=de(require("./components/CompareModal.js")),ee=require("../../../utils/index.js"),te=require("../../../../../shared/Styles.js"),ae=require("../../../../../shared/track.js"),le=require("../../../../../components/index.js"),Y=require("es-toolkit");const q=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,t.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"})]}),U=e=>(0,t.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[(0,t.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,t.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"})]}),pe=()=>{const{copyWriting:e}=(0,W.useAiuiContext)(),{product:l,variant:i,selectedOptions:w}=(0,j.useBizProductContext)(),s=(0,J.useVariantMedia)({product:l,variant:i}),[y,N]=(0,a.useState)(null),V=(0,a.useRef)(null),f=i?.metafields?.component?.custom_media_list;let u,S,E,L;f&&f?.available?(u=f?.product||[],S=f?.scenarios||[],E=f?.keyFeatures||[],L=f?.video||[]):(u=s?.productList,S=s?.sceneList,E=s?.keyFeaturesList,L=s?.videoList);const p=(0,a.useMemo)(()=>[...u,...S,...L],[u,S,L]),g={productList:u,sceneList:S,keyFeaturesList:E,videoList:L},o=(0,a.useMemo)(()=>{const n=l?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],d=i?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return n?.map(v=>{const k=Array.isArray(d)?d?.find(F=>v?.galleries===F?.galleries):{};let D=g[v?.galleries]||[];if(k?.images&&Array.isArray(k.images)&&k.images.length>0){const F=k.images.map(m=>{const M=[];if(m.image_1920&&m.image_1920.trim()&&M.push(`${m.image_1920}`),m.image_1440&&m.image_1440.trim()&&M.push(`${m.image_1440} 1919`),m.image_1024&&m.image_1024.trim()&&M.push(`${m.image_1024} 1439`),m.image_768&&m.image_768.trim()&&M.push(`${m.image_768} 1023`),m.image_390&&m.image_390.trim()&&M.push(`${m.image_390} 767`),M.length>0){const K=M.join(", ");return{image:{url:K,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(m=>m!==null);F.length>0&&(D=F)}return{...v,galleries:D}}).filter(v=>v.galleries.length>0)},[i?.payload,g,l?.payload]),[x,r]=(0,a.useState)(o?.[0]),[c,P]=(0,a.useState)(0),[h,G]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const n=(c+1)%o.length;P(n),r(o[n]),G(0)},[c,o]),z=(0,a.useCallback)(()=>{const n=c===0?o.length-1:c-1;P(n),r(o[n]);const d=o[n]?.galleries||[];G(d.length-1)},[c,o]);(0,a.useEffect)(()=>{c!=null&&requestAnimationFrame(()=>{V.current?.scrollToTab(c)})},[c]),(0,a.useEffect)(()=>{r(o[0]),P(0)},[i?.id]);const B=(n,d)=>{switch(n?.galleryTabType){case A.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,t.jsx)($,{...n,index:d,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});case A.GalleryTabType.GALLERY_VIDEO:return(0,t.jsx)(be,{...n,onNextTab:R,onPrevTab:z,targetSlideIndex:h,onSlideChange:()=>G(null)});default:return null}};return(0,t.jsx)("div",{id:"ipc-product-gallery",children:(0,t.jsxs)(I.Root,{className:"relative",value:x?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,t.jsx)("div",{className:"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((n,d)=>(0,t.jsx)(I.Content,{className:"h-full",value:n.tabValue,children:B(n,d)},n.tabValue))}),(0,t.jsx)(Z,{ref:V,galleryTabs:o,activeGalleryTab:x,setActiveGalleryTab:r,setActiveTabIndex:P,setTargetSlideIndex:G})]})})},Z=(0,a.forwardRef)((e,l)=>{const{galleryTabs:i,activeGalleryTab:w,setActiveGalleryTab:s,setActiveTabIndex:y,setTargetSlideIndex:N}=e,{product:V}=(0,j.useBizProductContext)(),f=(0,a.useRef)(null),u=(0,a.useRef)(new Map),S=(0,a.useCallback)(p=>{if(f.current){const g=f.current,o=p.currentTarget,x=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:x,behavior:"smooth"})}},[]),E=(0,a.useCallback)((p,g,o)=>{s(g),y(o),N(0),S(p)},[s,y,N,S]),L=(0,a.useCallback)(p=>{if(f.current&&i[p]){const g=f.current,o=i[p],x=u.current.get(o.tabValue);if(x){const r=x.offsetLeft-g.offsetWidth/2+x.offsetWidth/2;g.scrollTo({left:r,behavior:"smooth"})}}},[i]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:L})),(0,t.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,t.jsx)(I.List,{ref:f,className:"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)("div",{className:"whitespace-nowrap",children:i?.map((p,g)=>(0,t.jsx)(I.Trigger,{ref:o=>{o?u.current.set(p.tabValue,o):u.current.delete(p.tabValue)},className:(0,C.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",p.tabValue===w?.tabValue&&"bg-white"),onClick:o=>E(o,p,g),value:p.tabValue,children:p.tabLabel},p.tabValue+g))})}),(0,t.jsx)("div",{className:"desktop:gap-2 desktop:flex hidden",children:V.metafields?.global?.specifications&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(Q.SpecsModal,{})," | ",(0,t.jsx)(X.default,{})]})})]})});Z.displayName="ProductGalleryTab";const $=(0,a.forwardRef)((e,l)=>{const{locale:i="us",copyWriting:w}=(0,W.useAiuiContext)(),{variant:s,totalSavings:y}=(0,j.useBizProductContext)(),N=(0,a.useRef)(null),[V,f]=(0,a.useState)(null),[u,S]=(0,a.useState)(null),[E,L]=(0,a.useState)([]),p=(0,a.useRef)(null),g=(0,a.useMemo)(()=>{if(e?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";e?.galleryTabType===A.GalleryTabType.GALLERY_IMAGE_FEATURES||(e?.galleryTabType,A.GalleryTabType.GALLERY_IMAGE_SCENE)},[e?.galleryTabType]),o=(0,a.useCallback)(()=>{u?.isBeginning?e.onPrevTab?.():u?.slidePrev()},[u,e]),x=(0,a.useCallback)(()=>{u?.isEnd?e.onNextTab?.():u?.slideNext()},[u,e]);return(0,a.useEffect)(()=>{u&&e.targetSlideIndex&&(u.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[u,e.targetSlideIndex,e]),(0,a.useEffect)(()=>{const r=()=>{if(!e?.comment?.content||!p.current)return;const h=p.current;h.textContent="Test";const R=h.offsetHeight*2+2,B=e.comment.content.replace(/<[^>]*>/g," ").replace(/\s+/g," ").trim().split(" "),n=[];let d="";for(let v=0;v<B.length;v++){const k=B[v],D=d?`${d} ${k}`:k;h.textContent=D,h.offsetHeight>R?d?(n.push(d),d=k):(n.push(k),d=""):d=D}d&&n.push(d),h.textContent="",L(n)},c=requestAnimationFrame(()=>{requestAnimationFrame(()=>{r()})}),P=()=>{r()};return window.addEventListener("resize",(0,Y.debounce)(P,500)),()=>{cancelAnimationFrame(c),window.removeEventListener("resize",(0,Y.debounce)(P,500))}},[e?.comment?.content]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{ref:l,className:"h-full",onSwiper:S,onTouchEnd:(r,c)=>{r.isBeginning&&r.swipeDirection==="prev"?o():r.isEnd&&r.swipeDirection==="next"&&x()},pagination:{clickable:!0,el:N.current},thumbs:{swiper:V},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((r,c)=>{const P=`${e.tabValue}-${c}`,h=()=>{(0,ae.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${s.sku}`,component_type:"image",component_name:e?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},G=r?._responsiveSource||r?.image?.url||"";return(0,t.jsx)(T.SwiperSlide,{className:"h-full",children:(0,t.jsx)(le.ExposureDetector,{onExposure:h,exposureKey:P,threshold:.5,duration:2e3,className:"h-full",children:(0,t.jsx)(_.Picture,{source:G,alt:r?.image?.altText,className:(0,C.cn)("h-full",g),imgClassName:"object-cover h-full"})})},e?.id+"SwiperSlideItem"+c)})}),s.availableForSale&&!!y&&!e.index&&(0,t.jsx)(_.Badge,{size:"lg",className:"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,ee.formatPrice)({amount:y,currencyCode:s?.price?.currencyCode,locale:i})} ${w?.off}`}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,t.jsx)(q,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:x,children:(0,t.jsx)(U,{className:(0,C.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,t.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(T.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[b.Navigation,b.Thumbs],children:e?.galleries?.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,t.jsx)(_.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},e?.id+"SwiperSlideThumbItem"+c))})}),!e?.index&&(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(_.Picture,{source:e?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,t.jsxs)("div",{className:"relative max-w-[528px]",children:[(0,t.jsx)("div",{ref:p,className:"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0",style:{visibility:"hidden"}}),(0,t.jsx)(T.Swiper,{modules:[b.Autoplay],loop:E.length>1,className:"h-[44px]",direction:"vertical",autoplay:{delay:5e3,disableOnInteraction:!1},children:E.length>0?E.map((r,c)=>(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{html:r,as:"div",className:"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]"})},c+"text-group")):(0,t.jsx)(T.SwiperSlide,{children:(0,t.jsx)(_.Text,{as:"div",html:e?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]})]}),(0,t.jsx)("div",{ref:N,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})});$.displayName="ProductGalleryTabImage";const me=({src:e})=>{const l=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const i=l.current;i&&(i.muted=!0,i.play().catch(()=>{}))},[]),(0,t.jsxs)("video",{ref:l,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,controls:!0,className:"w-full mt-20 laptop:size-full laptop:mt-0 aspect-video laptop:aspect-auto object-cover",children:[(0,t.jsx)("track",{kind:"captions"}),(0,t.jsx)("source",{src:e,type:"video/mp4"}),(0,t.jsx)("source",{src:e,type:"video/webm"}),(0,t.jsx)("source",{src:e,type:"video/ogg"})]})},be=e=>{const[l,i]=(0,a.useState)(null),w=(0,a.useCallback)(()=>{l?.isBeginning?e.onPrevTab?.():l?.slidePrev()},[l,e]),s=(0,a.useCallback)(()=>{l?.isEnd?e.onNextTab?.():l?.slideNext()},[l,e]);return(0,a.useEffect)(()=>{l&&e.targetSlideIndex!==null&&e.targetSlideIndex!==void 0&&(l.slideTo(e.targetSlideIndex,0),e.onSlideChange?.())},[l,e.targetSlideIndex,e]),(0,t.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,t.jsx)(T.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(y,N)=>{y.isBeginning&&y.swipeDirection==="prev"?w():y.isEnd&&y.swipeDirection==="next"&&s()},modules:[b.Mousewheel,b.Thumbs,b.Navigation,b.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:e?.galleries?.map((y,N)=>(0,t.jsx)(T.SwiperSlide,{className:"h-full bg-info-primary",children:(0,t.jsx)(me,{src:y?.sources?.[0]?.url})},e?.id+"SwiperSlideItem"+N))}),(0,t.jsx)("div",{className:(0,C.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:w,children:(0,t.jsx)(q,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,t.jsx)("div",{className:(0,C.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:s,children:(0,t.jsx)(U,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ye=e=>(0,t.jsx)("div",{children:"3D View"});var ge=(0,te.withLayout)(pe);
 //# sourceMappingURL=index.js.map