@anker-in/headless-ui 1.3.41 → 1.3.43
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/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/cjs/biz-components/Listing/BizProductProvider.d.ts +3 -1
- 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/CartActionButtons/index.d.ts +9 -1
- package/dist/cjs/biz-components/Listing/components/CartActionButtons/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/CartActionButtons/index.js.map +3 -3
- 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/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/NotifyMeDialog/NotifyMeDialog.d.ts +7 -0
- package/dist/cjs/biz-components/NotifyMeDialog/NotifyMeDialog.js +2 -0
- package/dist/cjs/biz-components/NotifyMeDialog/NotifyMeDialog.js.map +7 -0
- package/dist/cjs/biz-components/NotifyMeDialog/index.d.ts +2 -0
- package/dist/cjs/biz-components/NotifyMeDialog/index.js +2 -0
- package/dist/cjs/biz-components/NotifyMeDialog/index.js.map +7 -0
- package/dist/cjs/biz-components/NotifyMeDialog/types.d.ts +111 -0
- package/dist/cjs/biz-components/NotifyMeDialog/types.js +2 -0
- package/dist/cjs/biz-components/NotifyMeDialog/types.js.map +7 -0
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/cjs/biz-components/ProductNav/types.d.ts +3 -1
- package/dist/cjs/biz-components/ProductNav/types.js.map +1 -1
- package/dist/cjs/biz-components/index.d.ts +2 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +2 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/esm/biz-components/Listing/BizProductProvider.d.ts +3 -1
- 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/CartActionButtons/index.d.ts +9 -1
- package/dist/esm/biz-components/Listing/components/CartActionButtons/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/CartActionButtons/index.js.map +3 -3
- 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/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/NotifyMeDialog/NotifyMeDialog.d.ts +7 -0
- package/dist/esm/biz-components/NotifyMeDialog/NotifyMeDialog.js +2 -0
- package/dist/esm/biz-components/NotifyMeDialog/NotifyMeDialog.js.map +7 -0
- package/dist/esm/biz-components/NotifyMeDialog/index.d.ts +2 -0
- package/dist/esm/biz-components/NotifyMeDialog/index.js +2 -0
- package/dist/esm/biz-components/NotifyMeDialog/index.js.map +7 -0
- package/dist/esm/biz-components/NotifyMeDialog/types.d.ts +111 -0
- package/dist/esm/biz-components/NotifyMeDialog/types.js +1 -0
- package/dist/esm/biz-components/NotifyMeDialog/types.js.map +7 -0
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/biz-components/ProductNav/types.d.ts +3 -1
- package/dist/esm/biz-components/index.d.ts +2 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +3 -3
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +2 -2
- package/package.json +1 -1
- package/style.css +33 -0
|
@@ -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 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 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 />\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": "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",
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useComponentData", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "replaceTemplate", "withLayout", "ExposureDetector", "gaTrack", "CartActionButtons", "ProductSummary", "locale", "copyWriting", "trackingData", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "showComparePrice", "productSummaryData", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "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", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase", "ProductSummary_default"]
|
|
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": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useComponentData", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "replaceTemplate", "withLayout", "ExposureDetector", "gaTrack", "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", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "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", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase", "ProductSummary_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as
|
|
1
|
+
import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Text as n,Container as L}from"../../../../../components/index.js";import{useAiuiContext as E}from"../../../../AiuiProvider/index.js";import{useBizProductContext as R}from"../../../BizProductProvider.js";import{useMemo as C}from"react";import{formatPrice as d}from"../../../utils/index.js";import{replaceTemplate as y}from"../../../utils/textFormat.js";import{useBenefits as O}from"../../../hooks/useBenefits.js";import _ from"../../CartActionButtons/index.js";const j=({totalSavingsSlot:v}={})=>{const{copyWriting:e,locale:a="us",trackingData:N,currencyCode:l}=E(),{variant:t,finalPrice:h,totalSavings:r,isLogin:m,comparePrice:w,onAddToCart:S,onBuyNow:T,savingDetail:s,addToCartLoading:k,buyNowLoading:A,notifyMeMode:M,onNotifyMeClick:P,discount:q,memberFunctionResult:p}=R(),D=O({variant:t}),{commonCoupon:i,memberDiscount:c}=D,B=N?.showComparePrice??!0,F=C(()=>y(e?.totalSavings||"",{amount:d({amount:r,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),[e?.totalSavings,r,t.price.currencyCode,a]),x=C(()=>{if(!e?.unlockedSaving)return;const b=i?.enable?Number(i?.config?.fixed_value||0):0,f=c?.enable?c.config?.amount??0:0,g=Math.round((p?.withoutCouponMaxMemberTotalSave?Math.max(f,b):f+b)*100)/100;if(!(g<=0))return y(e.unlockedSaving,{amount:d({amount:g,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})})},[e?.unlockedSaving,i?.enable,i?.config?.fixed_value,c?.enable,c?.config?.amount,p,t.price.currencyCode,a]);return u(L,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?u("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[u("div",{className:"flex items-center gap-1",children:[o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:d({amount:parseFloat(h.toFixed(2)),currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),B&&(r>0||s?.member>0&&m)&&o(n,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:d({amount:w,currencyCode:t.price.currencyCode,locale:l==="CAD"?"us":a||"us"})}),s?.member>0&&m&&o(n,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:e?.memberPrice||"Member Price"})]}),v||(r>0||s?.member>0&&m?o(n,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${F}`}):x?o(n,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:x}):null)]}):o(n,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),o("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:o(_,{mode:M,availableForSale:t.availableForSale,addToCartText:e?.addToCart??"Add to Cart",buyNowText:e?.buyNow??"Buy Now",addToCartLoading:k,buyNowLoading:A,onAddToCart:S,onBuyNow:T,onNotifyMeClick:P,notifyMeText:e?.notifyMe,notifyMeClassName:"w-full"})})]})};var K=j;export{K as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { useBenefits } from '../../../hooks/useBenefits.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us', trackingData, currencyCode } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n discount,\n memberFunctionResult,\n } = useBizProductContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\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 totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({\n amount: totalSavings,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n const unlockedSavingText = useMemo(() => {\n if (!copyWriting?.unlockedSaving) return undefined\n\n const couponSaving = commonCoupon?.enable ? Number(commonCoupon?.config?.fixed_value || 0) : 0\n const memberSaving = memberDiscount?.enable ? (memberDiscount.config?.amount ?? 0) : 0\n\n // \u4E0D\u53EF\u53E0\u52A0\u65F6\u53D6\u4F1A\u5458\u4EF7\u4E0E code \u6298\u6263\u7684\u6700\u5927\u503C\uFF0C\u53EF\u53E0\u52A0\u65F6\u53D6\u4E8C\u8005\u4E4B\u548C\n const totalUnlocked = Math.round((\n memberFunctionResult?.withoutCouponMaxMemberTotalSave\n ? Math.max(memberSaving, couponSaving)\n : memberSaving + couponSaving\n ) * 100) / 100\n\n if (totalUnlocked <= 0) return undefined\n\n return replaceTemplate(copyWriting.unlockedSaving, {\n amount: formatPrice({\n amount: totalUnlocked,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n }),\n })\n }, [\n copyWriting?.unlockedSaving,\n commonCoupon?.enable,\n commonCoupon?.config?.fixed_value,\n memberDiscount?.enable,\n memberDiscount?.config?.amount,\n memberFunctionResult,\n variant.price.currencyCode,\n locale,\n ])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n >\n {variant.availableForSale ? (\n <div className=\"laptop-md:items-end flex flex-col justify-between\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n html={formatPrice({\n amount: parseFloat(finalPrice.toFixed(2)),\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n })}\n />\n {showComparePrice && (totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {totalSavingsSlot ||\n (totalSavings > 0 || (savingDetail?.member > 0 && isLogin) ? (\n <Text\n className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={`${totalSavingsText}`}\n />\n ) : unlockedSavingText ? (\n <Text\n className=\"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={unlockedSavingText}\n />\n ) : null)}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n <CartActionButtons\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart ?? 'Add to Cart'}\n buyNowText={copyWriting?.buyNow ?? 'Buy Now'}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n />\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "Container", "useAiuiContext", "useBizProductContext", "useMemo", "formatPrice", "replaceTemplate", "useBenefits", "CartActionButtons", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "trackingData", "currencyCode", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "discount", "memberFunctionResult", "benefits", "commonCoupon", "memberDiscount", "showComparePrice", "totalSavingsText", "unlockedSavingText", "couponSaving", "memberSaving", "totalUnlocked", "ProductActions_default"]
|
|
4
|
+
"sourcesContent": ["import { Text, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { useBenefits } from '../../../hooks/useBenefits.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us', trackingData, currencyCode } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n notifyMeMode,\n onNotifyMeClick,\n discount,\n memberFunctionResult,\n } = useBizProductContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\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 totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({\n amount: totalSavings,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n const unlockedSavingText = useMemo(() => {\n if (!copyWriting?.unlockedSaving) return undefined\n\n const couponSaving = commonCoupon?.enable ? Number(commonCoupon?.config?.fixed_value || 0) : 0\n const memberSaving = memberDiscount?.enable ? (memberDiscount.config?.amount ?? 0) : 0\n\n // \u4E0D\u53EF\u53E0\u52A0\u65F6\u53D6\u4F1A\u5458\u4EF7\u4E0E code \u6298\u6263\u7684\u6700\u5927\u503C\uFF0C\u53EF\u53E0\u52A0\u65F6\u53D6\u4E8C\u8005\u4E4B\u548C\n const totalUnlocked = Math.round((\n memberFunctionResult?.withoutCouponMaxMemberTotalSave\n ? Math.max(memberSaving, couponSaving)\n : memberSaving + couponSaving\n ) * 100) / 100\n\n if (totalUnlocked <= 0) return undefined\n\n return replaceTemplate(copyWriting.unlockedSaving, {\n amount: formatPrice({\n amount: totalUnlocked,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n }),\n })\n }, [\n copyWriting?.unlockedSaving,\n commonCoupon?.enable,\n commonCoupon?.config?.fixed_value,\n memberDiscount?.enable,\n memberDiscount?.config?.amount,\n memberFunctionResult,\n variant.price.currencyCode,\n locale,\n ])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n >\n {variant.availableForSale ? (\n <div className=\"laptop-md:items-end flex flex-col justify-between\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n html={formatPrice({\n amount: parseFloat(finalPrice.toFixed(2)),\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n })}\n />\n {showComparePrice && (totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale: currencyCode === 'CAD' ? 'us' : locale || 'us',\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {totalSavingsSlot ||\n (totalSavings > 0 || (savingDetail?.member > 0 && isLogin) ? (\n <Text\n className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={`${totalSavingsText}`}\n />\n ) : unlockedSavingText ? (\n <Text\n className=\"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={unlockedSavingText}\n />\n ) : null)}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n <CartActionButtons\n mode={notifyMeMode}\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart ?? 'Add to Cart'}\n buyNowText={copyWriting?.buyNow ?? 'Buy Now'}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n onNotifyMeClick={onNotifyMeClick}\n notifyMeText={copyWriting?.notifyMe}\n notifyMeClassName=\"w-full\"\n />\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "Container", "useAiuiContext", "useBizProductContext", "useMemo", "formatPrice", "replaceTemplate", "useBenefits", "CartActionButtons", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "trackingData", "currencyCode", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "notifyMeMode", "onNotifyMeClick", "discount", "memberFunctionResult", "benefits", "commonCoupon", "memberDiscount", "showComparePrice", "totalSavingsText", "unlockedSavingText", "couponSaving", "memberSaving", "totalUnlocked", "ProductActions_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as D,jsx as t,jsxs as o}from"react/jsx-runtime";import Q,{useState as L,useEffect as Y,useRef as q}from"react";import{useMediaQuery as O}from"react-responsive";import Z from"./MultiLayoutGraphicBlockCarousel.js";import{withLayout as F}from"../../shared/Styles.js";import z from"../../components/picture.js";import R from"../../components/button.js";import{Heading as j}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as I,getLocalizedPath as G}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const f="image",h="p1_banner",$=({data:k,configuration:l,jIndex:d,spanType:x,title:T,onSecondaryButtonClick:b,onPrimaryButtonClick:N})=>{const[i,M]=L(!1),u=O({query:"(max-width: 768px)"}),n=q(null),C=()=>{if(x)switch(x){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(n,{componentType:f,componentName:h,position:d,componentTitle:k.title,componentDescription:k.description,navigation:l?.activeTab}),Y(()=>{M(u)},[u]);const{theme:V="light",title:r,description:c,imageUrl:p,primaryButton:w,secondaryButton:s,imageMobileUrl:g,blockLink:y,video:m,youtubeId:v,isYouTube:B,id:e}=k,a="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",C(),{"rounded-box":!0,"aiui-dark":V==="dark","h-[400px]":i},"text-info-primary"),ref:n,children:[(y||s.link)&&t("a",{className:"absolute inset-0 z-10",href:_(G(y||s.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(z,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(g?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:g?.url,type:"video/mp4"})}):t(z,{source:g?.url||p?.url,alt:g?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),o("div",{className:P("pointer-events-none absolute inset-0 z-20 flex flex-col",x==="full"?"laptop:justify-center justify-end":"justify-end"),children:[o("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[o("div",{className:"flex flex-col gap-1",children:[t(j,{size:3,as:"h3",className:"item-title",html:r}),t(j,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:c})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(R,{"aria-label":r??c,className:P(a,"link-left"),variant:"secondary",as:"a","data-track":`${e}-link-left`,onClick:()=>{b?.(k)},href:_(G(s.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}#${s.text}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,children:[s.text,t("span",{className:"sr-only",children:r??c})]}),w&&w.text&&t(R,{"aria-label":r??c,className:P(a,"link-right"),variant:"primary","data-track":`${e}-link-right`,as:"a",onClick:()=>{N?.(k)},href:_(G(w.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}#${w.text}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,children:w.text})]})]}),(m?.url||v)&&t("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:t("button",{onClick:()=>{l?.onVideoPlayBtnClick?.(B&&v?v:m?.url||v,B)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},U=Q.forwardRef((k,l)=>{const{data:d,className:x,onSecondaryButtonClick:T,onPrimaryButtonClick:b,...N}=k,{sectionTitle:i,groupByTab:M=!1,items:u=[],carousel:n}=d,[C,V]=L(!1),[r,c]=L(""),[p,w]=L(""),{locale:s="us"}=le(),g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},y=u.map(e=>e.tabName).filter(Boolean).filter((e,a,A)=>A.indexOf(e)===a),m=(e,a)=>{V(!0),a?w?.(e||""):c?.(e||"")},v=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},B=y.map(e=>({tabName:e,items:u.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return d.mode==="carousel"&&u.length>0?t(Z,{data:d,onPrimaryButtonClick:b,onSecondaryButtonClick:T,className:x,ref:l,...N}):o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,...N,className:P("multiLayoutGraphicBlock","text-info-primary",x),children:[i&&t(W,{data:{title:i},className:"section-title"}),M?o(X,{align:"left",defaultValue:I(y[0]),children:[t(ee,{children:y.map((e,a)=>t(te,{value:I(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:f,component_name:h,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),y.map((e,a)=>t(ae,{value:I(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(D,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:B?.[e]||[],configuration:{isTab:M,activeTab:e,title:i,num:B?.[e]?.length||0,locale:s,onVideoPlayBtnClick:m,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:v(B?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v(B?.[e]?.length||0)}}}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:n?.items||[],configuration:{isTab:M,locale:s,onVideoPlayBtnClick:m,title:i,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(D,{children:[o(K,{className:"w-full",children:[u.map((e,a)=>t(E,{span:g(e.width??"full"),className:"laptop:block hidden",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:m,title:i},jIndex:a,spanType:e.width,onSecondaryButtonClick:T,onPrimaryButtonClick:b})},`${e?.title||""}${a}`)),u.map((e,a)=>t(E,{span:g("full"),className:"laptop:hidden block",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:m,title:i},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:n?.items||[],configuration:{locale:s,onVideoPlayBtnClick:m,title:i,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(J,{visible:C,youTubeId:p,videoUrl:r,onCloseModal:()=>V(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var Te=F(U,{container:{desktopSpan:12,mobileSpan:12}});export{Te as default};
|
|
1
|
+
import{Fragment as D,jsx as t,jsxs as l}from"react/jsx-runtime";import Q,{useState as L,useEffect as Y,useRef as q}from"react";import{useMediaQuery as O}from"react-responsive";import Z from"./MultiLayoutGraphicBlockCarousel.js";import{withLayout as F}from"../../shared/Styles.js";import z from"../../components/picture.js";import R from"../../components/button.js";import{Heading as j}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as I,getLocalizedPath as G}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useAiuiContext as oe}from"../AiuiProvider/index.js";import{gaTrack as le}from"../../shared/track.js";const h="image",k="p1_banner",$=({data:b,configuration:o,jIndex:d,spanType:T,title:w,onSecondaryButtonClick:u,onPrimaryButtonClick:N})=>{const[i,M]=L(!1),m=O({query:"(max-width: 768px)"}),n=q(null),C=()=>{if(T)switch(T){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(n,{componentType:h,componentName:k,position:d,componentTitle:b.title,componentDescription:b.description,navigation:o?.activeTab}),Y(()=>{M(m)},[m]);const{theme:V="light",title:r,description:c,imageUrl:p,primaryButton:g,secondaryButton:s,imageMobileUrl:y,blockLink:v,video:f,youtubeId:B,isYouTube:x,id:e}=b,a="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",C(),{"rounded-box":!0,"aiui-dark":V==="dark","h-[400px]":i},"text-info-primary"),ref:n,children:[(v||s.link)&&t("a",{className:"absolute inset-0 z-10",href:_(G(v||s.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(z,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(y?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:y?.url,type:"video/mp4"})}):t(z,{source:y?.url||p?.url,alt:y?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:P("pointer-events-none absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(j,{size:3,as:"h3",className:"item-title",html:r}),t(j,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:c})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&l(R,{"aria-label":r??c,className:P(a,"link-left"),variant:"secondary",as:"a","data-track":`${e}-link-left`,onClick:()=>{u?.(b)},href:_(G(s.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}#${s.text}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,children:[s.text,t("span",{className:"sr-only",children:r??c})]}),g&&g.text&&t(R,{"aria-label":r??c,className:P(a,"link-right"),variant:"primary","data-track":`${e}-link-right`,as:"a",onClick:()=>{N?.(b)},href:_(G(g.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}#${g.text}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,children:g.text})]})]}),(f?.url||B)&&t("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:t("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(x&&B?B:f?.url||B,x)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},U=Q.forwardRef((b,o)=>{const{data:d,className:T,onSecondaryButtonClick:w,onPrimaryButtonClick:u,...N}=b,{sectionTitle:i,groupByTab:M=!1,items:m=[],carousel:n}=d,[C,V]=L(!1),[r,c]=L(""),[p,g]=L(""),{locale:s="us"}=oe(),y=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},v=m.map(e=>e.tabName).filter(Boolean).filter((e,a,A)=>A.indexOf(e)===a),f=(e,a)=>{V(!0),a?g?.(e||""):c?.(e||"")},B=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},x=v.map(e=>({tabName:e,items:m.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return d.mode==="carousel"&&m.length>0?t(Z,{data:d,onPrimaryButtonClick:u,onSecondaryButtonClick:w,className:T,ref:o,...N}):l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,...N,className:P("multiLayoutGraphicBlock","text-info-primary",T),children:[i&&t(W,{data:{title:i},className:"section-title"}),M?l(X,{align:"left",defaultValue:I(v[0]),children:[t(ee,{children:v.map((e,a)=>t(te,{value:I(e),onClick:()=>{le({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:k,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),v.map((e,a)=>t(ae,{value:I(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(D,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:x?.[e]||[],configuration:{isTab:M,activeTab:e,title:i,num:x?.[e]?.length||0,locale:s,onVideoPlayBtnClick:f,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:B(x?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:B(x?.[e]?.length||0)}}}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:n?.items||[],configuration:{isTab:M,locale:s,onVideoPlayBtnClick:f,title:i,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(D,{children:[l(K,{className:"w-full",children:[m.map((e,a)=>t(E,{span:y(e.width??"full"),className:"laptop:block hidden",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:f,title:i},jIndex:a,spanType:e.width,onSecondaryButtonClick:w,onPrimaryButtonClick:u})},`${e?.title||""}${a}`)),m.map((e,a)=>t(E,{span:y("full"),className:"laptop:hidden block",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:f,title:i},jIndex:a,spanType:"full",onSecondaryButtonClick:w,onPrimaryButtonClick:u})},`${e?.title||""}${a}`))]}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:n?.items||[],configuration:{locale:s,onVideoPlayBtnClick:f,title:i,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(J,{visible:C,youTubeId:p,videoUrl:r,onCloseModal:()=>V(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var Te=F(U,{container:{desktopSpan:12,mobileSpan:12}});export{Te as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "AAoHQ,OAuOM,YAAAA,EAvON,OAAAC,EAaF,QAAAC,MAbE,oBApHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAyC,uCAChD,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,EAAe,oBAAAC,MAAwB,yBACpD,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,2BACzD,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIrC,EAAkB,EAAK,EACjDsC,EAAanC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DoC,EAAMrC,EAAuB,IAAI,EAEjCsC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAR,GAAYiB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED7B,EAAU,IAAM,CACdoC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,CACF,EAAIvB,EACEwB,EAAe,mFAErB,OACEvD,EAAC,OACC,UAAWe,EACT,8BACA,qEACA2B,EAAa,EACb,CACE,cAAe,GACf,YAAaC,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7BjD,EAAC,KACC,UAAU,wBACV,KAAM0B,EACJR,EAAiBiC,GAAaF,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EACvF,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACZ,EAEFjC,EAAC,OAAI,UAAU,mBACZ,UAAAmB,EAAQ2B,GAAU,QAAQ,EACzB/C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK+C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA/C,EAACS,EAAA,CACC,OAAQsC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED3B,EAAQ8B,GAAgB,QAAQ,EAC/BlD,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAKkD,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEAlD,EAACS,EAAA,CACC,OAAQyC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,GAEJ,EACA9C,EAAC,OACC,UAAWe,EACT,0DACAmB,IAAa,OAAS,oCAAsC,aAC9D,EAEA,UAAAlC,EAAC,OAAI,UAAU,2GACb,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACW,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMkC,EAAO,EAC9D7C,EAACW,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMmC,EACR,GACF,EACA7C,EAAC,OAAI,UAAU,8BACZ,UAAAgD,GAAmBA,EAAgB,MAClChD,EAACS,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,aAAY,GAAGD,CAAE,aACjB,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAMN,EACJR,EAAiB+B,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,6BAA4B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAe,EAAgB,KACjBjD,EAAC,QAAK,UAAU,UAAW,SAAA6C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9BhD,EAACU,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,YAAY,EACxC,QAAQ,UACR,aAAY,GAAGD,CAAE,cACjB,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAMN,EACJR,EAAiB8B,EAAc,MAAQ,GAAIf,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAc,EAAc,KACjB,GAEJ,GACF,GACEI,GAAO,KAAOC,IACdrD,EAAC,OAAI,UAAU,+EACb,SAAAA,EAAC,UACC,QAAS,IAAM,CACbiC,GAAe,sBACbqB,GAAaD,EAAYA,EAAYD,GAAO,KAAOC,EACnDC,CACF,CACF,EACA,UAAU,+GAEV,SAAAtD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GAEJ,GACF,CAEJ,EAEMyD,EAA0BvD,EAAM,WAAyD,CAACwD,EAAOhB,IAAQ,CAC7G,KAAM,CAAE,KAAAiB,EAAM,UAAAC,EAAW,uBAAAvB,EAAwB,qBAAAC,EAAsB,GAAGuB,CAAK,EAAIH,EAC7E,CAAE,aAAAI,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIN,EAC7D,CAACO,EAASC,CAAU,EAAIhE,EAAkB,EAAK,EAC/C,CAACiE,EAAUC,CAAW,EAAIlE,EAAiB,EAAE,EAC7C,CAACmE,EAAWC,CAAY,EAAIpE,EAAiB,EAAE,EAC/C,CAAE,OAAAqE,EAAS,IAAK,EAAI7C,GAAe,EAEnC8C,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWX,EACd,IAAIhC,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM4C,EAAOC,IAAQA,EAAI,QAAQ7C,CAAI,IAAM4C,CAAK,EAErDE,EAA0B,CAACC,EAAazB,IAAuB,CACnEa,EAAW,EAAI,EACXb,EACFiB,IAAeQ,GAAO,EAAE,EAExBV,IAAcU,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOpB,EAAM,OAAOhC,GAAQA,EAAK,UAAYoD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAGF,OAAI1B,EAAK,OAAS,YAAcK,EAAM,OAAS,EAE3ChE,EAACO,EAAA,CACC,KAAMoD,EACN,qBAAsBrB,EACtB,uBAAwBD,EACxB,UAAWuB,EACX,IAAKlB,EACJ,GAAGmB,EACN,EAKF5D,EAAC,WACC,uBAAqB,0BACrB,IAAKyC,EACJ,GAAGmB,EACJ,UAAW7C,EAAG,0BAA2B,oBAAqB4C,CAAS,EAEtE,UAAAE,GAAgB9D,EAACe,EAAA,CAAM,KAAM,CAAE,MAAO+C,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACC9D,EAACoB,EAAA,CAAK,MAAM,OAAO,aAAcJ,EAAc0D,EAAS,CAAC,CAAE,EACzD,UAAA3E,EAACsB,GAAA,CACE,SAAAqD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACuB,GAAA,CAEC,MAAON,EAAcmE,CAAQ,EAC7B,QAAS,IAAM,CACbxD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiBgC,EACjB,mBAAoB,EACpB,WAAYsB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACwB,GAAA,CAAwB,MAAOP,EAAcmE,CAAQ,EAAG,UAAU,qCACjE,SAAAnF,EAAAF,EAAA,CACE,UAAAC,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMgE,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOrB,EACP,UAAWqB,EACX,MAAOtB,EACP,IAAKqB,IAAeC,CAAO,GAAG,QAAU,EACxC,OAAAZ,EACA,oBAAqBM,EACrB,uBAAAzC,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeiD,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCnB,GAAYA,GAAU,MAAM,OAAS,EACpCjE,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM8C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOF,EACP,OAAAS,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAAzB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgB6C,CAwFlB,CACD,GACH,EAEA3E,EAAAF,EAAA,CACE,UAAAE,EAACY,EAAA,CAAK,UAAU,SACb,UAAAmD,EAAM,IAAI,CAAChC,EAAM4C,IAEd5E,EAACc,EAAA,CAEC,KAAM2D,EAAQzC,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAAhC,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAAwC,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU5C,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAfK,GAAGN,GAAM,OAAS,EAAE,GAAG4C,CAAK,EAgBnC,CAEH,EACAZ,EAAM,IAAI,CAAChC,EAAM4C,IAChB5E,EAACc,EAAA,CAA8C,KAAM2D,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAzE,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAAwC,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU,OACV,uBAAwBvC,EACxB,qBAAsBC,EACxB,GAZa,GAAGN,GAAM,OAAS,EAAE,GAAG4C,CAAK,EAa3C,CACD,GACH,EACCX,GAAYA,GAAU,MAAM,OAAS,EACpCjE,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM8C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,OAAAO,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAAzB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDmC,GACClE,EAACY,EAAA,CACC,QAASsD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDV,EAAwB,YAAc,0BAEtC,IAAO8B,GAAQ/E,EAAWiD,EAAyB,CACjD,UAAW,CAAE,YAAa,GAAI,WAAY,EAAG,CAC/C,CAAC",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "MultiLayoutGraphicBlockCarouselImpl", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { NotifyMeDialogProps } from './types.js';
|
|
2
|
+
declare const NotifyMeDialog: {
|
|
3
|
+
({ open, onOpenChange, copy, classNames, checkboxes, subscriptionMeta, onSubmit, }: NotifyMeDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
export default NotifyMeDialog;
|
|
7
|
+
export type { NotifyMeDialogProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useCallback as D,useEffect as re,useState as f}from"react";import{Button as P,Text as c,Dialog as le,DialogContent as ie,DialogHeader as ne,DialogTitle as se,DialogDescription as me,Input as ce,Checkbox as pe,Heading as R}from"../../components/index.js";import{cn as s}from"../../helpers/index.js";import*as de from"react";import{useExposure as ue}from"../../hooks/useExposure.js";import{useAiuiContext as fe}from"../AiuiProvider/index.js";import{gaTrack as $}from"../../shared/track.js";const h="copy",y="NotifyMeDialog",ge=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,j=({open:G,onOpenChange:E,copy:q,classNames:n,checkboxes:i=[],subscriptionMeta:N,onSubmit:w})=>{const{title:v,subTitle:g,emailLabel:A="Email address",emailPlaceholder:F="your@email.com",submitBtnText:T="Notify Me",errorEmpty:W,errorInvalidEmail:X,errorCheckboxRequired:J,errorSubmit:C="Something went wrong. Please try again.",errorSubmitDetail:K,successTitle:Q,successDesc:S,successBtnText:M}=q,H=de.useRef(null),{trackingData:B}=fe();ue(H,{componentType:h,componentName:y,componentTitle:v,componentDescription:g});const[x,L]=f(""),[k,z]=f(()=>i.map(()=>!1)),[p,u]=f("idle"),[U,_]=f(()=>i.map(()=>!1)),[o,d]=f("idle"),[I,b]=f(null),V=I?K?.find(e=>e.code===I)?.message??C:C,Y=o!=="loading"&&o!=="success",Z=D(e=>{const r=i[e];r&&$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:B.pageGroup||"Home Page",component_type:h,component_name:y,button_name:r.label,component_title:v,component_description:g||""}}),z(l=>{const a=[...l];return a[e]=!a[e],a}),_(l=>{const a=[...l];return a[e]=!1,a}),p!=="idle"&&u("idle"),o==="error-submit"&&(d("idle"),b(null))},[p,o]),O=D(e=>{L(e.target.value),p!=="idle"&&u("idle"),_(r=>r.some(Boolean)?r.map(()=>!1):r),o==="error-submit"&&(d("idle"),b(null))},[p,o]),ee=D(async()=>{$({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:B.pageGroup||"Home Page",component_type:h,component_name:y,button_name:T,component_title:v,component_description:g||""}});let e=!1;x.trim()?ge.test(x.trim())?u("idle"):(u("error-format"),e=!0):(u("error-empty"),e=!0);const r=i.map((l,a)=>l.label&&l.required&&!k[a]?(e=!0,!0):!1);if(_(r),!e){d("loading");try{const l=i.map((a,oe)=>a.checkbox_id!==void 0?{checkbox_id:a.checkbox_id,checked:k[oe]}:null).filter(a=>a!==null);await w({email:x.trim(),checkedItems:l,meta:N}),d("success")}catch(l){const a=l&&typeof l=="object"&&"code"in l?String(l.code):null;b(a),d("error-submit")}}},[x,i,k,N,w]);re(()=>{if(o!=="error-submit")return;const e=setTimeout(()=>{d("idle"),b(null)},3e3);return()=>clearTimeout(e)},[o]);const te=D(e=>{e||(L(""),z(i.map(()=>!1)),u("idle"),_(i.map(()=>!1)),d("idle"),b(null)),E(e)},[i,E]),ae=i.some(e=>e.label);return t(le,{open:G,onOpenChange:te,children:m(ie,{ref:H,"aria-describedby":"notify-me-content",className:s("laptop:max-w-[480px] laptop:[&_.dialog-close-icon]:size-6 laptop:gap-8 rounded-box laptop:p-8 max-h-[90vh] w-[calc(100%-32px)] gap-6 overflow-y-auto bg-white p-6 [&_.dialog-close-icon]:size-5",n?.root),children:[o!=="success"&&m(ne,{className:s(n?.header),children:[t(se,{children:t(R,{as:"h2",size:2,className:s("text-info-primary text-center font-bold",n?.title),children:v})}),g&&t(me,{asChild:!0,children:t(c,{as:"p",className:s("text-info-primary laptop:text-base mt-1 text-center text-sm",n?.subTitle),children:g})})]}),o==="success"?m("div",{className:s("flex flex-col items-center text-center",n?.successText),children:[t("div",{className:"flex size-20 items-center justify-center",children:m("svg",{xmlns:"http://www.w3.org/2000/svg",width:"80",height:"80",viewBox:"0 0 80 80",fill:"none",children:[t("circle",{cx:"40",cy:"40",r:"35",fill:"#30D158"}),t("path",{d:"M23.3333 38.3333L36.6666 50L56.6666 30",stroke:"white",strokeWidth:"6.66667",strokeLinecap:"round",strokeLinejoin:"round"})]})}),m("div",{className:"mt-4",children:[t(R,{as:"h3",size:2,className:"text-info-primary font-bold",children:Q}),S&&t(c,{as:"p",className:"text-info-primary laptop:text-base mt-1 text-sm",children:S})]}),M&&t(P,{variant:"primary",size:"lg",onClick:()=>E(!1),className:"laptop:mt-8 mt-6 w-full",children:M})]}):m("div",{className:"flex flex-col gap-4",children:[m("div",{className:n?.emailInput,children:[t(c,{as:"label",htmlFor:"notify-me-email",className:"text-info-primary laptop:text-base mb-2 block text-sm",children:A}),t(ce,{id:"notify-me-email",type:"email",placeholder:F,value:x,onChange:O,disabled:o==="loading",className:s("placeholder:text-info-tertiary text-info-primary laptop:h-[54px] laptop:text-base laptop:p-4 border-lines-1 h-[44px] w-full bg-white p-3 text-sm font-bold placeholder:font-bold focus-visible:!outline-none",p!=="idle"&&"border-error-0")}),p==="error-empty"&&t(c,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:W}),p==="error-format"&&t(c,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:X})]}),ae&&t("div",{className:s("laptop:gap-4 flex flex-col gap-2",n?.checkboxes),children:i.map((e,r)=>e.label?m("div",{children:[m("label",{className:s("text-info-tertiary flex cursor-pointer items-start gap-2",n?.checkboxItem),children:[t(pe,{checked:k[r],onCheckedChange:()=>Z(r),"data-headless-type-name":`${h}#${y}`,"data-headless-title-desc-button":`''#''#${e.label}`,"data-headless-nav-position":"''#1",disabled:o==="loading",className:"border-info-secondary data-[state=checked]:bg-info-secondary mt-0.5 shrink-0"}),t(c,{as:"span",className:"text-info-tertiary laptop:text-base [&_a]:text-brand-0 text-sm leading-snug [&_a]:underline",html:e.label})]}),U[r]&&t(c,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:J})]},r):null)}),t(P,{variant:"primary",size:"lg",loading:o==="loading",disabled:!Y,onClick:ee,className:s("w-full",n?.submitBtn),"data-headless-type-name":`${h}#${y}`,"data-headless-title-desc-button":`''#''#${T}`,"data-headless-nav-position":"''#1",children:T}),o==="error-submit"&&t(c,{as:"p",className:s("text-error-0 laptop:text-base text-sm",n?.errorText),children:V})]})]})})};j.displayName="NotifyMeDialog";var _e=j;export{_e as default};
|
|
2
|
+
//# sourceMappingURL=NotifyMeDialog.js.map
|