@anker-in/headless-ui 1.3.50 → 1.3.51
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/Listing/BizProductProvider.d.ts +11 -9
- package/dist/cjs/biz-components/Listing/BizProductProvider.js +1 -1
- package/dist/cjs/biz-components/Listing/BizProductProvider.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- 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 +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.d.ts +48 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +0 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.d.ts +3 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.d.ts +115 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.js +2 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.js.map +7 -0
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/index.d.ts +0 -1
- package/dist/cjs/biz-components/Listing/components/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.d.ts +8 -2
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js +1 -1
- package/dist/cjs/biz-components/Listing/hooks/useBenefits.js.map +3 -3
- package/dist/cjs/biz-components/Listing/types/product.d.ts +0 -21
- package/dist/cjs/biz-components/Listing/types/product.js +1 -1
- package/dist/cjs/biz-components/Listing/types/product.js.map +1 -1
- package/dist/cjs/biz-components/index.d.ts +3 -3
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/BizProductProvider.d.ts +11 -9
- package/dist/esm/biz-components/Listing/BizProductProvider.js +1 -1
- package/dist/esm/biz-components/Listing/BizProductProvider.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +3 -3
- 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 +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts +1 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.d.ts +48 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.js +1 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/types.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts +0 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.d.ts +3 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.js +2 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.d.ts +115 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.js +1 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.js.map +7 -0
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/index.d.ts +0 -1
- package/dist/esm/biz-components/Listing/components/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/hooks/useBenefits.d.ts +8 -2
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js +1 -1
- package/dist/esm/biz-components/Listing/hooks/useBenefits.js.map +3 -3
- package/dist/esm/biz-components/Listing/types/product.d.ts +0 -21
- package/dist/esm/biz-components/Listing/types/product.js.map +1 -1
- package/dist/esm/biz-components/index.d.ts +3 -3
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/package.json +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +0 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js +0 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +0 -7
- package/dist/cjs/biz-components/Listing/components/ProductCard/index.d.ts +0 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/index.js +0 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/index.js.map +0 -7
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +0 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js +0 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +0 -7
- package/dist/esm/biz-components/Listing/components/ProductCard/index.d.ts +0 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/index.js +0 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/index.js.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\nexport interface ProductCouponProps {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n discountText: string\n /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n codeText: string\n /** \u4F18\u60E0\u7801 */\n code: string\n /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n countdownText?: string\n /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n copyText: string\n /** \u5DF2\u590D\u5236\u6587\u6848 */\n copiedText: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n checked,\n discountText,\n codeText,\n code,\n countdownText,\n copyText,\n copiedText,\n onClick,\n className,\n}) => {\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n <div className=\"flex w-full items-center gap-2\">\n <div className=\"flex shrink-0 flex-col items-start\">\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n {codeText}\n </Text>\n </div>\n <Link\n className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(code)\n }}\n >\n {isCopied ? copiedText : copyText}\n </Link>\n </div>\n </div>\n\n {countdownText && (\n <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n {countdownText}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n discountText: string\n /** \u63CF\u8FF0\u6587\u6848 */\n description?: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n checked,\n discountText,\n description,\n onClick,\n className,\n}) => {\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n {description && (\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n {description}\n </Text>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n const { profile, variant, onUseCouponChange, onUseMemberDiscountChange, openSignInPopup, discount, savingDetail } =\n useBizProductContext()\n const { locale = 'us', trackingData } = useAiuiContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n\n const { days, hours, minutes, seconds } = useCountDown({ endTime: commonCoupon?.config?.ends_at })\n\n const couponCopy = trackingData?.common?.coupon\n\n const productCouponData = useComponentData('ProductCoupon') ?? {}\n\n if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n return null\n }\n\n return (\n <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n {productCouponData?.title && (\n <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n {productCouponData.title}\n </Text>\n )}\n {commonCoupon?.enable && (\n <CouponCard\n checked={savingDetail?.coupon > 0}\n discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n codeText={replaceTemplate(productCouponData?.common?.withCode, {\n code: commonCoupon?.config?.title ?? '',\n })}\n code={commonCoupon?.config?.title ?? ''}\n countdownText={\n commonCoupon?.config?.ends_at\n ? replaceTemplate(productCouponData?.common?.endsIn, {\n countdown: `${days}:${hours}:${minutes}:${seconds}`,\n })\n : undefined\n }\n copyText={couponCopy?.copy || productCouponData?.copyCode}\n copiedText={couponCopy?.copied || productCouponData?.copied}\n onClick={() => {\n const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n }}\n />\n )}\n\n {memberDiscount?.enable && (\n <MemberDiscountCard\n checked={Boolean(profile?.email) && !!savingDetail?.member}\n discountText={replaceTemplate(productCouponData?.member?.offMember, {\n discount:\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n description={\n Boolean(profile?.email) ? (\n productCouponData?.member?.loginDesc\n ) : (\n <>\n <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n />\n </>\n )\n }\n onClick={() => {\n if (!profile?.email) {\n openSignInPopup?.()\n return\n }\n const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n }}\n />\n )}\n </div>\n )\n}\n\nProductCoupon.displayName = 'ProductCoupon'\n\nexport default ProductCoupon\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,
|
|
6
|
-
"names": ["ProductCoupon_exports", "__export", "CouponCard", "MemberDiscountCard", "ProductCoupon_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_helpers", "import_components", "import_useCopy", "import_useBenefits", "import_BizProductProvider", "import_useComponentData", "import_textFormat", "import_AiuiProvider", "import_useCountDown", "checked", "discountText", "codeText", "code", "countdownText", "copyText", "copiedText", "onClick", "className", "isCopied", "copyToClipboard", "useCopy", "event", "description", "ProductCoupon", "profile", "variant", "onUseCouponChange", "onUseMemberDiscountChange", "openSignInPopup", "discount", "savingDetail", "locale", "trackingData", "benefits", "commonCoupon", "memberDiscount", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\n// \u5012\u8BA1\u65F6\u663E\u793A\u7EC4\u4EF6\uFF08memo \u9694\u79BB\uFF0C\u907F\u514D\u5916\u5C42 ProductCoupon \u6BCF\u79D2\u91CD\u6E32\u67D3\uFF09\nconst CountdownDisplay = React.memo(function CountdownDisplay({\n endTime,\n template,\n}: {\n endTime: string\n template: string\n}) {\n const { days, hours, minutes, seconds } = useCountDown({ endTime })\n\n return (\n <>\n {replaceTemplate(template, {\n countdown: `${days}:${hours}:${minutes}:${seconds}`,\n })}\n </>\n )\n})\n\nexport interface ProductCouponProps {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n discountText: string\n /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n codeText: string\n /** \u4F18\u60E0\u7801 */\n code: string\n /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n countdownText?: React.ReactNode\n /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n copyText: string\n /** \u5DF2\u590D\u5236\u6587\u6848 */\n copiedText: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n checked,\n discountText,\n codeText,\n code,\n countdownText,\n copyText,\n copiedText,\n onClick,\n className,\n}) => {\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n <div className=\"flex w-full items-center gap-2\">\n <div className=\"flex shrink-0 flex-col items-start\">\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n {codeText}\n </Text>\n </div>\n <Link\n className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(code)\n }}\n >\n {isCopied ? copiedText : copyText}\n </Link>\n </div>\n </div>\n\n {countdownText && (\n <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n {countdownText}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n discountText: string\n /** \u63CF\u8FF0\u6587\u6848 */\n description?: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n checked,\n discountText,\n description,\n onClick,\n className,\n}) => {\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n {description && (\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n {description}\n </Text>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n const { profile, variant, onUseCouponChange, onUseMemberDiscountChange, openSignInPopup, discount, savingDetail } =\n useBizProductContext()\n const { locale = 'us', trackingData } = useAiuiContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n\n const couponCopy = trackingData?.common?.coupon\n\n const productCouponData = useComponentData('ProductCoupon') ?? {}\n\n if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n return null\n }\n\n return (\n <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n {productCouponData?.title && (\n <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n {productCouponData.title}\n </Text>\n )}\n {commonCoupon?.enable && (\n <CouponCard\n checked={savingDetail?.coupon > 0}\n discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n codeText={replaceTemplate(productCouponData?.common?.withCode, {\n code: commonCoupon?.config?.title ?? '',\n })}\n code={commonCoupon?.config?.title ?? ''}\n countdownText={\n commonCoupon?.config?.ends_at\n ? (\n <CountdownDisplay\n endTime={commonCoupon.config.ends_at}\n template={productCouponData?.common?.endsIn ?? ''}\n />\n )\n : undefined\n }\n copyText={couponCopy?.copy || productCouponData?.copyCode}\n copiedText={couponCopy?.copied || productCouponData?.copied}\n onClick={() => {\n const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n }}\n />\n )}\n\n {memberDiscount?.enable && (\n <MemberDiscountCard\n checked={Boolean(profile?.email) && !!savingDetail?.member}\n discountText={replaceTemplate(productCouponData?.member?.offMember, {\n discount:\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n description={\n Boolean(profile?.email) ? (\n productCouponData?.member?.loginDesc\n ) : (\n <>\n <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n />\n </>\n )\n }\n onClick={() => {\n if (!profile?.email) {\n openSignInPopup?.()\n return\n }\n const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n }}\n />\n )}\n </div>\n )\n}\n\nProductCoupon.displayName = 'ProductCoupon'\n\nexport default ProductCoupon\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductCoupon_exports", "__export", "CouponCard", "MemberDiscountCard", "ProductCoupon_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_helpers", "import_components", "import_useCopy", "import_useBenefits", "import_BizProductProvider", "import_useComponentData", "import_textFormat", "import_AiuiProvider", "import_useCountDown", "CountdownDisplay", "React", "endTime", "template", "days", "hours", "minutes", "seconds", "useCountDown", "checked", "discountText", "codeText", "code", "countdownText", "copyText", "copiedText", "onClick", "className", "isCopied", "copyToClipboard", "useCopy", "event", "description", "ProductCoupon", "profile", "variant", "onUseCouponChange", "onUseMemberDiscountChange", "openSignInPopup", "discount", "savingDetail", "locale", "trackingData", "benefits", "commonCoupon", "memberDiscount", "couponCopy", "productCouponData", "couponSaving", "e", "memberSaving"]
|
|
7
7
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
declare const _default: import("react").ForwardRefExoticComponent<Omit<unknown, "container" | keyof import("../../../../../../shared/Styles.js").StylesProps> & import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
|
|
2
|
-
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": [],
|
|
4
|
+
"sourcesContent": [],
|
|
5
|
+
"mappings": "",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<unknown, "container" | keyof import("../../../../../../shared/Styles.js").StylesProps> & import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
|
|
2
|
+
export default _default;
|
|
3
|
+
export type { ProductFunctionFreeGiftProps, FunctionFreeGiftItem } from './types.js';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var f=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var S=(o,l)=>{for(var s in l)f(o,s,{get:l[s],enumerable:!0})},E=(o,l,s,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of w(l))!I.call(o,i)&&i!==s&&f(o,i,{get:()=>l[i],enumerable:!(a=P(l,i))||a.enumerable});return o};var T=o=>E(f({},"__esModule",{value:!0}),o);var j={};S(j,{default:()=>z});module.exports=T(j);var t=require("react/jsx-runtime"),r=require("../../../../../../components/index.js"),c=require("../../../../../../helpers/index.js"),h=require("../../../../../../shared/Styles.js"),p=require("../../../../hooks/useFollowTooltip.js"),g=require("../../../../BizProductProvider.js");const x=()=>{const{functionFreeGift:o,checkedFunctionGifts:l,setCheckedFunctionGifts:s}=(0,g.useBizProductContext)();if(!o||!l||!s)return null;const{title:a,freeLabel:i,giftItems:m=[]}=o,{tooltip:b,getTooltipProps:F}=(0,p.useFollowTooltip)(),k=o.mode==="multiple";if(!m.length)return null;const N=e=>l?.has(String(e.id))??!1,C=e=>{const n=String(e.id);s?.(v=>{const d=new Set(v),u=d.has(n);if(k){u?d.delete(n):d.add(n);const y=m.filter(G=>d.has(String(G.id)));o.onCheckedChange?.(y)}else d.clear(),u||d.add(n),o.onCheckedChange?.(u?void 0:e);return d})};return(0,t.jsxs)("div",{className:(0,c.cn)("ipc-product-detail-free-gift"),children:[(0,t.jsx)(r.Text,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:a}),(0,t.jsx)("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m.map(e=>{const n=N(e);return(0,t.jsxs)("div",{className:(0,c.cn)("rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":n}),children:[(0,t.jsx)(r.Checkbox,{onCheckedChange:()=>C(e),size:"lg",className:(0,c.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand-0 data-[state=checked]:bg-brand-0":n}),id:String(e.id),checked:n,value:String(e.id)}),(0,t.jsxs)("label",{htmlFor:String(e.id),className:"flex w-full cursor-pointer items-center justify-between gap-4 py-4 lg-desktop:py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(r.Picture,{source:e.imageUrl,className:"size-12 shrink-0",imgClassName:"h-full"}),(0,t.jsx)(r.Text,{...F(e.title),className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.title}),(0,t.jsx)(p.FollowTooltip,{...b})]}),(0,t.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[i&&(0,t.jsx)(r.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold !leading-[1.2]",html:i}),e.comparePrice&&(0,t.jsx)(r.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through !leading-[1.2]",html:e.comparePrice})]})]})]},e.id)})})]})};x.displayName="ProductFunctionFreeGift";var z=(0,h.withLayout)(x);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { useFollowTooltip, FollowTooltip } from '../../../../hooks/useFollowTooltip.js'\nimport type { FunctionFreeGiftItem } from './types.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductFunctionFreeGift = () => {\n const { functionFreeGift: freeGift, checkedFunctionGifts, setCheckedFunctionGifts } = useBizProductContext()\n\n if (!freeGift) return null\n if (!checkedFunctionGifts || !setCheckedFunctionGifts) return null\n\n const { title, freeLabel, giftItems = [] } = freeGift\n const { tooltip, getTooltipProps } = useFollowTooltip()\n\n const isMultiple = freeGift.mode === 'multiple'\n\n if (!giftItems.length) return null\n\n const isChecked = (gift: FunctionFreeGiftItem): boolean => {\n return checkedFunctionGifts?.has(String(gift.id)) ?? false\n }\n\n const handleToggle = (gift: FunctionFreeGiftItem) => {\n const giftId = String(gift.id)\n setCheckedFunctionGifts?.(prev => {\n const next = new Set(prev)\n const alreadyChecked = next.has(giftId)\n\n if (isMultiple) {\n alreadyChecked ? next.delete(giftId) : next.add(giftId)\n const nextItems = giftItems.filter(g => next.has(String(g.id)))\n freeGift.onCheckedChange?.(nextItems)\n } else {\n next.clear()\n if (!alreadyChecked) {\n next.add(giftId)\n }\n freeGift.onCheckedChange?.(alreadyChecked ? undefined : gift)\n }\n return next\n })\n }\n\n return (\n <div className={cn('ipc-product-detail-free-gift')}>\n <Text className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\" html={title} />\n <div className=\"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n {giftItems.map(gift => {\n const checked = isChecked(gift)\n return (\n <div\n key={gift.id}\n className={cn(\n 'rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold',\n { 'border-brand': checked }\n )}\n >\n <Checkbox\n onCheckedChange={() => handleToggle(gift)}\n size=\"lg\"\n className={cn('rounded-full border-2 border-[#E4E5E6]', {\n 'border-brand-0 data-[state=checked]:bg-brand-0': checked,\n })}\n id={String(gift.id)}\n checked={checked}\n value={String(gift.id)}\n />\n <label\n htmlFor={String(gift.id)}\n className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-4 lg-desktop:py-6\"\n >\n <div className=\"flex items-center gap-2\">\n <Picture source={gift.imageUrl} className=\"size-12 shrink-0\" imgClassName=\"h-full\" />\n <Text\n {...getTooltipProps(gift.title)}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n html={gift.title}\n />\n <FollowTooltip {...tooltip} />\n </div>\n <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n {freeLabel && (\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold !leading-[1.2]\"\n html={freeLabel}\n />\n )}\n {gift.comparePrice && (\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through !leading-[1.2]\"\n html={gift.comparePrice}\n />\n )}\n </div>\n </label>\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nProductFunctionFreeGift.displayName = 'ProductFunctionFreeGift'\n\nexport default withLayout(ProductFunctionFreeGift)\nexport type { ProductFunctionFreeGiftProps, FunctionFreeGiftItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+CM,IAAAI,EAAA,6BA/CNC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAA2B,8CAC3BC,EAAgD,iDAEhDC,EAAqC,6CAErC,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,iBAAkBC,EAAU,qBAAAC,EAAsB,wBAAAC,CAAwB,KAAI,wBAAqB,EAG3G,GADI,CAACF,GACD,CAACC,GAAwB,CAACC,EAAyB,OAAO,KAE9D,KAAM,CAAE,MAAAC,EAAO,UAAAC,EAAW,UAAAC,EAAY,CAAC,CAAE,EAAIL,EACvC,CAAE,QAAAM,EAAS,gBAAAC,CAAgB,KAAI,oBAAiB,EAEhDC,EAAaR,EAAS,OAAS,WAErC,GAAI,CAACK,EAAU,OAAQ,OAAO,KAE9B,MAAMI,EAAaC,GACVT,GAAsB,IAAI,OAAOS,EAAK,EAAE,CAAC,GAAK,GAGjDC,EAAgBD,GAA+B,CACnD,MAAME,EAAS,OAAOF,EAAK,EAAE,EAC7BR,IAA0BW,GAAQ,CAChC,MAAMC,EAAO,IAAI,IAAID,CAAI,EACnBE,EAAiBD,EAAK,IAAIF,CAAM,EAEtC,GAAIJ,EAAY,CACdO,EAAiBD,EAAK,OAAOF,CAAM,EAAIE,EAAK,IAAIF,CAAM,EACtD,MAAMI,EAAYX,EAAU,OAAOY,GAAKH,EAAK,IAAI,OAAOG,EAAE,EAAE,CAAC,CAAC,EAC9DjB,EAAS,kBAAkBgB,CAAS,CACtC,MACEF,EAAK,MAAM,EACNC,GACHD,EAAK,IAAIF,CAAM,EAEjBZ,EAAS,kBAAkBe,EAAiB,OAAYL,CAAI,EAE9D,OAAOI,CACT,CAAC,CACH,EAEA,SACE,QAAC,OAAI,aAAW,MAAG,8BAA8B,EAC/C,oBAAC,QAAK,UAAU,6DAA6D,KAAMX,EAAO,KAC1F,OAAC,OAAI,UAAU,uFACZ,SAAAE,EAAU,IAAIK,GAAQ,CACrB,MAAMQ,EAAUT,EAAUC,CAAI,EAC9B,SACE,QAAC,OAEC,aAAW,MACT,mHACA,CAAE,eAAgBQ,CAAQ,CAC5B,EAEA,oBAAC,YACC,gBAAiB,IAAMP,EAAaD,CAAI,EACxC,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,iDAAkDQ,CACpD,CAAC,EACD,GAAI,OAAOR,EAAK,EAAE,EAClB,QAASQ,EACT,MAAO,OAAOR,EAAK,EAAE,EACvB,KACA,QAAC,SACC,QAAS,OAAOA,EAAK,EAAE,EACvB,UAAU,qFAEV,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,SAAU,UAAU,mBAAmB,aAAa,SAAS,KACnF,OAAC,QACE,GAAGH,EAAgBG,EAAK,KAAK,EAC9B,UAAU,2EACV,KAAMA,EAAK,MACb,KACA,OAAC,iBAAe,GAAGJ,EAAS,GAC9B,KACA,QAAC,OAAI,UAAU,4DACZ,UAAAF,MACC,OAAC,QACC,UAAU,4EACV,KAAMA,EACR,EAEDM,EAAK,iBACJ,OAAC,QACC,UAAU,wGACV,KAAMA,EAAK,aACb,GAEJ,GACF,IA3CKA,EAAK,EA4CZ,CAEJ,CAAC,EACH,GACF,CAEJ,EAEAX,EAAwB,YAAc,0BAEtC,IAAOR,KAAQ,cAAWQ,CAAuB",
|
|
6
|
+
"names": ["ProductFunctionFreeGift_exports", "__export", "ProductFunctionFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_Styles", "import_useFollowTooltip", "import_BizProductProvider", "ProductFunctionFreeGift", "freeGift", "checkedFunctionGifts", "setCheckedFunctionGifts", "title", "freeLabel", "giftItems", "tooltip", "getTooltipProps", "isMultiple", "isChecked", "gift", "handleToggle", "giftId", "prev", "next", "alreadyChecked", "nextItems", "g", "checked"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 单个买赠礼品项
|
|
3
|
+
*
|
|
4
|
+
* 由业务端将 API reward_list 映射而来,所有展示字段已处理为字符串,
|
|
5
|
+
* 组件内部不再做任何格式化计算。
|
|
6
|
+
*/
|
|
7
|
+
export interface FunctionFreeGiftItem {
|
|
8
|
+
/**
|
|
9
|
+
* 礼品唯一标识符,用于 checkbox 选中判断
|
|
10
|
+
* 通常对应 API 中的 variant_id
|
|
11
|
+
*/
|
|
12
|
+
id: string | number;
|
|
13
|
+
/** 商品标题,业务端从商品数据中获取后传入 */
|
|
14
|
+
title: string;
|
|
15
|
+
/** 商品主图 URL(可选,业务端提供) */
|
|
16
|
+
imageUrl?: string;
|
|
17
|
+
/**
|
|
18
|
+
* 格式化后的划线原价字符串(可选)
|
|
19
|
+
* 仅在有原价需要展示时传入,组件会显示划线样式
|
|
20
|
+
* 示例:'$89.99'、'€79,99'
|
|
21
|
+
*/
|
|
22
|
+
comparePrice?: string;
|
|
23
|
+
}
|
|
24
|
+
interface ProductFunctionFreeGiftBaseProps {
|
|
25
|
+
/** 区块标题文案,支持 HTML */
|
|
26
|
+
title?: string;
|
|
27
|
+
/**
|
|
28
|
+
* "FREE" 标签文案,所有礼品共享同一个标签
|
|
29
|
+
* 示例:'FREE'、'Gift'、'Free Gift'
|
|
30
|
+
* 来源:API discount_label.cart_checkout_label
|
|
31
|
+
*/
|
|
32
|
+
freeLabel?: string;
|
|
33
|
+
/**
|
|
34
|
+
* 礼品列表
|
|
35
|
+
* 业务端负责:过滤可用项(availableForSale)、映射数据结构
|
|
36
|
+
* 组件直接渲染,不做额外过滤
|
|
37
|
+
*/
|
|
38
|
+
giftItems?: FunctionFreeGiftItem[];
|
|
39
|
+
className?: string;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* 单选模式(默认)
|
|
43
|
+
* 同一时刻最多选中一个礼品;再次点击已选中项则取消选中。
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```tsx
|
|
47
|
+
* <ProductFreeGift
|
|
48
|
+
* title="Choose a free gift"
|
|
49
|
+
* freeLabel="FREE"
|
|
50
|
+
* giftItems={items}
|
|
51
|
+
* checkedId={selectedId}
|
|
52
|
+
* onCheckedChange={(gift) => setSelectedId(gift?.id)}
|
|
53
|
+
* />
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
interface ProductFunctionFreeGiftSingleProps extends ProductFunctionFreeGiftBaseProps {
|
|
57
|
+
mode?: 'single';
|
|
58
|
+
/** 当前选中的礼品 id;undefined 表示无选中 */
|
|
59
|
+
checkedId?: string | number;
|
|
60
|
+
/** 选中时返回 FreeGiftItem,取消选中时返回 undefined */
|
|
61
|
+
onCheckedChange?: (gift?: FunctionFreeGiftItem) => void;
|
|
62
|
+
checkedIds?: never;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* 多选模式
|
|
66
|
+
* 可同时选中多个礼品,回调始终返回当前全部已选项数组。
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```tsx
|
|
70
|
+
* <ProductFreeGift
|
|
71
|
+
* mode="multiple"
|
|
72
|
+
* title="Choose your free gifts"
|
|
73
|
+
* freeLabel="FREE"
|
|
74
|
+
* giftItems={items}
|
|
75
|
+
* checkedIds={selectedIds}
|
|
76
|
+
* onCheckedChange={(gifts) => setSelectedIds(gifts.map(g => g.id))}
|
|
77
|
+
* />
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
interface ProductFunctionFreeGiftMultipleProps extends ProductFunctionFreeGiftBaseProps {
|
|
81
|
+
mode: 'multiple';
|
|
82
|
+
/** 当前选中的礼品 id 数组;空数组表示无选中 */
|
|
83
|
+
checkedIds?: (string | number)[];
|
|
84
|
+
/** 每次勾选/取消后返回当前全部已选的 FreeGiftItem 数组 */
|
|
85
|
+
onCheckedChange?: (gifts: FunctionFreeGiftItem[]) => void;
|
|
86
|
+
checkedId?: never;
|
|
87
|
+
}
|
|
88
|
+
export type ProductFunctionFreeGiftProps = ProductFunctionFreeGiftSingleProps | ProductFunctionFreeGiftMultipleProps;
|
|
89
|
+
export {};
|
|
90
|
+
/**
|
|
91
|
+
* 业务端 free gift rule API 数据结构
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```json
|
|
95
|
+
* {
|
|
96
|
+
* "rule_id": 1598,
|
|
97
|
+
* "rule_type": 1,
|
|
98
|
+
* "discount_label": {
|
|
99
|
+
* "cart_checkout_label": "Gift",
|
|
100
|
+
* "product_label": "",
|
|
101
|
+
* "sold_out_label": ""
|
|
102
|
+
* },
|
|
103
|
+
* "frontend_labels": null,
|
|
104
|
+
* "apply_unit": 1,
|
|
105
|
+
* "discount_combinations": { ... },
|
|
106
|
+
* "gift_type": 1,
|
|
107
|
+
* "reward_list": [
|
|
108
|
+
* {
|
|
109
|
+
* "get_unit": 1,
|
|
110
|
+
* "variant_list": [{ "variant_id": "44302515404975", "sku": "A3062Z11-97", "handle": "a3062z11-97-travel-case" }]
|
|
111
|
+
* }
|
|
112
|
+
* ]
|
|
113
|
+
* }
|
|
114
|
+
* ```
|
|
115
|
+
*/
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var d=(t,e,c,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of s(e))!u.call(t,i)&&i!==c&&n(t,i,{get:()=>e[i],enumerable:!(r=o(e,i))||r.enumerable});return t};var F=t=>d(n({},"__esModule",{value:!0}),t);var f={};module.exports=F(f);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFunctionFreeGift/types.ts"],
|
|
4
|
+
"sourcesContent": ["\n// \u2500\u2500\u2500 \u7EC4\u4EF6\u6D88\u8D39\u7C7B\u578B \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * \u5355\u4E2A\u4E70\u8D60\u793C\u54C1\u9879\n *\n * \u7531\u4E1A\u52A1\u7AEF\u5C06 API reward_list \u6620\u5C04\u800C\u6765\uFF0C\u6240\u6709\u5C55\u793A\u5B57\u6BB5\u5DF2\u5904\u7406\u4E3A\u5B57\u7B26\u4E32\uFF0C\n * \u7EC4\u4EF6\u5185\u90E8\u4E0D\u518D\u505A\u4EFB\u4F55\u683C\u5F0F\u5316\u8BA1\u7B97\u3002\n */\nexport interface FunctionFreeGiftItem {\n /**\n * \u793C\u54C1\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u7528\u4E8E checkbox \u9009\u4E2D\u5224\u65AD\n * \u901A\u5E38\u5BF9\u5E94 API \u4E2D\u7684 variant_id\n */\n id: string | number\n\n /** \u5546\u54C1\u6807\u9898\uFF0C\u4E1A\u52A1\u7AEF\u4ECE\u5546\u54C1\u6570\u636E\u4E2D\u83B7\u53D6\u540E\u4F20\u5165 */\n title: string\n\n /** \u5546\u54C1\u4E3B\u56FE URL\uFF08\u53EF\u9009\uFF0C\u4E1A\u52A1\u7AEF\u63D0\u4F9B\uFF09 */\n imageUrl?: string\n\n /**\n * \u683C\u5F0F\u5316\u540E\u7684\u5212\u7EBF\u539F\u4EF7\u5B57\u7B26\u4E32\uFF08\u53EF\u9009\uFF09\n * \u4EC5\u5728\u6709\u539F\u4EF7\u9700\u8981\u5C55\u793A\u65F6\u4F20\u5165\uFF0C\u7EC4\u4EF6\u4F1A\u663E\u793A\u5212\u7EBF\u6837\u5F0F\n * \u793A\u4F8B\uFF1A'$89.99'\u3001'\u20AC79,99'\n */\n comparePrice?: string\n}\n\ninterface ProductFunctionFreeGiftBaseProps {\n /** \u533A\u5757\u6807\u9898\u6587\u6848\uFF0C\u652F\u6301 HTML */\n title?: string\n\n /**\n * \"FREE\" \u6807\u7B7E\u6587\u6848\uFF0C\u6240\u6709\u793C\u54C1\u5171\u4EAB\u540C\u4E00\u4E2A\u6807\u7B7E\n * \u793A\u4F8B\uFF1A'FREE'\u3001'Gift'\u3001'Free Gift'\n * \u6765\u6E90\uFF1AAPI discount_label.cart_checkout_label\n */\n freeLabel?: string\n\n /**\n * \u793C\u54C1\u5217\u8868\n * \u4E1A\u52A1\u7AEF\u8D1F\u8D23\uFF1A\u8FC7\u6EE4\u53EF\u7528\u9879\uFF08availableForSale\uFF09\u3001\u6620\u5C04\u6570\u636E\u7ED3\u6784\n * \u7EC4\u4EF6\u76F4\u63A5\u6E32\u67D3\uFF0C\u4E0D\u505A\u989D\u5916\u8FC7\u6EE4\n */\n giftItems?: FunctionFreeGiftItem[]\n\n className?: string\n}\n\n/**\n * \u5355\u9009\u6A21\u5F0F\uFF08\u9ED8\u8BA4\uFF09\n * \u540C\u4E00\u65F6\u523B\u6700\u591A\u9009\u4E2D\u4E00\u4E2A\u793C\u54C1\uFF1B\u518D\u6B21\u70B9\u51FB\u5DF2\u9009\u4E2D\u9879\u5219\u53D6\u6D88\u9009\u4E2D\u3002\n *\n * @example\n * ```tsx\n * <ProductFreeGift\n * title=\"Choose a free gift\"\n * freeLabel=\"FREE\"\n * giftItems={items}\n * checkedId={selectedId}\n * onCheckedChange={(gift) => setSelectedId(gift?.id)}\n * />\n * ```\n */\ninterface ProductFunctionFreeGiftSingleProps extends ProductFunctionFreeGiftBaseProps {\n mode?: 'single'\n /** \u5F53\u524D\u9009\u4E2D\u7684\u793C\u54C1 id\uFF1Bundefined \u8868\u793A\u65E0\u9009\u4E2D */\n checkedId?: string | number\n /** \u9009\u4E2D\u65F6\u8FD4\u56DE FreeGiftItem\uFF0C\u53D6\u6D88\u9009\u4E2D\u65F6\u8FD4\u56DE undefined */\n onCheckedChange?: (gift?: FunctionFreeGiftItem) => void\n checkedIds?: never\n}\n\n/**\n * \u591A\u9009\u6A21\u5F0F\n * \u53EF\u540C\u65F6\u9009\u4E2D\u591A\u4E2A\u793C\u54C1\uFF0C\u56DE\u8C03\u59CB\u7EC8\u8FD4\u56DE\u5F53\u524D\u5168\u90E8\u5DF2\u9009\u9879\u6570\u7EC4\u3002\n *\n * @example\n * ```tsx\n * <ProductFreeGift\n * mode=\"multiple\"\n * title=\"Choose your free gifts\"\n * freeLabel=\"FREE\"\n * giftItems={items}\n * checkedIds={selectedIds}\n * onCheckedChange={(gifts) => setSelectedIds(gifts.map(g => g.id))}\n * />\n * ```\n */\ninterface ProductFunctionFreeGiftMultipleProps extends ProductFunctionFreeGiftBaseProps {\n mode: 'multiple'\n /** \u5F53\u524D\u9009\u4E2D\u7684\u793C\u54C1 id \u6570\u7EC4\uFF1B\u7A7A\u6570\u7EC4\u8868\u793A\u65E0\u9009\u4E2D */\n checkedIds?: (string | number)[]\n /** \u6BCF\u6B21\u52FE\u9009/\u53D6\u6D88\u540E\u8FD4\u56DE\u5F53\u524D\u5168\u90E8\u5DF2\u9009\u7684 FreeGiftItem \u6570\u7EC4 */\n onCheckedChange?: (gifts: FunctionFreeGiftItem[]) => void\n checkedId?: never\n}\n\nexport type ProductFunctionFreeGiftProps = ProductFunctionFreeGiftSingleProps | ProductFunctionFreeGiftMultipleProps\n\n/**\n * \u4E1A\u52A1\u7AEF free gift rule API \u6570\u636E\u7ED3\u6784\n *\n * @example\n * ```json\n * {\n * \"rule_id\": 1598,\n * \"rule_type\": 1,\n * \"discount_label\": {\n * \"cart_checkout_label\": \"Gift\",\n * \"product_label\": \"\",\n * \"sold_out_label\": \"\"\n * },\n * \"frontend_labels\": null,\n * \"apply_unit\": 1,\n * \"discount_combinations\": { ... },\n * \"gift_type\": 1,\n * \"reward_list\": [\n * {\n * \"get_unit\": 1,\n * \"variant_list\": [{ \"variant_id\": \"44302515404975\", \"sku\": \"A3062Z11-97\", \"handle\": \"a3062z11-97-travel-case\" }]\n * }\n * ]\n * }\n * ```\n */\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var re=Object.create;var T=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(l,t)=>{for(var s in t)T(l,s,{get:t[s],enumerable:!0})},W=(l,t,s,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of se(t))!pe.call(l,n)&&n!==s&&T(l,n,{get:()=>t[n],enumerable:!(u=ce(t,n))||u.enumerable});return l};var q=(l,t,s)=>(s=l!=null?re(de(l)):{},W(t||!l||!l.__esModule?T(s,"default",{value:l,enumerable:!0}):s,l)),me=l=>W(T({},"__esModule",{value:!0}),l);var ve={};ue(ve,{default:()=>ge});module.exports=me(ve);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),K=require("../../../hooks/useComponentData.js"),v=require("react"),g=require("../../../utils/index.js"),S=require("../../../../AiuiProvider/index.js"),$=q(require("decimal.js")),U=require("../../../utils/textFormat.js"),X=require("../../../../../shared/Styles.js"),Y=require("../../../../../components/index.js"),Z=require("../../../../../shared/track.js"),ee=q(require("../../CartActionButtons/index.js"));const xe=()=>{const{locale:l="us",copyWriting:t,trackingData:s}=(0,S.useAiuiContext)(),{product:u,variant:n,finalPrice:x,comparePrice:b,coupon:k,selectedOptions:p,selectedVariants:r,totalSavings:F,onAddToCart:w,onBuyNow:E,savingDetail:f,checkedBundle:N,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:C,setSavingDetail:P,addToCartLoading:j,buyNowLoading:te,notifyMeMode:ae,onNotifyMeClick:oe,profile:_,addOrder:L,setAddOrder:D}=(0,B.useBizProductContext)(),G=s?.showComparePrice??!0,z=(0,K.useComponentData)("ProductSummary")??{},[A]=r,I=(0,v.useMemo)(()=>{const c=N?.variants.find(y=>y.variant.sku===A?.sku),i=new $.default(A?.price?.amount||0).minus(c?.price||A?.price?.amount).toNumber();let m=new $.default(A?.price?.amount||0);_?.email&&(m=m.minus(f?.member||0));const h=m.minus(f?.coupon).minus(i).toNumber();return parseFloat(h.toFixed(2))},[A,N,_,f?.member,f?.coupon]),{bundleVariant:V,giftVariant:M,exchangeVariant:R}=fe()||{},[d,O]=(0,v.useState)();(0,v.useEffect)(()=>{O({bundle:o.bundle?.value?void 0:V,gift:o.gift?.value?void 0:M,exchange:o.exchange?.value?void 0:R})},[V,M,R,o]);const ne=(0,v.useMemo)(()=>{const c=[];return L&&L.forEach((i,m)=>{o[i]?.value&&c.push({type:i,key:`${i}-${m}`})}),c},[L,o]),le=(0,v.useMemo)(()=>{const c=p?.quantity||"",i=p?.color||p?.colour||p?.couleur||"";return`${c&&i?`${c} | ${i}`:c||i}`},[p?.quantity,p?.color,p?.colour,p?.couleur]),ie=(0,v.useMemo)(()=>{const{image_1920:c,image_1440:i,image_1024:m,image_768:h,image_390:y}=z?.thumbnail||{};return(z?.thumbnail?`${c} 1920, ${i} 1440, ${m} 1024, ${h} 768, ${y} 390`:n.image?.url)||n.image?.url},[z?.thumbnail,n.image?.url]);return n.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,e.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,e.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,e.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,e.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:z?.readyWant?.replace?.("{title}",u?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:ie,className:"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),(0,e.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(Y.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,Z.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:n.image?.url||u?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:u.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:le})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:I,currencyCode:n.price.currencyCode,locale:l})}),G&&I<n?.price?.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:n?.price?.amount,currencyCode:n.price.currencyCode,locale:l})})]})]})}),ne.map(({type:c,key:i})=>c==="gift"&&o?.gift?.value?(0,e.jsx)(Q,{giftOperation:m=>{C?.({...o,gift:{value:void 0,canOperate:!0}}),O?.({...d,gift:m}),D?.(h=>h.filter(y=>y!=="gift"))},status:!!o?.gift,gift:o?.gift?.value,canOperate:o?.gift?.canOperate},i):c==="bundle"&&o?.bundle?.value?(0,e.jsx)(J,{bundleOperation:m=>{C?.({...o,bundle:{value:void 0,canOperate:!0}}),O?.({...d,bundle:m}),D?.(h=>h.filter(y=>y!=="bundle"))},status:!!o?.bundle,bundleListItem:o?.bundle?.value,canOperate:o?.bundle?.canOperate},i):c==="exchange"&&o?.exchange?.value?(0,e.jsx)(H,{exchangeOperation:m=>{C?.({...o,exchange:{value:void 0,canOperate:!0}}),O?.({...d,exchange:m}),D?.(h=>h.filter(y=>y!=="exchange"))},status:!!o?.exchange,canOperate:o?.exchange?.canOperate,exchange:o?.exchange?.value},i):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"laptop-md:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[18px] text-sm font-bold",html:z?.recommendBuy}),(0,e.jsxs)("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(H,{exchangeOperation:c=>{C?.({...o,exchange:{value:c,canOperate:!0}}),O?.({...d,exchange:void 0}),D?.(i=>[...i,"exchange"])},canOperate:o?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(J,{bundleOperation:c=>{P?.({...f,exchangePurchase:0}),C?.({...o,bundle:{value:c,canOperate:!0}}),O?.({...d,bundle:void 0}),D?.(i=>[...i,"bundle"])},canOperate:o?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(Q,{giftOperation:c=>{C?.({...o,gift:{value:c,canOperate:!0}}),O?.({...d,gift:void 0}),D?.(i=>[...i,"gift"])},canOperate:o?.gift?.canOperate,status:!d?.gift,gift:d?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${(0,U.replaceTemplate)(t?.totalPrice||"",{amount:(0,g.formatPrice)({amount:parseFloat(x.toFixed(2)),currencyCode:n.price.currencyCode,locale:l})})}`}),G&&F>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:b,currencyCode:n.price.currencyCode,locale:l})}),(0,e.jsx)("div",{className:"mt-4 flex justify-end gap-3",children:(0,e.jsx)(ee.default,{mode:ae,availableForSale:n.availableForSale,addToCartText:t?.addToCart,buyNowText:t?.shopNow,addToCartLoading:j,buyNowLoading:te,addToCartClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",buyNowClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onAddToCart:w,onBuyNow:E,onNotifyMeClick:oe,notifyMeText:t?.notifyMe,notifyMeClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2"})})]})]})]})})}):null},fe=()=>{const{bundle:l,variant:t,checkedBundle:s,freeGift:u,checkedGift:n,exchangePurchase:x,checkedExchangePurchase:b}=(0,B.useBizProductContext)();let k,p,r;const{bundleList:F}=l||{},{giftList:w=[]}=u||{},{giftList:E=[]}=x||{},f=F?.filter(P=>P.variants.slice(1,P.variants.length).every(j=>j.variant.availableForSale))||[],[N]=f;k=s||N;const[o]=w?.filter(P=>P.availableForSale)??[];p=n||o;const[C]=E?.filter(P=>P.availableForSale)??[];return r=b||C,{bundleVariant:k,giftVariant:p,exchangeVariant:r}},J=({bundleOperation:l,bundleListItem:t,canOperate:s,status:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{variant:b,setCheckedBundle:k}=(0,B.useBizProductContext)(),p=t?.variants.filter(r=>r.variant.sku!==b.sku);return(0,e.jsx)("div",{className:"",children:p?.map(r=>(0,e.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:r?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsx)("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:r.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:r?.price||0,locale:n,currencyCode:r.variant?.price?.currencyCode||""})}),r.price<r.variant.price.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:r.variant.price.amount||0,locale:n,currencyCode:r.variant?.price?.currencyCode||""})})]}),s&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(u?void 0:t),l?.(t)},className:"size-auto shrink-0 underline",children:u?x?.remove:x?.add})]})]},r.variant.id))})},Q=({giftOperation:l,gift:t,status:s,canOperate:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{freeGift:b,setCheckedGift:k}=(0,B.useBizProductContext)(),{freeLabel:p}=b||{},{options:r}=t||{},F=(0,v.useMemo)(()=>{const w=r?.find(o=>o.name==="color"||o.name==="colour"||o.name==="couleur")||{},E=r?.find(o=>o.name==="quantity")||{},f=w?w.values?.[0]?.label:"",N=E?E.values?.[0]?.label:"";return`${f&&N?N+" | "+f:N||f} | ${p}`},[p,r]);return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:F})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:p}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:t.price.amount,locale:n,currencyCode:t.price.currencyCode})})]}),u&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(s?void 0:t),l(t)},className:"size-auto shrink-0 underline",children:s?x?.remove:x?.add})]})]})},H=({exchangeOperation:l,exchange:t,canOperate:s,status:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{setCheckedExchangePurchase:b}=(0,B.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:t.finalPrice?.amount||0,locale:n,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:t.price?.amount||0,locale:n,currencyCode:t.price.currencyCode})})]}),s&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(u?void 0:t),l(t)},className:"size-auto shrink-0 underline",children:u?x?.remove:x?.add})]})]})};var ge=(0,X.withLayout)(xe);
|
|
1
|
+
"use strict";var at=Object.create;var w=Object.defineProperty;var ot=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var it=Object.getPrototypeOf,rt=Object.prototype.hasOwnProperty;var nt=(l,e)=>{for(var s in e)w(l,s,{get:e[s],enumerable:!0})},M=(l,e,s,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of lt(e))!rt.call(l,o)&&o!==s&&w(l,o,{get:()=>e[o],enumerable:!(p=ot(e,o))||p.enumerable});return l};var V=(l,e,s)=>(s=l!=null?at(it(l)):{},M(e||!l||!l.__esModule?w(s,"default",{value:l,enumerable:!0}):s,l)),st=l=>M(w({},"__esModule",{value:!0}),l);var dt={};nt(dt,{default:()=>mt});module.exports=st(dt);var t=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),k=require("../../../BizProductProvider.js"),I=require("../../../hooks/useComponentData.js"),m=require("react"),x=require("../../../utils/index.js"),B=require("../../../../AiuiProvider/index.js"),R=V(require("decimal.js")),q=require("../../../utils/textFormat.js"),W=require("../../../../../shared/Styles.js"),J=require("../../../../../components/index.js"),Q=require("../../../../../shared/track.js"),H=V(require("../../CartActionButtons/index.js"));const ct=()=>{const{locale:l="us",copyWriting:e,trackingData:s}=(0,B.useAiuiContext)(),{product:p,variant:o,finalPrice:u,comparePrice:g,coupon:h,selectedOptions:c,selectedVariants:v,totalSavings:D,onAddToCart:C,onBuyNow:P,savingDetail:d,checkedBundle:b,joinedRecommendBuyProducts:i,setJoinedRecommendBuyProducts:$,setSavingDetail:ut,addToCartLoading:K,buyNowLoading:U,notifyMeMode:X,onNotifyMeClick:Y,profile:A,addOrder:O,setAddOrder:S}=(0,k.useBizProductContext)(),_=s?.showComparePrice??!0,y=(0,I.useComponentData)("ProductSummary")??{},[G]=v,j=(0,m.useMemo)(()=>{let r=new R.default(G?.price?.amount||0);A?.email&&(r=r.minus(d?.member||0));const n=r.minus(d?.coupon).toNumber();return parseFloat(n.toFixed(2))},[G,b,A,d?.member,d?.coupon]),{giftVariant:z}=pt()||{},[f,E]=(0,m.useState)();(0,m.useEffect)(()=>{E({gift:i.gift?.value?void 0:z})},[z,i]);const Z=(0,m.useMemo)(()=>{const r=[];return O&&O.forEach((n,N)=>{i[n]?.value&&r.push({type:n,key:`${n}-${N}`})}),r},[O,i]),tt=(0,m.useMemo)(()=>{const r=c?.quantity||"",n=c?.color||c?.colour||c?.couleur||"";return`${r&&n?`${r} | ${n}`:r||n}`},[c?.quantity,c?.color,c?.colour,c?.couleur]),et=(0,m.useMemo)(()=>{const{image_1920:r,image_1440:n,image_1024:N,image_768:F,image_390:T}=y?.thumbnail||{};return(y?.thumbnail?`${r} 1920, ${n} 1440, ${N} 1024, ${F} 768, ${T} 390`:o.image?.url)||o.image?.url},[y?.thumbnail,o.image?.url]);return o.availableForSale?(0,t.jsx)("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,t.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,t.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,t.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,t.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:y?.readyWant?.replace?.("{title}",p?.title)}),(0,t.jsx)("div",{className:"",children:(0,t.jsx)(a.Picture,{source:et,className:"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),(0,t.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,t.jsxs)("div",{children:[(0,t.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,t.jsx)(J.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,Q.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${o.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,t.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[(0,t.jsx)(a.Picture,{source:o.image?.url||p?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,t.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,t.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:p.title}),(0,t.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:tt})]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,x.formatPrice)({amount:j,currencyCode:o.price.currencyCode,locale:l})}),_&&j<o?.price?.amount&&(0,t.jsx)(a.Text,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,x.formatPrice)({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:l})})]})]})}),Z.map(({type:r,key:n})=>r==="gift"&&i?.gift?.value?(0,t.jsx)(L,{giftOperation:N=>{$?.({...i,gift:{value:void 0,canOperate:!0}}),E?.({...f,gift:N}),S?.(F=>F.filter(T=>T!=="gift"))},status:!!i?.gift,gift:i?.gift?.value,canOperate:i?.gift?.canOperate},n):null)]}),f?.gift&&(0,t.jsxs)("div",{className:"laptop-md:mt-8 mt-6",children:[(0,t.jsx)(a.Text,{className:"laptop-md:text-[18px] text-sm font-bold",html:y?.recommendBuy}),(0,t.jsx)("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:f?.gift&&(0,t.jsx)(L,{giftOperation:r=>{$?.({...i,gift:{value:r,canOperate:!0}}),E?.({...f,gift:void 0}),S?.(n=>[...n,"gift"])},canOperate:i?.gift?.canOperate,status:!f?.gift,gift:f?.gift})})]})]}),(0,t.jsxs)("div",{className:"text-right",children:[(0,t.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${(0,q.replaceTemplate)(e?.totalPrice||"",{amount:(0,x.formatPrice)({amount:parseFloat(u.toFixed(2)),currencyCode:o.price.currencyCode,locale:l})})}`}),_&&D>0&&(0,t.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,x.formatPrice)({amount:g,currencyCode:o.price.currencyCode,locale:l})}),(0,t.jsx)("div",{className:"mt-4 flex justify-end gap-3",children:(0,t.jsx)(H.default,{mode:X,availableForSale:o.availableForSale,addToCartText:e?.addToCart,buyNowText:e?.shopNow,addToCartLoading:K,buyNowLoading:U,addToCartClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",buyNowClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onAddToCart:C,onBuyNow:P,onNotifyMeClick:Y,notifyMeText:e?.notifyMe,notifyMeClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2"})})]})]})]})})}):null},pt=()=>{const{bundle:l,variant:e,checkedBundle:s,freeGift:p,checkedGift:o}=(0,k.useBizProductContext)();let u;const{giftList:g=[]}=p||{},[h]=g?.filter(c=>c.availableForSale)??[];return u=o||h,{giftVariant:u}},L=({giftOperation:l,gift:e,status:s,canOperate:p})=>{const{locale:o="us",copyWriting:u}=(0,B.useAiuiContext)(),{freeGift:g,setCheckedGift:h}=(0,k.useBizProductContext)(),{freeLabel:c}=g||{},{options:v}=e||{},D=(0,m.useMemo)(()=>{const C=v?.find(i=>i.name==="color"||i.name==="colour"||i.name==="couleur")||{},P=v?.find(i=>i.name==="quantity")||{},d=C?C.values?.[0]?.label:"",b=P?P.values?.[0]?.label:"";return`${d&&b?b+" | "+d:b||d} | ${c}`},[c,v]);return(0,t.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[(0,t.jsx)(a.Picture,{source:e?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,t.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,t.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:e?.product?.title}),(0,t.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),(0,t.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!e&&(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:c}),(0,t.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,x.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]}),p&&(0,t.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{h?.(s?void 0:e),l(e)},className:"size-auto shrink-0 underline",children:s?u?.remove:u?.add})]})]})};var mt=(0,W.withLayout)(ct);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useComponentData } from '../../../hooks/useComponentData.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { BundleListItem, ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting, trackingData } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n notifyMeMode,\n onNotifyMeClick,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const productSummaryData = useComponentData('ProductSummary') ?? {}\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n return parseFloat(finalPrice.toFixed(2))\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const variantImage = useMemo(() => {\n const { image_1920, image_1440, image_1024, image_768, image_390 } = productSummaryData?.thumbnail || {}\n const responsiveSource = productSummaryData?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return responsiveSource || variant.image?.url\n }, [productSummaryData?.thumbnail, variant.image?.url])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variantImage}\n className=\"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]\"\n imgClassName=\"object-cover h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {showComparePrice && summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n return (\n <ProductBundleSummary\n key={key}\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )\n }\n if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n return (\n <ProductExchangeSummary\n key={key}\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\n )\n }\n return null\n })}\n </div>\n {(initialRecommendBuyProducts?.bundle ||\n initialRecommendBuyProducts?.gift ||\n initialRecommendBuyProducts?.exchange) && (\n <div className=\"laptop-md:mt-8 mt-6\">\n <Text className=\"laptop-md:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"laptop-md:gap-4 mt-4 flex flex-col gap-6\">\n {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: parseFloat(finalPrice.toFixed(2)), currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {showComparePrice && totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <CartActionButtons\n mode={notifyMeMode}\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart}\n buyNowText={copyWriting?.shopNow}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n addToCartClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n buyNowClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n onNotifyMeClick={onNotifyMeClick}\n notifyMeText={copyWriting?.notifyMe}\n notifyMeClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n />\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n useBizProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n let exchangeVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleListItem,\n canOperate,\n status,\n}: {\n bundleOperation: (bundle?: BundleListItem) => void\n bundleListItem?: BundleListItem\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, setCheckedBundle } = useBizProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-1\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: bundleVariant?.price || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n )}\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedBundle?.(status ? undefined : bundleListItem)\n bundleOperation?.(bundleListItem)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"laptop-md:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductExchangeSummary = ({\n exchangeOperation,\n exchange,\n canOperate,\n status,\n}: {\n exchangeOperation: (exchange?: ProductVariant) => void\n exchange?: ProductVariant & { finalPrice?: ProductPrice }\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={exchange?.product?.title}\n />\n <Text className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAkHU,IAAAI,EAAA,6BAlHVC,EAA+D,8CAC/DC,EAAqC,0CACrCC,EAAiC,8CACjCC,EAA6C,iBAC7CC,EAA4B,mCAC5BC,EAA+B,6CAE/BC,EAAoB,yBACpBC,EAAgC,wCAChCC,EAA2B,2CAC3BR,EAAiC,8CACjCS,EAAwB,0CACxBC,
|
|
6
|
-
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_useComponentData", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "import_CartActionButtons", "ProductSummary", "locale", "copyWriting", "trackingData", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "notifyMeMode", "onNotifyMeClick", "profile", "addOrder", "setAddOrder", "showComparePrice", "productSummaryData", "currentProductVariant", "summaryFinalPrice", "
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useComponentData } from '../../../hooks/useComponentData.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting, trackingData } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n notifyMeMode,\n onNotifyMeClick,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const productSummaryData = useComponentData('ProductSummary') ?? {}\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n // const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n // const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n // .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n // .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).toNumber()\n return parseFloat(finalPrice.toFixed(2))\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { giftVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n // bundle?: BundleListItem\n gift?: ProductVariant\n // exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n // bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n // exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [giftVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const variantImage = useMemo(() => {\n const { image_1920, image_1440, image_1024, image_768, image_390 } = productSummaryData?.thumbnail || {}\n const responsiveSource = productSummaryData?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return responsiveSource || variant.image?.url\n }, [productSummaryData?.thumbnail, variant.image?.url])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variantImage}\n className=\"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]\"\n imgClassName=\"object-cover h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {showComparePrice && summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n // if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n // return (\n // <ProductBundleSummary\n // key={key}\n // bundleOperation={bundle => {\n // setJoinedRecommendBuyProducts?.({\n // ...joinedRecommendBuyProducts,\n // bundle: {\n // value: undefined,\n // canOperate: true,\n // },\n // })\n // setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n // setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n // }}\n // status={!!joinedRecommendBuyProducts?.bundle}\n // bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n // canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n // />\n // )\n // }\n // if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n // return (\n // <ProductExchangeSummary\n // key={key}\n // exchangeOperation={exchange => {\n // setJoinedRecommendBuyProducts?.({\n // ...joinedRecommendBuyProducts,\n // exchange: {\n // value: undefined,\n // canOperate: true,\n // },\n // })\n // setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n // setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n // }}\n // status={!!joinedRecommendBuyProducts?.exchange}\n // canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n // exchange={joinedRecommendBuyProducts?.exchange?.value}\n // />\n // )\n // }\n return null\n })}\n </div>\n {\n initialRecommendBuyProducts?.gift && (\n <div className=\"laptop-md:mt-8 mt-6\">\n <Text className=\"laptop-md:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"laptop-md:gap-4 mt-4 flex flex-col gap-6\">\n {/* {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )} */}\n {/* {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )} */}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: parseFloat(finalPrice.toFixed(2)), currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {showComparePrice && totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <CartActionButtons\n mode={notifyMeMode}\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart}\n buyNowText={copyWriting?.shopNow}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n addToCartClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n buyNowClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n onNotifyMeClick={onNotifyMeClick}\n notifyMeText={copyWriting?.notifyMe}\n notifyMeClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n />\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift } =\n useBizProductContext()\n// let bundleVariant = undefined\n let giftVariant = undefined\n// let exchangeVariant = undefined\n// const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n// const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n// const availableBundleList =\n// bundleList?.filter(bundle =>\n// bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n// ) || []\n\n// const [firstAvailableBundle] = availableBundleList\n// bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n// const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n// exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { giftVariant }\n}\n\n// const ProductBundleSummary = ({\n// bundleOperation,\n// bundleListItem,\n// canOperate,\n// status,\n// }: {\n// bundleOperation: (bundle?: BundleListItem) => void\n// bundleListItem?: BundleListItem\n// canOperate?: boolean\n// status?: boolean\n// }) => {\n// const { locale = 'us', copyWriting } = useAiuiContext()\n// const { variant, setCheckedBundle } = useBizProductContext()\n// const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n// return (\n// <div className=\"\">\n// {bundleVariants?.map(bundleVariant => {\n// return (\n// <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n// <div className=\"flex items-center gap-4\">\n// <Picture\n// source={bundleVariant?.variant?.image?.url}\n// className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n// />\n// <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n// <Text\n// className=\"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n// html={bundleVariant.variant.product.title}\n// />\n// </div>\n// </div>\n// <div className=\"flex flex-col items-end justify-center gap-1\">\n// {!!bundleListItem && (\n// <div className=\"flex items-center gap-1\">\n// <Text\n// className=\"laptop-md:text-2xl text-base font-bold\"\n// html={formatPrice({\n// amount: bundleVariant?.price || 0,\n// locale,\n// currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n// })}\n// />\n// {bundleVariant.price < bundleVariant.variant.price.amount && (\n// <Text\n// className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n// html={formatPrice({\n// amount: bundleVariant.variant.price.amount || 0,\n// locale,\n// currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n// })}\n// />\n// )}\n// </div>\n// )}\n// {canOperate && (\n// <Button\n// size=\"icon\"\n// variant=\"link\"\n// onClick={() => {\n// setCheckedBundle?.(status ? undefined : bundleListItem)\n// bundleOperation?.(bundleListItem)\n// }}\n// className=\"size-auto shrink-0 underline\"\n// >\n// {status ? copyWriting?.remove : copyWriting?.add}\n// </Button>\n// )}\n// </div>\n// </div>\n// )\n// })}\n// </div>\n// )\n// }\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"laptop-md:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\n// const ProductExchangeSummary = ({\n// exchangeOperation,\n// exchange,\n// canOperate,\n// status,\n// }: {\n// exchangeOperation: (exchange?: ProductVariant) => void\n// exchange?: ProductVariant & { finalPrice?: ProductPrice }\n// canOperate?: boolean\n// status?: boolean\n// }) => {\n// const { locale = 'us', copyWriting } = useAiuiContext()\n// const { setCheckedExchangePurchase } = useBizProductContext()\n\n// return (\n// <div className=\"flex items-center justify-between gap-6\">\n// <div className=\"flex items-center gap-4\">\n// <Picture\n// source={exchange?.image?.url}\n// className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n// />\n// <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n// <Text\n// className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n// html={exchange?.product?.title}\n// />\n// <Text className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n// </div>\n// </div>\n// <div className=\"flex flex-col items-end justify-center gap-2\">\n// {!!exchange && (\n// <div className=\"flex items-center gap-1\">\n// <Text\n// className=\"laptop-md:text-2xl text-base font-bold\"\n// html={formatPrice({\n// amount: exchange.finalPrice?.amount || 0,\n// locale,\n// currencyCode: exchange.price.currencyCode,\n// })}\n// />\n// <Text\n// className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n// html={formatPrice({\n// amount: exchange.price?.amount || 0,\n// locale,\n// currencyCode: exchange.price.currencyCode,\n// })}\n// />\n// </div>\n// )}\n// {canOperate && (\n// <Button\n// size=\"icon\"\n// variant=\"link\"\n// onClick={() => {\n// setCheckedExchangePurchase?.(status ? undefined : exchange)\n// exchangeOperation(exchange)\n// }}\n// className=\"size-auto shrink-0 underline\"\n// >\n// {status ? copyWriting?.remove : copyWriting?.add}\n// </Button>\n// )}\n// </div>\n// </div>\n// )\n// }\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
+
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAkHU,IAAAI,EAAA,6BAlHVC,EAA+D,8CAC/DC,EAAqC,0CACrCC,EAAiC,8CACjCC,EAA6C,iBAC7CC,EAA4B,mCAC5BC,EAA+B,6CAE/BC,EAAoB,yBACpBC,EAAgC,wCAChCC,EAA2B,2CAC3BR,EAAiC,8CACjCS,EAAwB,0CACxBC,EAA8B,+CAE9B,MAAMC,GAAiB,IAAM,CAC3B,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,EAAa,aAAAC,CAAa,KAAI,kBAAe,EAC9D,CACJ,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAAC,EACA,2BAAAC,EACA,8BAAAC,EACA,gBAAAC,GACA,iBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EAGnBC,EAAmBvB,GAAc,kBAAoB,GAErDwB,KAAqB,oBAAiB,gBAAgB,GAAK,CAAC,EAE5D,CAACC,CAAqB,EAAIlB,EAE1BmB,KAAoB,WAAQ,IAAM,CAKtC,IAAIC,EAAsB,IAAI,EAAAC,QAAQH,GAAuB,OAAO,QAAU,CAAC,EAC3EL,GAAS,QACXO,EAAsBA,EAAoB,MAAMhB,GAAc,QAAU,CAAC,GAE3E,MAAMR,EAAawB,EAAoB,MAAMhB,GAAc,MAAM,EAAE,SAAS,EAC5E,OAAO,WAAWR,EAAW,QAAQ,CAAC,CAAC,CACzC,EAAG,CAACsB,EAAuBb,EAAeQ,EAAST,GAAc,OAAQA,GAAc,MAAM,CAAC,EAExF,CAAE,YAAAkB,CAAY,EAAIC,GAAwB,GAAK,CAAC,EAEhD,CAACC,EAA6BC,CAA8B,KAAI,YAInE,KAEH,aAAU,IAAM,CACdA,EAA+B,CAE7B,KAAMnB,EAA2B,MAAM,MAAQ,OAAYgB,CAE7D,CAAC,CACH,EAAG,CAACA,EAAahB,CAA0B,CAAC,EAG5C,MAAMoB,KAAwB,WAAQ,IAAM,CAC1C,MAAMC,EAAuE,CAAC,EAG9E,OAAIb,GACFA,EAAS,QAAQ,CAACc,EAAMC,IAAU,CAC5BvB,EAA2BsB,CAAI,GAAG,OACpCD,EAAO,KAAK,CAAE,KAAAC,EAAM,IAAK,GAAGA,CAAI,IAAIC,CAAK,EAAG,CAAC,CAEjD,CAAC,EAGIF,CACT,EAAG,CAACb,EAAUR,CAA0B,CAAC,EAEnCwB,MAAqB,WAAQ,IAAM,CACvC,MAAMC,EAAWhC,GAAiB,UAAY,GACxCiC,EAAQjC,GAAiB,OAASA,GAAiB,QAAUA,GAAiB,SAAW,GAC/F,MAAO,GAAGgC,GAAYC,EAAQ,GAAGD,CAAQ,MAAMC,CAAK,GAAKD,GAAYC,CAAK,EAC5E,EAAG,CAACjC,GAAiB,SAAUA,GAAiB,MAAOA,GAAiB,OAAQA,GAAiB,OAAO,CAAC,EAEnGkC,MAAe,WAAQ,IAAM,CACjC,KAAM,CAAE,WAAAC,EAAY,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,UAAAC,CAAU,EAAIrB,GAAoB,WAAa,CAAC,EAIvG,OAHyBA,GAAoB,UACzC,GAAGiB,CAAU,UAAUC,CAAU,UAAUC,CAAU,UAAUC,CAAS,SAASC,CAAS,OAC1F3C,EAAQ,OAAO,MACQA,EAAQ,OAAO,GAC5C,EAAG,CAACsB,GAAoB,UAAWtB,EAAQ,OAAO,GAAG,CAAC,EAGtD,OADoBA,EAAQ,oBAI1B,OAAC,OAAI,UAAU,kGACb,mBAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,UAAU,oCACd,qBAAC,YAAS,UAAU,uFAClB,oBAAC,WACC,UAAU,kIACV,KAAMsB,GAAoB,WAAW,UAAU,UAAWvB,GAAS,KAAK,EAC1E,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQuC,GACR,UAAU,2HACV,aAAa,sBACf,EACF,GACF,KACA,QAAC,YAAS,UAAU,yHAClB,qBAAC,OACC,qBAAC,OAAI,UAAU,sBACb,oBAAC,oBACC,YAAY,mBACZ,WAAY,IAAM,IAChB,WAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,sBAAsBtC,EAAQ,GAAG,GAC7C,eAAgB,QAChB,eAAgB,mBAChB,SAAU,CACZ,CACF,CAAC,CACH,EAEA,oBAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQA,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,wHACZ,KACA,QAAC,OAAI,UAAU,0DACb,oBAAC,QACC,UAAU,kFACV,KAAMA,EAAQ,MAChB,KACA,OAAC,QACC,UAAU,gFACV,KAAMoC,GACR,GACF,GACF,KACA,QAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,yCACV,QAAM,eAAY,CAChB,OAAQX,EACR,aAAcxB,EAAQ,MAAM,aAC5B,OAAAJ,CACF,CAAC,EACH,EACCyB,GAAoBG,EAAoBxB,GAAS,OAAO,WACvD,OAAC,QACC,UAAU,oFACV,QAAM,eAAY,CAChB,OAAQA,GAAS,OAAO,OACxB,aAAcA,EAAQ,MAAM,aAC5B,OAAAJ,CACF,CAAC,EACH,GAEJ,GACF,EACF,EAECmC,EAAsB,IAAI,CAAC,CAAE,KAAAE,EAAM,IAAAW,CAAI,IAClCX,IAAS,QAAUtB,GAA4B,MAAM,SAErD,OAACkC,EAAA,CAEC,cAAeC,GAAQ,CACrBlC,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDmB,IAAiC,CAAE,GAAGD,EAA6B,KAAAiB,CAAK,CAAC,EAEzE1B,IAAc2B,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,CACtD,EACA,OAAQ,CAAC,CAACrC,GAA4B,KACtC,KAAMA,GAA4B,MAAM,MACxC,WAAYA,GAA4B,MAAM,YAfzCiC,CAgBP,EA+CG,IACR,GACH,EAEEf,GAA6B,SAC7B,QAAC,OAAI,UAAU,sBACb,oBAAC,QAAK,UAAU,0CAA0C,KAAMP,GAAoB,aAAc,KAClG,OAAC,OAAI,UAAU,2CAwCZ,SAAAO,GAA6B,SAC5B,OAACgB,EAAA,CACC,cAAeC,GAAQ,CACrBlC,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAOmC,EACP,WAAY,EACd,CACF,CAAC,EACDhB,IAAiC,CAAE,GAAGD,EAA6B,KAAM,MAAU,CAAC,EAEpFT,IAAc2B,GAAQ,CAAC,GAAGA,EAAM,MAAM,CAAC,CACzC,EACA,WAAYpC,GAA4B,MAAM,WAC9C,OAAQ,CAACkB,GAA6B,KACtC,KAAMA,GAA6B,KACrC,EAEJ,GACF,GAEJ,KACA,QAAC,OAAI,UAAU,aACb,oBAAC,QACC,UAAU,yDACV,KAAM,MAAG,mBAAgBhC,GAAa,YAAc,GAAI,CAAE,UAAQ,eAAY,CAAE,OAAQ,WAAWI,EAAW,QAAQ,CAAC,CAAC,EAAG,aAAcD,EAAQ,MAAM,aAAc,OAAAJ,CAAO,CAAC,CAAE,CAAC,CAAC,GACnL,EAECyB,GAAoBf,EAAe,MAClC,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQJ,EACR,aAAcF,EAAQ,MAAM,aAC5B,OAAAJ,CACF,CAAC,EACH,KAEF,OAAC,OAAI,UAAU,8BACb,mBAAC,EAAAqD,QAAA,CACC,KAAMjC,EACN,iBAAkBhB,EAAQ,iBAC1B,cAAeH,GAAa,UAC5B,WAAYA,GAAa,QACzB,iBAAkBiB,EAClB,cAAeC,EACf,mBAAmB,oDACnB,gBAAgB,oDAChB,YAAaR,EACb,SAAUC,EACV,gBAAiBS,EACjB,aAAcpB,GAAa,SAC3B,kBAAkB,oDACpB,EACF,GACF,GACF,GACF,EACF,EACF,EA3PuB,IA6P3B,EAEM+B,GAA0B,IAAM,CACpC,KAAM,CAAE,OAAAsB,EAAQ,QAAAlD,EAAS,cAAAU,EAAe,SAAAyC,EAAU,YAAAC,CAAY,KAC5D,wBAAqB,EAEvB,IAAIzB,EAIJ,KAAM,CAAE,SAAA0B,EAAW,CAAC,CAAE,EAAIF,GAAY,CAAC,EAWjC,CAACG,CAAkB,EAAID,GAAU,OAAOP,GAAQA,EAAK,gBAAgB,GAAK,CAAC,EACjF,OAAAnB,EAAcyB,GAAeE,EAKtB,CAAE,YAAA3B,CAAY,CACvB,EA8EMkB,EAAqB,CAAC,CAC1B,cAAAU,EACA,KAAAT,EACA,OAAAU,EACA,WAAAC,CACF,IAKM,CACJ,KAAM,CAAE,OAAA7D,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,SAAAsD,EAAU,eAAAO,CAAe,KAAI,wBAAqB,EACpD,CAAE,UAAAC,CAAU,EAAIR,GAAY,CAAC,EAC7B,CAAE,QAAAS,CAAQ,EAAId,GAAQ,CAAC,EAEvBe,KAAkB,WAAQ,IAAM,CACpC,MAAMC,EAAmBF,GAAS,KAChCG,GAAUA,EAAO,OAAS,SAAWA,EAAO,OAAS,UAAYA,EAAO,OAAS,SACnF,GAAK,CAAC,EACAC,EAAqBJ,GAAS,KAAKG,GAAUA,EAAO,OAAS,UAAU,GAAM,CAAC,EAC9EE,EAAsBH,EAAkBA,EAAgB,SAAS,CAAC,GAAG,MAAQ,GAC7EI,EAAyBF,EAAqBA,EAAmB,SAAS,CAAC,GAAG,MAAQ,GAC5F,MAAO,GAAGC,GAAuBC,EAAyBA,EAAyB,MAAQD,EAAsBC,GAA0BD,CAAmB,MAAMN,CAAS,EAC/K,EAAG,CAACA,EAAWC,CAAO,CAAC,EAEvB,SACE,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQd,GAAM,OAAO,IACrB,UAAU,wHACZ,KACA,QAAC,OAAI,UAAU,0DACb,oBAAC,QACC,UAAU,kFACV,KAAMA,GAAM,SAAS,MACvB,KACA,OAAC,QACC,UAAU,gFACV,KAAMe,EACR,GACF,GACF,KACA,QAAC,OAAI,UAAU,+CACZ,WAAC,CAACf,MACD,QAAC,OAAI,UAAU,0BACb,oBAAC,QAAK,UAAU,yCAAyC,KAAMa,EAAW,KAC1E,OAAC,QACC,UAAU,qEACV,QAAM,eAAY,CAChB,OAAQb,EAAK,MAAM,OACnB,OAAAlD,EACA,aAAckD,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,EAEDW,MACC,OAAC,UACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbC,IAAiBF,EAAS,OAAYV,CAAI,EAC1CS,EAAcT,CAAI,CACpB,EACA,UAAU,+BAET,SAAAU,EAAS3D,GAAa,OAASA,GAAa,IAC/C,GAEJ,GACF,CAEJ,EAsEA,IAAOhB,MAAQ,cAAWc,EAAc",
|
|
6
|
+
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_useComponentData", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "import_CartActionButtons", "ProductSummary", "locale", "copyWriting", "trackingData", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "notifyMeMode", "onNotifyMeClick", "profile", "addOrder", "setAddOrder", "showComparePrice", "productSummaryData", "currentProductVariant", "summaryFinalPrice", "currentProductPrice", "Decimal", "giftVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "image_1920", "image_1440", "image_1024", "image_768", "image_390", "key", "ProductGiftSummary", "gift", "prev", "t", "CartActionButtons", "bundle", "freeGift", "checkedGift", "giftList", "firstAvailableGift", "giftOperation", "status", "canOperate", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText"]
|
|
7
7
|
}
|