@anker-in/headless-ui 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/utils/index.js +1 -1
- package/dist/cjs/biz-components/Listing/utils/index.js.map +2 -2
- package/dist/cjs/biz-components/SceneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/SceneShelf/ProductCard.js.map +3 -3
- package/dist/cjs/shared/LocalizedLink.d.ts +6 -0
- package/dist/cjs/shared/LocalizedLink.js +2 -0
- package/dist/cjs/shared/LocalizedLink.js.map +7 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/utils/index.js +1 -1
- package/dist/esm/biz-components/Listing/utils/index.js.map +2 -2
- package/dist/esm/biz-components/SceneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/SceneShelf/ProductCard.js.map +3 -3
- package/dist/esm/shared/LocalizedLink.d.ts +6 -0
- package/dist/esm/shared/LocalizedLink.js +2 -0
- package/dist/esm/shared/LocalizedLink.js.map +7 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefits/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Text, Picture, Heading } from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport React, { useEffect, useMemo, useState, type PropsWithChildren } from 'react'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { motion } from 'framer-motion'\nimport Close from '../../../../../HeaderNavigation/icons/Close.js'\nimport ModalContainer from './../ProductBenefitsTabs/ModalContainer.js'\n\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\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\nexport const BenefitsModal = ({\n title,\n showModal,\n closeModal,\n children,\n className,\n}: PropsWithChildren<{\n title?: string\n showModal: boolean\n closeModal: () => void\n className?: string\n}>) => {\n return (\n <motion.div\n animate={showModal ? { opacity: 1 } : { opacity: 0, pointerEvents: 'none' }}\n transition={{ duration: 0.15, bounce: 0 }}\n className=\"fixed inset-0 z-[1000] bg-black/50 opacity-0 tablet:flex tablet:items-center tablet:justify-center\"\n >\n {/* Mobile: Bottom sheet */}\n <motion.div\n animate={showModal ? { y: 0 } : { y: '100%' }}\n transition={{ duration: 0.2, ease: 'easeOut' }}\n className={cn(\n 'absolute bottom-0 left-0 right-0 max-w-[80vh] rounded-t-box tablet:rounded-box overflow-hidden bg-white',\n 'tablet:static tablet:h-auto tablet:max-h-[80vh] tablet:w-[896px] tablet:max-w-[90vw]',\n className\n )}\n >\n {/* Desktop: Scale animation wrapper */}\n <motion.div\n animate={showModal ? { scale: 1 } : { scale: 0.95 }}\n transition={{ duration: 0.15, bounce: 0 }}\n className=\"hidden size-full tablet:block\"\n >\n <div className=\"relative size-full overflow-auto\">\n <div className=\"sticky top-0 z-[2] bg-white\">\n {title && (\n <Heading size={2} className=\"w-full py-6 px-4 text-xl tablet:px-8 tablet:pt-4 tablet:pb-2 font-bold\">\n {title}\n </Heading>\n )}\n <button onClick={closeModal} className=\"absolute right-4 top-4 z-[2]\" aria-label=\"Close modal\">\n <Close className=\"size-6\" />\n </button>\n </div>\n {children}\n </div>\n </motion.div>\n\n {/* Mobile: No scale animation */}\n <div className=\"relative size-full overflow-auto tablet:hidden\">\n <div className=\"sticky top-0 z-[2] bg-white\">\n {title && <p className=\"w-full py-4 pl-5 text-xl font-bold\">{title}</p>}\n <button onClick={closeModal} className=\"absolute right-4 top-4 z-[2]\" aria-label=\"Close modal\">\n <Close className=\"size-6\" />\n </button>\n </div>\n {children}\n </div>\n </motion.div>\n </motion.div>\n )\n}\n\nconst ProductBenefits = ({}: BenefitsTabProps) => {\n const { profile, variant, renderInstallments, savingDetail, openSignInPopup, openAuthCodePopup, product } =\n useBizProductContext()\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n\n // \u7F13\u5B58 renderInstallments\uFF0C\u9632\u6B62 variant \u5207\u6362\u65F6\u53D8\u6210 undefined \u5BFC\u81F4\u4E0D\u6E32\u67D3\n const [cachedInstallments, setCachedInstallments] = useState<React.ReactNode>(renderInstallments)\n\n useEffect(() => {\n if (renderInstallments) {\n setCachedInstallments(renderInstallments)\n }\n // Affirm \u63D2\u4EF6\u5728 variant \u53D8\u5316\u540E\u9700\u8981\u5237\u65B0\n if (typeof window !== 'undefined' && (window as any).affirm?.ui?.refresh) {\n ;(window as any).affirm.ui.refresh()\n }\n }, [renderInstallments, variant.id])\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n const [memberBenefitsModal, setMemberBenefitsModal] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const { creditsRedemption, freeGift, bundle, fullGift, levelDiscount } = benefits\n\n const coupons = [\n creditsRedemption.enable\n ? {\n title: productBenefitsData?.creditsRedemption?.creditsTitle,\n description: productBenefitsData?.creditsRedemption?.creditsDesc,\n icon: <CreditsRedemptionIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n creditsRedemption.enable\n ? {\n title: (\n <>\n {!activated && Boolean(profile?.email) ? (\n <>\n {productBenefitsData?.creditsRedemption?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => openAuthCodePopup?.()} className=\"underline\">\n {productBenefitsData?.creditsRedemption?.active}\n </span>\n </>\n ) : (\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 ),\n icon: <CreditsRedemptionIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n icon: <LevelDiscountIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n icon: <FullGiftIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n icon: <FreeGiftIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n bundle.enable\n ? {\n title: replaceTemplate(productBenefitsData?.bundle?.bundleSaveUpTo, {\n count: formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: replaceTemplate(productBenefitsData?.bundle?.bundleOffer, {\n count: bundle?.config?.bundleList?.length?.toString() || '',\n }),\n icon: <BundleIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n {\n title: productBenefitsData?.paymentMethod?.title,\n image: productBenefitsData?.paymentMethod?.image,\n icon: <PaymentMethodIcon className=\"desktop:size-6 size-5\" />,\n event: () => setIsFlexModalOpen(true),\n },\n {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: Boolean(profile?.email) ? (\n productBenefitsData?.member?.loginTitle\n ) : (\n <div>\n <span\n className=\"mr-2 desktop:mr-3\"\n dangerouslySetInnerHTML={{ __html: productBenefitsData?.member?.unloginTitle }}\n ></span>\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productBenefitsData?.member?.loginNow }}\n />\n </div>\n ),\n icon: <MemberDiscountIcon className=\"desktop:size-6 size-5\" />,\n event: () => setMemberBenefitsModal(true),\n },\n cachedInstallments\n ? {\n customRenderTitle: cachedInstallments,\n icon: <InstallmentsIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n ].filter(Boolean)\n\n \n return (\n <div>\n {productBenefitsData?.benefitTitle && (\n <Text\n as=\"div\"\n html={productBenefitsData?.benefitTitle}\n className=\"text-sm mb-3 lg-desktop:mb-4 lg-desktop:text-base font-bold leading-[1.2]\"\n />\n )}\n <ul className=\"desktop:px-4 px-3 rounded-box bg-[#F5F6F7]\">\n <>\n {coupons?.map((item, index) => (\n <li key={index}>\n <div className=\"flex gap-3 items-start py-3 laptop:py-4\">\n <div className=\"shrink-0\">{item?.icon}</div>\n <div\n onClick={item?.event}\n className={cn(\n 'flex flex-1 items-center gap-1 desktop:gap-2',\n item?.event && 'cursor-pointer justify-between'\n )}\n >\n <div>\n {item?.customRenderTitle ? (\n <div>{item?.customRenderTitle}</div>\n ) : (\n <div className=\"flex items-center gap-2 desktop:gap-3 text-[14px] laptop:text-base font-bold leading-[1.2]\">\n {item?.title}\n {item?.image && <Picture source={item?.image} className=\"w-[40px] h-[20px] shrink-0\" />}\n </div>\n )}\n {item?.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"laptop:text-[14px] text-[12px] font-bold text-[#2A2C32]\"\n >\n {item.description}\n </Text>\n )}\n </div>\n {item?.event && <RightArrowIcon className=\"size-4 desktop:size-6\" />}\n </div>\n </div>\n {index != coupons?.length - 1 && <div className=\"bg-[#DADCE0] h-[1px]\" />}\n </li>\n ))}\n </>\n </ul>\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={productBenefitsData?.paymentMethod?.payImage}></Picture>\n </ModalContainer>\n <BenefitsModal\n title={productBenefitsData?.member?.modelTitle}\n showModal={memberBenefitsModal}\n closeModal={() => setMemberBenefitsModal(false)}\n >\n <ul className=\"flex flex-col overflow-y-auto tablet:max-h-[calc(80vh-52px)] tablet:py-8 gap-5 pb-6 tablet:pb-8 tablet:gap-8 px-4 tablet:px-8\">\n {productBenefitsData?.member?.modelBenefits?.map(\n (benefit: { title?: string; desc?: string }, index: number) => (\n <li key={index} className=\"flex flex-col gap-1\">\n <Text html={benefit?.title} className=\"text-[16px] tablet:text-[18px] font-bold leading-[1.4]\" />\n <Text\n html={benefit?.desc}\n className=\"text-[14px] text-[#1D1D1F] tablet:text-[16px] font-bold leading-[1.4] opacity-75\"\n />\n </li>\n )\n )}\n </ul>\n </BenefitsModal>\n </div>\n )\n}\n\n// Credits Redemption Icon\nconst CreditsRedemptionIcon = ({ className }: { className?: string }) => (\n <svg className={className} 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)\n\nconst MemberDiscountIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.4294 1.58368C15.0354 1.5838 15.6026 1.88286 15.944 2.38348L19.4997 7.5993C19.9918 8.32123 19.9058 9.29041 19.2946 9.91473L11.8571 17.5104C10.8453 18.5435 9.18314 18.5447 8.16961 17.5134L0.696949 9.90692C0.0916662 9.29063 -0.000821769 8.3354 0.474293 7.61395L3.90203 2.4079C4.24121 1.89312 4.81678 1.58368 5.43328 1.58368H14.4294ZM2.00457 8.62177L9.47722 16.2292C9.77143 16.5282 10.2539 16.5278 10.5475 16.2282L17.9841 8.63153L14.4294 3.41669H5.43328L2.00457 8.62177ZM13.5759 7.74481C13.9008 7.41946 14.4279 7.41834 14.7536 7.74286C15.0792 8.06792 15.0804 8.59584 14.7555 8.92157L10.6247 13.0593C10.2833 13.401 9.72933 13.4013 9.38738 13.0602L5.24382 8.92352C4.91829 8.59852 4.9172 8.07056 5.24187 7.74481C5.56689 7.41925 6.09484 7.41813 6.42058 7.74286L10.0046 11.321L13.5759 7.74481Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst LevelDiscountIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M13.1615 5.66083C13.4869 5.33539 14.0144 5.33539 14.3398 5.66083C14.6653 5.98626 14.6653 6.51378 14.3398 6.83921L6.83984 14.3392C6.51441 14.6646 5.98689 14.6646 5.66146 14.3392C5.33602 14.0138 5.33602 13.4863 5.66146 13.1608L13.1615 5.66083Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.709 11.0417C13.6295 11.0417 14.3756 11.7879 14.3756 12.7084C14.3756 13.6288 13.6295 14.375 12.709 14.375C11.7885 14.375 11.0423 13.6288 11.0423 12.7084C11.0423 11.7879 11.7885 11.0417 12.709 11.0417ZM12.709 12.2917C12.4789 12.2917 12.2923 12.4782 12.2923 12.7084C12.2923 12.9385 12.4789 13.125 12.709 13.125C12.9391 13.125 13.1256 12.9385 13.1256 12.7084C13.1256 12.4782 12.9391 12.2917 12.709 12.2917Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.29232 5.62502C8.21279 5.62502 8.95898 6.37121 8.95898 7.29169C8.95898 8.21216 8.21279 8.95835 7.29232 8.95835C6.37184 8.95835 5.62565 8.21216 5.62565 7.29169C5.62565 6.37121 6.37184 5.62502 7.29232 5.62502ZM7.29232 6.87502C7.0622 6.87502 6.87565 7.06157 6.87565 7.29169C6.87565 7.52181 7.0622 7.70835 7.29232 7.70835C7.52244 7.70835 7.70898 7.52181 7.70898 7.29169C7.70898 7.06157 7.52244 6.87502 7.29232 6.87502Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16.6673 2.91669C18.048 2.91669 19.1673 4.03597 19.1673 5.41669V8.0469C19.1673 8.39923 18.9458 8.71388 18.6139 8.83221C18.0561 9.03101 17.652 9.57037 17.652 10.2084C17.652 10.8463 18.0561 11.3857 18.6139 11.5845C18.9458 11.7028 19.1673 12.0175 19.1673 12.3698V15C19.1673 16.3807 18.048 17.5 16.6673 17.5H3.33398C1.95327 17.5 0.833984 16.3807 0.833984 15V12.3698L0.84375 12.2396C0.890672 11.9418 1.09696 11.688 1.38737 11.5845C1.94519 11.3857 2.34928 10.8463 2.34928 10.2084C2.34928 9.57036 1.94519 9.03101 1.38737 8.83221C1.05551 8.71388 0.833984 8.39923 0.833984 8.0469V5.41669C0.833985 4.03598 1.95327 2.91669 3.33398 2.91669H16.6673ZM3.33398 4.58335C2.87375 4.58335 2.50065 4.95645 2.50065 5.41669V7.52606C3.40888 8.07233 4.01595 9.06946 4.01595 10.2084C4.01595 11.3471 3.40868 12.3435 2.50065 12.8898V15C2.50065 15.4603 2.87375 15.8334 3.33398 15.8334H16.6673C17.1276 15.8334 17.5006 15.4603 17.5006 15V12.8898C16.5926 12.3435 15.9853 11.3471 15.9853 10.2084C15.9853 9.06945 16.5924 8.07233 17.5006 7.52606V5.41669C17.5006 4.95645 17.1276 4.58335 16.6673 4.58335H3.33398Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst FreeGiftIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.4951 1.47201C12.791 1.17663 13.2707 1.17634 13.5664 1.47201C13.862 1.76788 13.8622 2.24851 13.5664 2.54428L11.8301 4.2806H17.5752C17.9935 4.28073 18.333 4.62012 18.333 5.03842V8.06869C18.333 8.48701 17.9935 8.82638 17.5752 8.8265H17.1982V17.1595C17.198 17.5776 16.8585 17.9171 16.4404 17.9173H3.56152C3.14327 17.9173 2.80394 17.5777 2.80371 17.1595V8.8265H2.42383C2.00543 8.8265 1.66602 8.48709 1.66602 8.06869V5.03842C1.66605 4.62005 2.00545 4.2806 2.42383 4.2806H8.16992L6.43359 2.54428C6.13775 2.24843 6.13776 1.76786 6.43359 1.47201C6.72945 1.17616 7.21001 1.17616 7.50586 1.47201L10 3.96615L12.4951 1.47201ZM4.31934 16.4017H9.24219V8.8265H4.31934V16.4017ZM10.7578 16.4017H15.6826V8.8265H10.7578V16.4017ZM3.18164 7.31088H16.8174V5.79623H3.18164V7.31088Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst BundleIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M14.1152 1.18357L14.2551 1.26642L18.4546 3.9088C18.8514 4.15858 19.178 4.50301 19.4043 4.91029C19.6306 5.31758 19.7492 5.77458 19.7493 6.23909V16.0194C19.7495 16.3825 19.6772 16.742 19.5366 17.0775C19.396 17.413 19.1898 17.7179 18.9298 17.9747C18.6697 18.2315 18.361 18.4352 18.0212 18.5742C17.6814 18.7132 17.3172 18.7847 16.9494 18.7847H8.55091C8.1623 18.7852 7.77786 18.7056 7.42219 18.5511C7.06652 18.3965 6.74745 18.1704 6.48539 17.8871L1.61712 16.3743C1.35494 16.2904 1.11208 16.1563 0.902404 15.9797C0.692732 15.8031 0.520358 15.5875 0.395126 15.3451C0.269895 15.1027 0.194259 14.8384 0.172541 14.5672C0.150822 14.296 0.183446 14.0232 0.268548 13.7644L3.25386 4.69868C3.36315 4.36757 3.55522 4.06899 3.81232 3.83053C4.06942 3.59207 4.38326 3.42141 4.72484 3.33434L9.66236 2.26275L11.246 1.26642C11.6722 0.998206 12.1641 0.848941 12.6694 0.834475C13.1747 0.820008 13.6746 0.94088 14.1159 1.18426L14.1152 1.18357ZM11.9979 2.44503L7.79829 5.08741C7.59979 5.21229 7.43639 5.38454 7.32319 5.58825C7.20998 5.79196 7.15061 6.02055 7.15058 6.2529V16.0201C7.15058 16.7838 7.7773 17.4024 8.55021 17.4024H16.9494C17.1333 17.4025 17.3155 17.3668 17.4855 17.2974C17.6555 17.228 17.8099 17.1261 17.94 16.9978C18.0701 16.8694 18.1733 16.717 18.2438 16.5492C18.3142 16.3815 18.3504 16.2017 18.3504 16.0201V6.2529C18.3504 5.78063 18.1056 5.3415 17.7027 5.08741L13.5031 2.44503C13.2784 2.30354 13.0174 2.22837 12.7508 2.22837C12.4843 2.22837 12.2233 2.30354 11.9986 2.44503H11.9979ZM6.49449 4.36243L5.07457 4.67106C4.96068 4.70009 4.85604 4.757 4.77033 4.83654C4.68463 4.91607 4.62062 5.01565 4.58425 5.12608L1.59823 14.1911C1.56987 14.2774 1.559 14.3683 1.56626 14.4587C1.57351 14.5491 1.59875 14.6373 1.64051 14.7181C1.68228 14.7988 1.73976 14.8707 1.80968 14.9296C1.87959 14.9884 1.96057 15.0331 2.04799 15.0611L5.76005 16.2459C5.75394 16.1708 5.75091 16.0955 5.75095 16.0201V6.23978C5.75095 5.53552 6.02235 4.86715 6.49518 4.36243H6.49449ZM15.4938 11.8801C15.909 11.8803 16.3148 12.0019 16.6599 12.2297C17.005 12.4575 17.2739 12.7812 17.4327 13.1599C17.5914 13.5386 17.6329 13.9552 17.5517 14.3571C17.4706 14.759 17.2706 15.1282 16.9769 15.4178C16.6832 15.7075 16.3091 15.9048 15.9019 15.9846C15.4947 16.0644 15.0727 16.0232 14.6892 15.8663C14.3057 15.7093 13.9779 15.4436 13.7474 15.1028C13.5168 14.762 13.3939 14.3613 13.394 13.9515C13.394 12.8074 14.3341 11.8801 15.4938 11.8801ZM10.0995 13.5124L15.0489 8.63015C15.1753 8.50803 15.3437 8.4376 15.5204 8.43301C15.6972 8.42841 15.8691 8.48998 16.0018 8.60536C16.1344 8.72074 16.2179 8.88139 16.2355 9.05504C16.2532 9.22869 16.2036 9.40249 16.0967 9.54155L16.0387 9.60645L11.0893 14.4887C10.963 14.6108 10.7945 14.6812 10.6178 14.6858C10.4411 14.6904 10.2691 14.6288 10.1365 14.5135C10.0038 14.3981 9.92029 14.2374 9.90267 14.0638C9.88506 13.8901 9.93464 13.7163 10.0415 13.5773L10.0995 13.5124ZM15.4938 13.261C15.3083 13.261 15.1304 13.3338 14.9992 13.4633C14.868 13.5928 14.7943 13.7684 14.7943 13.9515C14.7943 14.1346 14.868 14.3102 14.9992 14.4397C15.1304 14.5692 15.3083 14.642 15.4938 14.642C15.6793 14.642 15.8572 14.5692 15.9884 14.4397C16.1196 14.3102 16.1933 14.1346 16.1933 13.9515C16.1933 13.7684 16.1196 13.5928 15.9884 13.4633C15.8572 13.3338 15.6793 13.261 15.4938 13.261ZM10.5947 7.04693C11.0099 7.04706 11.4157 7.16872 11.7608 7.39652C12.1059 7.62431 12.3749 7.94801 12.5336 8.32668C12.6924 8.70536 12.7338 9.12199 12.6527 9.5239C12.5715 9.92582 12.3715 10.295 12.0778 10.5846C11.7842 10.8743 11.4101 11.0716 11.0029 11.1514C10.5957 11.2312 10.1736 11.19 9.79012 11.0331C9.40661 10.8761 9.07886 10.6104 8.84833 10.2696C8.61779 9.92877 8.49482 9.52811 8.49496 9.1183C8.49496 7.97421 9.43504 7.04693 10.5947 7.04693ZM10.5947 8.42784C10.5029 8.4278 10.4119 8.44561 10.327 8.48027C10.2422 8.51492 10.165 8.56574 10.1 8.62983C9.96881 8.75925 9.89503 8.93483 9.89493 9.11795C9.89484 9.30107 9.96845 9.47673 10.0996 9.60628C10.2307 9.73583 10.4085 9.80866 10.594 9.80876C10.7796 9.80876 10.9575 9.73601 11.0886 9.60653C11.2198 9.47704 11.2935 9.30142 11.2935 9.1183C11.2935 8.93518 11.2198 8.75956 11.0886 8.63007C10.9575 8.50059 10.7796 8.42784 10.594 8.42784H10.5947Z\"\n fill=\"#080A0F\"\n stroke=\"#080A0F\"\n stroke-width=\"0.166667\"\n />\n </svg>\n)\n\nconst FullGiftIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.45492 6.28808C6.43123 5.31177 8.01457 5.31177 8.99089 6.28808C9.96696 7.26431 9.96685 8.84695 8.99089 9.82324C8.01457 10.7996 6.43123 10.7996 5.45492 9.82324C4.47891 8.84694 4.4788 7.26431 5.45492 6.28808ZM8.04769 7.23047C7.59205 6.77513 6.85282 6.77495 6.3973 7.23047C5.94188 7.686 5.94199 8.42526 6.3973 8.88086C6.85287 9.33643 7.59207 9.33636 8.04769 8.88086C8.5033 8.42525 8.5033 7.68608 8.04769 7.23047Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.07715 1.95703C9.58012 1.90116 10.0815 2.07705 10.4395 2.43473L18.1234 10.1187C18.7739 10.7695 18.7741 11.8246 18.1234 12.4754L11.6414 18.9574C10.9907 19.6081 9.93555 19.6079 9.28467 18.9574L1.60075 11.2734C1.28783 10.9603 1.11442 10.5376 1.11328 10.0999L1.12305 9.91113L1.77165 4.0778C1.85775 3.30308 2.46909 2.69171 3.24381 2.60563L9.07715 1.95703ZM3.42773 4.26172L2.77913 10.095L10.4631 17.779L16.945 11.297L9.26107 3.61312L3.42773 4.26172Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst InstallmentsIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M14.1673 11.8326C14.5355 11.8326 14.8338 12.131 14.8338 12.4991V13.4985H15.834C16.2022 13.4985 16.5005 13.7968 16.5005 14.165C16.5005 14.5332 16.2022 14.8315 15.834 14.8315H14.1844C14.1787 14.8316 14.173 14.8323 14.1673 14.8323C13.7991 14.8323 13.5008 14.534 13.5008 14.1658V12.4991C13.5008 12.131 13.7991 11.8326 14.1673 11.8326Z\"\n fill=\"#1D1D1F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.584 9.16581C17.1153 9.16581 19.1673 11.2178 19.1673 13.7491C19.1673 16.2805 17.1153 18.3325 14.584 18.3325C12.0527 18.3325 10.0007 16.2804 10.0007 13.7491C10.0007 11.2178 12.0527 9.16581 14.584 9.16581ZM14.584 10.4988C12.7891 10.4988 11.3337 11.9542 11.3337 13.7491C11.3337 15.5441 12.7891 16.9995 14.584 16.9995C16.3789 16.9995 17.8343 15.5441 17.8343 13.7491C17.8343 11.9542 16.3789 10.4988 14.584 10.4988Z\"\n fill=\"#1D1D1F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16.6673 2.49915C18.048 2.49915 19.1673 3.61843 19.1673 4.99915V9.16581C19.1673 9.62605 18.7942 9.99915 18.334 9.99915C17.8737 9.99915 17.5006 9.62605 17.5006 9.16581V8.33248H2.50065V14.9991C2.50065 15.4594 2.87375 15.8325 3.33398 15.8325H9.16732C9.62755 15.8325 10.0007 16.2056 10.0007 16.6658C10.0007 17.126 9.62755 17.4991 9.16732 17.4991H3.33398C1.95327 17.4991 0.833984 16.3799 0.833984 14.9991V4.99915C0.833984 3.61843 1.95327 2.49915 3.33398 2.49915H16.6673ZM3.33398 4.16581C2.87375 4.16581 2.50065 4.53891 2.50065 4.99915V6.66581H17.5006V4.99915C17.5006 4.53891 17.1276 4.16581 16.6673 4.16581H3.33398Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n)\n\nconst PaymentMethodIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M16.667 2.49915C18.0476 2.49915 19.1668 3.61858 19.167 4.99915V14.9991C19.1668 16.3797 18.0476 17.4991 16.667 17.4991H3.33398C1.95353 17.499 0.834161 16.3796 0.833984 14.9991V4.99915C0.83416 3.61869 1.95353 2.49932 3.33398 2.49915H16.667ZM2.5 14.9991C2.50018 15.4591 2.87401 15.832 3.33398 15.8322H16.667C17.1271 15.8322 17.4998 15.4592 17.5 14.9991V8.33215H2.50098L2.5 8.33118V14.9991ZM10.001 12.5333C10.4426 12.5335 10.8007 12.8915 10.8008 13.3331C10.8008 13.7748 10.4427 14.1328 10.001 14.1329H5.00098C4.55915 14.1329 4.20117 13.775 4.20117 13.3331C4.20126 12.8914 4.5592 12.5333 5.00098 12.5333H10.001ZM3.33398 4.16516C2.874 4.16534 2.50018 4.53917 2.5 4.99915V6.66614H17.5V4.99915C17.4998 4.53906 17.1271 4.16516 16.667 4.16516H3.33398Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst RightArrowIcon = ({ className }: { className?: string }) => (\n <svg className={className} width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.91058 4.4108C7.23602 4.08536 7.76353 4.08536 8.08897 4.4108L13.089 9.41079C13.4144 9.73623 13.4144 10.2637 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2637 6.58514 14.7362 6.91058 14.4108L11.3214 9.99999L6.91058 5.58918C6.58514 5.26374 6.58514 4.73623 6.91058 4.4108Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nexport default ProductBenefits\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,mBAAAE,EAAA,YAAAC,KAAA,eAAAC,EAAAJ,IA4DY,IAAAK,EAAA,6BA3DZC,EAAuC,iDACvCC,EAAqC,6CACrCC,EAA4B,4CAC5BC,EAA4B,sCAC5BC,EAAgC,2CAChCC,EAA4E,iBAC5EC,EAA+B,gDAC/BC,EAAmB,8CACnBC,EAAuB,yBACvBC,EAAkB,6DAClBC,EAA2B,yDAcpB,MAAMd,EAAgB,CAAC,CAC5B,MAAAe,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,CACF,OAOI,OAAC,SAAO,IAAP,CACC,QAASH,EAAY,CAAE,QAAS,CAAE,EAAI,CAAE,QAAS,EAAG,cAAe,MAAO,EAC1E,WAAY,CAAE,SAAU,IAAM,OAAQ,CAAE,EACxC,UAAU,qGAGV,oBAAC,SAAO,IAAP,CACC,QAASA,EAAY,CAAE,EAAG,CAAE,EAAI,CAAE,EAAG,MAAO,EAC5C,WAAY,CAAE,SAAU,GAAK,KAAM,SAAU,EAC7C,aAAW,MACT,0GACA,uFACAG,CACF,EAGA,oBAAC,SAAO,IAAP,CACC,QAASH,EAAY,CAAE,MAAO,CAAE,EAAI,CAAE,MAAO,GAAK,EAClD,WAAY,CAAE,SAAU,IAAM,OAAQ,CAAE,EACxC,UAAU,gCAEV,oBAAC,OAAI,UAAU,mCACb,qBAAC,OAAI,UAAU,8BACZ,UAAAD,MACC,OAAC,WAAQ,KAAM,EAAG,UAAU,yEACzB,SAAAA,EACH,KAEF,OAAC,UAAO,QAASE,EAAY,UAAU,+BAA+B,aAAW,cAC/E,mBAAC,EAAAG,QAAA,CAAM,UAAU,SAAS,EAC5B,GACF,EACCF,GACH,EACF,KAGA,QAAC,OAAI,UAAU,iDACb,qBAAC,OAAI,UAAU,8BACZ,UAAAH,MAAS,OAAC,KAAE,UAAU,qCAAsC,SAAAA,EAAM,KACnE,OAAC,UAAO,QAASE,EAAY,UAAU,+BAA+B,aAAW,cAC/E,mBAAC,EAAAG,QAAA,CAAM,UAAU,SAAS,EAC5B,GACF,EACCF,GACH,GACF,EACF,EAIEG,EAAkB,CAAC,CAAC,IAAwB,CAChD,KAAM,CAAE,QAAAC,EAAS,QAAAC,EAAS,mBAAAC,EAAoB,aAAAC,EAAc,gBAAAC,EAAiB,kBAAAC,EAAmB,QAAAC,CAAQ,KACtG,wBAAqB,EACjB,CAAE,UAAAC,EAAY,EAAM,EAAIP,GAAW,CAAC,EAGpC,CAACQ,EAAoBC,CAAqB,KAAI,YAA0BP,CAAkB,KAEhG,aAAU,IAAM,CACVA,GACFO,EAAsBP,CAAkB,EAGtC,OAAO,OAAW,KAAgB,OAAe,QAAQ,IAAI,SAC7D,OAAe,OAAO,GAAG,QAAQ,CAEvC,EAAG,CAACA,EAAoBD,EAAQ,EAAE,CAAC,EAEnC,MAAMS,KAAsB,WAAQ,IAC3BJ,GAAS,SAAS,YAAY,KAAMK,GAAcA,EAAK,eAAiB,iBAAiB,GAAG,MAAQ,CAAC,EAC3G,CAACL,GAAS,OAAO,CAAC,EAEf,CAACM,EAAiBC,CAAkB,KAAI,YAAS,EAAK,EACtD,CAACC,EAAqBC,CAAsB,KAAI,YAAS,EAAK,EAE9DC,KAAW,eAAY,CAAE,QAAAf,CAAQ,CAAC,EAClC,CAAE,OAAAgB,EAAS,KAAM,YAAAC,EAAY,KAAI,kBAAe,EAEhD,CAAE,kBAAAC,EAAmB,SAAAC,EAAU,OAAAC,EAAQ,SAAAC,EAAU,cAAAC,CAAc,EAAIP,EAEnEQ,EAAU,CACdL,EAAkB,OACd,CACE,MAAOT,GAAqB,mBAAmB,aAC/C,YAAaA,GAAqB,mBAAmB,YACrD,QAAM,OAACe,EAAA,CAAsB,UAAU,wBAAwB,CACjE,EACA,KACJN,EAAkB,OACd,CACE,SACE,mBACG,UAACZ,GAAqBP,GAAS,SAC9B,oBACG,UAAAU,GAAqB,mBAAmB,0BACzC,OAAC,QAAK,KAAK,SAAS,SAAU,EAAG,QAAS,IAAML,IAAoB,EAAG,UAAU,YAC9E,SAAAK,GAAqB,mBAAmB,OAC3C,GACF,EAEAS,GAAmB,QAAQ,OAAO,QAChC,gBACA,eAAY,CACV,OAAQA,GAAmB,QAAQ,QAAU,EAC7C,aAAclB,EAAQ,MAAM,aAC5B,OAAAgB,CACF,CAAC,CACH,EAEJ,EAEF,QAAM,OAACQ,EAAA,CAAsB,UAAU,wBAAwB,CACjE,EACA,KACJF,EAAc,OACV,CACE,MAAOA,GAAe,QAAQ,OAAS,GACvC,YAAaA,GAAe,QAAQ,KAAO,GAC3C,QAAM,OAACG,EAAA,CAAkB,UAAU,wBAAwB,CAC7D,EACA,KACJJ,EAAS,OACL,CACE,MAAOA,GAAU,QAAQ,OAAS,GAClC,YAAaA,GAAU,QAAQ,MAAQ,GACvC,QAAM,OAACK,GAAA,CAAa,UAAU,wBAAwB,CACxD,EACA,KACJP,EAAS,OACL,CACE,MAAOA,GAAU,QAAQ,OAAS,GAClC,QAAM,OAACQ,EAAA,CAAa,UAAU,wBAAwB,CACxD,EACA,KACJP,EAAO,OACH,CACE,SAAO,mBAAgBX,GAAqB,QAAQ,eAAgB,CAClE,SAAO,eAAY,CACjB,OAAQ,KAAK,IAAI,GAAIW,GAAQ,QAAQ,YAAY,IAAKV,GAAcA,EAAK,SAAW,CAAC,GAAK,CAAC,CAAE,EAC7F,aAAcV,EAAQ,MAAM,aAC5B,OAAAgB,CACF,CAAC,CACH,CAAC,EACD,eAAa,mBAAgBP,GAAqB,QAAQ,YAAa,CACrE,MAAOW,GAAQ,QAAQ,YAAY,QAAQ,SAAS,GAAK,EAC3D,CAAC,EACD,QAAM,OAACQ,EAAA,CAAW,UAAU,wBAAwB,CACtD,EACA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Text, Picture, Heading } from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport React, { useEffect, useMemo, useState, type PropsWithChildren } from 'react'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { motion } from 'framer-motion'\nimport Close from '../../../../../HeaderNavigation/icons/Close.js'\nimport ModalContainer from './../ProductBenefitsTabs/ModalContainer.js'\n\n// \u6587\u6848\u914D\u7F6E\u63A5\u53E3\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\nexport const BenefitsModal = ({\n title,\n showModal,\n closeModal,\n children,\n className,\n}: PropsWithChildren<{\n title?: string\n showModal: boolean\n closeModal: () => void\n className?: string\n}>) => {\n return (\n <motion.div\n animate={showModal ? { opacity: 1 } : { opacity: 0, pointerEvents: 'none' }}\n transition={{ duration: 0.15, bounce: 0 }}\n className=\"fixed inset-0 z-[1000] bg-black/50 opacity-0 tablet:flex tablet:items-center tablet:justify-center\"\n >\n {/* Mobile: Bottom sheet */}\n <motion.div\n animate={showModal ? { y: 0 } : { y: '100%' }}\n transition={{ duration: 0.2, ease: 'easeOut' }}\n className={cn(\n 'absolute bottom-0 left-0 right-0 max-w-[80vh] rounded-t-box tablet:rounded-box overflow-hidden bg-white',\n 'tablet:static tablet:h-auto tablet:max-h-[80vh] tablet:w-[896px] tablet:max-w-[90vw]',\n className\n )}\n >\n {/* Desktop: Scale animation wrapper */}\n <motion.div\n animate={showModal ? { scale: 1 } : { scale: 0.95 }}\n transition={{ duration: 0.15, bounce: 0 }}\n className=\"hidden size-full tablet:block\"\n >\n <div className=\"relative size-full overflow-auto\">\n <div className=\"sticky top-0 z-[2] bg-white\">\n {title && (\n <Heading size={2} className=\"w-full py-6 px-4 text-xl tablet:px-8 tablet:pt-4 tablet:pb-2 font-bold\">\n {title}\n </Heading>\n )}\n <button onClick={closeModal} className=\"absolute right-4 top-4 z-[2]\" aria-label=\"Close modal\">\n <Close className=\"size-6\" />\n </button>\n </div>\n {children}\n </div>\n </motion.div>\n\n {/* Mobile: No scale animation */}\n <div className=\"relative size-full overflow-auto tablet:hidden\">\n <div className=\"sticky top-0 z-[2] bg-white\">\n {title && <p className=\"w-full py-4 pl-5 text-xl font-bold\">{title}</p>}\n <button onClick={closeModal} className=\"absolute right-4 top-4 z-[2]\" aria-label=\"Close modal\">\n <Close className=\"size-6\" />\n </button>\n </div>\n {children}\n </div>\n </motion.div>\n </motion.div>\n )\n}\n\nconst ProductBenefits = ({}: BenefitsTabProps) => {\n const { profile, variant, renderInstallments, savingDetail, openSignInPopup, openAuthCodePopup, product } =\n useBizProductContext()\n const { activated = false } = profile || {} // \u7528\u6237\u662F\u5426\u6FC0\u6D3B\n\n // \u7F13\u5B58 renderInstallments\uFF0C\u9632\u6B62 variant \u5207\u6362\u65F6\u53D8\u6210 undefined \u5BFC\u81F4\u4E0D\u6E32\u67D3\n const [cachedInstallments, setCachedInstallments] = useState<React.ReactNode>(renderInstallments)\n\n useEffect(() => {\n if (renderInstallments) {\n setCachedInstallments(renderInstallments)\n }\n // Affirm \u63D2\u4EF6\u5728 variant \u53D8\u5316\u540E\u9700\u8981\u5237\u65B0\n if (typeof window !== 'undefined' && (window as any).affirm?.ui?.refresh) {\n ;(window as any).affirm.ui.refresh()\n }\n }, [renderInstallments, variant.id])\n\n const productBenefitsData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductBenefits')?.data || {}\n }, [product?.payload])\n\n const [isFlexModalOpen, setIsFlexModalOpen] = useState(false)\n const [memberBenefitsModal, setMemberBenefitsModal] = useState(false)\n\n const benefits = useBenefits({ variant })\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const { creditsRedemption, freeGift, bundle, fullGift, levelDiscount } = benefits\n\n const coupons = [\n creditsRedemption.enable\n ? {\n title: productBenefitsData?.creditsRedemption?.creditsTitle,\n description: productBenefitsData?.creditsRedemption?.creditsDesc,\n icon: <CreditsRedemptionIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n creditsRedemption.enable\n ? {\n title: (\n <>\n {!activated && Boolean(profile?.email) ? (\n <>\n {productBenefitsData?.creditsRedemption?.creditsAfterActivation}\n <span role=\"button\" tabIndex={0} onClick={() => openAuthCodePopup?.()} className=\"underline\">\n {productBenefitsData?.creditsRedemption?.active}\n </span>\n </>\n ) : (\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 ),\n icon: <CreditsRedemptionIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n levelDiscount.enable\n ? {\n title: levelDiscount?.config?.title ?? '',\n description: levelDiscount?.config?.tag ?? '',\n icon: <LevelDiscountIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n fullGift.enable\n ? {\n title: fullGift?.config?.title ?? '',\n description: fullGift?.config?.desc ?? '',\n icon: <FullGiftIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n freeGift.enable\n ? {\n title: freeGift?.config?.title ?? '',\n icon: <FreeGiftIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n bundle.enable\n ? {\n title: replaceTemplate(productBenefitsData?.bundle?.bundleSaveUpTo, {\n count: formatPrice({\n amount: Math.max(...(bundle?.config?.bundleList?.map((item: any) => item.savings ?? 0) ?? [])),\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n }),\n description: replaceTemplate(productBenefitsData?.bundle?.bundleOffer, {\n count: bundle?.config?.bundleList?.length?.toString() || '',\n }),\n icon: <BundleIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n productBenefitsData?.paymentMethod?.title\n ? {\n title: productBenefitsData.paymentMethod.title,\n image: productBenefitsData.paymentMethod.image,\n icon: <PaymentMethodIcon className=\"desktop:size-6 size-5\" />,\n event: () => setIsFlexModalOpen(true),\n }\n : null,\n {\n useAble: true,\n isAutoUse: Boolean(profile?.email) && !!savingDetail?.member,\n title: Boolean(profile?.email) ? (\n productBenefitsData?.member?.loginTitle\n ) : (\n <div>\n <span\n className=\"mr-2 desktop:mr-3\"\n dangerouslySetInnerHTML={{ __html: productBenefitsData?.member?.unloginTitle }}\n ></span>\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productBenefitsData?.member?.loginNow }}\n />\n </div>\n ),\n icon: <MemberDiscountIcon className=\"desktop:size-6 size-5\" />,\n event: () => setMemberBenefitsModal(true),\n },\n cachedInstallments\n ? {\n customRenderTitle: cachedInstallments,\n icon: <InstallmentsIcon className=\"desktop:size-6 size-5\" />,\n }\n : null,\n ].filter(Boolean)\n\n \n return (\n <div>\n {productBenefitsData?.benefitTitle && (\n <Text\n as=\"div\"\n html={productBenefitsData?.benefitTitle}\n className=\"text-sm mb-3 lg-desktop:mb-4 lg-desktop:text-base font-bold leading-[1.2]\"\n />\n )}\n <ul className=\"desktop:px-4 px-3 rounded-box bg-[#F5F6F7]\">\n <>\n {coupons?.map((item, index) => (\n <li key={index}>\n <div className=\"flex gap-3 items-start py-3 laptop:py-4\">\n <div className=\"shrink-0\">{item?.icon}</div>\n <div\n onClick={item?.event}\n className={cn(\n 'flex flex-1 items-center gap-1 desktop:gap-2',\n item?.event && 'cursor-pointer justify-between'\n )}\n >\n <div>\n {item?.customRenderTitle ? (\n <div>{item?.customRenderTitle}</div>\n ) : (\n <div className=\"flex items-center gap-2 desktop:gap-3 text-[14px] laptop:text-base font-bold leading-[1.2]\">\n {item?.title}\n {item?.image && <Picture source={item?.image} className=\"w-[40px] h-[20px] shrink-0\" />}\n </div>\n )}\n {item?.description && (\n <Text\n {...(typeof item.description === 'string' ? { html: item.description } : {})}\n as=\"p\"\n className=\"laptop:text-[14px] text-[12px] font-bold text-[#2A2C32]\"\n >\n {item.description}\n </Text>\n )}\n </div>\n {item?.event && <RightArrowIcon className=\"size-4 desktop:size-6\" />}\n </div>\n </div>\n {index != coupons?.length - 1 && <div className=\"bg-[#DADCE0] h-[1px]\" />}\n </li>\n ))}\n </>\n </ul>\n <ModalContainer showModal={isFlexModalOpen} closeModal={() => setIsFlexModalOpen(false)}>\n <Picture source={productBenefitsData?.paymentMethod?.payImage}></Picture>\n </ModalContainer>\n <BenefitsModal\n title={productBenefitsData?.member?.modelTitle}\n showModal={memberBenefitsModal}\n closeModal={() => setMemberBenefitsModal(false)}\n >\n <ul className=\"flex flex-col overflow-y-auto tablet:max-h-[calc(80vh-52px)] tablet:py-8 gap-5 pb-6 tablet:pb-8 tablet:gap-8 px-4 tablet:px-8\">\n {productBenefitsData?.member?.modelBenefits?.map(\n (benefit: { title?: string; desc?: string }, index: number) => (\n <li key={index} className=\"flex flex-col gap-1\">\n <Text html={benefit?.title} className=\"text-[16px] tablet:text-[18px] font-bold leading-[1.4]\" />\n <Text\n html={benefit?.desc}\n className=\"text-[14px] text-[#1D1D1F] tablet:text-[16px] font-bold leading-[1.4] opacity-75\"\n />\n </li>\n )\n )}\n </ul>\n </BenefitsModal>\n </div>\n )\n}\n\n// Credits Redemption Icon\nconst CreditsRedemptionIcon = ({ className }: { className?: string }) => (\n <svg className={className} 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)\n\nconst MemberDiscountIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.4294 1.58368C15.0354 1.5838 15.6026 1.88286 15.944 2.38348L19.4997 7.5993C19.9918 8.32123 19.9058 9.29041 19.2946 9.91473L11.8571 17.5104C10.8453 18.5435 9.18314 18.5447 8.16961 17.5134L0.696949 9.90692C0.0916662 9.29063 -0.000821769 8.3354 0.474293 7.61395L3.90203 2.4079C4.24121 1.89312 4.81678 1.58368 5.43328 1.58368H14.4294ZM2.00457 8.62177L9.47722 16.2292C9.77143 16.5282 10.2539 16.5278 10.5475 16.2282L17.9841 8.63153L14.4294 3.41669H5.43328L2.00457 8.62177ZM13.5759 7.74481C13.9008 7.41946 14.4279 7.41834 14.7536 7.74286C15.0792 8.06792 15.0804 8.59584 14.7555 8.92157L10.6247 13.0593C10.2833 13.401 9.72933 13.4013 9.38738 13.0602L5.24382 8.92352C4.91829 8.59852 4.9172 8.07056 5.24187 7.74481C5.56689 7.41925 6.09484 7.41813 6.42058 7.74286L10.0046 11.321L13.5759 7.74481Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst LevelDiscountIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M13.1615 5.66083C13.4869 5.33539 14.0144 5.33539 14.3398 5.66083C14.6653 5.98626 14.6653 6.51378 14.3398 6.83921L6.83984 14.3392C6.51441 14.6646 5.98689 14.6646 5.66146 14.3392C5.33602 14.0138 5.33602 13.4863 5.66146 13.1608L13.1615 5.66083Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.709 11.0417C13.6295 11.0417 14.3756 11.7879 14.3756 12.7084C14.3756 13.6288 13.6295 14.375 12.709 14.375C11.7885 14.375 11.0423 13.6288 11.0423 12.7084C11.0423 11.7879 11.7885 11.0417 12.709 11.0417ZM12.709 12.2917C12.4789 12.2917 12.2923 12.4782 12.2923 12.7084C12.2923 12.9385 12.4789 13.125 12.709 13.125C12.9391 13.125 13.1256 12.9385 13.1256 12.7084C13.1256 12.4782 12.9391 12.2917 12.709 12.2917Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M7.29232 5.62502C8.21279 5.62502 8.95898 6.37121 8.95898 7.29169C8.95898 8.21216 8.21279 8.95835 7.29232 8.95835C6.37184 8.95835 5.62565 8.21216 5.62565 7.29169C5.62565 6.37121 6.37184 5.62502 7.29232 5.62502ZM7.29232 6.87502C7.0622 6.87502 6.87565 7.06157 6.87565 7.29169C6.87565 7.52181 7.0622 7.70835 7.29232 7.70835C7.52244 7.70835 7.70898 7.52181 7.70898 7.29169C7.70898 7.06157 7.52244 6.87502 7.29232 6.87502Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16.6673 2.91669C18.048 2.91669 19.1673 4.03597 19.1673 5.41669V8.0469C19.1673 8.39923 18.9458 8.71388 18.6139 8.83221C18.0561 9.03101 17.652 9.57037 17.652 10.2084C17.652 10.8463 18.0561 11.3857 18.6139 11.5845C18.9458 11.7028 19.1673 12.0175 19.1673 12.3698V15C19.1673 16.3807 18.048 17.5 16.6673 17.5H3.33398C1.95327 17.5 0.833984 16.3807 0.833984 15V12.3698L0.84375 12.2396C0.890672 11.9418 1.09696 11.688 1.38737 11.5845C1.94519 11.3857 2.34928 10.8463 2.34928 10.2084C2.34928 9.57036 1.94519 9.03101 1.38737 8.83221C1.05551 8.71388 0.833984 8.39923 0.833984 8.0469V5.41669C0.833985 4.03598 1.95327 2.91669 3.33398 2.91669H16.6673ZM3.33398 4.58335C2.87375 4.58335 2.50065 4.95645 2.50065 5.41669V7.52606C3.40888 8.07233 4.01595 9.06946 4.01595 10.2084C4.01595 11.3471 3.40868 12.3435 2.50065 12.8898V15C2.50065 15.4603 2.87375 15.8334 3.33398 15.8334H16.6673C17.1276 15.8334 17.5006 15.4603 17.5006 15V12.8898C16.5926 12.3435 15.9853 11.3471 15.9853 10.2084C15.9853 9.06945 16.5924 8.07233 17.5006 7.52606V5.41669C17.5006 4.95645 17.1276 4.58335 16.6673 4.58335H3.33398Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst FreeGiftIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.4951 1.47201C12.791 1.17663 13.2707 1.17634 13.5664 1.47201C13.862 1.76788 13.8622 2.24851 13.5664 2.54428L11.8301 4.2806H17.5752C17.9935 4.28073 18.333 4.62012 18.333 5.03842V8.06869C18.333 8.48701 17.9935 8.82638 17.5752 8.8265H17.1982V17.1595C17.198 17.5776 16.8585 17.9171 16.4404 17.9173H3.56152C3.14327 17.9173 2.80394 17.5777 2.80371 17.1595V8.8265H2.42383C2.00543 8.8265 1.66602 8.48709 1.66602 8.06869V5.03842C1.66605 4.62005 2.00545 4.2806 2.42383 4.2806H8.16992L6.43359 2.54428C6.13775 2.24843 6.13776 1.76786 6.43359 1.47201C6.72945 1.17616 7.21001 1.17616 7.50586 1.47201L10 3.96615L12.4951 1.47201ZM4.31934 16.4017H9.24219V8.8265H4.31934V16.4017ZM10.7578 16.4017H15.6826V8.8265H10.7578V16.4017ZM3.18164 7.31088H16.8174V5.79623H3.18164V7.31088Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst BundleIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M14.1152 1.18357L14.2551 1.26642L18.4546 3.9088C18.8514 4.15858 19.178 4.50301 19.4043 4.91029C19.6306 5.31758 19.7492 5.77458 19.7493 6.23909V16.0194C19.7495 16.3825 19.6772 16.742 19.5366 17.0775C19.396 17.413 19.1898 17.7179 18.9298 17.9747C18.6697 18.2315 18.361 18.4352 18.0212 18.5742C17.6814 18.7132 17.3172 18.7847 16.9494 18.7847H8.55091C8.1623 18.7852 7.77786 18.7056 7.42219 18.5511C7.06652 18.3965 6.74745 18.1704 6.48539 17.8871L1.61712 16.3743C1.35494 16.2904 1.11208 16.1563 0.902404 15.9797C0.692732 15.8031 0.520358 15.5875 0.395126 15.3451C0.269895 15.1027 0.194259 14.8384 0.172541 14.5672C0.150822 14.296 0.183446 14.0232 0.268548 13.7644L3.25386 4.69868C3.36315 4.36757 3.55522 4.06899 3.81232 3.83053C4.06942 3.59207 4.38326 3.42141 4.72484 3.33434L9.66236 2.26275L11.246 1.26642C11.6722 0.998206 12.1641 0.848941 12.6694 0.834475C13.1747 0.820008 13.6746 0.94088 14.1159 1.18426L14.1152 1.18357ZM11.9979 2.44503L7.79829 5.08741C7.59979 5.21229 7.43639 5.38454 7.32319 5.58825C7.20998 5.79196 7.15061 6.02055 7.15058 6.2529V16.0201C7.15058 16.7838 7.7773 17.4024 8.55021 17.4024H16.9494C17.1333 17.4025 17.3155 17.3668 17.4855 17.2974C17.6555 17.228 17.8099 17.1261 17.94 16.9978C18.0701 16.8694 18.1733 16.717 18.2438 16.5492C18.3142 16.3815 18.3504 16.2017 18.3504 16.0201V6.2529C18.3504 5.78063 18.1056 5.3415 17.7027 5.08741L13.5031 2.44503C13.2784 2.30354 13.0174 2.22837 12.7508 2.22837C12.4843 2.22837 12.2233 2.30354 11.9986 2.44503H11.9979ZM6.49449 4.36243L5.07457 4.67106C4.96068 4.70009 4.85604 4.757 4.77033 4.83654C4.68463 4.91607 4.62062 5.01565 4.58425 5.12608L1.59823 14.1911C1.56987 14.2774 1.559 14.3683 1.56626 14.4587C1.57351 14.5491 1.59875 14.6373 1.64051 14.7181C1.68228 14.7988 1.73976 14.8707 1.80968 14.9296C1.87959 14.9884 1.96057 15.0331 2.04799 15.0611L5.76005 16.2459C5.75394 16.1708 5.75091 16.0955 5.75095 16.0201V6.23978C5.75095 5.53552 6.02235 4.86715 6.49518 4.36243H6.49449ZM15.4938 11.8801C15.909 11.8803 16.3148 12.0019 16.6599 12.2297C17.005 12.4575 17.2739 12.7812 17.4327 13.1599C17.5914 13.5386 17.6329 13.9552 17.5517 14.3571C17.4706 14.759 17.2706 15.1282 16.9769 15.4178C16.6832 15.7075 16.3091 15.9048 15.9019 15.9846C15.4947 16.0644 15.0727 16.0232 14.6892 15.8663C14.3057 15.7093 13.9779 15.4436 13.7474 15.1028C13.5168 14.762 13.3939 14.3613 13.394 13.9515C13.394 12.8074 14.3341 11.8801 15.4938 11.8801ZM10.0995 13.5124L15.0489 8.63015C15.1753 8.50803 15.3437 8.4376 15.5204 8.43301C15.6972 8.42841 15.8691 8.48998 16.0018 8.60536C16.1344 8.72074 16.2179 8.88139 16.2355 9.05504C16.2532 9.22869 16.2036 9.40249 16.0967 9.54155L16.0387 9.60645L11.0893 14.4887C10.963 14.6108 10.7945 14.6812 10.6178 14.6858C10.4411 14.6904 10.2691 14.6288 10.1365 14.5135C10.0038 14.3981 9.92029 14.2374 9.90267 14.0638C9.88506 13.8901 9.93464 13.7163 10.0415 13.5773L10.0995 13.5124ZM15.4938 13.261C15.3083 13.261 15.1304 13.3338 14.9992 13.4633C14.868 13.5928 14.7943 13.7684 14.7943 13.9515C14.7943 14.1346 14.868 14.3102 14.9992 14.4397C15.1304 14.5692 15.3083 14.642 15.4938 14.642C15.6793 14.642 15.8572 14.5692 15.9884 14.4397C16.1196 14.3102 16.1933 14.1346 16.1933 13.9515C16.1933 13.7684 16.1196 13.5928 15.9884 13.4633C15.8572 13.3338 15.6793 13.261 15.4938 13.261ZM10.5947 7.04693C11.0099 7.04706 11.4157 7.16872 11.7608 7.39652C12.1059 7.62431 12.3749 7.94801 12.5336 8.32668C12.6924 8.70536 12.7338 9.12199 12.6527 9.5239C12.5715 9.92582 12.3715 10.295 12.0778 10.5846C11.7842 10.8743 11.4101 11.0716 11.0029 11.1514C10.5957 11.2312 10.1736 11.19 9.79012 11.0331C9.40661 10.8761 9.07886 10.6104 8.84833 10.2696C8.61779 9.92877 8.49482 9.52811 8.49496 9.1183C8.49496 7.97421 9.43504 7.04693 10.5947 7.04693ZM10.5947 8.42784C10.5029 8.4278 10.4119 8.44561 10.327 8.48027C10.2422 8.51492 10.165 8.56574 10.1 8.62983C9.96881 8.75925 9.89503 8.93483 9.89493 9.11795C9.89484 9.30107 9.96845 9.47673 10.0996 9.60628C10.2307 9.73583 10.4085 9.80866 10.594 9.80876C10.7796 9.80876 10.9575 9.73601 11.0886 9.60653C11.2198 9.47704 11.2935 9.30142 11.2935 9.1183C11.2935 8.93518 11.2198 8.75956 11.0886 8.63007C10.9575 8.50059 10.7796 8.42784 10.594 8.42784H10.5947Z\"\n fill=\"#080A0F\"\n stroke=\"#080A0F\"\n stroke-width=\"0.166667\"\n />\n </svg>\n)\n\nconst FullGiftIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.45492 6.28808C6.43123 5.31177 8.01457 5.31177 8.99089 6.28808C9.96696 7.26431 9.96685 8.84695 8.99089 9.82324C8.01457 10.7996 6.43123 10.7996 5.45492 9.82324C4.47891 8.84694 4.4788 7.26431 5.45492 6.28808ZM8.04769 7.23047C7.59205 6.77513 6.85282 6.77495 6.3973 7.23047C5.94188 7.686 5.94199 8.42526 6.3973 8.88086C6.85287 9.33643 7.59207 9.33636 8.04769 8.88086C8.5033 8.42525 8.5033 7.68608 8.04769 7.23047Z\"\n fill=\"#080A0F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M9.07715 1.95703C9.58012 1.90116 10.0815 2.07705 10.4395 2.43473L18.1234 10.1187C18.7739 10.7695 18.7741 11.8246 18.1234 12.4754L11.6414 18.9574C10.9907 19.6081 9.93555 19.6079 9.28467 18.9574L1.60075 11.2734C1.28783 10.9603 1.11442 10.5376 1.11328 10.0999L1.12305 9.91113L1.77165 4.0778C1.85775 3.30308 2.46909 2.69171 3.24381 2.60563L9.07715 1.95703ZM3.42773 4.26172L2.77913 10.095L10.4631 17.779L16.945 11.297L9.26107 3.61312L3.42773 4.26172Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst InstallmentsIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M14.1673 11.8326C14.5355 11.8326 14.8338 12.131 14.8338 12.4991V13.4985H15.834C16.2022 13.4985 16.5005 13.7968 16.5005 14.165C16.5005 14.5332 16.2022 14.8315 15.834 14.8315H14.1844C14.1787 14.8316 14.173 14.8323 14.1673 14.8323C13.7991 14.8323 13.5008 14.534 13.5008 14.1658V12.4991C13.5008 12.131 13.7991 11.8326 14.1673 11.8326Z\"\n fill=\"#1D1D1F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M14.584 9.16581C17.1153 9.16581 19.1673 11.2178 19.1673 13.7491C19.1673 16.2805 17.1153 18.3325 14.584 18.3325C12.0527 18.3325 10.0007 16.2804 10.0007 13.7491C10.0007 11.2178 12.0527 9.16581 14.584 9.16581ZM14.584 10.4988C12.7891 10.4988 11.3337 11.9542 11.3337 13.7491C11.3337 15.5441 12.7891 16.9995 14.584 16.9995C16.3789 16.9995 17.8343 15.5441 17.8343 13.7491C17.8343 11.9542 16.3789 10.4988 14.584 10.4988Z\"\n fill=\"#1D1D1F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16.6673 2.49915C18.048 2.49915 19.1673 3.61843 19.1673 4.99915V9.16581C19.1673 9.62605 18.7942 9.99915 18.334 9.99915C17.8737 9.99915 17.5006 9.62605 17.5006 9.16581V8.33248H2.50065V14.9991C2.50065 15.4594 2.87375 15.8325 3.33398 15.8325H9.16732C9.62755 15.8325 10.0007 16.2056 10.0007 16.6658C10.0007 17.126 9.62755 17.4991 9.16732 17.4991H3.33398C1.95327 17.4991 0.833984 16.3799 0.833984 14.9991V4.99915C0.833984 3.61843 1.95327 2.49915 3.33398 2.49915H16.6673ZM3.33398 4.16581C2.87375 4.16581 2.50065 4.53891 2.50065 4.99915V6.66581H17.5006V4.99915C17.5006 4.53891 17.1276 4.16581 16.6673 4.16581H3.33398Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n)\n\nconst PaymentMethodIcon = ({ className }: { className?: string }) => (\n <svg className={className} xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M16.667 2.49915C18.0476 2.49915 19.1668 3.61858 19.167 4.99915V14.9991C19.1668 16.3797 18.0476 17.4991 16.667 17.4991H3.33398C1.95353 17.499 0.834161 16.3796 0.833984 14.9991V4.99915C0.83416 3.61869 1.95353 2.49932 3.33398 2.49915H16.667ZM2.5 14.9991C2.50018 15.4591 2.87401 15.832 3.33398 15.8322H16.667C17.1271 15.8322 17.4998 15.4592 17.5 14.9991V8.33215H2.50098L2.5 8.33118V14.9991ZM10.001 12.5333C10.4426 12.5335 10.8007 12.8915 10.8008 13.3331C10.8008 13.7748 10.4427 14.1328 10.001 14.1329H5.00098C4.55915 14.1329 4.20117 13.775 4.20117 13.3331C4.20126 12.8914 4.5592 12.5333 5.00098 12.5333H10.001ZM3.33398 4.16516C2.874 4.16534 2.50018 4.53917 2.5 4.99915V6.66614H17.5V4.99915C17.4998 4.53906 17.1271 4.16516 16.667 4.16516H3.33398Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nconst RightArrowIcon = ({ className }: { className?: string }) => (\n <svg className={className} width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.91058 4.4108C7.23602 4.08536 7.76353 4.08536 8.08897 4.4108L13.089 9.41079C13.4144 9.73623 13.4144 10.2637 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2637 6.58514 14.7362 6.91058 14.4108L11.3214 9.99999L6.91058 5.58918C6.58514 5.26374 6.58514 4.73623 6.91058 4.4108Z\"\n fill=\"#080A0F\"\n />\n </svg>\n)\n\nexport default ProductBenefits\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductBenefits_exports", "__export", "BenefitsModal", "ProductBenefits_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_useBenefits", "import_utils", "import_textFormat", "import_react", "import_AiuiProvider", "import_helpers", "import_framer_motion", "import_Close", "import_ModalContainer", "title", "showModal", "closeModal", "children", "className", "Close", "ProductBenefits", "profile", "variant", "renderInstallments", "savingDetail", "openSignInPopup", "openAuthCodePopup", "product", "activated", "cachedInstallments", "setCachedInstallments", "productBenefitsData", "item", "isFlexModalOpen", "setIsFlexModalOpen", "memberBenefitsModal", "setMemberBenefitsModal", "benefits", "locale", "copyWriting", "creditsRedemption", "freeGift", "bundle", "fullGift", "levelDiscount", "coupons", "CreditsRedemptionIcon", "LevelDiscountIcon", "FullGiftIcon", "FreeGiftIcon", "BundleIcon", "PaymentMethodIcon", "e", "MemberDiscountIcon", "InstallmentsIcon", "index", "RightArrowIcon", "ModalContainer", "benefit"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var E=(e,n)=>{for(var r in n)d(e,r,{get:n[r],enumerable:!0})},P=(e,n,r,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of b(n))!L.call(e,i)&&i!==r&&d(e,i,{get:()=>n[i],enumerable:!(t=S(n,i))||t.enumerable});return e};var I=e=>P(d({},"__esModule",{value:!0}),e);var D={};E(D,{formatPrice:()=>p,formatVariantPrice:()=>M,getFirstAvailableVariant:()=>C,getVariantBySku:()=>O,getVariantFromSelectedOptions:()=>A,languageMap:()=>f,languageTerritory:()=>m,optionsConstructor:()=>v});module.exports=I(D);var l=require("../const.js");function v(e){return e.reduce((n,r)=>(n[r.name]=r.values[0].label,n),{})}const C=e=>e.variants.find(n=>n.availableForSale)||e.variants[0],O=(e,n)=>e.variants.find(r=>r.sku===n),f={us:"en-US",uk:"en-GB",ca:"en-CA",au:"en-AU","eu-en":"en","eu-fr":"fr-FR","eu-it":"it-IT","eu-de":"de-DE",de:"de-DE","eu-es":"es-ES","cz-en":"en-CZ",nl:"nl-NL","dk-en":"en-DK","gr-en":"en-GR","mk-en":"en-MK","hu-en":"en-HU","se-en":"en-SE","hr-en":"en-HR","bg-en":"en-BG","ee-en":"en-EE","fi-en":"en-FI","lt-en":"en-LT",pl:"pl-PL","ro-en":"en-RO","si-en":"en-SI","sk-en":"en-SK","no-en":"en-NO","ad-en":"en-AD","al-en":"en-AL","ba-en":"en-BA","me-en":"en-ME","rs-en":"en-RS","gl-en":"en-GL","is-en":"en-IS","ua-en":"en-UA","by-en":"en-BY","md-en":"en-MD","lv-en":"en-LV","at-de":"de-AT","lu-de":"de-LU","li-de":"de-LI","va-it":"it-VA","sm-it":"it-SM","be-nl":"nl-BE","ae-en":"en-AE",nz:"en-NZ","sg-en":"en-SG","sa-en":"en-SA","vn-vi":"vi-VN",ie:"en-IE",tw:"zh-TW"},m=e=>(f[e]||console.warn(`[formatPrice] Unknown locale "${e}", falling back to en-US`),f[e]||"en-US");function p({amount:e,currencyCode:n,locale:r,maximumFractionDigits:t,minimumFractionDigits:i,removeTrailingZeros:o=!1}){const s=n?.trim()||"USD",u=m(r);let c;try{c=new Intl.NumberFormat(u,{style:"currency",currency:s,minimumFractionDigits:t===0?0:i,maximumFractionDigits:t})}catch{c=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:t===0?0:i,maximumFractionDigits:t})}let a=c.format(e);return["de-DE","fr-FR","it-IT","es-ES","nl-NL","de-AT","de-LU","de-LI","nl-BE","pl-PL","vi-VN"].includes(u)&&(a=a?.toString()?.replace(/[\s\u00A0\u202F]/g,"")),o&&(a=a.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),a}function M({amount:e,baseAmount:n,currencyCode:r,locale:t,maximumFractionDigits:i,minimumFractionDigits:o,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${l.PRICE_SYMBOL[t]}${e}`,basePrice:`${l.PRICE_SYMBOL[t]}${n}`,discount:`${l.PRICE_SYMBOL[t]}${n-e||0}`};const u=n>e,c=new Intl.NumberFormat(m(t),{style:"percent"}),a=u?c.format((n-e)/n):null,y=p({amount:e,currencyCode:r,locale:t,removeTrailingZeros:s}),g=u?p({amount:n,currencyCode:r,locale:t,maximumFractionDigits:i,minimumFractionDigits:o,removeTrailingZeros:s}):void 0;return{price:y,basePrice:g,discount:a}}function A({product:e,selectedOptions:n}){return e.variants.find(r=>Object.entries(n).every(([t,i])=>r.options.find(o=>{if(o.__typename==="MultipleChoiceOption"&&o.name===t)return o.values.find(s=>s.label===i)})))}
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/biz-components/Listing/utils/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { PRICE_SYMBOL } from '../const.js'\nimport type { Options, Product, ProductOption, ProductVariant } from '../types/product'\n\nexport function optionsConstructor(options: ProductOption[]): Options {\n return options.reduce((pre: any, cur: any) => {\n pre[cur.name] = cur.values[0].label\n return pre\n }, {})\n}\n\n/**\n * Returns the first available variant of a product.\n * If no variant is available, it returns the first variant in the list.\n *\n * @param product - The product object.\n * @returns The first available variant of the product.\n */\nexport const getFirstAvailableVariant = (product: Product) =>\n product.variants.find((variant: ProductVariant) => variant.availableForSale) || product.variants[0]\n\nexport const getVariantBySku = (product: Product, sku: string) =>\n product.variants.find((variant: ProductVariant) => variant.sku === sku)\n\nexport const languageMap: { [key: string]: string } = {\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n au: 'en-AU',\n 'eu-en': 'en',\n 'eu-fr': 'fr-FR',\n 'eu-it': 'it-IT',\n 'eu-de': 'de-DE',\n 'eu-es': 'es-ES',\n 'cz-en': 'en-CZ',\n nl: 'nl-NL',\n 'dk-en': 'en-DK',\n 'gr-en': 'en-GR',\n 'mk-en': 'en-MK',\n 'hu-en': 'en-HU',\n 'se-en': 'en-SE',\n 'hr-en': 'en-HR',\n 'bg-en': 'en-BG',\n 'ee-en': 'en-EE',\n 'fi-en': 'en-FI',\n 'lt-en': 'en-LT',\n pl: 'pl-PL',\n 'ro-en': 'en-RO',\n 'si-en': 'en-SI',\n 'sk-en': 'en-SK',\n 'no-en': 'en-NO',\n 'ad-en': 'en-AD',\n 'al-en': 'en-AL',\n 'ba-en': 'en-BA',\n 'me-en': 'en-ME',\n 'rs-en': 'en-RS',\n 'gl-en': 'en-GL',\n 'is-en': 'en-IS',\n 'ua-en': 'en-UA',\n 'by-en': 'en-BY',\n 'md-en': 'en-MD',\n 'lv-en': 'en-LV',\n 'at-de': 'de-AT',\n 'lu-de': 'de-LU',\n 'li-de': 'de-LI',\n 'va-it': 'it-VA',\n 'sm-it': 'it-SM',\n 'be-nl': 'nl-BE',\n 'ae-en': 'en-AE',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n}\n\nexport const languageTerritory = (locale: string) => languageMap[locale] || 'en-US'\n\nexport function formatPrice({\n amount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const validCurrencyCode = currencyCode?.trim() || 'USD'\n const validLocale = languageTerritory(locale)\n\n let formatCurrency: Intl.NumberFormat\n try {\n formatCurrency = new Intl.NumberFormat(validLocale, {\n style: 'currency',\n currency: validCurrencyCode,\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n } catch {\n // Fallback to en-US with USD if locale/currency combination is invalid\n formatCurrency = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n }\n\n let formattedValue = formatCurrency.format(amount)\n\n
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,uBAAAC,EAAA,6BAAAC,EAAA,oBAAAC,EAAA,kCAAAC,EAAA,gBAAAC,EAAA,sBAAAC,EAAA,uBAAAC,IAAA,eAAAC,EAAAV,GAAA,IAAAW,EAA6B,uBAGtB,SAASF,EAAmBG,EAAmC,CACpE,OAAOA,EAAQ,OAAO,CAACC,EAAUC,KAC/BD,EAAIC,EAAI,IAAI,EAAIA,EAAI,OAAO,CAAC,EAAE,MACvBD,GACN,CAAC,CAAC,CACP,CASO,MAAMT,EAA4BW,GACvCA,EAAQ,SAAS,KAAMC,GAA4BA,EAAQ,gBAAgB,GAAKD,EAAQ,SAAS,CAAC,EAEvFV,EAAkB,CAACU,EAAkBE,IAChDF,EAAQ,SAAS,KAAMC,GAA4BA,EAAQ,MAAQC,CAAG,EAE3DV,EAAyC,CACpD,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,KACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,OACN,EAEaC,EAAqBU,
|
|
4
|
+
"sourcesContent": ["import { PRICE_SYMBOL } from '../const.js'\nimport type { Options, Product, ProductOption, ProductVariant } from '../types/product'\n\nexport function optionsConstructor(options: ProductOption[]): Options {\n return options.reduce((pre: any, cur: any) => {\n pre[cur.name] = cur.values[0].label\n return pre\n }, {})\n}\n\n/**\n * Returns the first available variant of a product.\n * If no variant is available, it returns the first variant in the list.\n *\n * @param product - The product object.\n * @returns The first available variant of the product.\n */\nexport const getFirstAvailableVariant = (product: Product) =>\n product.variants.find((variant: ProductVariant) => variant.availableForSale) || product.variants[0]\n\nexport const getVariantBySku = (product: Product, sku: string) =>\n product.variants.find((variant: ProductVariant) => variant.sku === sku)\n\nexport const languageMap: { [key: string]: string } = {\n us: 'en-US',\n uk: 'en-GB',\n ca: 'en-CA',\n au: 'en-AU',\n 'eu-en': 'en',\n 'eu-fr': 'fr-FR',\n 'eu-it': 'it-IT',\n 'eu-de': 'de-DE',\n de: 'de-DE',\n 'eu-es': 'es-ES',\n 'cz-en': 'en-CZ',\n nl: 'nl-NL',\n 'dk-en': 'en-DK',\n 'gr-en': 'en-GR',\n 'mk-en': 'en-MK',\n 'hu-en': 'en-HU',\n 'se-en': 'en-SE',\n 'hr-en': 'en-HR',\n 'bg-en': 'en-BG',\n 'ee-en': 'en-EE',\n 'fi-en': 'en-FI',\n 'lt-en': 'en-LT',\n pl: 'pl-PL',\n 'ro-en': 'en-RO',\n 'si-en': 'en-SI',\n 'sk-en': 'en-SK',\n 'no-en': 'en-NO',\n 'ad-en': 'en-AD',\n 'al-en': 'en-AL',\n 'ba-en': 'en-BA',\n 'me-en': 'en-ME',\n 'rs-en': 'en-RS',\n 'gl-en': 'en-GL',\n 'is-en': 'en-IS',\n 'ua-en': 'en-UA',\n 'by-en': 'en-BY',\n 'md-en': 'en-MD',\n 'lv-en': 'en-LV',\n 'at-de': 'de-AT',\n 'lu-de': 'de-LU',\n 'li-de': 'de-LI',\n 'va-it': 'it-VA',\n 'sm-it': 'it-SM',\n 'be-nl': 'nl-BE',\n 'ae-en': 'en-AE',\n nz: 'en-NZ',\n 'sg-en': 'en-SG',\n 'sa-en': 'en-SA',\n 'vn-vi': 'vi-VN',\n ie: 'en-IE',\n tw: 'zh-TW',\n}\n\nexport const languageTerritory = (locale: string) => {\n if (!languageMap[locale]) {\n console.warn(`[formatPrice] Unknown locale \"${locale}\", falling back to en-US`)\n }\n return languageMap[locale] || 'en-US'\n}\n\nexport function formatPrice({\n amount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros = false,\n}: {\n amount: number\n currencyCode: string\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n const validCurrencyCode = currencyCode?.trim() || 'USD'\n const validLocale = languageTerritory(locale)\n\n let formatCurrency: Intl.NumberFormat\n try {\n formatCurrency = new Intl.NumberFormat(validLocale, {\n style: 'currency',\n currency: validCurrencyCode,\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n } catch {\n // Fallback to en-US with USD if locale/currency combination is invalid\n formatCurrency = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n maximumFractionDigits,\n })\n }\n\n let formattedValue = formatCurrency.format(amount)\n\n const COMMA_DECIMAL_LOCALES = ['de-DE', 'fr-FR', 'it-IT', 'es-ES', 'nl-NL', 'de-AT', 'de-LU', 'de-LI', 'nl-BE', 'pl-PL', 'vi-VN']\n if (COMMA_DECIMAL_LOCALES.includes(validLocale)) {\n formattedValue = formattedValue?.toString()?.replace(/[\\s\\u00A0\\u202F]/g, '')\n }\n\n if (removeTrailingZeros) {\n // Adjust the regex to match comma as decimal separator\n formattedValue = formattedValue\n .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n .replace(/\\.0+\\b/, '')\n // eslint-disable-next-line no-useless-escape\n .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n // eslint-disable-next-line no-useless-escape\n .replace(/\\,0+\\b/, '')\n }\n\n return formattedValue\n}\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n style: 'percent',\n })\n const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? formatPrice({\n amount: baseAmount,\n currencyCode,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount }\n}\n\nexport function getVariantFromSelectedOptions({\n product,\n selectedOptions,\n}: {\n product: Product\n selectedOptions: Record<string, string>\n}) {\n return product.variants.find(variant => {\n return Object.entries(selectedOptions).every(([key, value]) =>\n variant.options.find(option => {\n if (option.__typename === 'MultipleChoiceOption' && option.name === key) {\n return option.values.find(v => v.label === value)\n }\n })\n )\n })\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["utils_exports", "__export", "formatPrice", "formatVariantPrice", "getFirstAvailableVariant", "getVariantBySku", "getVariantFromSelectedOptions", "languageMap", "languageTerritory", "optionsConstructor", "__toCommonJS", "import_const", "options", "pre", "cur", "product", "variant", "sku", "locale", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "validCurrencyCode", "validLocale", "formatCurrency", "formattedValue", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice", "selectedOptions", "key", "value", "option", "v"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var g=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(t,s)=>{for(var e in s)g(t,e,{get:s[e],enumerable:!0})},b=(t,s,e,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of O(s))!A.call(t,r)&&r!==e&&g(t,r,{get:()=>s[r],enumerable:!(d=D(s,r))||d.enumerable});return t};var I=(t,s,e)=>(e=t!=null?j(q(t)):{},b(s||!t||!t.__esModule?g(e,"default",{value:t,enumerable:!0}):e,t)),R=t=>b(g({},"__esModule",{value:!0}),t);var U={};H(U,{SceneProductCard:()=>x});module.exports=R(U);var a=require("react/jsx-runtime"),M=I(require("react")),o=require("../../helpers/index.js"),i=require("../../components/index.js"),C=require("./context.js"),k=require("../../shared/LocalizedLink.js");const x=M.forwardRef(({className:t,classNames:s,product:e,selected:d,onSelectChange:r,showTags:P,showOriginalPrice:u,onProductImageClick:S,...N},v)=>{const n=(0,C.useSceneShelfContext)(),w=P??n?.showTags??!0,y=u??n?.showOriginalPrice??!0,l=s??n?.classNames??{},p=d??(n?n.selectedIds.has(e.id):!1),f=r??n?.onSelectChange,h=S??n?.onProductImageClick,m=e.soldOut??!1,z=c=>{m||typeof c=="boolean"&&f?.(c,e)},T=()=>{m||f?.(!p,e)};return(0,a.jsxs)("div",{ref:v,className:(0,o.cn)("lg-desktop:gap-2 lg-desktop:h-[362px] lg-desktop:px-6 lg-desktop:pb-6 lg-desktop:pt-4 rounded-box box-border flex h-[284px] flex-col justify-between gap-2 border-2 border-solid p-4 pb-6 transition-colors",m?"cursor-not-allowed opacity-50":"cursor-pointer",p?(0,o.cn)("border-brand-0 bg-container-secondary-0",l?.cardSelected):(0,o.cn)("border-lines bg-container-primary",l?.card),t),onClick:T,"data-headless-type-name":"SceneShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name??e.title}##Select`,"data-headless-sku":e.id,...N,children:[(0,a.jsx)("div",{className:(0,o.cn)("lg-desktop:left-6 lg-desktop:top-6 flex max-h-[24px] min-h-[24px] flex-wrap gap-1 overflow-visible pr-9",l?.tags),children:w&&e.tags?.map((c,L)=>(0,a.jsx)(i.Badge,{variant:c.variant||"outline",size:"sm",children:c.label},L))}),(0,a.jsx)(i.Checkbox,{checked:p,disabled:m,onCheckedChange:z,onClick:c=>c.stopPropagation(),className:(0,o.cn)("text-brand-0 border-brand-0 lg-desktop:right-6 lg-desktop:top-6 absolute right-4 top-4 size-5 shrink-0",l?.checkbox)}),(0,a.jsx)("div",{className:(0,o.cn)("flex flex-1 grow-0 items-center justify-center",l?.image),children:h?(0,a.jsx)("a",{onClick:()=>h(e),role:"button",children:(0,a.jsx)(i.Picture,{source:e.imageUrl,alt:e.imageAlt||e.title,className:"lg-desktop:size-[175px] aspect-square size-[124px] ",imgClassName:"object-contain"})}):e?.href?(0,a.jsx)(k.LocalizedLink,{href:e.href,children:(0,a.jsx)(i.Picture,{source:e.imageUrl,alt:e.imageAlt||e.title,className:"lg-desktop:size-[175px] aspect-square size-[124px] ",imgClassName:"object-contain"})}):(0,a.jsx)(i.Picture,{source:e.imageUrl,alt:e.imageAlt||e.title,className:"lg-desktop:size-[175px] aspect-square size-[124px] ",imgClassName:"object-contain"})}),(0,a.jsxs)("div",{className:"flex grow flex-col justify-start gap-4",children:[(0,a.jsx)(i.Heading,{as:"h3",size:2,className:(0,o.cn)("text-info-primary line-clamp-2 h-[2.2em]",l?.title),html:e.custom_name??e.title}),(0,a.jsxs)("div",{className:(0,o.cn)("flex flex-wrap items-center gap-1",l?.priceWrapper),children:[(0,a.jsx)(i.Text,{as:"span",size:2,className:(0,o.cn)("text-info-primary lg-desktop:text-[24px] text-[20px]",l?.currentPrice),children:e.currentPrice.formatted}),y&&e.originalPrice&&e.originalPrice.value>e.currentPrice.value&&(0,a.jsx)(i.Text,{as:"span",size:2,className:(0,o.cn)("text-info-quaternary lg-desktop:text-[24px] text-[20px] line-through",l?.originalPrice),children:e.originalPrice.formatted})]})]})]})});x.displayName="SceneShelf.ProductCard";
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SceneShelf/ProductCard.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Checkbox, Badge, Heading, Text, Picture } from '../../components/index.js'\nimport { useSceneShelfContext } from './context.js'\nimport type { SceneProductCardSemanticName, SceneProductCardData } from './types.js'\n\nexport interface SceneProductCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4EA7\u54C1\u6570\u636E */\n product: SceneProductCardData\n /** \u662F\u5426\u9009\u4E2D */\n selected?: boolean\n /** \u9009\u4E2D\u72B6\u6001\u53D8\u5316\u56DE\u8C03 */\n onSelectChange?: (selected: boolean, product: SceneProductCardData) => void\n /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n showTags?: boolean\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n showOriginalPrice?: boolean\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: SceneProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<SceneProductCardSemanticName, string>>\n}\n\n/**\n * SceneProductCard - \u573A\u666F\u63A8\u8350\u8D27\u67B6\u4EA7\u54C1\u5361\u7247\n *\n * @description \u7528\u4E8E\u573A\u666F\u63A8\u8350\u8D27\u67B6\u7684\u53EF\u9009\u4E2D\u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst SceneProductCard = React.forwardRef<HTMLDivElement, SceneProductCardProps>(\n (\n {\n className,\n classNames: classNamesProp,\n product,\n selected: selectedProp,\n onSelectChange: onSelectChangeProp,\n showTags: showTagsProp,\n showOriginalPrice: showOriginalPriceProp,\n onProductImageClick,\n ...props\n },\n ref\n ) => {\n // \u4ECE Context \u8BFB\u53D6\u914D\u7F6E\n const context = useSceneShelfContext()\n\n // Props \u4F18\u5148\u7EA7\u9AD8\u4E8E Context\n const showTags = showTagsProp ?? context?.showTags ?? true\n const showOriginalPrice = showOriginalPriceProp ?? context?.showOriginalPrice ?? true\n const classNames = classNamesProp ?? context?.classNames ?? {}\n\n // \u9009\u4E2D\u72B6\u6001\u548C\u56DE\u8C03\u4ECE Context \u83B7\u53D6\n const selected = selectedProp ?? (context ? context.selectedIds.has(product.id) : false)\n const onSelectChange = onSelectChangeProp ?? context?.onSelectChange\n const resolvedOnProductImageClick = onProductImageClick ?? context?.onProductImageClick\n const disabled = product.soldOut ?? false\n\n const handleCheckboxChange = (checked: boolean | 'indeterminate') => {\n if (disabled) return\n if (typeof checked === 'boolean') {\n onSelectChange?.(checked, product)\n }\n }\n\n const handleCardClick = () => {\n if (disabled) return\n onSelectChange?.(!selected, product)\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n 'lg-desktop:gap-2 lg-desktop:h-[362px] lg-desktop:px-6 lg-desktop:pb-6 lg-desktop:pt-4 rounded-box box-border flex h-[284px] flex-col justify-between gap-2 border-2 border-solid p-4 pb-6 transition-colors',\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n selected\n ? cn('border-brand-0 bg-container-secondary-0', classNames?.cardSelected)\n : cn('border-lines bg-container-primary', classNames?.card),\n className\n )}\n onClick={handleCardClick}\n data-headless-type-name=\"SceneShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name ?? product.title}##Select`}\n data-headless-sku={product.id}\n {...props}\n >\n {/* \u6807\u7B7E\u533A\u57DF */}\n <div\n className={cn(\n 'lg-desktop:left-6 lg-desktop:top-6 flex max-h-[24px] min-h-[24px] flex-wrap gap-1 overflow-visible pr-9',\n classNames?.tags\n )}\n >\n {showTags &&\n product.tags?.map((tag, index) => (\n <Badge key={index} variant={tag.variant || 'outline'} size=\"sm\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n {/* Checkbox */}\n <Checkbox\n checked={selected}\n disabled={disabled}\n onCheckedChange={handleCheckboxChange}\n onClick={e => e.stopPropagation()}\n className={cn(\n 'text-brand-0 border-brand-0 lg-desktop:right-6 lg-desktop:top-6 absolute right-4 top-4 size-5 shrink-0',\n classNames?.checkbox\n )}\n />\n\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n <div className={cn('flex flex-1 grow-0 items-center justify-center', classNames?.image)}>\n {resolvedOnProductImageClick
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ProductCard_exports", "__export", "SceneProductCard", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_context", "className", "classNamesProp", "product", "selectedProp", "onSelectChangeProp", "showTagsProp", "showOriginalPriceProp", "onProductImageClick", "props", "ref", "context", "showTags", "showOriginalPrice", "classNames", "selected", "onSelectChange", "resolvedOnProductImageClick", "disabled", "handleCheckboxChange", "checked", "handleCardClick", "tag", "index", "e"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Checkbox, Badge, Heading, Text, Picture } from '../../components/index.js'\nimport { useSceneShelfContext } from './context.js'\nimport { LocalizedLink } from '../../shared/LocalizedLink.js'\nimport type { SceneProductCardSemanticName, SceneProductCardData } from './types.js'\n\nexport interface SceneProductCardProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4EA7\u54C1\u6570\u636E */\n product: SceneProductCardData\n /** \u662F\u5426\u9009\u4E2D */\n selected?: boolean\n /** \u9009\u4E2D\u72B6\u6001\u53D8\u5316\u56DE\u8C03 */\n onSelectChange?: (selected: boolean, product: SceneProductCardData) => void\n /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n showTags?: boolean\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n showOriginalPrice?: boolean\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: SceneProductCardData) => void\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<SceneProductCardSemanticName, string>>\n}\n\n/**\n * SceneProductCard - \u573A\u666F\u63A8\u8350\u8D27\u67B6\u4EA7\u54C1\u5361\u7247\n *\n * @description \u7528\u4E8E\u573A\u666F\u63A8\u8350\u8D27\u67B6\u7684\u53EF\u9009\u4E2D\u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst SceneProductCard = React.forwardRef<HTMLDivElement, SceneProductCardProps>(\n (\n {\n className,\n classNames: classNamesProp,\n product,\n selected: selectedProp,\n onSelectChange: onSelectChangeProp,\n showTags: showTagsProp,\n showOriginalPrice: showOriginalPriceProp,\n onProductImageClick,\n ...props\n },\n ref\n ) => {\n // \u4ECE Context \u8BFB\u53D6\u914D\u7F6E\n const context = useSceneShelfContext()\n\n // Props \u4F18\u5148\u7EA7\u9AD8\u4E8E Context\n const showTags = showTagsProp ?? context?.showTags ?? true\n const showOriginalPrice = showOriginalPriceProp ?? context?.showOriginalPrice ?? true\n const classNames = classNamesProp ?? context?.classNames ?? {}\n\n // \u9009\u4E2D\u72B6\u6001\u548C\u56DE\u8C03\u4ECE Context \u83B7\u53D6\n const selected = selectedProp ?? (context ? context.selectedIds.has(product.id) : false)\n const onSelectChange = onSelectChangeProp ?? context?.onSelectChange\n const resolvedOnProductImageClick = onProductImageClick ?? context?.onProductImageClick\n const disabled = product.soldOut ?? false\n\n const handleCheckboxChange = (checked: boolean | 'indeterminate') => {\n if (disabled) return\n if (typeof checked === 'boolean') {\n onSelectChange?.(checked, product)\n }\n }\n\n const handleCardClick = () => {\n if (disabled) return\n onSelectChange?.(!selected, product)\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n 'lg-desktop:gap-2 lg-desktop:h-[362px] lg-desktop:px-6 lg-desktop:pb-6 lg-desktop:pt-4 rounded-box box-border flex h-[284px] flex-col justify-between gap-2 border-2 border-solid p-4 pb-6 transition-colors',\n disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n selected\n ? cn('border-brand-0 bg-container-secondary-0', classNames?.cardSelected)\n : cn('border-lines bg-container-primary', classNames?.card),\n className\n )}\n onClick={handleCardClick}\n data-headless-type-name=\"SceneShelf#ProductCard\"\n data-headless-title-desc-button={`${product.custom_name ?? product.title}##Select`}\n data-headless-sku={product.id}\n {...props}\n >\n {/* \u6807\u7B7E\u533A\u57DF */}\n <div\n className={cn(\n 'lg-desktop:left-6 lg-desktop:top-6 flex max-h-[24px] min-h-[24px] flex-wrap gap-1 overflow-visible pr-9',\n classNames?.tags\n )}\n >\n {showTags &&\n product.tags?.map((tag, index) => (\n <Badge key={index} variant={tag.variant || 'outline'} size=\"sm\">\n {tag.label}\n </Badge>\n ))}\n </div>\n\n {/* Checkbox */}\n <Checkbox\n checked={selected}\n disabled={disabled}\n onCheckedChange={handleCheckboxChange}\n onClick={e => e.stopPropagation()}\n className={cn(\n 'text-brand-0 border-brand-0 lg-desktop:right-6 lg-desktop:top-6 absolute right-4 top-4 size-5 shrink-0',\n classNames?.checkbox\n )}\n />\n\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n <div className={cn('flex flex-1 grow-0 items-center justify-center', classNames?.image)}>\n {resolvedOnProductImageClick ? (\n <a onClick={() => resolvedOnProductImageClick(product)} role=\"button\">\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt || product.title}\n className=\"lg-desktop:size-[175px] aspect-square size-[124px] \"\n imgClassName=\"object-contain\"\n />\n </a>\n ) : product?.href ? (\n <LocalizedLink href={product.href}>\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt || product.title}\n className=\"lg-desktop:size-[175px] aspect-square size-[124px] \"\n imgClassName=\"object-contain\"\n />\n </LocalizedLink>\n ) : (\n <Picture\n source={product.imageUrl}\n alt={product.imageAlt || product.title}\n className=\"lg-desktop:size-[175px] aspect-square size-[124px] \"\n imgClassName=\"object-contain\"\n />\n )}\n </div>\n\n {/* \u4EA7\u54C1\u4FE1\u606F */}\n <div className=\"flex grow flex-col justify-start gap-4\">\n {/* \u4EA7\u54C1\u540D\u79F0 */}\n <Heading\n as=\"h3\"\n size={2}\n className={cn('text-info-primary line-clamp-2 h-[2.2em]', classNames?.title)}\n html={product.custom_name ?? product.title}\n />\n\n {/* \u4EF7\u683C\u533A\u57DF */}\n <div className={cn('flex flex-wrap items-center gap-1', classNames?.priceWrapper)}>\n <Text\n as=\"span\"\n size={2}\n className={cn('text-info-primary lg-desktop:text-[24px] text-[20px]', classNames?.currentPrice)}\n >\n {product.currentPrice.formatted}\n </Text>\n {showOriginalPrice && product.originalPrice && product.originalPrice.value > product.currentPrice.value && (\n <Text\n as=\"span\"\n size={2}\n className={cn(\n 'text-info-quaternary lg-desktop:text-[24px] text-[20px] line-through',\n classNames?.originalPrice\n )}\n >\n {product.originalPrice.formatted}\n </Text>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nSceneProductCard.displayName = 'SceneShelf.ProductCard'\n\nexport { SceneProductCard }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductCard_exports", "__export", "SceneProductCard", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_context", "import_LocalizedLink", "className", "classNamesProp", "product", "selectedProp", "onSelectChangeProp", "showTagsProp", "showOriginalPriceProp", "onProductImageClick", "props", "ref", "context", "showTags", "showOriginalPrice", "classNames", "selected", "onSelectChange", "resolvedOnProductImageClick", "disabled", "handleCheckboxChange", "checked", "handleCardClick", "tag", "index", "e"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface LocalizedLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
|
+
href?: string;
|
|
4
|
+
}
|
|
5
|
+
declare const LocalizedLink: React.ForwardRefExoticComponent<LocalizedLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
6
|
+
export { LocalizedLink };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var u=Object.create;var a=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var M=(e,o)=>{for(var r in o)a(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of A(o))!H.call(e,t)&&t!==r&&a(e,t,{get:()=>o[t],enumerable:!(n=z(o,t))||n.enumerable});return e};var x=(e,o,r)=>(r=e!=null?u(k(e)):{},l(o||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),P=e=>l(a({},"__esModule",{value:!0}),e);var R={};M(R,{LocalizedLink:()=>c});module.exports=P(R);var i=require("react/jsx-runtime"),L=x(require("react")),d=require("../helpers/index.js"),f=require("../biz-components/AiuiProvider/index.js");const c=L.forwardRef(({href:e,className:o,children:r,rel:n="noreferrer",...t},m)=>{const{locale:s="us"}=(0,f.useAiuiContext)(),p=L.useMemo(()=>e?(0,d.getLocalizedPath)(e,s):void 0,[e,s]);return e?(0,i.jsx)("a",{ref:m,href:p,rel:n,className:o,...t,children:r}):(0,i.jsx)(i.Fragment,{children:r})});c.displayName="LocalizedLink";
|
|
2
|
+
//# sourceMappingURL=LocalizedLink.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/shared/LocalizedLink.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { getLocalizedPath } from '../helpers/index.js'\nimport { useAiuiContext } from '../biz-components/AiuiProvider/index.js'\n\nexport interface LocalizedLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n href?: string\n}\n\nconst LocalizedLink = React.forwardRef<HTMLAnchorElement, LocalizedLinkProps>(\n ({ href, className, children, rel = 'noreferrer', ...props }, ref) => {\n const { locale = 'us' } = useAiuiContext()\n const localizedHref = React.useMemo(() => (href ? getLocalizedPath(href, locale) : undefined), [href, locale])\n\n if (!href) {\n return <>{children}</>\n }\n\n return (\n <a ref={ref} href={localizedHref} rel={rel} className={className} {...props}>\n {children}\n </a>\n )\n }\n)\n\nLocalizedLink.displayName = 'LocalizedLink'\n\nexport { LocalizedLink }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAgBa,IAAAI,EAAA,6BAdbC,EAAuB,oBACvBC,EAAiC,+BACjCC,EAA+B,mDAM/B,MAAML,EAAgBG,EAAM,WAC1B,CAAC,CAAE,KAAAG,EAAM,UAAAC,EAAW,SAAAC,EAAU,IAAAC,EAAM,aAAc,GAAGC,CAAM,EAAGC,IAAQ,CACpE,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnCC,EAAgBV,EAAM,QAAQ,IAAOG,KAAO,oBAAiBA,EAAMM,CAAM,EAAI,OAAY,CAACN,EAAMM,CAAM,CAAC,EAE7G,OAAKN,KAKH,OAAC,KAAE,IAAKK,EAAK,KAAME,EAAe,IAAKJ,EAAK,UAAWF,EAAY,GAAGG,EACnE,SAAAF,EACH,KANO,mBAAG,SAAAA,EAAS,CAQvB,CACF,EAEAR,EAAc,YAAc",
|
|
6
|
+
"names": ["LocalizedLink_exports", "__export", "LocalizedLink", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_AiuiProvider", "href", "className", "children", "rel", "props", "ref", "locale", "localizedHref"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as n,jsxs as a}from"react/jsx-runtime";import B from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";import x from"../../components/picture.js";import N from"../../components/button.js";import S from"../SwiperBox/index.js";import{withLayout as C}from"../../shared/Styles.js";import D,{useState as L,useRef as T,useCallback as j,useImperativeHandle as A,useEffect as M}from"react";import{useExposure as H}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import z from"../../shared/throttle.js";import{Heading as R}from"../../components/heading.js";const l="image",s="scene_banner",P=({item:e,idx:t,itemShape:m,hoverIndex:b,getRef:w,handleSwiperItemClick:v,contentWidth:c,primaryButton:d,event:p,data:u,accordionRef:I})=>{const h=b===t,g=h?8:1;return H({current:I.current[t]},{componentType:l,componentName:s,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),a("div",{style:{flex:`${g} 1 0%`,transition:"all 0.6s"},ref:y=>{y&&w(t,y)},className:o("relative cursor-pointer overflow-hidden",m==="round"?"rounded-2xl":""),onMouseEnter:()=>v(t),onClick:()=>{v(t)},children:[e?.imgLink?n("a",{href:k(e.imgLink,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:n(x,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}):n(x,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),a("div",{style:{width:c},className:o("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",h&&c?"opacity-100":"opacity-0"),children:[a("div",{className:"mr-16 flex-1 overflow-hidden",children:[n(R,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),n(R,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),d&&a(N,{className:o("mb-1.5 font-bold"),as:"a",href:k(e?.link,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${d}`,onClick:()=>p?.primaryButton?.(u,t),children:[d,n("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},O=({data:e,configuration:t})=>{const m=T(null);return H(m,{componentType:l,componentName:s,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),a("div",{ref:m,className:o("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[e?.imgLink?n("a",{href:k(e.imgLink,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:n(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}):n(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),a("div",{className:o("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[a("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[n("h3",{className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",dangerouslySetInnerHTML:{__html:e?.title}}),n("h4",{className:"text-info-primary line-clamp-2 text-sm font-bold",dangerouslySetInnerHTML:{__html:e?.subTitle}})]}),t?.primaryButton&&n(N,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:o("text-info-primary text-sm font-bold"),href:k(e.link,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},E=D.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:m="",event:b,...w},v)=>{const[c,d]=L(0),p=T(0),u=T([]),[I,h]=L(0),g=T(null);A(v,()=>g.current);const y=(r,i)=>{i&&(u.current[r]=i)};M(()=>{const r=()=>{u.current[p.current]&&h(u.current[p.current].offsetWidth)};r();const i=z(r,300);return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]);const _=j(r=>{c!==r&&(d(r),p.current=r)},[e?.products,c]);return M(()=>{let r;return t?.enabled&&(r=setInterval(()=>{d(i=>{const $=i??0;let f;if(t.loop!==!1)f=($+1)%e?.products?.length;else if(f=$+1,f>=e?.products?.length)return f=e?.products?.length-1,r&&clearInterval(r),$;return p.current=f,f})},t?.interval)),()=>{r&&clearInterval(r)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,_]),a("div",{...w,ref:g,children:[e?.title&&n(B,{data:{title:e?.title}}),n("div",{className:o("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:n("div",{className:o("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",m),children:e?.products?.map((r,i)=>n(P,{item:r,idx:i,itemShape:e?.itemShape,hoverIndex:c,getRef:y,handleSwiperItemClick:_,contentWidth:I,primaryButton:e?.primaryButton,event:b,data:e,accordionRef:u},i))})}),n("div",{className:o("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:n(S,{className:o("h-[400px] !overflow-visible",m),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:b,title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});E.displayName="AccordionCards";var Z=C(E);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n}\n\nconst AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (_idx: number, _el: HTMLDivElement) => void\n handleSwiperItemClick: (_idx: number) => void\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <a\n href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n {primaryButton && (\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a\n href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <h3\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n ></h3>\n <h4\n className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n ></h4>\n </div>\n\n {configuration?.primaryButton && (\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data?.products, hoverIndex]\n )\n\n useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => (\n <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\n />\n ))}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n}\n\nconst AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (_idx: number, _el: HTMLDivElement) => void\n handleSwiperItemClick: (_idx: number) => void\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n {item?.imgLink ? (\n <a\n href={trackUrlRef(item.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n )}\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n {primaryButton && (\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {data?.imgLink ? (\n <a\n href={trackUrlRef(data.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <h3\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n ></h3>\n <h4\n className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n ></h4>\n </div>\n\n {configuration?.primaryButton && (\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data?.products, hoverIndex]\n )\n\n useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => (\n <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\n />\n ))}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "throttle", "Heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "MobileItem", "configuration", "ref", "AccordionCards", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as
|
|
1
|
+
"use client";import{jsx as s,jsxs as g}from"react/jsx-runtime";import*as n from"react";import{cn as d}from"../../helpers/index.js";import{withLayout as B}from"../../shared/Styles.js";import{Text as y,Picture as P,Heading as R,Container as z}from"../../components/index.js";import{Swiper as D,SwiperSlide as L}from"swiper/react";import w from"dayjs";import{cva as x}from"class-variance-authority";const S=(e,r)=>{const c=w(),u=w(e).startOf("day"),m=w(r).endOf("day");return c.isAfter(m)?"completed":c.isBefore(u)?"not-started":"in-progress"},j=x("h-1 w-full overflow-hidden",{variants:{state:{"in-progress-light":"bg-[#F6CD4E]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F6CD4E]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),H=x("size-4 rounded-full transition-colors",{variants:{state:{"in-progress-light":"bg-[#F6CD4E]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F6CD4E]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),k=x("font-bold leading-[1.2]",{variants:{state:{"in-progress-light":"text-[#080A0F]","in-progress-dark":"text-white","not-started-light":"text-[#080A0F]","not-started-dark":"text-[#F5F6F7]","completed-light":"text-[#4A4C56]/60","completed-dark":"text-[#F5F6F7]/60"}},defaultVariants:{state:"not-started-light"}}),O=x("laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden",{variants:{state:{"in-progress-light":"bg-[#F4E8BC]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F4E8BC]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),q=({timeStatus:e,theme:r="light",className:c,index:u,nodeLength:m})=>{const o=`${e}-${r}`,i=u===0,l=u===m-1;return g("div",{className:d(`event-schedule-timeline-node event-schedule-timeline-node--${e} relative my-2 flex h-1 w-full items-center justify-center`,c),children:[s("div",{className:d(`event-schedule-timeline-progress event-schedule-timeline-progress--${e}`,j({state:o}),i&&"rounded-l-full",l&&"rounded-r-full")}),s("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:s("div",{className:d(`event-schedule-timeline-dot event-schedule-timeline-dot--${e}`,H({state:o}))})})]})},G=(e,r)=>{if(e)return r==="in-progress"?e.active:r==="completed"&&e.completed||e.inactive},J=({timeStatus:e,item:r,theme:c="light",className:u,scheduleCount:m})=>{const o=n.useMemo(()=>G(r.icon,e),[r.icon,e]),i=`${e}-${c}`;return g("div",{className:d(`event-schedule-card event-schedule-card--${e}`,O({state:i}),u),children:[o&&s("div",{className:`event-schedule-card__background-icon event-schedule-card__background-icon--${e} laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]`,children:s(P,{source:o.url,alt:o.alt,className:"aspect-square"})}),g("div",{className:`event-schedule-card__content event-schedule-card__content--${e} tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8`,children:[s(R,{html:r.title,className:d(`event-schedule-card__title event-schedule-card__title--${e}`,m>=4?"desktop:text-[24px]":"desktop:text-[32px]","laptop:text-[24px] line-clamp-1 text-[20px]",k({state:i}))}),s("div",{className:`event-schedule-card__details event-schedule-card__details--${e} flex flex-col gap-0.5`,children:r.items.map((l,a)=>g("div",{className:`event-schedule-card__detail-item event-schedule-card__detail-item--${e} flex items-center gap-2`,children:[l.icon&&s(y,{className:d(`event-schedule-card__detail-icon event-schedule-card__detail-icon--${e} desktop:size-6 size-5 shrink-0`,k({state:i})),html:l.icon}),s(y,{html:l.label,className:d(`event-schedule-card__detail-text event-schedule-card__detail-text--${e} lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]`,k({state:i}))})]},a))})]})]})},F=n.forwardRef(({classNames:e={},data:r,className:c,...u},m)=>{const o=r.theme||"light",i=n.useRef(null),l=n.useRef(null),a=n.useRef(!1),f=n.useMemo(()=>r?.scheduleList?.length||2,[r?.scheduleList]),v=n.useMemo(()=>r.scheduleList.findIndex(t=>S(t.startDate,t.endDate)==="in-progress"),[r.scheduleList]),b=n.useCallback((t,h=!1)=>{const p=M=>{switch(M){case"mobile":return{slidesPerView:1.17};case"tablet":return t===2?{slidesPerView:2}:{slidesPerView:2.4};case"laptop":return t===2?{}:t===4?{slidesPerView:3.2}:{slidesPerView:t};case"desktop":return t===2?{slidesPerView:2}:{slidesPerView:t}}},T=p("mobile"),C=p("tablet"),N=p("laptop"),_=p("desktop");return h?{0:{...T,spaceBetween:12},768:{...C,spaceBetween:12},1024:{...N,spaceBetween:16},1440:{..._,spaceBetween:16}}:{0:T,768:C,1024:N,1440:_}},[]),V=n.useMemo(()=>b(f,!0),[f,b]),$=n.useMemo(()=>b(f,!1),[f,b]),E=r.showTimeline!==!1,A=n.useCallback(t=>{a.current||!l.current||(a.current=!0,l.current.slideTo(t.activeIndex,t.params.speed),setTimeout(()=>{a.current=!1},50))},[]),I=n.useCallback(t=>{a.current||!i.current||(a.current=!0,i.current.slideTo(t.activeIndex,t.params.speed),setTimeout(()=>{a.current=!1},50))},[]);return n.useEffect(()=>{i.current&&l.current&&v>=0&&setTimeout(()=>{a.current=!0,i.current?.slideTo(v,500),l.current?.slideTo(v,500),setTimeout(()=>{a.current=!1},600)},100)},[v]),g(z,{...u,ref:m,className:d("event-schedule-root overflow-hidden",e?.root,c),children:[E&&s(D,{breakpoints:$,className:"event-schedule-timeline h-4 w-full !overflow-visible",onSwiper:t=>{l.current=t},onSlideChange:I,children:r.scheduleList.map((t,h)=>{const p=S(t.startDate,t.endDate);return s(L,{className:"",children:s(q,{className:e?.timeline,timeStatus:p,theme:o,index:h,nodeLength:r.scheduleList.length})},"timelineNode"+h)})}),s(D,{breakpoints:V,className:"event-schedule-cards w-full !overflow-visible",onSwiper:t=>{i.current=t},onSlideChange:A,children:r.scheduleList.map((t,h)=>{const p=S(t.startDate,t.endDate);return s(L,{children:s(J,{timeStatus:p,className:d(E?"laptop:mt-4 mt-2":"",e?.eventScheduleCard),item:t,theme:o,scheduleCount:r.scheduleList.length})},"SwiperSlideItem"+h)})})]})});F.displayName="EventSchedule";var Z=B(F);export{Z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|