@anker-in/headless-ui 1.3.9 → 1.3.11
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/BuyOneGetOneShelf/FreeGiftItem.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/FreeGiftItem.js.map +2 -2
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.d.ts +14 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js +1 -1
- package/dist/cjs/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/cjs/biz-components/Graphic/index.d.ts +1 -0
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js.map +2 -2
- package/dist/cjs/biz-components/VideoModal/index.js +1 -1
- package/dist/cjs/biz-components/VideoModal/index.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/FreeGiftItem.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/FreeGiftItem.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js +1 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/index.js.map +3 -3
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts +14 -1
- package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map +1 -1
- package/dist/esm/biz-components/Graphic/index.d.ts +1 -0
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js.map +2 -2
- package/dist/esm/biz-components/VideoModal/index.js +1 -1
- package/dist/esm/biz-components/VideoModal/index.js.map +2 -2
- package/package.json +1 -1
- package/style.css +0 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BuyOneGetOneShelf/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport ProductCard from './ProductCard.js'\nimport { Heading, Text } from '../../components/index.js'\nimport type { BuyOneGetOneShelfProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'buy_one_get_one_shelf'\n\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "ProductCard", "Heading", "Text", "useExposure", "componentType", "componentName", "BuyOneGetOneShelfRoot", "className", "classNames", "theme", "title", "subtitle", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport ProductCard from './ProductCard.js'\nimport { Heading, Text } from '../../components/index.js'\nimport type { BuyOneGetOneShelfProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'shelf'\nconst componentName = 'buy_one_get_one_shelf'\n\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n return React.Children.toArray(children).flatMap(child => {\n if (React.isValidElement(child) && child.type === React.Fragment) {\n return flattenChildren((child.props as { children?: React.ReactNode }).children)\n }\n return [child]\n })\n}\n\nfunction getLayout(node: React.ReactNode): string {\n if (React.isValidElement(node)) {\n return (node.props as { layout?: string }).layout ?? 'horizontal'\n }\n return 'horizontal'\n}\n\nfunction sliceToCompleteRow(all: React.ReactNode[], threshold: number): React.ReactNode[] {\n let filledInRow = 0\n let lastCompleteIndex = 0\n for (let i = 0; i < threshold; i++) {\n const span = getLayout(all[i]) === 'horizontal' ? 2 : 1\n if (span === 2 && filledInRow > 0) filledInRow = 0\n filledInRow += span\n if (filledInRow === 2) {\n lastCompleteIndex = i + 1\n filledInRow = 0\n }\n }\n return all.slice(0, lastCompleteIndex)\n}\n\nconst BuyOneGetOneShelfRoot = React.forwardRef<HTMLDivElement, BuyOneGetOneShelfProps>(\n (\n {\n className,\n classNames = {},\n theme,\n title,\n subtitle,\n children,\n viewMoreThreshold = 4,\n viewMoreText = 'View More',\n viewLessText = 'View Less',\n ...props\n },\n ref\n ) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const [isExpanded, setIsExpanded] = React.useState(false)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const childrenArray = flattenChildren(children)\n const needCollapse = childrenArray.length > viewMoreThreshold\n const displayedChildren =\n needCollapse && !isExpanded ? sliceToCompleteRow(childrenArray, viewMoreThreshold) : childrenArray\n\n const renderedChildren = displayedChildren.map(child => {\n if (!React.isValidElement(child)) return child\n const childProps = child.props as { layout?: string; className?: string }\n if (childProps.layout === 'horizontal') {\n return React.cloneElement(child as React.ReactElement<{ className?: string }>, {\n className: cn(childProps.className, 'laptop:col-span-2'),\n })\n }\n return child\n })\n\n return (\n <div\n ref={boxRef}\n className={cn(\n 'bogo-shelf-root w-full py-0',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n {...props}\n >\n {title && (\n <Heading as=\"h2\" html={title} className={cn('bogo-shelf-title text-info-primary mb-4', classNames?.title)} />\n )}\n {subtitle && (\n <Text\n size={3}\n as=\"p\"\n html={subtitle}\n className={cn('bogo-shelf-description text-info-primary mb-6', classNames?.description)}\n />\n )}\n <div className={cn('grid grid-cols-1 gap-6', 'laptop:grid-cols-2')}>{renderedChildren}</div>\n {needCollapse && (\n <div className=\"mt-6 flex justify-center\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(prev => !prev)}\n aria-expanded={isExpanded}\n className={cn(\n 'hover:text-brand-0 lg-desktop:text-[16px] text-info-primary flex cursor-pointer items-center gap-2 border-none bg-transparent text-[14px] font-bold outline-none transition-colors',\n classNames?.viewMoreBtn\n )}\n >\n {isExpanded ? viewLessText : viewMoreText}\n <svg\n className={cn('size-4 transition-transform', isExpanded && 'rotate-180')}\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n )\n }\n)\n\nBuyOneGetOneShelfRoot.displayName = 'BuyOneGetOneShelf.Root'\n\n// \u521B\u5EFA\u547D\u540D\u7A7A\u95F4\u5BF9\u8C61\uFF0C\u5305\u542B Root \u548C ProductCard \u7EC4\u4EF6\nconst BuyOneGetOneShelf = {\n Root: BuyOneGetOneShelfRoot,\n ProductCard: ProductCard,\n}\n\nexport default BuyOneGetOneShelf\n\n// Re-export types for external use\nexport type {\n FreeGift,\n FreeGiftWithSelection,\n ProductTag,\n BuyOneGetOneShelfSemanticName,\n BuyOneGetOneShelfRootSemanticName,\n BuyOneGetOneShelfProductCardSemanticName,\n ResponsiveImage,\n ResponsiveImages,\n BaseProductData,\n PureProductData,\n WithGiftData,\n ProductData,\n ProductCardData,\n CopyConfig,\n BogoItem,\n BuyOneGetOneShelfData,\n BuyOneGetOneShelfProps,\n BuyOneGetOneShelfCardProps,\n} from './types.js'\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "ProductCard", "Heading", "Text", "useExposure", "componentType", "componentName", "flattenChildren", "children", "child", "getLayout", "node", "sliceToCompleteRow", "all", "threshold", "filledInRow", "lastCompleteIndex", "i", "span", "BuyOneGetOneShelfRoot", "className", "classNames", "theme", "title", "subtitle", "viewMoreThreshold", "viewMoreText", "viewLessText", "props", "ref", "boxRef", "isExpanded", "setIsExpanded", "childrenArray", "needCollapse", "renderedChildren", "childProps", "prev", "BuyOneGetOneShelf", "BuyOneGetOneShelf_default"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ export interface ProductTag {
|
|
|
43
43
|
/** 促销类型(仅当 variant 为 'promotional' 时有效) */
|
|
44
44
|
promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount';
|
|
45
45
|
}
|
|
46
|
-
export type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content';
|
|
46
|
+
export type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content' | 'viewMoreBtn';
|
|
47
47
|
export type BuyOneGetOneShelfProductCardSemanticName = 'productCard' | 'productCardImage' | 'productCardTitle' | 'productCardDescription' | 'productCardPrice' | 'productCardGiftsContainer' | 'productCardBtnGroup';
|
|
48
48
|
export type BuyOneGetOneShelfSemanticName = BuyOneGetOneShelfRootSemanticName | BuyOneGetOneShelfProductCardSemanticName;
|
|
49
49
|
/**
|
|
@@ -148,6 +148,7 @@ export interface BogoItem {
|
|
|
148
148
|
shopNowFun: string;
|
|
149
149
|
shopNowText: string;
|
|
150
150
|
learnMoreText: string;
|
|
151
|
+
layout?: 'horizontal' | 'vertical';
|
|
151
152
|
}
|
|
152
153
|
/**
|
|
153
154
|
* BuyOneGetOneShelf 业务组件数据接口 - 新格式
|
|
@@ -158,6 +159,12 @@ export interface BuyOneGetOneShelfData {
|
|
|
158
159
|
title: string;
|
|
159
160
|
subtitle: string;
|
|
160
161
|
bogoItems: BogoItem[];
|
|
162
|
+
/** 超过此数量的商品时显示"View More/View Less"按钮,默认 4 */
|
|
163
|
+
viewMoreThreshold?: number;
|
|
164
|
+
/** View More 按钮文案,默认 'View More' */
|
|
165
|
+
viewMoreText?: string;
|
|
166
|
+
/** View Less 按钮文案,默认 'View Less' */
|
|
167
|
+
viewLessText?: string;
|
|
161
168
|
}
|
|
162
169
|
export interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
163
170
|
/** 标题 */
|
|
@@ -169,6 +176,12 @@ export interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElem
|
|
|
169
176
|
children: React.ReactNode;
|
|
170
177
|
/** Root 组件的自定义类名 */
|
|
171
178
|
classNames?: Partial<Record<BuyOneGetOneShelfRootSemanticName, string>>;
|
|
179
|
+
/** 超过此数量的商品时显示"View More/View Less"按钮,默认 4 */
|
|
180
|
+
viewMoreThreshold?: number;
|
|
181
|
+
/** View More 按钮文案,默认 'View More' */
|
|
182
|
+
viewMoreText?: string;
|
|
183
|
+
/** View Less 按钮文案,默认 'View Less' */
|
|
184
|
+
viewLessText?: string;
|
|
172
185
|
}
|
|
173
186
|
export interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
|
|
174
187
|
/** 产品数据 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BuyOneGetOneShelf/types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport type { Theme } from '../../types/props'\n\n/**\n * \u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGift {\n /** \u8D60\u54C1ID */\n id: string\n /** \u8D60\u54C1\u56FE\u7247URL */\n image: string\n /** \u8D60\u54C1\u540D\u79F0 */\n name: string\n /** \u539F\u4EF7 */\n originalPrice: string\n /** \u73B0\u4EF7\uFF08\u901A\u5E38\u4E3AFree\uFF09 */\n currentPrice: string\n /** \u6570\u91CF */\n quantity: number\n /** \u53D8\u4F53ID */\n variantId: string\n /** SKU */\n sku: string\n /** \u53E5\u67C4 */\n handle: string\n /** \u8D60\u54C1tag */\n tag?: string\n}\n\n/**\n * \u5E26\u9009\u62E9\u72B6\u6001\u7684\u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGiftWithSelection extends FreeGift {\n /** \u662F\u5426\u5DF2\u9009\u4E2D */\n selected?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u6807\u7B7E\u63A5\u53E3\n */\nexport interface ProductTag {\n /** \u6807\u7B7E\u6587\u672C */\n label: string\n /** \u6807\u7B7E\u6837\u5F0F\u53D8\u4F53 */\n variant: 'outline' | 'fill' | 'promotional'\n /** \u4FC3\u9500\u7C7B\u578B\uFF08\u4EC5\u5F53 variant \u4E3A 'promotional' \u65F6\u6709\u6548\uFF09 */\n promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\n}\n\n// Root \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content'\n\n// ProductCard \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfProductCardSemanticName =\n | 'productCard'\n | 'productCardImage'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPrice'\n | 'productCardGiftsContainer'\n | 'productCardBtnGroup'\n\n// \u5B8C\u6574\u7684\u8BED\u4E49\u7C7B\u540D\uFF08\u5411\u540E\u517C\u5BB9\uFF09\nexport type BuyOneGetOneShelfSemanticName = BuyOneGetOneShelfRootSemanticName | BuyOneGetOneShelfProductCardSemanticName\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u63A5\u53E3\n */\nexport interface ResponsiveImage {\n id: number\n baseUrl?: string\n url: string\n thumbnailURL?: string\n filename?: string\n mimeType?: string\n width?: number\n height?: number\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408\u63A5\u53E3\n */\nexport interface ResponsiveImages {\n laptop?: ResponsiveImage\n mobile?: ResponsiveImage\n tablet?: ResponsiveImage\n desktop?: ResponsiveImage\n lgDesktop?: ResponsiveImage\n}\n\n/**\n * \u4EA7\u54C1\u57FA\u7840\u6570\u636E\u63A5\u53E3\n */\nexport interface BaseProductData {\n sku: string\n name: string\n image: string\n value: string\n handle: string\n shopify_id: string\n}\n\nexport interface WithGiftData {\n /**\n * \u8D60\u54C1\n */\n gifts: FreeGift[]\n /**\n * \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1\n */\n gift_type: 1 | 2\n}\n\n/**\n * \u7EAF\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09\n */\nexport interface PureProductData extends BaseProductData {\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u5F53\u524D\u4EF7\u683C */\n currentPrice?: string\n /** \u539F\u4EF7 */\n originalPrice?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n learnMoreText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n shopNowText?: string\n /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n freeGiftLabel?: string\n /** \u4EA7\u54C1\u6807\u7B7E */\n tags?: ProductTag[]\n /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n giftSelectionMode?: 'single' | 'multiple'\n availableForSale: boolean\n}\n\nexport interface ProductData extends BaseProductData, WithGiftData {\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u5F53\u524D\u4EF7\u683C */\n currentPrice?: string\n /** \u539F\u4EF7 */\n originalPrice?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n learnMoreText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n shopNowText?: string\n /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n freeGiftLabel?: string\n /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n giftSelectionMode?: 'single' | 'multiple'\n}\n\n// Alias for consistency with other components\nexport type ProductCardData = ProductData\n\n/**\n * \u6587\u6848\u914D\u7F6E\u63A5\u53E3\n */\nexport interface CopyConfig {\n shopNowText: string\n freeGiftLabel: string\n learnMoreText: string\n freeGiftHeading: string\n}\n\n/**\n * \u4E70\u8D60\u9879\u76EE\u63A5\u53E3\n */\nexport interface BogoItem {\n id: string\n data: ProductData[]\n images: ResponsiveImages\n shopNowFun: string\n shopNowText: string\n learnMoreText: string\n}\n\n/**\n * BuyOneGetOneShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3 - \u65B0\u683C\u5F0F\n */\nexport interface BuyOneGetOneShelfData {\n copy: CopyConfig\n theme: string\n title: string\n subtitle: string\n bogoItems: BogoItem[]\n}\n\n// Root \u7EC4\u4EF6 Props\uFF08\u65B0\u7684\u7EC4\u5408\u5F0F\u8BBE\u8BA1\uFF09\nexport interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n theme?: Theme\n /** \u5B50\u7EC4\u4EF6 */\n children: React.ReactNode\n /** Root \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n classNames?: Partial<Record<BuyOneGetOneShelfRootSemanticName, string>>\n}\n\n// \u5361\u7247\u7EC4\u4EF6Props - \u57FA\u4E8EProductCardProps\u4F46\u7B80\u5316\nexport interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n /** \u4EA7\u54C1\u6570\u636E */\n productData: BaseProductData & {\n description?: string\n currentPrice?: string\n originalPrice?: string\n learnMoreText?: string\n shopNowText?: string\n freeGiftLabel?: string\n }\n /** \u8D60\u54C1\u5217\u8868 */\n gifts?: FreeGift[]\n /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n giftType?: 1 | 2\n /** \u573A\u666F\u56FE\u7247 */\n sceneImages?: ResponsiveImages\n /** \u5E03\u5C40\u6A21\u5F0F\uFF08\u901A\u5E38\u7531\u7236\u7EC4\u4EF6\u81EA\u52A8\u51B3\u5B9A\uFF09 */\n layout?: 'horizontal' | 'vertical'\n /** ProductCard \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n /** @deprecated Use `onProductImageClick` instead. */\n onProductClick?: (product: ProductCardData) => void\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n// \u4FDD\u6301\u5411\u540E\u517C\u5BB9\u7684\u4F20\u7EDFProps\nexport interface BuyOneGetOneShelfLegacyProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: BuyOneGetOneShelfData\n /** @deprecated Use `onProductImageClick` instead. */\n onProductClick?: (product: ProductCardData) => void\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n onAddToCart?: (product: ProductCardData) => void\n /** \u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6 */\n onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6 */\n onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n classNames?: Partial<Record<BuyOneGetOneShelfSemanticName, string>>\n}\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport type { Theme } from '../../types/props'\n\n/**\n * \u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGift {\n /** \u8D60\u54C1ID */\n id: string\n /** \u8D60\u54C1\u56FE\u7247URL */\n image: string\n /** \u8D60\u54C1\u540D\u79F0 */\n name: string\n /** \u539F\u4EF7 */\n originalPrice: string\n /** \u73B0\u4EF7\uFF08\u901A\u5E38\u4E3AFree\uFF09 */\n currentPrice: string\n /** \u6570\u91CF */\n quantity: number\n /** \u53D8\u4F53ID */\n variantId: string\n /** SKU */\n sku: string\n /** \u53E5\u67C4 */\n handle: string\n /** \u8D60\u54C1tag */\n tag?: string\n}\n\n/**\n * \u5E26\u9009\u62E9\u72B6\u6001\u7684\u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGiftWithSelection extends FreeGift {\n /** \u662F\u5426\u5DF2\u9009\u4E2D */\n selected?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u6807\u7B7E\u63A5\u53E3\n */\nexport interface ProductTag {\n /** \u6807\u7B7E\u6587\u672C */\n label: string\n /** \u6807\u7B7E\u6837\u5F0F\u53D8\u4F53 */\n variant: 'outline' | 'fill' | 'promotional'\n /** \u4FC3\u9500\u7C7B\u578B\uFF08\u4EC5\u5F53 variant \u4E3A 'promotional' \u65F6\u6709\u6548\uFF09 */\n promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\n}\n\n// Root \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content' | 'viewMoreBtn'\n\n// ProductCard \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfProductCardSemanticName =\n | 'productCard'\n | 'productCardImage'\n | 'productCardTitle'\n | 'productCardDescription'\n | 'productCardPrice'\n | 'productCardGiftsContainer'\n | 'productCardBtnGroup'\n\n// \u5B8C\u6574\u7684\u8BED\u4E49\u7C7B\u540D\uFF08\u5411\u540E\u517C\u5BB9\uFF09\nexport type BuyOneGetOneShelfSemanticName = BuyOneGetOneShelfRootSemanticName | BuyOneGetOneShelfProductCardSemanticName\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u63A5\u53E3\n */\nexport interface ResponsiveImage {\n id: number\n baseUrl?: string\n url: string\n thumbnailURL?: string\n filename?: string\n mimeType?: string\n width?: number\n height?: number\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408\u63A5\u53E3\n */\nexport interface ResponsiveImages {\n laptop?: ResponsiveImage\n mobile?: ResponsiveImage\n tablet?: ResponsiveImage\n desktop?: ResponsiveImage\n lgDesktop?: ResponsiveImage\n}\n\n/**\n * \u4EA7\u54C1\u57FA\u7840\u6570\u636E\u63A5\u53E3\n */\nexport interface BaseProductData {\n sku: string\n name: string\n image: string\n value: string\n handle: string\n shopify_id: string\n}\n\nexport interface WithGiftData {\n /**\n * \u8D60\u54C1\n */\n gifts: FreeGift[]\n /**\n * \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1\n */\n gift_type: 1 | 2\n}\n\n/**\n * \u7EAF\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09\n */\nexport interface PureProductData extends BaseProductData {\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u5F53\u524D\u4EF7\u683C */\n currentPrice?: string\n /** \u539F\u4EF7 */\n originalPrice?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n learnMoreText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n shopNowText?: string\n /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n freeGiftLabel?: string\n /** \u4EA7\u54C1\u6807\u7B7E */\n tags?: ProductTag[]\n /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n giftSelectionMode?: 'single' | 'multiple'\n availableForSale: boolean\n}\n\nexport interface ProductData extends BaseProductData, WithGiftData {\n /** \u4EA7\u54C1\u63CF\u8FF0 */\n description?: string\n /** \u5F53\u524D\u4EF7\u683C */\n currentPrice?: string\n /** \u539F\u4EF7 */\n originalPrice?: string\n /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n learnMoreText?: string\n /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n shopNowText?: string\n /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n freeGiftLabel?: string\n /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n giftSelectionMode?: 'single' | 'multiple'\n}\n\n// Alias for consistency with other components\nexport type ProductCardData = ProductData\n\n/**\n * \u6587\u6848\u914D\u7F6E\u63A5\u53E3\n */\nexport interface CopyConfig {\n shopNowText: string\n freeGiftLabel: string\n learnMoreText: string\n freeGiftHeading: string\n}\n\n/**\n * \u4E70\u8D60\u9879\u76EE\u63A5\u53E3\n */\nexport interface BogoItem {\n id: string\n data: ProductData[]\n images: ResponsiveImages\n shopNowFun: string\n shopNowText: string\n learnMoreText: string\n layout?: 'horizontal' | 'vertical'\n}\n\n/**\n * BuyOneGetOneShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3 - \u65B0\u683C\u5F0F\n */\nexport interface BuyOneGetOneShelfData {\n copy: CopyConfig\n theme: string\n title: string\n subtitle: string\n bogoItems: BogoItem[]\n /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n viewMoreThreshold?: number\n /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n viewMoreText?: string\n /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n viewLessText?: string\n}\n\n// Root \u7EC4\u4EF6 Props\uFF08\u65B0\u7684\u7EC4\u5408\u5F0F\u8BBE\u8BA1\uFF09\nexport interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n theme?: Theme\n /** \u5B50\u7EC4\u4EF6 */\n children: React.ReactNode\n /** Root \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n classNames?: Partial<Record<BuyOneGetOneShelfRootSemanticName, string>>\n /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n viewMoreThreshold?: number\n /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n viewMoreText?: string\n /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n viewLessText?: string\n}\n\n// \u5361\u7247\u7EC4\u4EF6Props - \u57FA\u4E8EProductCardProps\u4F46\u7B80\u5316\nexport interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n /** \u4EA7\u54C1\u6570\u636E */\n productData: BaseProductData & {\n description?: string\n currentPrice?: string\n originalPrice?: string\n learnMoreText?: string\n shopNowText?: string\n freeGiftLabel?: string\n }\n /** \u8D60\u54C1\u5217\u8868 */\n gifts?: FreeGift[]\n /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n giftType?: 1 | 2\n /** \u573A\u666F\u56FE\u7247 */\n sceneImages?: ResponsiveImages\n /** \u5E03\u5C40\u6A21\u5F0F\uFF08\u901A\u5E38\u7531\u7236\u7EC4\u4EF6\u81EA\u52A8\u51B3\u5B9A\uFF09 */\n layout?: 'horizontal' | 'vertical'\n /** ProductCard \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n /** @deprecated Use `onProductImageClick` instead. */\n onProductClick?: (product: ProductCardData) => void\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n// \u4FDD\u6301\u5411\u540E\u517C\u5BB9\u7684\u4F20\u7EDFProps\nexport interface BuyOneGetOneShelfLegacyProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: BuyOneGetOneShelfData\n /** @deprecated Use `onProductImageClick` instead. */\n onProductClick?: (product: ProductCardData) => void\n /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n onProductImageClick?: (product: ProductCardData) => void\n /** Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n /** Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n onAddToCart?: (product: ProductCardData) => void\n /** \u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6 */\n onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6 */\n onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n classNames?: Partial<Record<BuyOneGetOneShelfSemanticName, string>>\n}\n"],
|
|
5
5
|
"mappings": "AAAA,MAAuB",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ export interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes
|
|
|
38
38
|
itemShape?: 'round' | 'square';
|
|
39
39
|
itemTheme?: Theme;
|
|
40
40
|
descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6';
|
|
41
|
+
titleAlign?: 'center' | 'left';
|
|
41
42
|
};
|
|
42
43
|
}
|
|
43
44
|
declare const _default: React.ForwardRefExoticComponent<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as E,useRef as M,useState as a}from"react";import{createPortal as H}from"react-dom";import{cn as
|
|
1
|
+
"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as E,useRef as M,useState as a}from"react";import{createPortal as H}from"react-dom";import{cn as g,getLocalizedPath as R}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import _ from"../SwiperBox/index.js";import{Button as A,Heading as Y,Picture as k,Text as q}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import"swiper/css";const m="image",d="graphic",$=e=>{let o="";const l=c=>(c?.url&&(o=c.url),o),i=l(e.lgDesktop),u=l(e.desktop),r=l(e.laptop),b=l(e.tablet),h=e.default?.url;return[`${i} 9999`,`${u} 1919`,`${r} 1439`,`${b} 1024`,`${h} 768`].join(", ")},C="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",J=({data:e,configuration:o})=>{const l=M(null),[i,u]=a({visible:!1,x:0,y:0,text:""}),r=o?.descriptionTag||"h3",b=()=>{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-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},h=s=>{e?.description&&u({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},c=()=>{u(s=>({...s,visible:!1}))};N(l,{componentType:m,componentName:d,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const v=e?.href?"a":"div",w=e?.href?{href:y(e.href,`${m}_${d}`)}:{};return t("div",{ref:l,className:g(b(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:g("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:p("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?p("a",{"aria-label":e?.title||e?.description,href:y(e?.href||"",`${m}_${d}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),p(v,{...w,className:g("laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",{"bg-gradient-to-b from-transparent to-black/80":e?.showBottomGradient&&e?.theme==="dark","bg-gradient-to-b from-transparent to-white/80":e?.showBottomGradient&&e?.theme!=="dark"}),children:[p("div",{className:g("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[p("div",{className:"flex-1 overflow-hidden",children:[t(q,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&p("div",{onMouseMove:h,onMouseLeave:c,children:[e?.title?t(Y,{html:e?.description,style:{color:e?.textColor},as:r,className:`${C} graphic-description`}):t(r,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${C} graphic-description-item`}),typeof window<"u"&&i.visible&&H(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${i.x+16}px`,top:`${i.y+16}px`},children:i.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:t(k,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(A,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:y(R(e?.href||"",o?.locale||"us"),`${m}_${d}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},V=z.forwardRef(({data:e,className:o,...l},i)=>{const u=U({query:"(max-width: 768px)"}),r=M(null),[b,h]=a(!1),[c,v]=a(""),[w,s]=a(""),[P,S]=a(""),[G,T]=a(null),[B,I]=a(!1),{locale:D="us"}=F(),f=x=>{const n=e?.items?.length>3,L=e?.items?.length>2;switch(x){case 1440:return n?4:e?.items?.length;case 1024:return n?3:e?.items?.length;case 768:return e?.items?.length===1?1:n||L?2.3:2;default:return e?.items?.length===1?1:1.2}};return E(i,()=>r.current),N(r,{componentType:m,componentName:d,componentTitle:e?.title}),p("div",{...l,ref:r,className:g("graphicBlock",o),children:[p("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title,align:e?.titleAlign??"left"}}),t(_,{id:"Graphic",className:g("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:D,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,n)=>{h(!0),n?.isYouTube?s?.(n?.youtubeId||""):(v?.(n?.video?.url||""),S?.(n?.mobileVideo?.url||""))},onIconClick:x=>{I(!0),T(x)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),t(X,{visible:b,youTubeId:w,onCloseModal:()=>h(!1),videoUrl:u&&P||c}),t(Z,{textVisible:B,extension:G?.extension,onCloseModal:()=>{I(!1),T(null)}})]})});V.displayName="Graphic";var de=j(V);export{de as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport 'swiper/css'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n backgroundImage?: {\n default?: Img\n tablet?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n showBottomGradient?: boolean\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n * lgDesktop \u2192 1919px (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n * desktop \u2192 1439px (1440px - 1919px)\n * laptop \u2192 1024px (1025px - 1439px)\n * tablet \u2192 767px (768px - 1024px)\n * default \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n let last = ''\n const resolve = (img?: Img) => {\n if (img?.url) last = img.url\n return last\n }\n const lgDesktopSrc = resolve(bg.lgDesktop)\n const desktopSrc = resolve(bg.desktop)\n const laptopSrc = resolve(bg.laptop)\n const tabletSrc = resolve(bg.tablet)\n // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n const defaultSrc = bg.default?.url\n return [\n `${lgDesktopSrc} 9999`, // \u22641920px\n `${desktopSrc} 1919`, // 1440-1919px\n `${laptopSrc} 1439`, // 1025-1439px\n `${tabletSrc} 1024`, // 768-1024px\n `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n ].join(', ')\n}\nconst descriptionClass =\n 'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n visible: false,\n x: 0,\n y: 0,\n text: '',\n })\n\n const Tag = configuration?.descriptionTag || 'h3'\n\n const handleAspect = () => {\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-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (data?.description) {\n setTooltip({\n visible: true,\n x: e.clientX,\n y: e.clientY,\n text: data.description,\n })\n }\n }\n\n const handleMouseLeave = () => {\n setTooltip(prev => ({ ...prev, visible: false }))\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n const Container: React.ElementType = data?.href ? 'a' : 'div'\n const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n >\n {data?.href ? (\n <a\n aria-label={data?.title || data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"rounded-card block size-full overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n <span className=\"sr-only\">{data?.title || data?.description}</span>\n </a>\n ) : (\n <div className=\"rounded-card block size-full overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={\n data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n }\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n </div>\n )}\n <Container\n {...containerProps}\n className={cn('laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4', {\n 'bg-gradient-to-b from-transparent to-black/80': data?.showBottomGradient && data?.theme === 'dark',\n 'bg-gradient-to-b from-transparent to-white/80': data?.showBottomGradient && data?.theme !== 'dark',\n })}\n >\n <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n {data?.title ? (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\n style={{\n color: data?.textColor,\n }}\n dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n className={`${descriptionClass} graphic-description-item`}\n />\n )}\n {typeof window !== 'undefined' &&\n tooltip.visible &&\n createPortal(\n <div\n className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n style={{\n left: `${tooltip.x + 16}px`,\n top: `${tooltip.y + 16}px`,\n }}\n >\n {tooltip.text}\n </div>,\n document.body\n )}\n </div>\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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 )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title || data?.description}\n variant=\"secondary\"\n className=\"bgButton mt-[8px] self-start\"\n href={trackUrlRef(\n getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </Container>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n const { locale = 'us' } = useAiuiContext()\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n locale,\n descriptionTag: data.descriptionTag,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport 'swiper/css'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n backgroundImage?: {\n default?: Img\n tablet?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n showBottomGradient?: boolean\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n * lgDesktop \u2192 1919px (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n * desktop \u2192 1439px (1440px - 1919px)\n * laptop \u2192 1024px (1025px - 1439px)\n * tablet \u2192 767px (768px - 1024px)\n * default \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n let last = ''\n const resolve = (img?: Img) => {\n if (img?.url) last = img.url\n return last\n }\n const lgDesktopSrc = resolve(bg.lgDesktop)\n const desktopSrc = resolve(bg.desktop)\n const laptopSrc = resolve(bg.laptop)\n const tabletSrc = resolve(bg.tablet)\n // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n const defaultSrc = bg.default?.url\n return [\n `${lgDesktopSrc} 9999`, // \u22641920px\n `${desktopSrc} 1919`, // 1440-1919px\n `${laptopSrc} 1439`, // 1025-1439px\n `${tabletSrc} 1024`, // 768-1024px\n `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n ].join(', ')\n}\nconst descriptionClass =\n 'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n titleAlign?: 'center' | 'left'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n visible: false,\n x: 0,\n y: 0,\n text: '',\n })\n\n const Tag = configuration?.descriptionTag || 'h3'\n\n const handleAspect = () => {\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-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (data?.description) {\n setTooltip({\n visible: true,\n x: e.clientX,\n y: e.clientY,\n text: data.description,\n })\n }\n }\n\n const handleMouseLeave = () => {\n setTooltip(prev => ({ ...prev, visible: false }))\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n const Container: React.ElementType = data?.href ? 'a' : 'div'\n const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n >\n {data?.href ? (\n <a\n aria-label={data?.title || data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"rounded-card block size-full overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n <span className=\"sr-only\">{data?.title || data?.description}</span>\n </a>\n ) : (\n <div className=\"rounded-card block size-full overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={\n data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n }\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n </div>\n )}\n <Container\n {...containerProps}\n className={cn('laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4', {\n 'bg-gradient-to-b from-transparent to-black/80': data?.showBottomGradient && data?.theme === 'dark',\n 'bg-gradient-to-b from-transparent to-white/80': data?.showBottomGradient && data?.theme !== 'dark',\n })}\n >\n <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n {data?.title ? (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\n style={{\n color: data?.textColor,\n }}\n dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n className={`${descriptionClass} graphic-description-item`}\n />\n )}\n {typeof window !== 'undefined' &&\n tooltip.visible &&\n createPortal(\n <div\n className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n style={{\n left: `${tooltip.x + 16}px`,\n top: `${tooltip.y + 16}px`,\n }}\n >\n {tooltip.text}\n </div>,\n document.body\n )}\n </div>\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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 )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title || data?.description}\n variant=\"secondary\"\n className=\"bgButton mt-[8px] self-start\"\n href={trackUrlRef(\n getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </Container>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n const { locale = 'us' } = useAiuiContext()\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title, align: data?.titleAlign ?? 'left' }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n locale,\n descriptionTag: data.descriptionTag,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "Tag", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
|
|
7
7
|
}
|
package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as r}from"react/jsx-runtime";import{Text as a,Picture as B,Checkbox as P}from"../../../../../../components/index.js";import{cn as u}from"../../../../../../helpers/index.js";import{useAiuiContext as E}from"../../../../../AiuiProvider/index.js";import{useBizProductContext as w}from"../../../../BizProductProvider.js";import{formatPrice as f}from"../../../../utils/index.js";import{withLayout as L}from"../../../../../../shared/Styles.js";import{useFollowTooltip as F,FollowTooltip as z}from"../../../../hooks/useFollowTooltip.js";const D=()=>{const{locale:s="us"}=E(),{variant:x,bundle:v,checkedBundle:l,setCheckedBundle:d,setCheckedGift:T,savingDetail:A,setSavingDetail:O,setCheckedExchangePurchase:S,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:n,setAddOrder:p}=w(),{title:g,bundleList:h,showAtListing:k}=v||{},m=h?.filter(e=>e.variants.slice(1,e.variants.length).every(o=>o.variant.availableForSale));if(!m?.length&&k)return null;const y=e=>{l?.id===e.id?(d?.(void 0),c?.({...n,bundle:{value:void 0,canOperate:!0}}),p?.(o=>o.filter(t=>t!=="bundle"))):(d?.(e),c?.({...n,bundle:{value:e,canOperate:!1}}),p?.(o=>[...o.filter(b=>b!=="bundle"),"bundle"]))},{tooltip:C,getTooltipProps:N}=F();return r("div",{className:"ipc-product-detail-bundle",children:[i(a,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:g}),i("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m?.map(e=>{const o=e.variants.filter(t=>t.variant.sku!==x.sku);return i("div",{children:r("div",{className:u("rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[i(P,{onCheckedChange:()=>y(e),size:"lg",className:u("rounded-full border-2 border-[#E4E5E6]",{"border-brand":l?.id===e.id}),id:e.id,value:e.id,checked:l?.id===e.id}),i("label",{htmlFor:e.id,className:"size-full flex items-center cursor-pointer py-4 lg-desktop:py-6",children:o?.map(t=>r("div",{className:"flex items-center justify-between gap-6 ",children:[r("div",{className:"flex items-center gap-2",children:[i(B,{source:t?.variant?.image?.url,className:"size-12 shrink-0",imgClassName:"h-full"}),i(a,{...N(t.variant.product.title),className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:t.variant.product.title}),i(z,{...C})]}),r("div",{className:"laptop:flex-row flex shrink-0 flex-col items-center justify-end gap-1",children:[i(a,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold",html:f({amount:t.price,locale:s,currencyCode:t.variant.price.currencyCode})}),t.price<t.variant.price.amount&&i(a,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold text-[#6D6D6F] line-through",html:f({amount:t.variant.price.amount,locale:s,currencyCode:t.variant.price.currencyCode})})]})]},t.variant.id))})]})},e.id)})})]})};var K=L(D);export{K as default};
|
|
1
|
+
import{jsx as i,jsxs as r}from"react/jsx-runtime";import{Text as a,Picture as B,Checkbox as P}from"../../../../../../components/index.js";import{cn as u}from"../../../../../../helpers/index.js";import{useAiuiContext as E}from"../../../../../AiuiProvider/index.js";import{useBizProductContext as w}from"../../../../BizProductProvider.js";import{formatPrice as f}from"../../../../utils/index.js";import{withLayout as L}from"../../../../../../shared/Styles.js";import{useFollowTooltip as F,FollowTooltip as z}from"../../../../hooks/useFollowTooltip.js";const D=()=>{const{locale:s="us"}=E(),{variant:x,bundle:v,checkedBundle:l,setCheckedBundle:d,setCheckedGift:T,savingDetail:A,setSavingDetail:O,setCheckedExchangePurchase:S,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:n,setAddOrder:p}=w(),{title:g,bundleList:h,showAtListing:k}=v||{},m=h?.filter(e=>e.variants.slice(1,e.variants.length).every(o=>o.variant.availableForSale));if(!m?.length&&k)return null;const y=e=>{l?.id===e.id?(d?.(void 0),c?.({...n,bundle:{value:void 0,canOperate:!0}}),p?.(o=>o.filter(t=>t!=="bundle"))):(d?.(e),c?.({...n,bundle:{value:e,canOperate:!1}}),p?.(o=>[...o.filter(b=>b!=="bundle"),"bundle"]))},{tooltip:C,getTooltipProps:N}=F();return r("div",{className:"ipc-product-detail-bundle",children:[i(a,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:g}),i("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m?.map(e=>{const o=e.variants.filter(t=>t.variant.sku!==x.sku);return i("div",{children:r("div",{className:u("rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[i(P,{onCheckedChange:()=>y(e),size:"lg",className:u("rounded-full border-2 border-[#E4E5E6]",{"border-brand-0 data-[state=checked]:bg-brand-0":l?.id===e.id}),id:e.id,value:e.id,checked:l?.id===e.id}),i("label",{htmlFor:e.id,className:"size-full flex items-center cursor-pointer py-4 lg-desktop:py-6",children:o?.map(t=>r("div",{className:"flex items-center justify-between gap-6 ",children:[r("div",{className:"flex items-center gap-2",children:[i(B,{source:t?.variant?.image?.url,className:"size-12 shrink-0",imgClassName:"h-full"}),i(a,{...N(t.variant.product.title),className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:t.variant.product.title}),i(z,{...C})]}),r("div",{className:"laptop:flex-row flex shrink-0 flex-col items-center justify-end gap-1",children:[i(a,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold",html:f({amount:t.price,locale:s,currencyCode:t.variant.price.currencyCode})}),t.price<t.variant.price.amount&&i(a,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold text-[#6D6D6F] line-through",html:f({amount:t.variant.price.amount,locale:s,currencyCode:t.variant.price.currencyCode})})]})]},t.variant.id))})]})},e.id)})})]})};var K=L(D);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/ProductCard/ProductDetail/ProductBundle/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport type { BundleListItem } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { useFollowTooltip, FollowTooltip } from '../../../../hooks/useFollowTooltip.js'\n\nconst ProductBundle = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n variant,\n bundle,\n checkedBundle,\n setCheckedBundle,\n setCheckedGift,\n savingDetail,\n setSavingDetail,\n setCheckedExchangePurchase,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n\n const { title, bundleList, showAtListing } = bundle || {}\n\n const availableBundleList = bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n )\n\n if (!availableBundleList?.length && showAtListing) return null\n\n const handleSelectedChange = (bundleItem: BundleListItem) => {\n if (checkedBundle?.id === bundleItem.id) {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n } else {\n setCheckedBundle?.(bundleItem)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundleItem,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'bundle')\n return [...filtered, 'bundle']\n })\n }\n }\n\n const { tooltip, getTooltipProps } = useFollowTooltip()\n\n return (\n <div className=\"ipc-product-detail-bundle\">\n <Text className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\" html={title} />\n <div className=\"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n {availableBundleList?.map(bundle => {\n const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n return (\n <div key={bundle.id}>\n <div\n className={cn(\n 'rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold',\n {\n ['border-brand']: checkedBundle?.id === bundle.id,\n }\n )}\n >\n <Checkbox\n onCheckedChange={() => handleSelectedChange(bundle)}\n size=\"lg\"\n className={cn('rounded-full border-2 border-[#E4E5E6]', {\n 'border-brand': checkedBundle?.id === bundle.id,\n })}\n id={bundle.id}\n value={bundle.id}\n checked={checkedBundle?.id === bundle.id}\n />\n <label htmlFor={bundle.id} className=\"size-full flex items-center cursor-pointer py-4 lg-desktop:py-6\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-6 \" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-2\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"size-12 shrink-0\"\n imgClassName=\"h-full\"\n />\n <Text\n {...getTooltipProps(bundleVariant.variant.product.title)}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n html={bundleVariant.variant.product.title}\n />\n <FollowTooltip {...tooltip} />\n </div>\n <div className=\"laptop:flex-row flex shrink-0 flex-col items-center justify-end gap-1\">\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold\"\n html={formatPrice({\n amount: bundleVariant.price,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n )}\n </div>\n </div>\n )\n })}\n </label>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductBundle)\n"],
|
|
5
|
-
"mappings": "AAmEM,cAAAA,EA4BkB,QAAAC,MA5BlB,oBAnEN,OAAS,QAAAC,EAAM,WAAAC,EAAS,YAAAC,MAAgB,wCACxC,OAAS,MAAAC,MAAU,qCACnB,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,6BAE5B,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,oBAAAC,EAAkB,iBAAAC,MAAqB,wCAEhD,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIP,EAAe,EACnC,CACJ,QAAAQ,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,EAAIjB,EAAqB,EAEnB,CAAE,MAAAkB,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIZ,GAAU,CAAC,EAElDa,EAAsBF,GAAY,OAAOX,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMc,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDf,GAAe,KAAOe,EAAW,IACnCd,IAAmB,MAAS,EAC5BK,IAAgC,CAC9B,GAAGC,EACH,OAAQ,CACN,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAO,GAAK,IAAM,QAAQ,CAAC,IAEtDf,IAAmBc,CAAU,EAC7BT,IAAgC,CAC9B,GAAGC,EACH,OAAQ,CACN,MAAOQ,EACP,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,QAAQ,EAC3B,QAAQ,CAC9B,EAEL,EAEM,CAAE,QAAAC,EAAS,gBAAAC,CAAgB,EAAIzB,EAAiB,EAEtD,OACET,EAAC,OAAI,UAAU,4BACb,UAAAD,EAACE,EAAA,CAAK,UAAU,6DAA6D,KAAMuB,EAAO,EAC1FzB,EAAC,OAAI,UAAU,uFACZ,SAAA4B,GAAqB,IAAIb,GAAU,CAClC,MAAMqB,EAAiBrB,EAAO,SAAS,OAAOc,GAAKA,EAAE,QAAQ,MAAQf,EAAQ,GAAG,EAChF,OACEd,EAAC,OACC,SAAAC,EAAC,OACC,UAAWI,EACT,mHACA,CACG,eAAiBW,GAAe,KAAOD,EAAO,EACjD,CACF,EAEA,UAAAf,EAACI,EAAA,CACC,gBAAiB,IAAM0B,EAAqBf,CAAM,EAClD,KAAK,KACL,UAAWV,EAAG,yCAA0C,CACtD,
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport type { BundleListItem } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { useFollowTooltip, FollowTooltip } from '../../../../hooks/useFollowTooltip.js'\n\nconst ProductBundle = () => {\n const { locale = 'us' } = useAiuiContext()\n const {\n variant,\n bundle,\n checkedBundle,\n setCheckedBundle,\n setCheckedGift,\n savingDetail,\n setSavingDetail,\n setCheckedExchangePurchase,\n setJoinedRecommendBuyProducts,\n joinedRecommendBuyProducts,\n setAddOrder,\n } = useBizProductContext()\n\n const { title, bundleList, showAtListing } = bundle || {}\n\n const availableBundleList = bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n )\n\n if (!availableBundleList?.length && showAtListing) return null\n\n const handleSelectedChange = (bundleItem: BundleListItem) => {\n if (checkedBundle?.id === bundleItem.id) {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n } else {\n setCheckedBundle?.(bundleItem)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundleItem,\n canOperate: false,\n },\n })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => {\n // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n const filtered = prev.filter(t => t !== 'bundle')\n return [...filtered, 'bundle']\n })\n }\n }\n\n const { tooltip, getTooltipProps } = useFollowTooltip()\n\n return (\n <div className=\"ipc-product-detail-bundle\">\n <Text className=\"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]\" html={title} />\n <div className=\"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n {availableBundleList?.map(bundle => {\n const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n return (\n <div key={bundle.id}>\n <div\n className={cn(\n 'rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold',\n {\n ['border-brand']: checkedBundle?.id === bundle.id,\n }\n )}\n >\n <Checkbox\n onCheckedChange={() => handleSelectedChange(bundle)}\n size=\"lg\"\n className={cn('rounded-full border-2 border-[#E4E5E6]', {\n 'border-brand-0 data-[state=checked]:bg-brand-0': checkedBundle?.id === bundle.id,\n })}\n id={bundle.id}\n value={bundle.id}\n checked={checkedBundle?.id === bundle.id}\n />\n <label htmlFor={bundle.id} className=\"size-full flex items-center cursor-pointer py-4 lg-desktop:py-6\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-6 \" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-2\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"size-12 shrink-0\"\n imgClassName=\"h-full\"\n />\n <Text\n {...getTooltipProps(bundleVariant.variant.product.title)}\n className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n html={bundleVariant.variant.product.title}\n />\n <FollowTooltip {...tooltip} />\n </div>\n <div className=\"laptop:flex-row flex shrink-0 flex-col items-center justify-end gap-1\">\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold\"\n html={formatPrice({\n amount: bundleVariant.price,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount,\n locale,\n currencyCode: bundleVariant.variant.price.currencyCode,\n })}\n />\n )}\n </div>\n </div>\n )\n })}\n </label>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductBundle)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useAiuiContext", "useBizProductContext", "formatPrice", "withLayout", "useFollowTooltip", "FollowTooltip", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "savingDetail", "setSavingDetail", "setCheckedExchangePurchase", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "prev", "t", "tooltip", "getTooltipProps", "bundleVariants", "bundleVariant", "ProductBundle_default"]
|
|
7
7
|
}
|
package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductCoupon/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as z,jsx as e,jsxs as a}from"react/jsx-runtime";import"react";import{cn as k,formatPrice as y}from"../../../../../../helpers/index.js";import{Text as d,Link as I,Checkbox as N}from"../../../../../../components/index.js";import _ from"../../../../hooks/useCopy.js";import{useBenefits as S}from"../../../../hooks/useBenefits.js";import{useBizProductContext as B}from"../../../../BizProductProvider.js";import{useComponentData as L}from"../../../../hooks/useComponentData.js";import{replaceTemplate as
|
|
1
|
+
"use client";import{Fragment as z,jsx as e,jsxs as a}from"react/jsx-runtime";import"react";import{cn as k,formatPrice as y}from"../../../../../../helpers/index.js";import{Text as d,Link as I,Checkbox as N}from"../../../../../../components/index.js";import _ from"../../../../hooks/useCopy.js";import{useBenefits as S}from"../../../../hooks/useBenefits.js";import{useBizProductContext as B}from"../../../../BizProductProvider.js";import{useComponentData as L}from"../../../../hooks/useComponentData.js";import{replaceTemplate as f}from"../../../../utils/textFormat.js";import{useAiuiContext as R}from"../../../../../AiuiProvider/index.js";import $ from"../../../../../../hooks/useCountDown.js";const h=({checked:s,discountText:r,codeText:n,code:l,countdownText:i,copyText:m,copiedText:g,onClick:c,className:x})=>{const{copied:b,copy:C}=_();return e("div",{className:k("flex flex-col gap-3 rounded-box overflow-hidden",x),role:"button",tabIndex:0,onClick:c,children:a("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:[a("div",{className:"flex flex-col gap-1",children:[a("div",{className:"flex items-center gap-1",children:[e(N,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:s}),e(d,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:r})]}),a("div",{className:"flex w-full items-center gap-2",children:[e("div",{className:"flex shrink-0 flex-col items-start",children:e(d,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]",children:n})}),e(I,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:o=>{o.preventDefault(),o.stopPropagation(),C(l)},children:b?g:m})]})]}),i&&e(d,{className:"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]",children:i})]})})};h.displayName="CouponCard";const T=({checked:s,discountText:r,description:n,onClick:l,className:i})=>e("div",{className:k("flex flex-col gap-3 rounded-box overflow-hidden",i),role:"button",tabIndex:0,onClick:l,children:e("div",{className:"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4",children:a("div",{className:"flex flex-col gap-1",children:[a("div",{className:"flex items-center gap-1",children:[e(N,{size:"lg",className:"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary",checked:s}),e(d,{className:"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]",children:r})]}),n&&e(d,{className:"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8",children:n})]})})});T.displayName="MemberDiscountCard";const D=({className:s})=>{const{profile:r,variant:n,onUseCouponChange:l,onUseMemberDiscountChange:i,openSignInPopup:m,discount:g,savingDetail:c}=B(),{locale:x="us",trackingData:b}=R(),C=S({variant:n}),{commonCoupon:o,memberDiscount:u}=C,{days:P,hours:w,minutes:F,seconds:M}=$({endTime:o?.config?.ends_at}),v=b?.common?.coupon,t=L("ProductCoupon")??{};return!o?.enable&&!u?.enable||!n?.availableForSale?null:a("div",{className:k("ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4",s),children:[t?.title&&e(d,{className:"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]",children:t.title}),o?.enable&&e(h,{checked:c?.coupon>0,discountText:f(t?.common?.offCoupon,{discount:o?.config?.value_type=="percentage"?Math.abs(Number(o?.config?.value||0))+"%":y({amount:Math.abs(Number(o?.config?.fixed_value||0)),currencyCode:n.price.currencyCode,locale:x})||""}),codeText:f(t?.common?.withCode,{code:o?.config?.title??""}),code:o?.config?.title??"",countdownText:o?.config?.ends_at?f(t?.common?.endsIn,{countdown:`${P}:${w}:${F}:${M}`}):void 0,copyText:v?.copy||t?.copyCode,copiedText:v?.copied||t?.copied,onClick:()=>{const p=c?.coupon?0:g?.codeSavings??0;l?.(p)}}),u?.enable&&e(T,{checked:!!r?.email&&!!c?.member,discountText:f(t?.member?.offMember,{discount:y({amount:u?.config?.amount??0,currencyCode:n.price.currencyCode,locale:x})||""}),description:r?.email?t?.member?.loginDesc:a(z,{children:[e("span",{className:"mr-2",dangerouslySetInnerHTML:{__html:t?.member?.unloginDesc}}),e("span",{role:"button",tabIndex:0,onClick:p=>{p?.stopPropagation(),m?.()},className:"underline text-nowrap",dangerouslySetInnerHTML:{__html:t?.member?.login}})]}),onClick:()=>{if(!r?.email){m?.();return}const p=c?.member?0:u?.config?.amount??0;i?.(p)}})]})};D.displayName="ProductCoupon";var W=D;export{h as CouponCard,T as MemberDiscountCard,W 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/ProductCard/ProductDetail/ProductCoupon/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\nexport interface ProductCouponProps {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n discountText: string\n /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n codeText: string\n /** \u4F18\u60E0\u7801 */\n code: string\n /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n countdownText?: string\n /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n copyText: string\n /** \u5DF2\u590D\u5236\u6587\u6848 */\n copiedText: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n checked,\n discountText,\n codeText,\n code,\n countdownText,\n copyText,\n copiedText,\n onClick,\n className,\n}) => {\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n <div className=\"flex w-full items-center gap-2\">\n <div className=\"flex shrink-0 flex-col items-start\">\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n {codeText}\n </Text>\n </div>\n <Link\n className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(code)\n }}\n >\n {isCopied ? copiedText : copyText}\n </Link>\n </div>\n </div>\n\n {countdownText && (\n <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n {countdownText}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n discountText: string\n /** \u63CF\u8FF0\u6587\u6848 */\n description?: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n checked,\n discountText,\n description,\n onClick,\n className,\n}) => {\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n {description && (\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n {description}\n </Text>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n const { profile, variant, onUseCouponChange, onUseMemberDiscountChange, openSignInPopup, discount, savingDetail } =\n useBizProductContext()\n const { locale = 'us', trackingData } = useAiuiContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n\n const { days, hours, minutes, seconds } = useCountDown({ endTime: commonCoupon?.config?.ends_at })\n\n const couponCopy = trackingData?.common?.coupon\n\n const productCouponData = useComponentData('ProductCoupon') ?? {}\n\n if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n return null\n }\n\n return (\n <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n {productCouponData?.title && (\n <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n {productCouponData.title}\n </Text>\n )}\n {commonCoupon?.enable && (\n <CouponCard\n checked={savingDetail?.coupon > 0}\n discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n codeText={replaceTemplate(productCouponData?.common?.withCode, {\n code: commonCoupon?.config?.title ?? '',\n })}\n code={commonCoupon?.config?.title ?? ''}\n countdownText={\n commonCoupon?.config?.ends_at\n ? replaceTemplate(productCouponData?.common?.endsIn, {\n countdown: `${days}:${hours}:${minutes}:${seconds}`,\n })\n : undefined\n }\n copyText={couponCopy?.copy || productCouponData?.copyCode}\n copiedText={couponCopy?.copied || productCouponData?.copied}\n onClick={() => {\n const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n }}\n />\n )}\n\n {memberDiscount?.enable && (\n <MemberDiscountCard\n checked={Boolean(profile?.email) && !!savingDetail?.member}\n discountText={replaceTemplate(productCouponData?.member?.offMember, {\n discount:\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n description={\n Boolean(profile?.email) ? (\n productCouponData?.member?.loginDesc\n ) : (\n <>\n <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n />\n </>\n )\n }\n onClick={() => {\n if (profile?.email) {\n const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn, formatPrice } from '../../../../../../helpers/index.js'\nimport { Text, Link, Checkbox } from '../../../../../../components/index.js'\nimport useCopy from '../../../../hooks/useCopy.js'\nimport { useBenefits } from '../../../../hooks/useBenefits.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useComponentData } from '../../../../hooks/useComponentData.js'\nimport { replaceTemplate } from '../../../../utils/textFormat.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport useCountDown from '../../../../../../hooks/useCountDown.js'\n\nexport interface ProductCouponProps {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\n// \u4F18\u60E0\u5238\u5361\u7247\u7EC4\u4EF6\nexport interface CouponCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"20% OFF\") */\n discountText: string\n /** \u4F18\u60E0\u7801\u6587\u6848 (\u5982 \"With code: ABC123\") */\n codeText: string\n /** \u4F18\u60E0\u7801 */\n code: string\n /** \u5012\u8BA1\u65F6\u6587\u6848 (\u5982 \"Ends in: 1:23:45:00\") */\n countdownText?: string\n /** \u590D\u5236\u6309\u94AE\u6587\u6848 */\n copyText: string\n /** \u5DF2\u590D\u5236\u6587\u6848 */\n copiedText: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const CouponCard: React.FC<CouponCardProps> = ({\n checked,\n discountText,\n codeText,\n code,\n countdownText,\n copyText,\n copiedText,\n onClick,\n className,\n}) => {\n const { copied: isCopied, copy: copyToClipboard } = useCopy()\n\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n <div className=\"flex w-full items-center gap-2\">\n <div className=\"flex shrink-0 flex-col items-start\">\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\">\n {codeText}\n </Text>\n </div>\n <Link\n className=\"lg-desktop:text-[16px] text-[14px] font-bold underline\"\n role=\"button\"\n tabIndex={0}\n onClick={event => {\n event.preventDefault()\n event.stopPropagation()\n copyToClipboard(code)\n }}\n >\n {isCopied ? copiedText : copyText}\n </Link>\n </div>\n </div>\n\n {countdownText && (\n <Text className=\"text-brand-0 text-sm lg-desktop:text-base font-bold leading-[1.4] tracking-[-0.28px]\">\n {countdownText}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\nCouponCard.displayName = 'CouponCard'\n\n// \u4F1A\u5458\u4EF7\u4F18\u60E0\u5361\u7247\u7EC4\u4EF6\nexport interface MemberDiscountCardProps {\n /** \u662F\u5426\u9009\u4E2D */\n checked: boolean\n /** \u6298\u6263\u6587\u6848 (\u5982 \"$10 OFF Member Price\") */\n discountText: string\n /** \u63CF\u8FF0\u6587\u6848 */\n description?: string\n /** \u70B9\u51FB\u4E8B\u4EF6 */\n onClick?: () => void\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nexport const MemberDiscountCard: React.FC<MemberDiscountCardProps> = ({\n checked,\n discountText,\n description,\n onClick,\n className,\n}) => {\n return (\n <div\n className={cn('flex flex-col gap-3 rounded-box overflow-hidden', className)}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n >\n <div className=\"flex flex-col gap-3 overflow-hidden rounded-box bg-[#EDFBFF] p-3 laptop:p-4\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"flex items-center gap-1\">\n <Checkbox\n size=\"lg\"\n className=\"data-[state=checked]:border-info-primary data-[state=checked]:bg-info-primary mr-2 rounded-full border-[1.6px] border-info-primary\"\n checked={checked}\n />\n <Text className=\"text-info-primary text-base laptop:text-xl lg-desktop:text-2xl font-bold leading-[1.2] tracking-[-0.8px]\">\n {discountText}\n </Text>\n </div>\n\n {description && (\n <Text className=\"text-info-primary lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px] pl-8\">\n {description}\n </Text>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nMemberDiscountCard.displayName = 'MemberDiscountCard'\n\nconst ProductCoupon: React.FC<ProductCouponProps> = ({ className }) => {\n const { profile, variant, onUseCouponChange, onUseMemberDiscountChange, openSignInPopup, discount, savingDetail } =\n useBizProductContext()\n const { locale = 'us', trackingData } = useAiuiContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n\n const { days, hours, minutes, seconds } = useCountDown({ endTime: commonCoupon?.config?.ends_at })\n\n const couponCopy = trackingData?.common?.coupon\n\n const productCouponData = useComponentData('ProductCoupon') ?? {}\n\n if ((!commonCoupon?.enable && !memberDiscount?.enable) || !variant?.availableForSale) {\n return null\n }\n\n return (\n <div className={cn('ipc-product-detail-product-coupon flex flex-col gap-3 lg-desktop:gap-4', className)}>\n {productCouponData?.title && (\n <Text className=\"text-info-primary text-[14px] lg-desktop:text-[16px] font-bold leading-[1.2] tracking-[-0.56px]\">\n {productCouponData.title}\n </Text>\n )}\n {commonCoupon?.enable && (\n <CouponCard\n checked={savingDetail?.coupon > 0}\n discountText={replaceTemplate(productCouponData?.common?.offCoupon, {\n discount:\n commonCoupon?.config?.value_type == 'percentage'\n ? Math.abs(Number(commonCoupon?.config?.value || 0)) + '%'\n : formatPrice({\n amount: Math.abs(Number(commonCoupon?.config?.fixed_value || 0)),\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n codeText={replaceTemplate(productCouponData?.common?.withCode, {\n code: commonCoupon?.config?.title ?? '',\n })}\n code={commonCoupon?.config?.title ?? ''}\n countdownText={\n commonCoupon?.config?.ends_at\n ? replaceTemplate(productCouponData?.common?.endsIn, {\n countdown: `${days}:${hours}:${minutes}:${seconds}`,\n })\n : undefined\n }\n copyText={couponCopy?.copy || productCouponData?.copyCode}\n copiedText={couponCopy?.copied || productCouponData?.copied}\n onClick={() => {\n const couponSaving = !savingDetail?.coupon ? (discount?.codeSavings ?? 0) : 0\n onUseCouponChange?.(couponSaving)\n }}\n />\n )}\n\n {memberDiscount?.enable && (\n <MemberDiscountCard\n checked={Boolean(profile?.email) && !!savingDetail?.member}\n discountText={replaceTemplate(productCouponData?.member?.offMember, {\n discount:\n formatPrice({\n amount: memberDiscount?.config?.amount ?? 0,\n currencyCode: variant.price.currencyCode,\n locale,\n }) || '',\n })}\n description={\n Boolean(profile?.email) ? (\n productCouponData?.member?.loginDesc\n ) : (\n <>\n <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: productCouponData?.member?.unloginDesc }} />\n <span\n role=\"button\"\n tabIndex={0}\n onClick={e => {\n e?.stopPropagation()\n openSignInPopup?.()\n }}\n className=\"underline text-nowrap\"\n dangerouslySetInnerHTML={{ __html: productCouponData?.member?.login }}\n />\n </>\n )\n }\n onClick={() => {\n if (!profile?.email) {\n openSignInPopup?.()\n return\n }\n const memberSaving = !savingDetail?.member ? (memberDiscount?.config?.amount ?? 0) : 0\n onUseMemberDiscountChange?.(memberSaving)\n }}\n />\n )}\n </div>\n )\n}\n\nProductCoupon.displayName = 'ProductCoupon'\n\nexport default ProductCoupon\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "cn", "formatPrice", "Text", "Link", "Checkbox", "useCopy", "useBenefits", "useBizProductContext", "useComponentData", "replaceTemplate", "useAiuiContext", "useCountDown", "CouponCard", "checked", "discountText", "codeText", "code", "countdownText", "copyText", "copiedText", "onClick", "className", "isCopied", "copyToClipboard", "event", "MemberDiscountCard", "description", "ProductCoupon", "profile", "variant", "onUseCouponChange", "onUseMemberDiscountChange", "openSignInPopup", "discount", "savingDetail", "locale", "trackingData", "benefits", "commonCoupon", "memberDiscount", "days", "hours", "minutes", "seconds", "couponCopy", "productCouponData", "couponSaving", "e", "memberSaving", "ProductCoupon_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as
|
|
1
|
+
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as a,Picture as N,Checkbox as E}from"../../../../../../components/index.js";import{cn as x}from"../../../../../../helpers/index.js";import{useMemo as w}from"react";import{useBizProductContext as D}from"../../../../BizProductProvider.js";import{formatPrice as h}from"../../../../utils/index.js";import{useAiuiContext as F}from"../../../../../AiuiProvider/index.js";import{withLayout as B}from"../../../../../../shared/Styles.js";import{useFollowTooltip as T,FollowTooltip as z}from"../../../../hooks/useFollowTooltip.js";const L=()=>{const{locale:c="us"}=F(),{tooltip:f,getTooltipProps:b}=T(),{checkedExchangePurchase:r,exchangePurchase:g,setCheckedBundle:O,setJoinedRecommendBuyProducts:d,setSavingDetail:P,setCheckedExchangePurchase:i,joinedRecommendBuyProducts:s,savingDetail:k,setAddOrder:n}=D(),{title:C,giftList:p=[],freeLabel:S}=g||{},m=w(()=>p?.filter(e=>e.availableForSale),[p]),v=e=>{r?.id===e.id?(i?.(void 0),d?.({...s,exchange:{value:void 0,canOperate:!0}}),P?.({...k,exchangePurchase:0}),n?.(l=>l.filter(u=>u!=="exchange"))):(i?.(e),d?.({...s,exchange:{value:e,canOperate:!1}}),n?.(l=>[...l.filter(y=>y!=="exchange"),"exchange"]))};return m?.length?o("div",{className:"ipc-product-detail-exchange-purchase",children:[t(a,{className:"font-bold leading-[1.2] text-[14px] lg-desktop:text-[16px]",html:C}),t("div",{className:"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:m.map(e=>o("div",{className:x("rounded-box h-[80px] laptop:h-[100px] flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":r?.id===e.id}),children:[t(E,{onCheckedChange:()=>v(e),size:"lg",className:x("rounded-full border-2 border-[#E4E5E6]",{"border-brand-0 data-[state=checked]:bg-brand-0":r?.id===e.id}),id:e.id,checked:r?.id===e.id,value:e.id}),o("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-4 lg-desktop:py-6",children:[o("div",{className:"flex items-center gap-2",children:[t(N,{source:e.image?.url,className:"size-12 shrink-0",imgClassName:"h-full"}),t(a,{...b(e.product.title),className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title}),t(z,{...f})]}),o("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[t(a,{className:"laptop:text-[20px] lg-desktop:text-2xl !leading-[1.2] text-base font-bold",html:h({amount:e?.finalPrice?.amount||0,locale:c,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),t(a,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base !leading-[1.2] font-bold text-[#6D6D6F] line-through",html:h({amount:e.price.amount,locale:c,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var q=B(L);export{q as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|