@anker-in/headless-ui 1.0.26-alpha.1762236947129 → 1.0.26-alpha.1762243303200

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.tsx"],
+  "sourcesContent": ["/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { Button, Checkbox, Text, Picture, Heading } from '../../../../../components/index.js'\nimport ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useBenefits } from '../../../hooks/useBenefits'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\nimport classNames from 'classnames'\nimport React, { useRef, useState } from 'react'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../hooks/useCountDown.js'\nimport useCopy from '../../../hooks/useCopy'\nimport { cn } from '../../../../../helpers/index.js'\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\ninterface BenefitsTabTextConfig {\n  // Coupon \u76F8\u5173\n  couponCode?: string // \"Code\"\n  copyCode?: string // \"Copy Code\"\n  copied?: string // \"Copied\"\n  expired?: string // \"Expired\"\n  offCoupon?: string // \"off coupon\"\n  offMemberOnly?: string // \"{amount} off Member Only\"\n  loginNow?: string // \"login now\"\n  selectFreeGift?: string // \"You can select the free gift below.\"\n  bundleSaveUpTo?: string // \"Bundle purchases save extra up to\"\n  bundleOffer?: string // \"We offer {count} bundle for you\"\n  creditsTitle?: string // \"Soundcore credits for cash\"\n  creditsDesc?: string // \"100 Soundcore credits=$1\"\n\n  // Tab \u6807\u7B7E\n  yourBenefits?: string // \"Your Benefits\"\n  off?: string // \"off\"\n  memberBenefits?: string // \"Member Benefits\"\n  memberBenefitsNotLogin?: string // \"Member Benefits\"\n  installment?: string // \"Installment\"\n\n  // Member Benefits \u90E8\u5206\n  forNewMember?: string // \"for New Member\"\n  expressShipping?: string // \"Express Shipping Method\"\n  creditsAfterActivation?: string // \"You will get soundcoreCredits after activation.\"\n  active?: string // \"Active\"\n\n  // Installment \u90E8\u5206\n  flexibleInstallment?: string // \"Flexible installment payment\"\n}\n\nexport type ModalData = {\n  needClickAway?: boolean\n  className?: string\n  title?: string\n  content?: string\n  domContent?: React.ReactNode\n}\n\ninterface BenefitsTabProps {\n  textConfig?: BenefitsTabTextConfig\n}\n\n// \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\nconst defaultTextConfig: Required<BenefitsTabTextConfig> = {\n  couponCode: 'Code',\n  copyCode: 'Copy Code',\n  copied: 'Copied',\n  expired: 'Expired',\n  offCoupon: '{discount} off coupon',\n  offMemberOnly: '{amount} off Member Only',\n  loginNow: 'Login now',\n  selectFreeGift: 'You can select the free gift below.',\n  bundleSaveUpTo: 'Bundle purchases save extra up to',\n  bundleOffer: 'We offer {count} bundle for you',\n  creditsTitle: 'Soundcore credits for cash',\n  creditsDesc: '100 Soundcore credits=$1',\n  yourBenefits: 'Your Benefits',\n  off: ' off',\n  memberBenefits: 'Member Benefits',\n  memberBenefitsNotLogin: 'You will enjoy a {amount} member discount after logging in.',\n  installment: 'Installment',\n  forNewMember: '{amount} for New Member',\n  expressShipping: 'Express Shipping Method',\n  creditsAfterActivation: 'You will get soundcoreCredits after activation. ',\n  active: 'Active',\n  flexibleInstallment: 'Flexible installment payment ',\n}\n\n// Coupon content component (commonly used)\ninterface CouponContentProps {\n  coupons?: Array<{\n    borderStyle: 'inset' | 'rounded' // \u8FD9\u4E24\u79CD\u6837\u5F0F\u4E0D\u4E00\u6837\uFF0C inset \u56DB\u89D2\u662F\u5185\u5207\u5706\u89D2\uFF0C rounded \u56DB\u89D2\u662F\u666E\u901A\u5706\u89D2\n    useAble?: boolean\n    isAutoUse?: boolean\n    onUseChange?: (useAble: boolean) => void\n    code?: string\n    title: string\n    description: string | React.ReactNode\n    discount?: number\n    couponBgColor?: string\n    bgImage?: { url: string; alt?: string }\n    ends_at?: string\n  }>\n  className?: string\n}\n\nconst CouponItem = ({\n  item,\n  textConfig,\n}: {\n  item: NonNullable<CouponContentProps['coupons']>[number]\n  textConfig: Required<BenefitsTabTextConfig>\n}) => {\n  const { trackingData } = useAiuiContext()\n  const { copied: isCopied, copy: copyToClipboard } = useCopy()\n  const couponCopy = trackingData?.common?.coupon\n  const { days, hours, minutes, seconds } = useCountDown({ endTime: item?.ends_at || '' })\n  const { openModal, isLogin } = useBizProductContext()\n  return (\n    <>\n      <style jsx>{`\n        .coupon-card {\n          /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */\n          mask:\n            radial-gradient(circle at 0 0, transparent 12px, white 12px),\n            radial-gradient(circle at 100% 0, transparent 12px, white 12px),\n            radial-gradient(circle at 100% 100%, transparent 12px, white 12px),\n            radial-gradient(circle at 0 100%, transparent 12px, white 12px);\n          mask-size: 50% 50%;\n          mask-position:\n            top left,\n            top right,\n            bottom right,\n            bottom left;\n          mask-repeat: no-repeat;\n        }\n      `}</style>\n      <div\n        style={{\n          background: item.couponBgColor || 'white',\n        }}\n        className={classNames(\n          'relative h-[100px] overflow-hidden laptop:h-[112px] lg-desktop:h-[130px]',\n          item.borderStyle === 'inset' ? 'coupon-card ' : 'rounded-[8px]'\n        )}\n      >\n        {item?.bgImage?.url && (\n          <Picture\n            source={item.bgImage.url}\n            alt={item.bgImage.alt}\n            className=\"absolute bottom-0 right-0 w-auto\"\n            imgClassName=\"object-contain\"\n          />\n        )}\n        <div className=\"relative z-1 p-3\">\n          <div className=\"flex items-center justify-start\">\n            {item.useAble && (\n              <Checkbox\n                size=\"lg\"\n                className=\"mr-2 rounded-full border-[#D1D1D1] border-[1.6px] data-[state=checked]:border-primary\"\n                checked={item?.isAutoUse}\n                onCheckedChange={(e: boolean) => {\n                  item?.onUseChange?.(e)\n                }}\n              />\n            )}\n            <Text html={item.title} className=\"text-[16px] font-bold laptop:text-[20px] lg-desktop:text-[24px]\" />\n          </div>\n          <Text\n            {...(typeof item.description === 'string' ? { html: item.description } : {})}\n            as=\"p\"\n            className=\"mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F] lg-desktop:text-[16px]\"\n          >\n            {item.description}\n          </Text>\n          {item.code && (\n            <div className=\"last:mt-2 flex items-center gap-2\">\n              <Text html={`${textConfig.couponCode}: ${item.code}`} className=\"text-base font-bold text-[#3D3D3F]\" />\n              <button className=\"text-base font-bold underline\" onClick={() => copyToClipboard(item.code ?? '')}>\n                {isCopied ? couponCopy?.copied || textConfig.copied : couponCopy?.copy || textConfig.copyCode}\n              </button>\n            </div>\n          )}\n          {item.ends_at && (\n            <button\n              onClick={() => {\n                if (couponCopy?.modal) {\n                  openModal(couponCopy?.modal!)\n                }\n              }}\n              className=\"mt-[4px] text-left text-[14px] font-semibold text-[#1F2021] x:text-[12px] md-l:hidden\"\n            >\n              {Number(days) < Number(couponCopy?.hurry?.daysLeft) ? (\n                <>\n                  <span>{couponCopy?.ends}</span>\n                  <span className=\"font-bold\">\n                    {` ${days} ${couponCopy?.days} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`}\n                  </span>\n                </>\n              ) : (\n                couponCopy?.hurry?.label || textConfig.expired\n              )}\n            </button>\n          )}\n        </div>\n      </div>\n    </>\n  )\n}\n\nconst CouponContent = ({\n  coupons,\n  className,\n  textConfig,\n}: CouponContentProps & { textConfig: Required<BenefitsTabTextConfig> }) => {\n  return (\n    <div className={classNames('flex flex-col gap-3 laptop:grid laptop:grid-cols-2 desktop:grid-cols-1', className)}>\n      {coupons?.map((item, index) => <CouponItem key={index} item={item} textConfig={textConfig} />)}\n    </div>\n  )\n}\n\nconst BenefitsTab = ({ textConfig }: BenefitsTabProps) => {\n  const {\n    isLogin,\n    profile,\n    variant,\n    renderAffirm,\n    renderKlarna,\n    renderPaypal,\n    onUseCouponChange,\n    onUseMemberDiscountChange,\n    discount,\n    savingDetail,\n    openModal,\n    openSignInPopup,\n    openAuthCodePopup,\n    openSignUpPopup,\n  } = useBizProductContext()\n  const benefits = useBenefits({ variant })\n  const [productBenefitsTabsValue, setProductBenefitsTabsValue] = useState<'coupon' | 'membership' | 'installment'>(\n    'coupon'\n  )\n  const { trackingData, locale = 'us', copyWriting } = useAiuiContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  // \u5408\u5E76\u9ED8\u8BA4\u914D\u7F6E\u548C\u4F20\u5165\u7684\u914D\u7F6E\n  const mergedTextConfig = { ...defaultTextConfig, ...textConfig }\n\n  const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n  const { memberDiscount, commonCoupon, creditsRedemption, freeGift, bundle, paidShipping, fullGift, levelDiscount } =\n    benefits\n\n  const productsBenefits = trackingData?.product?.support ?? {}\n  const { thirdParty = {} } = trackingData?.common || {}\n\n  const coupons = [\n    commonCoupon?.enable\n      ? {\n          ...commonCoupon.config,\n          isAutoUse: savingDetail?.coupon > 0,\n          useAble: true,\n          borderStyle: 'rounded',\n          code: commonCoupon?.config?.title ?? '',\n          description: commonCoupon?.config?.desc ?? '',\n          onUseChange: (value: boolean) => {\n            const couponSaving = value ? (discount?.codeSavings ?? 0) : 0\n            onUseCouponChange?.(couponSaving)\n          },\n          title: replaceTemplate(mergedTextConfig.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        }\n      : null,\n    memberDiscount.enable\n      ? {\n          useAble: true,\n          isAutoUse: isLogin,\n          title: replaceTemplate(mergedTextConfig.offMemberOnly, {\n            amount: formatPrice({\n              amount: memberDiscount?.config?.amount ?? 0,\n              currencyCode: variant.price.currencyCode,\n              locale,\n            }),\n          }),\n          description: (\n            <>\n              {isLogin\n                ? (memberDiscount?.config?.description ?? '')\n                : (mergedTextConfig.memberBenefitsNotLogin.replace(\n                    '{amount}',\n                    formatPrice({\n                      amount: memberDiscount?.config?.amount ?? 0,\n                      currencyCode: variant.price.currencyCode,\n                      locale,\n                    })\n                  ) ?? '')}{' '}\n              {isLogin ? (\n                ''\n              ) : (\n                <span role=\"button\" tabIndex={0} onClick={() => openSignInPopup?.()} className=\"underline\">\n                  {mergedTextConfig.loginNow}\n                </span>\n              )}\n            </>\n          ),\n          borderStyle: 'rounded',\n          onUseChange: (value: boolean) => {\n            if (isLogin) {\n              const memberSaving = value ? (memberDiscount?.config?.amount ?? 0) : 0\n              onUseMemberDiscountChange?.(memberSaving)\n              // setSavingDetail(prev => ({\n              //   ...prev,\n              //   member: value ? (memberDiscount?.config?.amount ?? 0) : 0,\n              // }))\n            } else {\n              openSignInPopup?.()\n            }\n          },\n        }\n      : null,\n    levelDiscount.enable\n      ? {\n          title: levelDiscount?.config?.title ?? '',\n          description: levelDiscount?.config?.tag ?? '',\n          borderStyle: 'inset',\n          bgImage: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/levelDiscount.png?v=1760437385',\n          },\n        }\n      : null,\n    freeGift.enable\n      ? {\n          title: freeGift?.config?.title ?? '',\n          description: mergedTextConfig.selectFreeGift,\n          borderStyle: 'inset',\n          bgImage: {\n            url: 'https://cdn.shopify.com/s/files/1/0516/3761/6830/files/gift.png?v=1759113534',\n          },\n          couponBgColor:\n            'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n        }\n      : null,\n    bundle.enable\n      ? {\n          title: `${mergedTextConfig.bundleSaveUpTo} ${formatPrice({\n            amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n            currencyCode: variant.price.currencyCode,\n            locale,\n          })}`,\n          borderStyle: 'inset',\n          description: mergedTextConfig.bundleOffer.replace(\n            '{count}',\n            bundle?.config?.bundleList?.length?.toString() ?? ''\n          ),\n          bgImage: {\n            url: 'https://cdn.shopify.com/s/files/1/0516/3761/6830/files/bundle.png?v=1759113534',\n          },\n          couponBgColor:\n            'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n        }\n      : null,\n    fullGift.enable\n      ? {\n          title: fullGift?.config?.title ?? '',\n          description: fullGift?.config?.desc ?? '',\n          borderStyle: 'inset',\n          bgImage: {\n            url: 'https://cdn.shopify.com/s/files/1/0516/3761/6830/files/fullGift.png?v=1759141790',\n          },\n          couponBgColor:\n            'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n        }\n      : null,\n    creditsRedemption.enable\n      ? {\n          title: mergedTextConfig.creditsTitle,\n          description: mergedTextConfig.creditsDesc,\n          borderStyle: 'inset',\n          bgImage: {\n            url: 'https://cdn.shopify.com/s/files/1/0516/3761/6830/files/cash.png?v=1759113534',\n          },\n          couponBgColor:\n            'linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF',\n        }\n      : null,\n  ].filter(Boolean)\n\n  const handleActivate = () => {\n    openAuthCodePopup?.()\n  }\n\n  if (!ProductBenefitsTabs) return null\n\n  const handleProductBenefitsTabListClick = (el: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = el.currentTarget\n      console.log('button', button.offsetLeft)\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  return (\n    <ProductBenefitsTabs\n      onValueChange={value => setProductBenefitsTabsValue(value as 'coupon' | 'membership' | 'installment')}\n      defaultValue={coupons?.length ? 'coupon' : 'membership'}\n    >\n      <ProductBenefitsTabs.List ref={scrollContainerRef}>\n        {coupons?.length ? (\n          <ProductBenefitsTabs.Trigger\n            className={cn(productBenefitsTabsValue === 'coupon' && 'text-[#1D1D1F]')}\n            value=\"coupon\"\n            onClick={handleProductBenefitsTabListClick}\n          >\n            {mergedTextConfig.yourBenefits}\n            {/* {(savingDetail.coupon || 0) > 0 && (\n              <ProductBenefitsTabs.Badge>\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                {mergedTextConfig.off}\n              </ProductBenefitsTabs.Badge>\n            )} */}\n          </ProductBenefitsTabs.Trigger>\n        ) : null}\n        <ProductBenefitsTabs.Trigger\n          className={cn(productBenefitsTabsValue === 'membership' && 'text-[#1D1D1F]')}\n          value=\"membership\"\n          onClick={handleProductBenefitsTabListClick}\n        >\n          {mergedTextConfig.memberBenefits}\n        </ProductBenefitsTabs.Trigger>\n        <ProductBenefitsTabs.Trigger\n          className={cn(productBenefitsTabsValue === 'installment' && 'text-[#1D1D1F]')}\n          value=\"installment\"\n          onClick={handleProductBenefitsTabListClick}\n        >\n          {mergedTextConfig.installment}\n        </ProductBenefitsTabs.Trigger>\n      </ProductBenefitsTabs.List>\n      <style global jsx>\n        {`\n          .coupon-container::-webkit-scrollbar {\n            width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */\n            height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */\n          }\n\n          .coupon-container::-webkit-scrollbar-track {\n            background: transparent; /* \u6EDA\u52A8\u6761\u8F68\u9053\u80CC\u666F */\n          }\n\n          .coupon-container::-webkit-scrollbar-thumb {\n            background-color: #d1d1d1; /* \u6EDA\u52A8\u6761\u989C\u8272 */\n            border-radius: 9999px; /* \u5706\u89D2 */\n          }\n\n          .coupon-container::-webkit-scrollbar-thumb:hover {\n            background-color: rgba(100, 100, 100, 0.6);\n          }\n        `}\n      </style>\n\n      {/* \u4F7F\u7528\u5185\u7F6E\u7684 CouponContent \u5B50\u7EC4\u4EF6 */}\n      {coupons?.length ? (\n        <ProductBenefitsTabs.Content value=\"coupon\" className=\"\">\n          <div className=\"coupon-container h-[240px] overflow-y-auto p-3 lg-desktop:p-4\">\n            <CouponContent\n              coupons={coupons as NonNullable<CouponContentProps['coupons']>}\n              className=\"\"\n              textConfig={mergedTextConfig}\n            />\n          </div>\n        </ProductBenefitsTabs.Content>\n      ) : null}\n\n      <ProductBenefitsTabs.Content value=\"membership\" className=\"\">\n        <h3 className=\"mx-4 mb-2 text-left text-lg font-bold\">{mergedTextConfig.memberBenefits}</h3>\n        <div className={`overflow-y-auto rounded-[16px] px-4 ${isLogin ? 'max-h-[240px]' : 'max-h-[160px]'}`}>\n          <ul\n            className={`list-none [&_li:first-child]:rounded-t-[16px] \n              [&_li:last-child]:rounded-b-[16px] [&_li:last-child]:last:border-b-0 [&_li]:flex [&_li]:items-center [&_li]:gap-2\n              [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4\n              [&_li]:py-4 \n              [&_li]:text-left`}\n          >\n            {memberDiscount.enable && (\n              <li>\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n                    fill=\"#1D1D1F\"\n                  />\n                </svg>\n                <Text as=\"p\" className=\"text-left text-[16px] font-medium x:text-[14px]\">\n                  {replaceTemplate(mergedTextConfig.forNewMember, {\n                    amount: formatPrice({\n                      amount: memberDiscount?.config?.amount ?? 0,\n                      currencyCode: variant.price.currencyCode,\n                      locale,\n                    }),\n                  })}\n                </Text>\n              </li>\n            )}\n            {productsBenefits.items?.map((item: any, index: number) =>\n              item.modalText ? (\n                <li key={index}>\n                  <button\n                    onClick={() => openModal?.({ title: item.text, content: item.modalText })}\n                    key={index}\n                    className=\"flex\"\n                  >\n                    <Picture source={item.icon} alt={item.text} className=\"mr-[8px] size-[20px] shrink-0\" />\n                    <Text className=\"text-left text-[16px] font-medium x:text-[14px]\">{item.text}</Text>\n                  </button>\n                </li>\n              ) : (\n                <li key={index} className=\"flex\">\n                  <Picture source={item.icon} alt={item.text} className=\"mr-[8px] size-[20px] shrink-0\" />\n                  <Text as=\"p\" className=\"text-left text-[16px] font-medium x:text-[14px]\">\n                    {item.text}\n                  </Text>\n                </li>\n              )\n            )}\n            {/* \u9AD8\u6807\u7269\u6D41 */}\n            {paidShipping.enable ? (\n              <li>\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z\"\n                    fill=\"#1D1D1F\"\n                  />\n                </svg>\n                <Text as=\"p\" className=\"text-left text-[16px] font-medium x:text-[14px]\">\n                  {mergedTextConfig.expressShipping}\n                </Text>\n              </li>\n            ) : null}\n            {/* \u79EF\u5206\u62B5\u73B0 */}\n            {creditsRedemption.enable ? (\n              <li>\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    d=\"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z\"\n                    fill=\"#1D1D1F\"\n                  />\n                </svg>\n                <Text as=\"p\" className=\"text-left text-[16px] font-medium x:text-[14px]\">\n                  {activated ? (\n                    creditsRedemption?.config?.label?.replace(\n                      '{{amount}}',\n                      formatPrice({\n                        amount: creditsRedemption?.config?.amount ?? 0,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })\n                    )\n                  ) : (\n                    <>\n                      {mergedTextConfig.creditsAfterActivation}\n                      <span role=\"button\" tabIndex={0} onClick={() => handleActivate()} className=\"underline\">\n                        {mergedTextConfig.active}\n                      </span>\n                    </>\n                  )}\n                </Text>\n              </li>\n            ) : null}\n          </ul>\n        </div>\n        {!isLogin && (\n          <div className=\"px-4 pt-4\">\n            <Button variant=\"primary\" className=\"w-full\" onClick={() => openSignUpPopup?.()}>\n              {copyWriting?.signUp}\n            </Button>\n          </div>\n        )}\n      </ProductBenefitsTabs.Content>\n      {/* \u81EA\u5B9A\u4E49\u5185\u5BB9 */}\n      <ProductBenefitsTabs.Content value=\"installment\" className=\"px-4\">\n        <Heading size={2} className=\"mb-2 text-left text-lg font-bold\">\n          {mergedTextConfig.flexibleInstallment}\n        </Heading>\n        <div className=\"overflow-hidden rounded-[16px] bg-white\">\n          {renderAffirm}\n          {renderKlarna}\n          {renderPaypal && (\n            <div className=\"border-b border-[#D9D9D9] bg-white px-4 py-4 last:border-b-0\">{renderPaypal}</div>\n          )}\n        </div>\n      </ProductBenefitsTabs.Content>\n    </ProductBenefitsTabs>\n  )\n}\n\nexport default BenefitsTab\n"],
+  "mappings": "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",
+  "names": ["BenefitsTab_exports", "__export", "BenefitsTab_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_ProductBenefitsTabs", "import_BizProductProvider", "import_useBenefits", "import_utils", "import_textFormat", "import_classnames", "import_react", "import_AiuiProvider", "import_useCountDown", "import_useCopy", "import_helpers", "defaultTextConfig", "CouponItem", "item", "textConfig", "trackingData", "isCopied", "copyToClipboard", "useCopy", "couponCopy", "days", "hours", "minutes", "seconds", "useCountDown", "openModal", "isLogin", "classNames", "e", "CouponContent", "coupons", "className", "index", "BenefitsTab", "profile", "variant", "renderAffirm", "renderKlarna", "renderPaypal", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "savingDetail", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "benefits", "productBenefitsTabsValue", "setProductBenefitsTabsValue", "locale", "copyWriting", "scrollContainerRef", "mergedTextConfig", "activated", "memberDiscount", "commonCoupon", "creditsRedemption", "freeGift", "bundle", "paidShipping", "fullGift", "levelDiscount", "productsBenefits", "thirdParty", "value", "couponSaving", "memberSaving", "handleActivate", "ProductBenefitsTabs", "handleProductBenefitsTabListClick", "el", "container", "button", "scrollLeft"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+interface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+declare const ProductBenefitsTabs: {
+    ({ defaultValue, value, onValueChange, children, className, ...props }: BenefitsTabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    List: import("react").ForwardRefExoticComponent<BenefitsTabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Badge: ({ children, className, ...props }: BenefitsTabsBadgeProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ value, children, className, ...props }: BenefitsTabsContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    value: string;
+    children: ReactNode;
+}
+interface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+interface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+}
+export default ProductBenefitsTabs;

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

@@ -0,0 +1,2 @@
+"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var s in t)c(e,s,{get:t[s],enumerable:!0})},P=(e,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(e,a)&&a!==s&&c(e,a,{get:()=>t[a],enumerable:!(n=v(t,a))||n.enumerable});return e};var h=e=>P(c({},"__esModule",{value:!0}),e);var E={};C(E,{default:()=>A});module.exports=h(E);var i=require("react/jsx-runtime"),u=require("../../../../../../components/index.js"),r=require("react"),l=require("../../../../../../helpers/index.js"),o=require("@radix-ui/react-tabs");const g=(0,r.createContext)(void 0),N=()=>{const e=(0,r.useContext)(g);if(!e)throw new Error("ProductBenefitsTabs components must be used within ProductBenefitsTabs");return e},d=({defaultValue:e,value:t,onValueChange:s,children:n,className:a,...f})=>{const[B,m]=(0,r.useState)(e),T=t??B,b=p=>{t===void 0&&m(p),s?.(p)};return(0,i.jsx)(g.Provider,{value:{activeValue:T,setActiveValue:b},children:(0,i.jsx)("div",{id:"ipc-product-detail-benefits-tabs",className:(0,l.cn)("bg-[#EAEAEC] rounded-xl py-[10px] lg-desktop:py-4",a),...f,children:(0,i.jsx)(o.Root,{value:T,onValueChange:b,children:n})})})},w=(0,r.forwardRef)(({children:e,className:t,...s},n)=>(0,i.jsx)(o.List,{className:(0,l.cn)("flex space-x-6 overflow-x-auto px-4 relative",t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},ref:n,...s,children:e})),H=({value:e,children:t,className:s,...n})=>{const{activeValue:a}=N(),f=a===e;return(0,i.jsxs)(o.Trigger,{value:e,className:(0,l.cn)("text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]",s),...n,children:[(0,i.jsx)(u.Text,{className:(0,l.cn)("absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300",f&&"w-full")}),t]})},M=({children:e,className:t,...s})=>(0,i.jsx)(u.Text,{size:1,className:(0,l.cn)("font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand",t),...s,children:e}),y=({value:e,children:t,className:s,...n})=>(0,i.jsx)(o.Content,{value:e,className:(0,l.cn)(s),...n,children:t});d.displayName="ProductBenefitsTabs",d.List=w,d.Trigger=H,d.Badge=M,d.Content=y;var A=d;
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts

@@ -0,0 +1,2 @@
+declare const ProductBundle: () => import("react/jsx-runtime").JSX.Element | null;
+export default ProductBundle;

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

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

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

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

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts

@@ -0,0 +1,2 @@
+declare const ProductExchangePurchase: () => import("react/jsx-runtime").JSX.Element | null;
+export default ProductExchangePurchase;

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({ exchange: undefined })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({ exchange: value })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedExchangePurchase?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className=\"rounded-full\"\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text\n                  className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductExchangePurchase\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCM,IAAAI,EAAA,6BAvCNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIT,GAAoB,CAAC,EAC3DU,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAyB,KAAOc,EAAM,IACxCT,IAA6B,MAAS,EACtCF,IAAgC,CAAE,SAAU,MAAU,CAAC,EACvDC,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,IAE1DL,IAAmB,MAAS,EAC5BG,IAA6BS,CAAK,EAClCX,IAAgC,CAAE,SAAUW,CAAM,CAAC,EAEvD,EAEA,OAAKH,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,EAAe,IAAKI,MACnB,QAAC,OAEC,aAAW,MACT,8FACA,CACG,eAAiBf,GAAyB,KAAOe,EAAK,EACzD,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASf,GAAyB,KAAOe,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,iDACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAhB,EACA,aAAcgB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA1CKA,EAAK,EA2CZ,CACD,EACH,GACF,EAtDkC,IAwDtC,EAEA,IAAO1B,EAAQS",
+  "names": ["ProductExchangePurchase_exports", "__export", "ProductExchangePurchase_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts

@@ -0,0 +1,2 @@
+declare const ProductFreeGift: () => import("react/jsx-runtime").JSX.Element | null;
+export default ProductFreeGift;

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({ gift: undefined })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({ gift: value, })\n    } \n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedGift?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className=\"rounded-full\"\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductFreeGift\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCM,IAAAI,EAAA,6BAvCNC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAY,CAAC,EACnDW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDb,GAAa,KAAOa,EAAM,IAC5BZ,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAAE,KAAM,MAAU,CAAC,IAEnDH,IAAmB,MAAS,EAC5BD,IAAiBY,CAAK,EACtBR,IAAgC,CAAE,KAAMQ,CAAO,CAAC,EAEpD,EAEA,OAAKH,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,EAAe,IAAII,MAClB,QAAC,OAEC,aAAW,MACT,8FACA,CACG,eAAiBd,GAAa,KAAOc,EAAK,EAC7C,CACF,EAEA,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASd,GAAa,KAAOc,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,iDACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAML,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQK,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAnCKA,EAAK,EAoCZ,CACD,EACH,GACF,EA/CkC,IAiDtC,EAEA,IAAO1B,EAAQS",
+  "names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts

@@ -0,0 +1,2 @@
+declare const ProductHighlight: () => import("react/jsx-runtime").JSX.Element | null;
+export default ProductHighlight;

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

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

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

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

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts

@@ -0,0 +1,2 @@
+declare const ProductOptions: () => import("react/jsx-runtime").JSX.Element | null;
+export default ProductOptions;

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-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=\"relative ipc-product-detail-options-value\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default ProductOptions\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBc,IAAAI,EAAA,6BAtBdC,EAAsC,wCAEtCC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCAEvB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,OAAKN,EAAQ,QAAQ,UAEnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAM,iBAAmBR,EAAgBM,EAAO,IAAI,EAAG,KACnG,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,sBAAmB,UAAOM,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBT,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOjB,EAAQS",
+  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
+}

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

@@ -0,0 +1,2 @@
+declare const ProductDetail: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ProductDetail;

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

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

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

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

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts

@@ -0,0 +1,43 @@
+import type { ProductOption } from '../../../../../cpn-components/CpnProductCard/types.js';
+import type { Img } from '../../../../../types/props.js';
+export interface ProductDetailProps {
+}
+export declare enum BenefitsTabsType {
+    ALL_BENEFITS = "allBenefits",
+    COUPON = "coupon",
+    INSTALLMENT = "installment",
+    MEMBERSHIP = "membership"
+}
+export interface ProductBenefitsTabsProps {
+    data: {
+        allBenefits: {
+            benefits: {
+                type?: BenefitsTabsType;
+                tabName: string;
+                tabValue: string;
+                collectBgImage?: Img;
+                coupons?: BenefitsTabCouponProps[];
+            }[];
+        };
+    };
+}
+export interface BenefitsTabCouponProps {
+    code: string;
+    title: string;
+    description: string;
+    discount: number;
+    bgImage: Img;
+}
+export interface ProductBenefitsTabCouponProps {
+    coupons?: BenefitsTabCouponProps[];
+}
+export interface HighlightProps {
+    data: any;
+}
+export interface ProductOptionsProps {
+    option: ProductOption;
+    onOptionChange: (arg0: {
+        id: string;
+        value: string;
+    }) => void;
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js

@@ -0,0 +1,2 @@
+"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(e,o)=>{for(var r in o)n(e,r,{get:o[r],enumerable:!0})},P=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of a(o))!c.call(e,t)&&t!==r&&n(e,t,{get:()=>o[t],enumerable:!(p=s(o,t))||p.enumerable});return e};var d=e=>P(n({},"__esModule",{value:!0}),e);var g={};u(g,{BenefitsTabsType:()=>i});module.exports=d(g);var i=(t=>(t.ALL_BENEFITS="allBenefits",t.COUPON="coupon",t.INSTALLMENT="installment",t.MEMBERSHIP="membership",t))(i||{});
+//# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/types.ts"],
+  "sourcesContent": ["import type {\n  ProductVariant,\n  Product,\n  ProductOption,\n  ProductOptionValues,\n} from '../../../../../cpn-components/CpnProductCard/types.js'\nimport type { Img } from '../../../../../types/props.js'\n\nexport interface ProductDetailProps {}\n\nexport enum BenefitsTabsType {\n  ALL_BENEFITS = 'allBenefits',\n  COUPON = 'coupon',\n  INSTALLMENT = 'installment',\n  MEMBERSHIP = 'membership',\n}\n\nexport interface ProductBenefitsTabsProps {\n  data: {\n    allBenefits: {\n      benefits: {\n        type?: BenefitsTabsType\n        tabName: string\n        tabValue: string\n        collectBgImage?: Img\n        coupons?: BenefitsTabCouponProps[]\n      }[]\n    }\n  }\n}\n\nexport interface BenefitsTabCouponProps {\n  code: string\n  title: string\n  description: string\n  discount: number\n  bgImage: Img\n}\n\nexport interface ProductBenefitsTabCouponProps {\n  coupons?: BenefitsTabCouponProps[]\n}\n\nexport interface HighlightProps {\n  data: any\n}\n\nexport interface ProductOptionsProps {\n  option: ProductOption\n  onOptionChange: (arg0: { id: string; value: string }) => void\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAUO,IAAKE,OACVA,EAAA,aAAe,cACfA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,WAAa,aAJHA,OAAA",
+  "names": ["types_exports", "__export", "BenefitsTabsType", "__toCommonJS"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.d.ts

@@ -0,0 +1,2 @@
+declare const CompareModal: () => import("react/jsx-runtime").JSX.Element | null;
+export default CompareModal;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js

@@ -0,0 +1,2 @@
+"use strict";var y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(r,a)=>{for(var i in a)c(r,i,{get:a[i],enumerable:!0})},g=(r,a,i,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of D(a))!w.call(r,l)&&l!==i&&c(r,l,{get:()=>a[l],enumerable:!(p=h(a,l))||p.enumerable});return r};var k=(r,a,i)=>(i=r!=null?y(G(r)):{},g(a||!r||!r.__esModule?c(i,"default",{value:r,enumerable:!0}):i,r)),P=r=>g(c({},"__esModule",{value:!0}),r);var H={};I(H,{default:()=>L});module.exports=P(H);var e=require("react/jsx-runtime"),n=require("react"),t=require("../../../../../../components"),b=require("../../../../BizProductProvider"),v=k(require("./Select")),N=require("../../../../../AiuiProvider/index.js"),C=require("../../../../utils"),E=require("./ShopifyColorOption");const T=()=>{const{locale:r="us"}=(0,N.useAiuiContext)(),{compareData:a,product:i}=(0,b.useBizProductContext)(),[p,l]=(0,n.useState)();(0,n.useEffect)(()=>{l(a?.availableCompareList[0]?.handle)},[a?.availableCompareList]);const x=[a?.currentProductCompareData?.product,a?.availableCompareList.find(o=>o.handle===p)?.product].filter(Boolean);return a?.specificationKeys?(0,e.jsxs)(t.Dialog,{children:[(0,e.jsx)(t.DialogTrigger,{children:(0,e.jsx)("button",{className:"text-base leading-[1.4] font-bold",children:"Compare"})}),(0,e.jsxs)(t.DialogContent,{overlayClassName:"z-[100]",className:"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]",children:[(0,e.jsx)(t.DialogHeader,{className:"border-b border-[#E8E8E8]",children:(0,e.jsx)(t.DialogTitle,{children:"Compare"})}),(0,e.jsxs)(t.Grid,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(t.GridItem,{span:1}),x.map((o,d)=>(0,e.jsx)(t.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:o.images[0].url,alt:o.title,className:"h-[200px] w-[200px]",role:"presentation"})},d))]}),(0,e.jsxs)(t.Grid,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(t.Text,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:a.currentProductCompareData?.shortName||i.title})}),p&&(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)(v.default,{value:p,onChange:o=>{l(o)},list:a.options})})]}),(0,e.jsxs)(t.Grid,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)(t.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),x.map((o,d)=>{const m=o.variants[0],f=o.options?.find(s=>["color","colour","couleur"].find(u=>s.name.toLowerCase().includes(u)))?.values.map(s=>s.label);return(0,e.jsx)(t.GridItem,{span:1,className:"flex h-full",children:(0,e.jsxs)("div",{className:"flex flex-col gap-[8px]",children:[m.price.amount<9999999&&(0,e.jsxs)("div",{className:"flex items-center gap-[8px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),(0,e.jsx)("div",{className:"flex items-center gap-[6px]",children:(0,e.jsx)("span",{className:"text-[16px] font-bold",children:(0,C.formatPrice)({locale:r,amount:m.price.amount,currencyCode:m.price.currencyCode})})})]}),f?.length&&(0,e.jsxs)("div",{className:"flex items-center gap-[8px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),(0,e.jsx)("div",{className:"flex items-center gap-[16px]",children:f.map(s=>(0,e.jsx)(E.ShopifyColorOption,{label:s,className:"h-[16px] w-[16px]"},s))})]})]})},d)})]}),(0,e.jsx)(t.Grid,{className:"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:a.specificationKeys?.map(o=>(0,e.jsxs)(t.GridItem,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:o}),x.map((d,m)=>{let s=d.metafields?.global?.specifications?.find(u=>u?.key===o)?.value||"";switch(s.trim().toLowerCase()){case"true":s="\u2714\uFE0F";break;case"false":s="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-semibold text-[#595959]",children:s})},m)})]},o))})]})]}):null};var L=T;
+//# sourceMappingURL=CompareModal.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img\n                  src={product.images[0].url}\n                  alt={product.title}\n                  className=\"h-[200px] w-[200px]\"\n                  role=\"presentation\"\n                />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "Select", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts

@@ -0,0 +1,21 @@
+interface SelectProps {
+    label?: string;
+    required?: boolean;
+    list?: {
+        value: string;
+        text: string;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    containerClassName?: string;
+    selectListClassName?: string;
+    truncate?: boolean;
+}
+declare const Select: ({ label, required, list, value, disabled, error, errorClassName, onChange, placeholder, className, containerClassName, selectListClassName, truncate, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js

@@ -0,0 +1,2 @@
+"use strict";var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var L=(a,n)=>{for(var s in n)v(a,s,{get:n[s],enumerable:!0})},R=(a,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of D(n))!S.call(a,r)&&r!==s&&v(a,r,{get:()=>n[r],enumerable:!(l=C(n,r))||l.enumerable});return a};var _=a=>R(v({},"__esModule",{value:!0}),a);var H={};L(H,{default:()=>M});module.exports=_(H);var t=require("react/jsx-runtime"),g=require("@heroicons/react/24/outline"),o=require("../../../../../../helpers"),i=require("react");const I=({label:a="",required:n=!1,list:s=[],value:l="",disabled:r=!1,error:d="",errorClassName:h="",onChange:m=b=>{},placeholder:p="",className:w="",containerClassName:N="",selectListClassName:E="",truncate:F=!1,...k})=>{const b=(0,i.useRef)(null),[x,u]=(0,i.useState)(!1),f=(0,i.useRef)(null),y=s.find(e=>e?.value===l)?.text;return(0,i.useEffect)(()=>{const e=c=>{f.current&&!f.current?.contains(c.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),(0,t.jsxs)("div",{className:(0,o.cn)("relative w-full",N),children:[a&&(0,t.jsxs)("div",{className:"mb-[10px] text-[16px] font-bold",children:[a,n&&(0,t.jsx)("span",{className:"text-[#F84D4F]",children:"*"})]}),(0,t.jsxs)("div",{ref:f,className:"relative block",children:[(0,t.jsxs)("div",{className:(0,o.cn)("flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]",p&&!l?"placeholder:text-[#999]":"",r?"pointer-events-none bg-[#F7F8F9]":"bg-white",d?"!border-[#F84D4F]":"border-[#E8E8E8]",s.length<=1&&"cursor-default",w),onClick:()=>{s.length>1&&u(!x)},onChange:e=>{m(e.target.value)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},...k,children:[!l&&p?(0,t.jsx)("div",{className:"text-[#999]",children:p}):(0,t.jsx)("div",{className:(0,o.cn)("line-clamp-1",F?"min-w-0 flex-1 truncate":"flex-1"),children:y}),s.length>1&&(0,t.jsx)(g.ChevronDownIcon,{className:(0,o.cn)("ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform",x&&"rotate-180")})]}),(0,t.jsx)("div",{ref:b,className:(0,o.cn)("absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300",x?"":"pointer-events-none opacity-0",E),children:s.map(e=>(0,t.jsx)("div",{"data-value":e.value,className:(0,o.cn)("flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]",l===e.value?"!bg-[#E8E8E8]":"",e?.disabled?"pointer-events-none text-[#C8C8C8]":""),onClick:()=>{m(e.value),u(!1)},role:"button",tabIndex:0,onKeyDown:c=>{(c.key==="Enter"||c.key===" ")&&c.preventDefault()},children:e.text},e.value))})]}),d&&(0,t.jsx)("div",{className:(0,o.cn)("mt-[8px] text-[14px] text-[#F84D4F]",h),children:typeof d=="string"?`*${d}`:d})]})};var M=I;
+//# sourceMappingURL=Select.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.tsx"],
+  "sourcesContent": ["import { ChevronDownIcon } from '@heroicons/react/24/outline'\nimport { cn as classNames, cn } from '../../../../../../helpers'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface SelectProps {\n  label?: string\n  required?: boolean\n  list?: { value: string; text: string; disabled?: boolean }[]\n  value?: string\n  disabled?: boolean\n  error?: string\n  errorClassName?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  containerClassName?: string\n  selectListClassName?: string\n  truncate?: boolean\n}\n\nconst Select = ({\n  label = '',\n  required = false,\n  list = [],\n  value = '',\n  disabled = false,\n  error = '',\n  errorClassName = '',\n  onChange = (value: string) => {},\n  placeholder = '',\n  className = '',\n  containerClassName = '',\n  selectListClassName = '',\n  truncate = false,\n  ...props\n}: SelectProps) => {\n  const dropdownRef = useRef(null)\n  const [selecting, setSelecting] = useState(false)\n  const buttonRef = useRef<HTMLDivElement>(null)\n\n  const displayValue = list.find(item => item?.value === value)?.text\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (buttonRef.current && !buttonRef.current?.contains(event.target as Node)) {\n        setSelecting(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  // useEffect(() => {\n  //   // scroll to select item when select is open\n  //   // start_ai_generated\n  //   if (selecting && value) {\n  //     const selectedElement = dropdownRef.current.querySelector(`[data-value=\"${value}\"]`)\n  //     if (selectedElement) {\n  //       scrollParentToChild(dropdownRef.current, selectedElement)\n  //     }\n  //   }\n  //   // end_ai_generated\n  // }, [selecting, value])\n\n  return (\n    <div className={classNames('relative w-full', containerClassName)}>\n      {label && (\n        <div className=\"mb-[10px] text-[16px] font-bold\">\n          {label}\n          {required && <span className=\"text-[#F84D4F]\">*</span>}\n        </div>\n      )}\n      <div ref={buttonRef} className=\"relative block\">\n        <div\n          className={classNames(\n            'flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]',\n            placeholder && !value ? 'placeholder:text-[#999]' : '',\n            disabled ? 'pointer-events-none bg-[#F7F8F9]' : 'bg-white',\n            error ? '!border-[#F84D4F]' : 'border-[#E8E8E8]',\n            list.length <= 1 && 'cursor-default',\n            className\n          )}\n          onClick={() => {\n            if (list.length > 1) {\n              setSelecting(!selecting)\n            }\n          }}\n          onChange={event => {\n            onChange((event.target as HTMLSelectElement).value)\n          }}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n            }\n          }}\n          {...props}\n        >\n          {!value && placeholder ? (\n            <div className=\"text-[#999]\">{placeholder}</div>\n          ) : (\n            <div className={cn('line-clamp-1', truncate ? 'min-w-0 flex-1 truncate' : 'flex-1')}>{displayValue}</div>\n          )}\n          {list.length > 1 && (\n            <ChevronDownIcon\n              className={classNames(\n                'ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform',\n                selecting && 'rotate-180'\n              )}\n            />\n          )}\n        </div>\n        <div\n          ref={dropdownRef}\n          className={classNames(\n            'absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300',\n            selecting ? '' : 'pointer-events-none opacity-0',\n            selectListClassName\n          )}\n        >\n          {list.map(item => (\n            <div\n              key={item.value}\n              data-value={item.value}\n              className={classNames(\n                'flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]',\n                value === item.value ? '!bg-[#E8E8E8]' : '',\n                item?.disabled ? 'pointer-events-none text-[#C8C8C8]' : ''\n              )}\n              onClick={() => {\n                onChange(item.value)\n                setSelecting(false)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {item.text}\n            </div>\n          ))}\n        </div>\n      </div>\n      {error && (\n        <div className={classNames('mt-[8px] text-[14px] text-[#F84D4F]', errorClassName)}>\n          {typeof error === 'string' ? `*${error}` : error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Select"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoEQ,IAAAI,EAAA,6BApERC,EAAgC,uCAChCC,EAAqC,qCACrCC,EAAmD,iBAkBnD,MAAMC,EAAS,CAAC,CACd,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,KAAAC,EAAO,CAAC,EACR,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,SAAAC,EAAYJ,GAAkB,CAAC,EAC/B,YAAAK,EAAc,GACd,UAAAC,EAAY,GACZ,mBAAAC,EAAqB,GACrB,oBAAAC,EAAsB,GACtB,SAAAC,EAAW,GACX,GAAGC,CACL,IAAmB,CACjB,MAAMC,KAAc,UAAO,IAAI,EACzB,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAY,UAAuB,IAAI,EAEvCC,EAAehB,EAAK,KAAKiB,GAAQA,GAAM,QAAUhB,CAAK,GAAG,KAC/D,sBAAU,IAAM,CACd,MAAMiB,EAAsBC,GAAsB,CAC5CJ,EAAU,SAAW,CAACA,EAAU,SAAS,SAASI,EAAM,MAAc,GACxEL,EAAa,EAAK,CAEtB,EACA,gBAAS,iBAAiB,YAAaI,CAAkB,EAClD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAAC,CAAC,KAeH,QAAC,OAAI,aAAW,EAAAE,IAAW,kBAAmBZ,CAAkB,EAC7D,UAAAV,MACC,QAAC,OAAI,UAAU,kCACZ,UAAAA,EACAC,MAAY,OAAC,QAAK,UAAU,iBAAiB,aAAC,GACjD,KAEF,QAAC,OAAI,IAAKgB,EAAW,UAAU,iBAC7B,qBAAC,OACC,aAAW,EAAAK,IACT,qJACAd,GAAe,CAACL,EAAQ,0BAA4B,GACpDC,EAAW,mCAAqC,WAChDC,EAAQ,oBAAsB,mBAC9BH,EAAK,QAAU,GAAK,iBACpBO,CACF,EACA,QAAS,IAAM,CACTP,EAAK,OAAS,GAChBc,EAAa,CAACD,CAAS,CAE3B,EACA,SAAUM,GAAS,CACjBd,EAAUc,EAAM,OAA6B,KAAK,CACpD,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EACC,GAAGR,EAEH,WAACV,GAASK,KACT,OAAC,OAAI,UAAU,cAAe,SAAAA,EAAY,KAE1C,OAAC,OAAI,aAAW,MAAG,eAAgBI,EAAW,0BAA4B,QAAQ,EAAI,SAAAM,EAAa,EAEpGhB,EAAK,OAAS,MACb,OAAC,mBACC,aAAW,EAAAoB,IACT,iFACAP,GAAa,YACf,EACF,GAEJ,KACA,OAAC,OACC,IAAKD,EACL,aAAW,EAAAQ,IACT,4KACAP,EAAY,GAAK,gCACjBJ,CACF,EAEC,SAAAT,EAAK,IAAIiB,MACR,OAAC,OAEC,aAAYA,EAAK,MACjB,aAAW,EAAAG,IACT,0LACAnB,IAAUgB,EAAK,MAAQ,gBAAkB,GACzCA,GAAM,SAAW,qCAAuC,EAC1D,EACA,QAAS,IAAM,CACbZ,EAASY,EAAK,KAAK,EACnBH,EAAa,EAAK,CACpB,EACA,KAAK,SACL,SAAU,EACV,UAAWO,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EAEC,SAAAJ,EAAK,MAnBDA,EAAK,KAoBZ,CACD,EACH,GACF,EACCd,MACC,OAAC,OAAI,aAAW,EAAAiB,IAAW,sCAAuChB,CAAc,EAC7E,gBAAOD,GAAU,SAAW,IAAIA,CAAK,GAAKA,EAC7C,GAEJ,CAEJ,EAEA,IAAOZ,EAAQM",
+  "names": ["Select_exports", "__export", "Select_default", "__toCommonJS", "import_jsx_runtime", "import_outline", "import_helpers", "import_react", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "classNames", "e"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/ShopifyColorOption.d.ts

@@ -0,0 +1,5 @@
+export declare const ShopifyColorOption: ({ onClick, label, className, }: {
+    onClick?: () => void;
+    label: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;