@anker-in/headless-ui 1.3.68 → 1.3.69-alpha.1789380512987
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/ActiveShelf/MemberLabel.d.ts +40 -0
- package/dist/cjs/biz-components/ActiveShelf/MemberLabel.js +1 -0
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.d.ts +39 -2
- package/dist/cjs/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/ActiveShelf/index.d.ts +29 -1
- package/dist/cjs/biz-components/ActiveShelf/index.js +1 -1
- package/dist/cjs/biz-components/ActiveShelf/types.d.ts +48 -0
- package/dist/cjs/biz-components/ActiveShelf/types.js +1 -1
- package/dist/cjs/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.d.ts +2 -1
- package/dist/cjs/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/useNavCollapse.d.ts +30 -0
- package/dist/cjs/biz-components/HeaderNavigation/useNavCollapse.js +1 -0
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/ImageTextOverlay/index.js +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +10 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/components/badge.d.ts +1 -1
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/hooks/useDraggableScroll.js +1 -1
- package/dist/cjs/hooks/useExposure.d.ts +1 -1
- package/dist/cjs/hooks/useExposure.js +1 -1
- package/dist/cjs/hooks/useViewItemList.d.ts +1 -1
- package/dist/esm/biz-components/ActiveShelf/MemberLabel.d.ts +40 -0
- package/dist/esm/biz-components/ActiveShelf/MemberLabel.js +1 -0
- package/dist/esm/biz-components/ActiveShelf/ProductCard.d.ts +39 -2
- package/dist/esm/biz-components/ActiveShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/ActiveShelf/index.d.ts +29 -1
- package/dist/esm/biz-components/ActiveShelf/index.js +1 -1
- package/dist/esm/biz-components/ActiveShelf/types.d.ts +48 -0
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.d.ts +2 -1
- package/dist/esm/biz-components/HeaderNavigation/MobileMenuComponents.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/useNavCollapse.d.ts +30 -0
- package/dist/esm/biz-components/HeaderNavigation/useNavCollapse.js +1 -0
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/ImageTextOverlay/index.js +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/types.d.ts +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +10 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/esm/biz-components/Specs/dropdown.js +2 -2
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/components/badge.d.ts +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/hooks/useDraggableScroll.js +1 -1
- package/dist/esm/hooks/useExposure.d.ts +1 -1
- package/dist/esm/hooks/useExposure.js +1 -1
- package/dist/esm/hooks/useViewItemList.d.ts +1 -1
- package/dist/tokens/oneAnker.css +12 -0
- package/package.json +1 -1
- package/style.css +83 -12
- package/tailwind.config.js +6 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { Img } from '../../types/props.js';
|
|
3
|
+
import type { UserType, CopyConfig } from './types.js';
|
|
4
|
+
export type { UserType };
|
|
5
|
+
/**
|
|
6
|
+
* 会员标签模块 Props
|
|
7
|
+
*/
|
|
8
|
+
export interface MemberLabelProps {
|
|
9
|
+
/** 用户身份 */
|
|
10
|
+
userType: UserType;
|
|
11
|
+
/** 文案配置 */
|
|
12
|
+
copy?: CopyConfig;
|
|
13
|
+
/** 三种状态的装饰图 */
|
|
14
|
+
images?: Partial<Record<UserType, Img>>;
|
|
15
|
+
/** 点击游客副标题(注册/登录)回调 */
|
|
16
|
+
onSignUp?: () => void;
|
|
17
|
+
/** 点击付费会员折扣文案(加购付费会员sku)回调 */
|
|
18
|
+
onPlusMemberAddCart?: () => void;
|
|
19
|
+
/** 样式类名 */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** 是否配置会员活动(activityLabels 中存在 type=activity) */
|
|
22
|
+
hasActivity?: boolean;
|
|
23
|
+
/** 会员活动默认文案(来自 activityLabels 中对应 type 的 label,优先级高于 copy) */
|
|
24
|
+
activityLabel?: string;
|
|
25
|
+
/** 是否配置普通会员价(activityLabels 中存在 type=member) */
|
|
26
|
+
hasMemberPrice?: boolean;
|
|
27
|
+
/** 是否配置付费会员价(activityLabels 中存在 type=plus-member) */
|
|
28
|
+
hasPlusMemberPrice?: boolean;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* MemberLabel - 会员身份标签模块
|
|
32
|
+
*
|
|
33
|
+
* @description 展示用户身份对应的会员权益提示条,支持三种身份状态:
|
|
34
|
+
* - guest(游客):灰底 + 深色字,副标题为可点击的注册/登录链接
|
|
35
|
+
* - member(普通会员):浅青渐变 + 深色字
|
|
36
|
+
* - plus-member(付费会员):青→深蓝渐变 + 白字
|
|
37
|
+
*/
|
|
38
|
+
declare const MemberLabel: React.ForwardRefExoticComponent<MemberLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
|
+
export { MemberLabel };
|
|
40
|
+
export default MemberLabel;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";"use client";var T=Object.create;var o=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var I=(s,e)=>{for(var i in e)o(s,i,{get:e[i],enumerable:!0})},y=(s,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of w(e))!R.call(s,n)&&n!==i&&o(s,n,{get:()=>e[n],enumerable:!(a=P(e,n))||a.enumerable});return s};var K=(s,e,i)=>(i=s!=null?T(E(s)):{},y(e||!s||!s.__esModule?o(i,"default",{value:s,enumerable:!0}):i,s)),z=s=>y(o({},"__esModule",{value:!0}),s);var G={};I(G,{MemberLabel:()=>m,default:()=>F});module.exports=z(G);var r=require("react/jsx-runtime"),L=K(require("react")),f=require("../../helpers/index.js"),l=require("../../components/index.js");const j={guest:{backgroundColor:"#d4d8d9"},member:{backgroundImage:"linear-gradient(228.5deg, #d4f3f7 35.268%, #93e0ec 97.62%)"},"plus-member":{backgroundImage:"linear-gradient(-11.59deg, #00cbeb 7.658%, #010f16 50.658%)"}},u={guest:"Unlock Member Price",member:"Member Exclusive","plus-member":"Plus Member Exclusive"},m=L.forwardRef(({userType:s,copy:e,images:i,onSignUp:a,onPlusMemberAddCart:n,className:U,hasActivity:p,activityLabel:b,hasMemberPrice:S,hasPlusMemberPrice:g},h)=>{const C=s==="plus-member",x=s==="guest",M=s==="member",c=i?.[s],D=(()=>{switch(s){case"guest":return e?.memberTitleLabelUpgrade??u.guest;case"member":return e?.memberTitleLabel??u.member;case"plus-member":return e?.plusmemberTitleLabel??u["plus-member"]}})(),k=(()=>{if(x){const t=[];return S?e?.memberDiscountLabel&&t.push({text:e.memberDiscountLabel,action:"signUp"}):g&&e?.plusMemberDiscountLabel&&t.push({text:e.plusMemberDiscountLabel,action:"plusAddCart"}),p&&t.push({text:b??e?.memberActivityLabelUnLogin??"",action:"signUp"}),t}if(M){const t=[];return g&&t.push({text:e?.plusMemberDiscountLabel||"",action:"plusAddCart"}),p&&t.push({text:b??e?.memberActivityLabel??"",action:"none"}),t}return p?[{text:b??e?.memberActivityLabel??"",action:"none"}]:[]})();if(x&&k.length===0)return null;const A=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),a?.())},N=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),n?.())};return(0,r.jsxs)("div",{ref:h,className:(0,f.cn)("tablet:p-4 lg-desktop:pr-[64px] desktop:pr-12 lg-desktop:pl-6 relative flex flex-col items-start gap-[10px] overflow-hidden p-2 py-[16px] pl-[24px]",U,C&&"aiui-dark"),style:j[s],children:[c?.url&&(0,r.jsx)("div",{className:(0,f.cn)("laptop:size-[86px] lg-desktop:size-[114px] absolute -right-5 top-1/2 size-16 -translate-y-1/2 "),children:(0,r.jsx)("div",{className:"absolute inset-0",children:(0,r.jsx)(l.Picture,{source:c.url,alt:c.alt||"",className:"block size-full",imgClassName:"block max-w-none size-full object-left object-cover "})})}),(0,r.jsxs)("div",{className:"relative flex w-full shrink-0 flex-col items-start",children:[(0,r.jsx)(l.Text,{as:"p",className:"text-info-primary laptop:text-sm desktop:text-base lg-desktop:text-[18px] line-clamp-1 text-xs font-bold not-italic leading-[1.4] tracking-[-0.02em]",html:D}),(0,r.jsx)("div",{className:"flex w-full flex-wrap items-start",children:k.map((t,v)=>{const d=t.action!=="none";return(0,r.jsxs)(L.Fragment,{children:[v>0&&(0,r.jsxs)(l.Text,{as:"span",className:"text-info-tertiary laptop:text-sm desktop:text-base lg-desktop:text-[18px] text-xs font-bold leading-[1.4] tracking-[-0.02em]",children:["\xA0","&","\xA0"]}),(0,r.jsx)(l.Text,{as:"span",role:d?"button":void 0,tabIndex:d?0:void 0,onClick:t.action==="signUp"?()=>a?.():t.action==="plusAddCart"?()=>n?.():void 0,onKeyDown:t.action==="signUp"?A:t.action==="plusAddCart"?N:void 0,className:"text-info-tertiary laptop:text-sm desktop:text-base lg-desktop:text-[18px] text-xs font-bold leading-[1.4] tracking-[-0.02em]",style:{...d?{textDecoration:"underline",textUnderlinePosition:"from-font",cursor:"pointer"}:{}},html:t.text})]},v)})})]})]})});m.displayName="ActiveShelf.MemberLabel";var F=m;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { ButtonFunctionType, CopyConfig } from './types.js';
|
|
2
|
+
import type { ButtonFunctionType, CopyConfig, UserType, ActivityLabel, DiscountTagStyle } from './types.js';
|
|
3
3
|
import type { BadgeProps } from '../../components/badge.js';
|
|
4
|
+
import type { Img } from '../../types/props.js';
|
|
4
5
|
/**
|
|
5
6
|
* 语义化类名
|
|
6
7
|
*/
|
|
7
|
-
export type ActiveShelfSemanticName = 'root' | 'title' | 'description' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'originalPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockTrack' | 'stockBar';
|
|
8
|
+
export type ActiveShelfSemanticName = 'root' | 'title' | 'description' | 'tabsList' | 'promotionalBar' | 'productCard' | 'discountBadge' | 'discountBadgeText' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'originalPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockTrack' | 'stockBar';
|
|
8
9
|
/**
|
|
9
10
|
* 库存展示模式
|
|
10
11
|
*/
|
|
11
12
|
export type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage';
|
|
13
|
+
interface SocialEndorsementItem {
|
|
14
|
+
/** 图标:图片 URL 字符串,或 SVG React 节点 */
|
|
15
|
+
icon: string | React.ReactNode;
|
|
16
|
+
/** 无障碍标签 */
|
|
17
|
+
label?: string;
|
|
18
|
+
}
|
|
12
19
|
/**
|
|
13
20
|
* 基础产品数据接口(来自外部数据源)
|
|
14
21
|
*/
|
|
@@ -74,6 +81,16 @@ export interface VariantData {
|
|
|
74
81
|
* 通用折扣数据,包括折扣title, 类型和值
|
|
75
82
|
*/
|
|
76
83
|
coupon: any;
|
|
84
|
+
/** 社媒背书图标(socialEndorsements: SocialEndorsementItem[] */
|
|
85
|
+
socialEndorsements?: SocialEndorsementItem[];
|
|
86
|
+
/** 是否有普通会员价 */
|
|
87
|
+
hasMemberPrice?: boolean;
|
|
88
|
+
/** 是否有付费会员价 */
|
|
89
|
+
hasPlusMemberPrice?: boolean;
|
|
90
|
+
/** 折扣金额(string 类型,用于左上角折扣标签展示) */
|
|
91
|
+
discountAmount?: string;
|
|
92
|
+
/** SKU 会员活动配置(对象数组,每项含 type 与 label) */
|
|
93
|
+
activityLabels?: ActivityLabel[];
|
|
77
94
|
}
|
|
78
95
|
/**
|
|
79
96
|
* 完整的产品卡片数据接口
|
|
@@ -90,6 +107,10 @@ export interface ProductCardProps {
|
|
|
90
107
|
className?: string;
|
|
91
108
|
/** 是否展示标签系统 */
|
|
92
109
|
showTags?: boolean;
|
|
110
|
+
/** 是否展示价格标签 */
|
|
111
|
+
isShowPricesTag?: boolean;
|
|
112
|
+
/** 是否展示会员价格 */
|
|
113
|
+
showMemberPrice?: boolean;
|
|
93
114
|
/** 库存展示模式 */
|
|
94
115
|
stockDisplayMode?: StockDisplayMode;
|
|
95
116
|
/** 库存阈值(当模式为 below-quantity 或 below-percentage 时使用) */
|
|
@@ -124,6 +145,22 @@ export interface ProductCardProps {
|
|
|
124
145
|
/** 文案配置 */
|
|
125
146
|
copy?: CopyConfig;
|
|
126
147
|
onProductImageClick?: (product: ProductCardData) => void;
|
|
148
|
+
/** active-shelf-items-tag(自定义标签)文案颜色。设置后会隐藏默认品牌色描边 */
|
|
149
|
+
itemsTagTextColor?: string;
|
|
150
|
+
/** active-shelf-items-tag 背景颜色,设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边 */
|
|
151
|
+
itemsTagBgColor?: string;
|
|
152
|
+
/** 用户身份(会员标签模块) */
|
|
153
|
+
userType?: UserType;
|
|
154
|
+
/** 会员标签模块三种状态的装饰图 */
|
|
155
|
+
memberImages?: Partial<Record<UserType, Img>>;
|
|
156
|
+
/** 左上角自定义标签图标 */
|
|
157
|
+
customTagsIcon?: Img;
|
|
158
|
+
/** 自定义折扣标签图标样式(style1/style2/style3 为内置预设,custom 为自定义上传) */
|
|
159
|
+
customTagStyle?: DiscountTagStyle;
|
|
160
|
+
/** 点击会员标签模块游客副标题(注册/登录)回调 */
|
|
161
|
+
onMemberSignUp?: () => void;
|
|
162
|
+
/** 点击会员标签模块付费会员折扣文案(加购付费会员sku)回调 */
|
|
163
|
+
onPlusMemberAddCart?: () => void;
|
|
127
164
|
}
|
|
128
165
|
/**
|
|
129
166
|
* 产品卡片组件
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var te=Object.create;var u=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(e,a)=>{for(var s in a)u(e,s,{get:a[s],enumerable:!0})},T=(e,a,s,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of ie(a))!ne.call(e,o)&&o!==s&&u(e,o,{get:()=>a[o],enumerable:!(l=ae(a,o))||l.enumerable});return e};var oe=(e,a,s)=>(s=e!=null?te(se(e)):{},T(a||!e||!e.__esModule?u(s,"default",{value:e,enumerable:!0}):s,e)),le=e=>T(u({},"__esModule",{value:!0}),e);var ue={};re(ue,{ProductCard:()=>y,default:()=>be});module.exports=le(ue);var t=require("react/jsx-runtime"),p=oe(require("react")),n=require("../../helpers/index.js"),i=require("../../components/index.js"),D=require("./MemberLabel.js");const ce=5;function de(e,a,s,l){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return a===void 0?!0:s<=a;case"below-percentage":return a===void 0?!0:s/l*100<=a;default:return!0}}const me=({items:e})=>e?.length?(0,t.jsx)("div",{className:"active-shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.slice(0,3).map((a,s)=>typeof a.icon=="string"?(0,t.jsx)("img",{src:a.icon,alt:a.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},s):(0,t.jsx)(i.Text,{"aria-label":a.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:a.icon},s))}):null,k={style1:{bg:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 80 83",fill:"none",className:"text-brand-0",children:(0,t.jsx)("path",{d:"M0 0H80V78.3582C80 81.1147 77.2773 83.0451 74.6762 82.1328L41.3238 70.4353C40.4669 70.1348 39.5331 70.1348 38.6762 70.4353L5.32384 82.1328C2.7227 83.0451 0 81.1147 0 78.3582L0 0Z",fill:"currentColor"})}),textClass:"aiui-dark text-info-primary"},style2:{bg:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 96 90",fill:"none",className:"text-brand-0",children:(0,t.jsx)("path",{d:"M82 0C85.3137 6.52867e-08 88 2.68629 88 6V57.5996H96L51.458 88.791C49.3923 90.2375 46.6423 90.2378 44.5762 88.792L0 57.5996H8V6C8 2.68629 10.6863 0 14 0H82Z",fill:"currentColor"})}),textClass:"aiui-dark text-info-primary"},style3:{bg:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 96 72",fill:"none",className:"text-brand-0",children:(0,t.jsx)("path",{d:"M94.4516 33.129C95.4176 34.9116 95.4179 37.0615 94.4525 38.8444L78.2019 68.8569C77.1533 70.7935 75.128 72 72.9257 72L3.40949e-06 72L0 3.0867e-06L72.927 1.44168e-07C75.1286 5.53351e-08 77.1534 1.20577 78.2023 3.14147L94.4516 33.129Z",fill:"currentColor"})}),textClass:"aiui-dark text-info-primary"}},ge=({text:e,style:a="style1",icon:s,className:l,textClassName:o})=>{if(!e)return null;const f=a==="custom"&&!!s?.url,g=a!=="custom"?k[a]:void 0;return(0,t.jsxs)("div",{className:(0,n.cn)("active-shelf-discount-badge","laptop:size-20 lg-desktop:size-24 absolute left-0 top-0 z-10 size-12",l),children:[f?(0,t.jsx)(i.Picture,{source:s.url,alt:s.alt||e,className:"block size-full",imgClassName:"block size-full object-contain"}):(g??k.style1).bg,(0,t.jsx)("span",{className:(0,n.cn)("active-shelf-discount-badge-text","tablet:text-base lg-desktop:text-2xl absolute inset-0 flex items-center justify-center text-center text-xs font-bold !leading-[1.2]",(g??k.style1).textClass,o),children:e})]})},y=p.forwardRef(({product:e,className:a,showTags:s=!0,stockDisplayMode:l,stockThresholdValue:o,onLearnMore:f,onShopNow:g,onAddToCart:M,classNames:r,secondaryButtonText:v,secondaryButtonFun:C,primaryButtonText:x,primaryButtonFun:P,showOriginalPrice:S,renderOriginalPrice:L,copy:d,onProductImageClick:N,itemsTagTextColor:m,itemsTagBgColor:h,userType:b,memberImages:I,customTagsIcon:R,customTagStyle:E,onMemberSignUp:F,onPlusMemberAddCart:_,showMemberPrice:j},q)=>{const[H,U]=p.useState(!1),[$,O]=p.useState(!1),G=!!e?.hasMemberPrice,V=!!e?.hasPlusMemberPrice,Z=e?.activityLabels??[],K=b==="guest"?"guest":"member",z=Z.find(c=>c.type===K)?.label,J=b==="guest"?d?.memberActivityLabelUnLogin:d?.memberActivityLabel,Q=!!z||!!J,W=e?.discountAmount,X=p.useMemo(()=>e?.availableForSale&&e?.quantityAvailable<=0?ce:e?.availableForSale?(e?.quantityAvailable??0)/(e?.totalInventory??1)*100:0,[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),B=async(c,w)=>{if(!c)return;const A=w==="primary"?U:O;A(!0);try{switch(c){case"buyNow":await g?.(e);break;case"addCart":await M?.(e);break;case"learnMore":await f?.(e);break;default:break}}finally{A(!1)}},Y=e.availableForSale&&e.quantityAvailable<=0,ee={...m?{color:m}:{},...h?{backgroundColor:h,backgroundImage:"none"}:{},...m||h?{outlineColor:m}:{}};return(0,t.jsxs)(i.Card,{ref:q,className:(0,n.cn)("bg-container-primary hover:bg-container-secondary-0 relative flex h-full flex-col overflow-hidden border-none",a,r?.productCard),children:[(0,t.jsx)(ge,{text:W,style:E,icon:R,className:r?.discountBadge,textClassName:r?.discountBadgeText}),(0,t.jsxs)(i.CardContent,{className:"desktop:p-6 relative flex flex-1 flex-col justify-between p-4",children:[(0,t.jsxs)("div",{className:"product-image-wrapper relative mb-4",children:[(0,t.jsx)("div",{className:"product-image lg-desktop:size-[240px] laptop::size-[180px] mx-auto size-[125px] cursor-pointer overflow-hidden",children:(0,t.jsx)("a",{onClick:()=>N?.(e),...!N&&{href:e?.listingLink},rel:"noreferrer",children:(0,t.jsx)(i.Picture,{source:e.image,alt:e.name,className:"aspect-square size-full object-contain",imgClassName:"w-full h-full object-contain"})})}),(0,t.jsx)(me,{items:e?.socialEndorsements})]}),s&&(0,t.jsx)("div",{className:"desktop:mb-2 mb-1 flex h-[24px] gap-1",children:e.tags?.map((c,w)=>c.label&&(0,t.jsx)(i.Badge,{size:"sm",variant:c.variant||"outline",className:"active-shelf-items-tag py-0",style:ee,children:c.label},w))}),(0,t.jsxs)("div",{className:"flex h-full flex-1 grow flex-col justify-between gap-4",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(i.Heading,{as:"h3",size:2,className:(0,n.cn)("text-info-primary mb-1 line-clamp-2 min-h-[2.4em]",r?.productTitle),html:e.custom_name||e.name}),e?.description&&(0,t.jsx)(i.Text,{size:2,className:(0,n.cn)("text-info-primary desktop:line-clamp-2 desktop:min-h-[2.4em] desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 min-h-[2.4em] text-[14px]",r?.productDescription),html:e.custom_description||e.description})]}),(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:(0,n.cn)(r?.productPrice),children:(0,t.jsx)("div",{className:"flex items-baseline gap-2",children:e.availableForSale?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.Heading,{size:2,className:"text-info-primary",as:"h6",children:e.price}),L?L(e,{showOriginalPrice:S}):S&&e.originalPrice&&(0,t.jsx)(i.Heading,{size:2,className:(0,n.cn)("text-info-tertiary line-through",r?.originalPrice),as:"h6",children:e.originalPrice})]}):(0,t.jsx)(i.Heading,{size:2,className:"text-info-tertiary",children:d?.outOfStockLabel??"Sold Out"})})}),e?.priceLabel&&e?.availableForSale&&(0,t.jsx)(i.Text,{size:4,className:(0,n.cn)("text-brand-0 desktop:text-[16px] lg-desktop:text-[18px] mt-2 text-[14px]",r?.productPriceLabel),style:{...m?{color:m}:{}},children:e.priceLabel}),(0,t.jsxs)("div",{className:(0,n.cn)("lg-desktop:gap-3 tablet:flex-nowrap mt-2 flex flex-wrap gap-2",r?.buttonGroup),children:[v&&(0,t.jsx)(i.Button,{variant:"secondary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",r?.secondaryButton),onClick:()=>B(C,"secondary"),disabled:!e.availableForSale&&C!=="learnMore",loading:$,"data-headless-type-name":"ActiveShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${v}`,"data-headless-sku":e.sku,children:v}),x&&(0,t.jsx)(i.Button,{variant:"primary",size:"base",className:(0,n.cn)("tablet:w-fit tablet:min-w-0 tablet:whitespace-normal tablet:text-center w-full whitespace-nowrap",r?.primaryButton),onClick:()=>B(P,"primary"),disabled:!e.availableForSale&&P!=="learnMore",loading:H,"data-headless-type-name":"ActiveShelf#ProductCard","data-headless-title-desc-button":`${e.custom_name||e.name}#${e.description||""}#${x}`,"data-headless-sku":e.sku,children:x})]}),de(l,o,e?.quantityAvailable??0,e?.totalInventory??0)&&(0,t.jsxs)("div",{className:"mt-4 space-y-2",children:[(0,t.jsx)(i.Progress,{value:X,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{root:(0,n.cn)("bg-[var(--progress-track-bg,rgba(0,0,0,0.2))]",r?.stockTrack),progressBar:(0,n.cn)("bg-brand-0 transition-all duration-300 ease-in-out",r?.stockBar)}}),(0,t.jsx)(i.Text,{size:3,className:"text-info-tertiary text-[14px]",children:Y?d?.limitedStock:d?.stockDisplayText?.replace("{count}",`${e.availableForSale?e.quantityAvailable:0}`)})]})]})]})]}),j&&b&&(0,t.jsx)(D.MemberLabel,{userType:b,copy:d,images:I,onSignUp:F,onPlusMemberAddCart:_,hasActivity:Q,activityLabel:z,hasMemberPrice:G,hasPlusMemberPrice:V})]})});y.displayName="ActiveShelf.ProductCard";var be=y;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { type PromotionalBarProps } from '../PromotionalBar/index.js';
|
|
2
3
|
import 'swiper/css';
|
|
3
4
|
import 'swiper/css/navigation';
|
|
4
|
-
import type { ButtonFunctionType, CopyConfig } from './types.js';
|
|
5
|
+
import type { ButtonFunctionType, CopyConfig, UserType, DiscountTagStyle } from './types.js';
|
|
5
6
|
import { ProductCard, type ProductCardData, type ActiveShelfSemanticName, type StockDisplayMode } from './ProductCard.js';
|
|
7
|
+
import type { Img } from '../../types/props.js';
|
|
6
8
|
/**
|
|
7
9
|
* 组件布局模式
|
|
8
10
|
*/
|
|
@@ -21,6 +23,11 @@ export interface ProductTab {
|
|
|
21
23
|
tab: string;
|
|
22
24
|
/** 该分组下的产品数据 */
|
|
23
25
|
data: ProductCardData[];
|
|
26
|
+
/** 资源块(如 PromotionalBar) */
|
|
27
|
+
resourceBlocks?: Array<PromotionalBarProps['data'] & {
|
|
28
|
+
blockType: string;
|
|
29
|
+
display: 'visible' | 'hidden';
|
|
30
|
+
}>;
|
|
24
31
|
}
|
|
25
32
|
/**
|
|
26
33
|
* ActiveShelf 业务组件数据接口
|
|
@@ -63,6 +70,23 @@ export interface ActiveShelfData {
|
|
|
63
70
|
showOriginalPrice?: boolean;
|
|
64
71
|
/** 文案配置 */
|
|
65
72
|
copy?: CopyConfig;
|
|
73
|
+
/** active-shelf-items-tag(自定义标签)文案颜色。设置后会隐藏默认品牌色描边 */
|
|
74
|
+
itemsTagTextColor?: string;
|
|
75
|
+
/** active-shelf-items-tag 背景颜色,设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边 */
|
|
76
|
+
itemsTagBgColor?: string;
|
|
77
|
+
/** 用户身份(会员标签模块) */
|
|
78
|
+
userType?: UserType;
|
|
79
|
+
/** 会员标签模块三种状态的装饰图 */
|
|
80
|
+
memberImages?: Partial<Record<UserType, Img>>;
|
|
81
|
+
/** 左上角自定义标签图标 */
|
|
82
|
+
customTagsIcon?: Img;
|
|
83
|
+
/** 自定义折扣标签图标样式(style1/style2/style3 为内置预设,custom 为自定义上传) */
|
|
84
|
+
customTagStyle?: DiscountTagStyle;
|
|
85
|
+
tileMaxRows?: number;
|
|
86
|
+
/** 平铺布局折叠时「展开」按钮文案,默认 'Show more' */
|
|
87
|
+
tileExpandText?: string;
|
|
88
|
+
/** 平铺布局展开后「收起」按钮文案,默认 'Show less' */
|
|
89
|
+
tileCollapseText?: string;
|
|
66
90
|
/**
|
|
67
91
|
* 产品列表(当不使用 Tab 分组时可直接传入产品列表)
|
|
68
92
|
*/
|
|
@@ -77,6 +101,10 @@ export interface ActiveShelfProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
77
101
|
onShopNow?: (product: ProductCardData) => void;
|
|
78
102
|
/** 点击加入购物车回调 */
|
|
79
103
|
onAddToCart?: (product: ProductCardData) => void;
|
|
104
|
+
/** 点击会员标签模块游客副标题(注册/登录)回调 */
|
|
105
|
+
onMemberSignUp?: () => void;
|
|
106
|
+
/** 点击会员标签模块付费会员折扣文案(加购付费会员sku)回调 */
|
|
107
|
+
onPlusMemberAddCart?: () => void;
|
|
80
108
|
/** 语义化类名 */
|
|
81
109
|
classNames?: Partial<Record<ActiveShelfSemanticName, string>>;
|
|
82
110
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var ue=Object.create;var q=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var ye=(i,o)=>{for(var r in o)q(i,r,{get:o[r],enumerable:!0})},ee=(i,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of ge(o))!Te.call(i,l)&&l!==r&&q(i,l,{get:()=>o[l],enumerable:!(c=me(o,l))||c.enumerable});return i};var te=(i,o,r)=>(r=i!=null?ue(he(i)):{},ee(o||!i||!i.__esModule?q(r,"default",{value:i,enumerable:!0}):r,i)),fe=i=>ee(q({},"__esModule",{value:!0}),i);var Pe={};ye(Pe,{default:()=>Se});module.exports=fe(Pe);var e=require("react/jsx-runtime"),a=te(require("react")),T=require("../../helpers/index.js"),se=require("../../shared/Styles.js"),n=require("../../components/index.js"),ae=te(require("../PromotionalBar/index.js")),J=require("swiper/react"),ne=require("swiper/modules"),ke=require("swiper/css"),Le=require("swiper/css/navigation"),G=require("./ProductCard.js"),le=require("../../hooks/useExposure.js");const be="shelf",we="active_shelf",Ce=({disabled:i})=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),xe=({disabled:i})=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary laptop:block lg-desktop:size-[56px] hidden size-[40px]",children:[(0,e.jsx)("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:i?"0.2":"0.6"}),(0,e.jsx)("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]});function oe(){return typeof window>"u"?2:window.matchMedia("(min-width: 1920px)").matches?3:window.matchMedia("(min-width: 1440px)").matches?4:window.matchMedia("(min-width: 768px)").matches?3:2}const K=a.forwardRef(({products:i,layoutMode:o,className:r,copy:c,showTags:l,stockDisplayMode:y,stockThresholdValue:f,onLearnMore:d,onShopNow:b,onAddToCart:H,classNames:O,secondaryButtonText:m,secondaryButtonFun:w,primaryButtonText:C,primaryButtonFun:x,showOriginalPrice:v,renderOriginalPrice:S,itemsTagBgColor:P,itemsTagTextColor:B,userType:M,memberImages:k,customTagsIcon:L,customTagStyle:U,onMemberSignUp:D,onPlusMemberAddCart:E,tileMaxRows:g,tileExpandText:$,tileCollapseText:V,showMemberPrice:N},j)=>{const A=a.useId().replace(/:/g,""),R=`swiper-button-next-custom-${A}`,I=`swiper-button-prev-custom-${A}`,[p,u]=a.useState({isBeginning:!0,isEnd:!1}),W=a.useRef(null),h=a.useCallback(()=>{const t=W.current;if(!t?.slides||t.slides.length===0)return;t.slides.forEach(z=>{z.style.height="auto"});const F=Array.from(t.slides).map(z=>z.scrollHeight),Y=Math.max(...F);Y>0&&t.slides.forEach(z=>{z.style.height=`${Y}px`})},[]);a.useEffect(()=>{const t=()=>{requestAnimationFrame(h)};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[h]);const[s,_]=a.useState(!1),[Z,ce]=a.useState(()=>oe());a.useEffect(()=>{const t=()=>ce(oe());return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const Q=o==="flex"&&!!g&&g>0,X=g?g*Z:i.length,de=Q&&i.length>X,pe=Q&&!s?i.slice(0,X):i;return i?.length===0?null:(0,e.jsx)("div",{ref:j,className:r,children:o==="flex"?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"lg-desktop:gap-4 tablet:grid-cols-3 desktop:grid-cols-4 lg-desktop:grid-cols-3 grid grid-cols-2 justify-start gap-4",children:pe.map((t,F)=>(0,e.jsx)(G.ProductCard,{product:t,className:"shrink-0",showTags:l,stockDisplayMode:y,stockThresholdValue:f,onLearnMore:d,onShopNow:b,onAddToCart:H,classNames:O,secondaryButtonText:m,secondaryButtonFun:w,primaryButtonText:C,primaryButtonFun:x,showOriginalPrice:v,renderOriginalPrice:S,itemsTagBgColor:P,itemsTagTextColor:B,copy:c,userType:M,memberImages:k,customTagsIcon:L,customTagStyle:U,onMemberSignUp:D,onPlusMemberAddCart:E,showMemberPrice:N},t.shopify_id+"-"+t.sku||F))}),de&&(0,e.jsxs)("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[(0,e.jsx)("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>_(t=>!t),children:s?V??"Show less":$??"Show more"}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,T.cn)("laptop:size-5 size-4",s&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,e.jsx)("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]}):(0,e.jsxs)("div",{className:"group relative",children:[(0,e.jsx)(J.Swiper,{modules:[ne.Navigation],spaceBetween:16,slidesPerView:"auto",navigation:{nextEl:`.${R}`,prevEl:`.${I}`},onSwiper:t=>{W.current=t,u({isBeginning:t.isBeginning,isEnd:t.isEnd}),setTimeout(h,100)},onReachEnd:()=>{u(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{u(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{u({isBeginning:!1,isEnd:!1})},className:"!overflow-visible [&_.swiper-wrapper]:items-start",children:i.map((t,F)=>(0,e.jsx)(J.SwiperSlide,{className:"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] !h-auto !w-[296px] overflow-hidden",children:(0,e.jsx)(G.ProductCard,{product:t,className:"w-full max-w-full",showTags:l,stockDisplayMode:y,stockThresholdValue:f,onLearnMore:d,onShopNow:b,onAddToCart:H,classNames:O,secondaryButtonText:m,secondaryButtonFun:w,primaryButtonText:C,primaryButtonFun:x,showOriginalPrice:v,renderOriginalPrice:S,itemsTagBgColor:P,itemsTagTextColor:B,copy:c,userType:M,memberImages:k,customTagsIcon:L,customTagStyle:U,onMemberSignUp:D,onPlusMemberAddCart:E,showMemberPrice:N})},t.shopify_id+"-"+t.sku||F))}),(0,e.jsx)("button",{className:`${I} tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${p.isBeginning?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":c?.previousSlideLabel,children:(0,e.jsx)(Ce,{disabled:p.isBeginning})}),(0,e.jsx)("button",{className:`${R} tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2 transition-opacity ${p.isEnd?"pointer-events-none opacity-0":"opacity-0 group-hover:opacity-100"}`,"aria-label":c?.nextSlideLabel,children:(0,e.jsx)(xe,{disabled:p.isEnd})})]})})});K.displayName="ProductsList";const ie=a.forwardRef(({className:i,data:o,onLearnMore:r,onShopNow:c,onAddToCart:l,onMemberSignUp:y,onPlusMemberAddCart:f,classNames:d,renderOriginalPrice:b,...H},O)=>{const m=a.useRef(null);(0,le.useExposure)(m,{componentType:be,componentName:we,componentTitle:o.title,componentDescription:o.description}),a.useImperativeHandle(O,()=>m.current);const{theme:w="light",layoutMode:C="flex",showTags:x=!0,stockDisplayMode:v,stockThresholdValue:S,showOriginalPrice:P,secondaryButtonText:B,primaryButtonText:M,secondaryButtonFun:k,primaryButtonFun:L,isShowTab:U=!0,itemsTagBgColor:D,itemsTagTextColor:E,copy:g,userType:$,memberImages:V,customTagsIcon:N,customTagStyle:j,showMemberPrice:A,tileMaxRows:R,tileExpandText:I,tileCollapseText:p}=o,u=g||{},W=o.productsTab&&o.productsTab.length>0,h=U&&W;return(0,e.jsxs)("div",{ref:m,className:(0,T.cn)("w-full",{"aiui-dark":w==="dark"},i,d?.root),style:{"--progress-track-bg":w==="dark"?"rgba(255, 255, 255, 0.2)":"rgba(0, 0, 0, 0.2)"},...H,children:[o.title&&(0,e.jsx)(n.Heading,{as:"h2",html:o.title,size:4,className:(0,T.cn)("text-info-primary mb-4",d?.title)}),o.description&&(0,e.jsx)(n.Text,{size:3,as:"p",html:o.description,className:(0,T.cn)("text-info-primary mb-6",d?.description)}),(0,e.jsxs)(n.Tabs,{defaultValue:o.productsTab?.[0]?.id,className:"w-full",children:[h&&(0,e.jsx)(n.TabsList,{className:"mb-6",children:o.productsTab?.map(s=>(0,e.jsx)(n.TabsTrigger,{value:s.id,children:s.tab},"tab-"+s.id))}),h?o.productsTab?.map(s=>{const _=s.resourceBlocks?.find(Z=>Z.blockType==="PromotionalBar"&&Z.display==="visible");return(0,e.jsxs)(n.TabsContent,{value:s.id,children:[_&&(0,e.jsx)(ae.default,{data:_,className:(0,T.cn)("laptop:mb-4 mb-3",d?.promotionalBar)}),(0,e.jsx)(K,{products:s.data,layoutMode:C,copy:u,showTags:x,stockDisplayMode:v,stockThresholdValue:S,onLearnMore:r,onShopNow:c,onAddToCart:l,classNames:d,secondaryButtonText:B,secondaryButtonFun:k,primaryButtonText:M,primaryButtonFun:L,showOriginalPrice:P,renderOriginalPrice:b,itemsTagBgColor:D,itemsTagTextColor:E,userType:$,memberImages:V,customTagsIcon:N,customTagStyle:j,onMemberSignUp:y,onPlusMemberAddCart:f,showMemberPrice:A,tileMaxRows:R,tileExpandText:I,tileCollapseText:p})]},"tab-content-"+s.id)}):(0,e.jsx)(K,{products:o.productsCard,layoutMode:C,copy:u,showTags:x,stockDisplayMode:v,stockThresholdValue:S,onLearnMore:r,onShopNow:c,onAddToCart:l,classNames:d,secondaryButtonText:B,secondaryButtonFun:k,primaryButtonText:M,primaryButtonFun:L,showOriginalPrice:P,renderOriginalPrice:b,itemsTagBgColor:D,itemsTagTextColor:E,userType:$,memberImages:V,customTagsIcon:N,customTagStyle:j,onMemberSignUp:y,onPlusMemberAddCart:f,showMemberPrice:A,tileMaxRows:R,tileExpandText:I,tileCollapseText:p})]})]})});ie.displayName="ActiveShelf";const re=ie;re.ProductCard=G.ProductCard;const ve=(0,se.withLayout)(re);var Se=ve;
|
|
@@ -2,6 +2,30 @@
|
|
|
2
2
|
* 按钮功能类型
|
|
3
3
|
*/
|
|
4
4
|
export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
|
|
5
|
+
/**
|
|
6
|
+
* 自定义折扣标签图标样式
|
|
7
|
+
* style1/style2/style3 为内置预设样式(写死在组件中),custom 为自定义上传图标
|
|
8
|
+
*/
|
|
9
|
+
export type DiscountTagStyle = 'style1' | 'style2' | 'style3' | 'custom';
|
|
10
|
+
/**
|
|
11
|
+
* 用户身份类型
|
|
12
|
+
*/
|
|
13
|
+
export type UserType = 'guest' | 'member' | 'plus-member';
|
|
14
|
+
/**
|
|
15
|
+
* SKU 会员活动标签类型
|
|
16
|
+
* guest=会员模块游客态活动文案,member=会员模块会员态活动文案(普通会员/付费会员共用)
|
|
17
|
+
*/
|
|
18
|
+
export type ActivityLabelType = 'guest' | 'member';
|
|
19
|
+
/**
|
|
20
|
+
* SKU 会员活动配置项
|
|
21
|
+
* 依据飞书规则矩阵:activityLabels 为对象数组,每项含 type 与 label
|
|
22
|
+
*/
|
|
23
|
+
export interface ActivityLabel {
|
|
24
|
+
/** 标签类型:guest=游客态活动,member=会员态活动(普通/付费共用) */
|
|
25
|
+
type: ActivityLabelType;
|
|
26
|
+
/** 标签文案 */
|
|
27
|
+
label: string;
|
|
28
|
+
}
|
|
5
29
|
/**
|
|
6
30
|
* ActiveShelf 文案配置接口
|
|
7
31
|
* 注意:secondaryButtonText 和 shopNowText 作为高频属性保持在 data 的直接属性中
|
|
@@ -21,4 +45,28 @@ export interface CopyConfig {
|
|
|
21
45
|
outOfStockLabel?: string;
|
|
22
46
|
limitedStock?: string;
|
|
23
47
|
couponTag?: string;
|
|
48
|
+
/** 会员模块游客状态标题文案 */
|
|
49
|
+
memberTitleLabelUpgrade?: string;
|
|
50
|
+
/** 会员模块普通会员状态标题文案 */
|
|
51
|
+
memberTitleLabel?: string;
|
|
52
|
+
/** 会员模块付费会员状态标题文案 */
|
|
53
|
+
plusmemberTitleLabel?: string;
|
|
54
|
+
/** 会员模块游客状态副标题文案 */
|
|
55
|
+
memberSubtitleLabelUpgrade?: string;
|
|
56
|
+
/** 会员模块普通会员状态副标题文案 */
|
|
57
|
+
memberSubtitleLabel?: string;
|
|
58
|
+
/** 会员模块付费会员状态副标题文案 */
|
|
59
|
+
plusmemberSubtitleLabel?: string;
|
|
60
|
+
/** 会员模块游客态活动文案 */
|
|
61
|
+
memberActivityLabelUnLogin?: string;
|
|
62
|
+
/** 会员模块会员态活动文案(普通会员/付费会员) */
|
|
63
|
+
memberActivityLabel?: string;
|
|
64
|
+
/** 会员模块游客态产品活动文案 */
|
|
65
|
+
productActivityLabelUnLogin?: string;
|
|
66
|
+
/** 会员模块会员态产品活动文案(普通会员/付费会员) */
|
|
67
|
+
productActivityLabel?: string;
|
|
68
|
+
/** 会员模块普通会员折扣文案 */
|
|
69
|
+
memberDiscountLabel?: string;
|
|
70
|
+
/** 会员模块付费会员折扣文案 */
|
|
71
|
+
plusMemberDiscountLabel?: string;
|
|
24
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var g=(t,e,b,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of n(e))!a.call(t,i)&&i!==b&&l(t,i,{get:()=>e[i],enumerable:!(r=s(e,i))||r.enumerable});return t};var m=t=>g(l({},"__esModule",{value:!0}),t);var o={};module.exports=m(o);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},
|
|
1
|
+
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},w=(e,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!I.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(c=P(t,s))||c.enumerable});return e};var L=(e,t,a)=>(a=e!=null?C(z(e)):{},w(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>w(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=E(R);var i=require("react/jsx-runtime"),v=L(require("react")),d=require("../../helpers/index.js"),l=require("../../components/index.js"),f=require("class-variance-authority"),h=require("swiper/react"),y=require("../../shared/Styles.js");const j=(0,f.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),u=(0,f.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),g=v.memo(({item:e,theme:t="light",className:a,size:c})=>{const s=e.isActive||!1,o=`${s?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,d.cn)(j({state:o,size:c}),a),"data-ui-component-id":"ActivityScheduleCard",children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link,className:"size-full no-underline hover:text-current",children:[(s?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:s?e.activeIcon.url:e.inactiveIcon.url,alt:s?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,d.cn)(u({state:o}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,d.cn)(" line-clamp-2",u({state:o}))})}),c==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,d.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",u({state:o}))})]})]})]})})});g.displayName="ActivityScheduleCard";const x=v.forwardRef(({classNames:e={},data:t,...a},c)=>{const s=t.theme||"light",o=t.size||"small",r=v.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),k=v.useMemo(()=>{const n=N=>{switch(N){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return r===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return r===2?{}:r===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16};case"desktop":return r===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16}}},m=n("mobile"),S=n("tablet"),b=n("laptop"),A=n("desktop");return{0:m,768:S,1024:b,1440:A}},[r]);return(0,i.jsx)(l.Container,{ref:c,className:(0,d.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...a,children:(0,i.jsx)(h.Swiper,{breakpoints:k,className:"w-full !overflow-visible",children:t.scheduleList.map((n,m)=>(0,i.jsx)(h.SwiperSlide,{children:(0,i.jsx)(g,{item:n,theme:s,size:o,className:e?.card})},"activityScheduleCardItem"+m))})})});x.displayName="ActivitySchedule";var M=(0,y.withLayout)(x);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var a in r)d(e,a,{get:r[a],enumerable:!0})},k=(e,r,a,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of L(r))!A.call(e,o)&&o!==a&&d(e,o,{get:()=>r[o],enumerable:!(i=P(r,o))||i.enumerable});return e};var N=(e,r,a)=>(a=e!=null?j(z(e)):{},k(r||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),D=e=>k(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var t=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=N(require("../../components/picture.js")),E=require("../../shared/Styles.js"),S=require("react-responsive"),M=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),B=N(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,r)=>{const a=[];for(let i=0;i<e.length;i+=r)a.push(e.slice(i,i+r));return a},w=(0,s.forwardRef)(({data:{items:e=[],itemShape:r,title:a,theme:i},className:o},u)=>{const[x,T]=(0,s.useState)(!1),v=(0,S.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,M.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{T(v)},[v]);const I=x?$(e,3):e;return(0,t.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":i==="dark"},o),children:[a&&(0,t.jsx)(B.default,{data:{title:a}}),x?(0,t.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[I?.map((n,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((g,h)=>(0,t.jsx)(q,{data:g,itemShape:r,index:h,theme:g.theme??i},h))},"SwiperSlide"+m)),(0,t.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,m)=>(0,t.jsx)(q,{data:n,itemShape:r,index:m,theme:n.theme??i},m))})]})}),q=({data:e,itemShape:r,index:a,theme:i})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${a+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a),"bg-container-primary":i==="dark"},"rounded-box",e.className),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,t.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,t.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,t.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,t.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});w.displayName="BrandEquity";var C=(0,E.withLayout)(w);
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 移动端菜单项
|
|
3
3
|
*/
|
|
4
|
-
export declare const MenuItem: ({ label, href, onClick, active, icon, className, }: {
|
|
4
|
+
export declare const MenuItem: ({ label, href, target, onClick, active, icon, className, }: {
|
|
5
5
|
label: string;
|
|
6
6
|
href?: string;
|
|
7
|
+
target?: string;
|
|
7
8
|
onClick?: () => void;
|
|
8
9
|
active?: boolean;
|
|
9
10
|
icon?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var b=Object.defineProperty;var
|
|
1
|
+
"use strict";var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var v=(t,n)=>{for(var l in n)b(t,l,{get:n[l],enumerable:!0})},h=(t,n,l,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of g(n))!x.call(t,i)&&i!==l&&b(t,i,{get:()=>n[i],enumerable:!(r=f(n,i))||r.enumerable});return t};var N=t=>h(b({},"__esModule",{value:!0}),t);var C={};v(C,{MenuItem:()=>k,SubSubCategoryContentComp:()=>w,SubSubCategoryItemComp:()=>y});module.exports=N(C);var e=require("react/jsx-runtime"),$=require("react"),o=require("../../components/index.js"),s=require("../../helpers/utils.js"),c=require("./icons/index.js"),d=require("./SidebarDropdown.js"),u=require("../AiuiProvider/index.js");const k=({label:t,href:n,target:l,onClick:r,active:i,icon:a,className:m})=>{const p=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(o.Text,{html:t,className:(0,s.cn)("text-sm font-bold leading-[1.4]",{underline:a})}),a&&(0,e.jsx)(o.Text,{html:a,"aria-hidden":"true"})]}),(0,e.jsx)("svg",{className:`size-5 ${i?"rotate-90":""}`,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M9 5L16 12L9 19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return n?(0,e.jsx)(o.Link,{href:n,target:l,rel:l==="_blank"?"noopener noreferrer":void 0,className:(0,s.cn)("flex cursor-pointer items-center justify-between py-4 no-underline",m),onClick:r,children:p}):(0,e.jsx)("button",{onClick:r,className:(0,s.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",m),"aria-expanded":i,children:p})},y=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:l})=>{const r=(0,e.jsxs)(e.Fragment,{children:[t?.label&&(0,e.jsx)(o.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(c.DownArrow,{"aria-hidden":"true",className:(0,s.cn)("size-5",{"rotate-180":l})})]});return n?(0,e.jsx)("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:n,"aria-expanded":l,children:r}):(0,e.jsx)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:r})},w=({matchSeriesMetadata:t})=>{const{locale:n="us"}=(0,u.useAiuiContext)();return(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((l,r)=>(0,e.jsxs)("div",{children:[l.label&&(0,e.jsx)(o.Text,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(o.Link,{asChild:!t?.banner?.href,href:(0,s.getLocalizedPath)(t?.banner?.href,n),children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(o.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(o.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,s.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(o.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,s.cn)("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),l.products?.map((i,a)=>(0,e.jsx)(d.SeriesProductItem,{position:a,product:i,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l?.label||""}-${r}-${a}`))]})]},`seriesItem-${l?.label||""}-${r}`))})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var A=Object.create;var C=Object.defineProperty;var
|
|
1
|
+
"use strict";var A=Object.create;var C=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var R=(t,i)=>{for(var m in i)C(t,m,{get:i[m],enumerable:!0})},L=(t,i,m,y)=>{if(i&&typeof i=="object"||typeof i=="function")for(let p of B(i))!O.call(t,p)&&p!==m&&C(t,p,{get:()=>i[p],enumerable:!(y=j(i,p))||y.enumerable});return t};var V=(t,i,m)=>(m=t!=null?A(E(t)):{},L(i||!t||!t.__esModule?C(m,"default",{value:t,enumerable:!0}):m,t)),W=t=>L(C({},"__esModule",{value:!0}),t);var H={};R(H,{SeriesProductItem:()=>_,SidebarDropdown:()=>P});module.exports=W(H);var e=require("react/jsx-runtime"),c=V(require("react")),n=require("../../components/index.js"),b=require("../../helpers/utils.js"),D=require("./icons/index.js"),$=require("./NavProvider.js"),F=require("../AiuiProvider/index.js");const P=c.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:i})=>{const{buildProps:m,onSidebarNavClick:y}=(0,$.useNavContext)(),{locale:p="us"}=(0,F.useAiuiContext)(),[v,N]=(0,c.useState)([]),[h,S]=(0,c.useState)(-1),g=(0,c.useRef)(null),x=(0,c.useRef)(null),k=(0,c.useCallback)(()=>{const a=t?.subcategories;if(!a?.length)return;const o=a.findIndex(u=>!!u?.subSubCategories),l=a.findIndex(u=>!u?.subSubCategories),r=a.map((u,d)=>({index:d,open:o===d||l===d}));N(r)},[t]);(0,c.useEffect)(()=>{k()},[k]);const s=(0,c.useMemo)(()=>{const a=t?.subcategories?.[v?.find(l=>l.open)?.index||0],o=i?.find(l=>l?.label?.toLowerCase()===a?.label?.toLowerCase())||{};if(a?.collections){const l=m?.categories?.[a?.collections]||{};return{label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:l?.products}]}}else if(a?.subSubCategories){const l=a?.subSubCategories?.[h],r=i?.find(u=>u?.label?.toLowerCase()===l?.label?.toLowerCase())||{};if(l?.collections){const u=m?.categories?.[l?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:u?.products}]}}else return r}else return o},[t,v,h,i,m]),f=(0,c.useCallback)((a,o)=>{const l=o?.subSubCategories?.length>0;S(l?0:-1);const r=x.current;N(u=>u.map((d,z)=>z===a?{...d,open:!d.open}:l?{...d,open:!1}:!r&&h===-1?{...d,open:!1}:r&&!r.hasSubSubCategories&&!l&&h===-1?{...d,open:!1}:d)),x.current={index:a,hasSubSubCategories:l}},[h]),w=(a,o)=>{N(l=>l.map(r=>r.index===a?{...r,open:!0}:{...r,open:!1})),S(o)};return(0,e.jsxs)(n.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:g,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((a,o)=>{const l=Array.isArray(a?.subSubCategories)&&a?.subSubCategories?.length>0,r=v?.find(u=>u.index===o)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,b.cn)("rounded-sidebar-shelf flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!l&&r}),onClick:()=>{f(o,a),y?.(a,o)},"aria-expanded":l?r:void 0,"aria-haspopup":l?"true":void 0,children:[(0,e.jsx)(n.Text,{html:a.label,className:"p-4 text-sm font-bold leading-[1.4]"}),l&&(0,e.jsx)(D.DownArrow,{"aria-hidden":"true",className:(0,b.cn)("size-4",{"rotate-180":r})})]}),r&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:a.subSubCategories?.map((u,d)=>(0,e.jsx)("button",{onClick:()=>{w(o,d),y?.(u,d)},className:(0,b.cn)("rounded-sidebar-shelf w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left leading-none hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":h===d}),role:"menuitem","aria-label":u.label,children:(0,e.jsx)(n.Text,{html:u.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${o}-${d}`))})]},`${a?.label||""}subcategoryItem-${o}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(n.Button,{as:"a",href:`${(0,b.getLocalizedPath)(t?.primary?.url,p)}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(n.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(s).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(()=>{const a=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.Text,{html:s?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),s?.primary&&!s?.primary?.hide&&(0,e.jsx)(n.Text,{className:"lg-desktop:text-base text-sm font-bold leading-[1.2]",html:s?.primary?.label})]});return s?.primary?.url?(0,e.jsx)(n.Button,{as:"a",href:`${(0,b.getLocalizedPath)(s?.primary?.url,p)}?ref=${s?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"flex items-center justify-start gap-2 !p-0 no-underline",children:a}):(0,e.jsx)("div",{className:"flex items-center gap-2",children:a})})(),t?.guide?.label&&(0,e.jsx)(n.Link,{href:(0,b.getLocalizedPath)(t?.guide?.url,p),className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:t?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.series?.map((a,o)=>(0,e.jsxs)("div",{children:[a.label&&(0,e.jsx)(n.Text,{html:a.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!s?.banner&&(0,e.jsx)(n.Link,{asChild:!s?.banner?.href,href:(0,b.getLocalizedPath)(s?.banner?.href,p),children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(n.Picture,{source:s?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(n.Heading,{size:2,html:s?.banner?.title||"Buy in Guide",className:(0,b.cn)("font-bold text-white",{"text-black":s?.banner?.theme==="dark"})}),(0,e.jsx)(n.Text,{html:s?.banner?.desc||"20.000mAh",className:(0,b.cn)("text-sm font-bold text-white",{"text-black":s?.banner?.theme==="dark"})})]})]})}),a.products?.map((l,r)=>(0,e.jsx)(_,{seriesLabel:s?.label,product:l,isCollection:s?.isCollection},`seriesProductItem-${a?.label||""}-${o}-${r}`))]})]},`seriesItem-${a?.label||""}-${o}`))})]})]})});P.displayName="SidebarDropdown";const _=({product:t,isCollection:i,position:m,seriesLabel:y})=>{const{locale:p="us"}=(0,F.useAiuiContext)(),{buildProps:v,onSeriesProductClick:N,componentOverrides:h}=(0,$.useNavContext)(),S=h?.badge?.variant;let g=i?t:v?.products?.find(f=>f.handle===t.handle);const x=g?.variants?.find(f=>f.sku===t.sku)||g?.variants?.[0],k=(0,c.useMemo)(()=>`${(0,b.getLocalizedPath)(`/products/${g?.handle}`,p)}?variant=${(0,b.atobID)(x?.id)}`,[g?.handle,x?.id,p]),s=(0,c.useMemo)(()=>g?.tags?.filter?.(f=>f?.startsWith?.("CLtag"))?.map?.(f=>f?.replace?.("CLtag:",""))?.slice?.(0,2),[g?.tags]);return x?.availableForSale?(0,e.jsx)(n.Link,{href:k,onClick:f=>{f.preventDefault(),window.open(k,"_self"),N?.(g,m||0,y)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"rounded-sidebar-shelf relative flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:`${x?.image?.url||t?.images?.[0]?.url}&width=200`,loading:"lazy",alt:g?.title||t?.name,width:90,height:90,className:"size-[96px] object-contain"})}),Array.isArray(s)&&s?.length>0&&(0,e.jsx)("div",{className:"absolute right-1 top-1 flex gap-1",children:s?.map((f,w)=>(0,e.jsx)(n.Badge,{size:"xs",variant:S,className:"whitespace-nowrap",children:f},w))}),(0,e.jsxs)("div",{className:"flex min-w-0 flex-1 flex-col justify-center",children:[(0,e.jsx)(n.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:t?.custom_name||x?.metafields?.infos?.page_short_title||g?.title}),t?.desc&&(0,e.jsx)(n.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};
|