@anker-in/headless-ui 1.3.20 → 1.3.21
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/EventSchedule/index.d.ts +2 -2
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/EventSchedule/index.d.ts +2 -2
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/package.json +1 -1
|
@@ -22,9 +22,9 @@ export interface StateIcon {
|
|
|
22
22
|
export interface EventScheduleItem {
|
|
23
23
|
/** 标题 */
|
|
24
24
|
title: string;
|
|
25
|
-
/** 开始日期（ISO 8601
|
|
25
|
+
/** 开始日期（ISO 8601 格式，如 '2024-12-01T00:00:00Z'） */
|
|
26
26
|
startDate: string;
|
|
27
|
-
/** 结束日期（ISO 8601
|
|
27
|
+
/** 结束日期（ISO 8601 格式，如 '2024-12-31T23:59:59Z'） */
|
|
28
28
|
endDate: string;
|
|
29
29
|
/**
|
|
30
30
|
* 卡片背景图标配置，状态化图标（必须包含 active 和 inactive）
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var B=Object.create;var S=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var n in t)S(e,n,{get:t[n],enumerable:!0})},y=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of R(t))!H.call(e,i)&&i!==n&&S(e,i,{get:()=>t[i],enumerable:!(o=P(t,i))||o.enumerable});return e};var q=(e,t,n)=>(n=e!=null?B(z(e)):{},y(t||!e||!e.__esModule?S(n,"default",{value:e,enumerable:!0}):n,e)),G=e=>y(S({},"__esModule",{value:!0}),e);var Y={};j(Y,{default:()=>X});module.exports=G(Y);var s=require("react/jsx-runtime"),l=q(require("react")),u=require("../../helpers/index.js"),F=require("../../shared/Styles.js"),m=require("../../components/index.js"),f=require("swiper/react"),v=require("class-variance-authority");const k=(e,t)=>{const n=Date.now(),o=new Date(e).getTime(),i=new Date(t).getTime();return n>i?"completed":n<o?"not-started":"in-progress"},J=(0,v.cva)("h-1 w-full overflow-hidden",{variants:{state:{"in-progress-light":"bg-[#F6CD4E]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F6CD4E]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),K=(0,v.cva)("size-4 rounded-full transition-colors",{variants:{state:{"in-progress-light":"bg-[#F6CD4E]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F6CD4E]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),T=(0,v.cva)("font-bold leading-[1.2]",{variants:{state:{"in-progress-light":"text-[#080A0F]","in-progress-dark":"text-white","not-started-light":"text-[#080A0F]","not-started-dark":"text-[#F5F6F7]","completed-light":"text-[#4A4C56]/60","completed-dark":"text-[#F5F6F7]/60"}},defaultVariants:{state:"not-started-light"}}),O=(0,v.cva)("laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden",{variants:{state:{"in-progress-light":"bg-[#F4E8BC]","in-progress-dark":"bg-[#D79941]","not-started-light":"bg-[#EAEAEC]","not-started-dark":"bg-[#1E2024]","completed-light":"bg-[#F4E8BC]","completed-dark":"bg-[#D79941]"}},defaultVariants:{state:"not-started-light"}}),Q=({timeStatus:e,theme:t="light",className:n,index:o,nodeLength:i})=>{const p=`${e}-${t}`,a=o===0,d=o===i-1;return(0,s.jsxs)("div",{className:(0,u.cn)(`event-schedule-timeline-node event-schedule-timeline-node--${e} relative my-2 flex h-1 w-full items-center justify-center`,n),children:[(0,s.jsx)("div",{className:(0,u.cn)(`event-schedule-timeline-progress event-schedule-timeline-progress--${e}`,J({state:p}),a&&"rounded-l-full",d&&"rounded-r-full")}),(0,s.jsx)("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:(0,s.jsx)("div",{className:(0,u.cn)(`event-schedule-timeline-dot event-schedule-timeline-dot--${e}`,K({state:p}))})})]})},U=(e,t)=>{if(e)return t==="in-progress"?e.active:t==="completed"&&e.completed||e.inactive},W=({timeStatus:e,item:t,theme:n="light",className:o,scheduleCount:i})=>{const p=l.useMemo(()=>U(t.icon,e),[t.icon,e]),a=`${e}-${n}`;return(0,s.jsxs)("div",{className:(0,u.cn)(`event-schedule-card event-schedule-card--${e}`,O({state:a}),o),children:[p&&(0,s.jsx)("div",{className:`event-schedule-card__background-icon event-schedule-card__background-icon--${e} laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]`,children:(0,s.jsx)(m.Picture,{source:p.url,alt:p.alt,className:"aspect-square"})}),(0,s.jsxs)("div",{className:`event-schedule-card__content event-schedule-card__content--${e} tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8`,children:[(0,s.jsx)(m.Heading,{html:t.title,className:(0,u.cn)(`event-schedule-card__title event-schedule-card__title--${e}`,i>=4?"desktop:text-[24px]":"desktop:text-[32px]","laptop:text-[24px] line-clamp-1 text-[20px]",T({state:a}))}),(0,s.jsx)("div",{className:`event-schedule-card__details event-schedule-card__details--${e} flex flex-col gap-0.5`,children:t.items.map((d,c)=>(0,s.jsxs)("div",{className:`event-schedule-card__detail-item event-schedule-card__detail-item--${e} flex items-center gap-2`,children:[d.icon&&(0,s.jsx)(m.Text,{className:(0,u.cn)(`event-schedule-card__detail-icon event-schedule-card__detail-icon--${e} desktop:size-6 size-5 shrink-0`,T({state:a})),html:d.icon}),(0,s.jsx)(m.Text,{html:d.label,className:(0,u.cn)(`event-schedule-card__detail-text event-schedule-card__detail-text--${e} lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]`,T({state:a}))})]},c))})]})]})},L=l.forwardRef(({classNames:e={},data:t,className:n,...o},i)=>{const p=t.theme||"light",a=l.useRef(null),d=l.useRef(null),c=l.useRef(!1),w=l.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),b=l.useMemo(()=>t.scheduleList.findIndex(r=>k(r.startDate,r.endDate)==="in-progress"),[t.scheduleList]),x=l.useCallback((r,g=!1)=>{const h=A=>{switch(A){case"mobile":return{slidesPerView:1.17};case"tablet":return r===2?{slidesPerView:2}:{slidesPerView:2.4};case"laptop":return r===2?{}:r===4?{slidesPerView:3.2}:{slidesPerView:r};case"desktop":return r===2?{slidesPerView:2}:{slidesPerView:r}}},C=h("mobile"),N=h("tablet"),_=h("laptop"),D=h("desktop");return g?{0:{...C,spaceBetween:12},768:{...N,spaceBetween:12},1024:{..._,spaceBetween:16},1440:{...D,spaceBetween:16}}:{0:C,768:N,1024:_,1440:D}},[]),V=l.useMemo(()=>x(w,!0),[w,x]),$=l.useMemo(()=>x(w,!1),[w,x]),E=t.showTimeline!==!1,I=l.useCallback(r=>{c.current||!d.current||(c.current=!0,d.current.slideTo(r.activeIndex,r.params.speed),setTimeout(()=>{c.current=!1},50))},[]),M=l.useCallback(r=>{c.current||!a.current||(c.current=!0,a.current.slideTo(r.activeIndex,r.params.speed),setTimeout(()=>{c.current=!1},50))},[]);return l.useEffect(()=>{a.current&&d.current&&b>=0&&setTimeout(()=>{c.current=!0,a.current?.slideTo(b,500),d.current?.slideTo(b,500),setTimeout(()=>{c.current=!1},600)},100)},[b]),(0,s.jsxs)(m.Container,{...o,ref:i,className:(0,u.cn)("event-schedule-root overflow-hidden",e?.root,n),children:[E&&(0,s.jsx)(f.Swiper,{breakpoints:$,className:"event-schedule-timeline h-4 w-full !overflow-visible",onSwiper:r=>{d.current=r},onSlideChange:M,children:t.scheduleList.map((r,g)=>{const h=k(r.startDate,r.endDate);return(0,s.jsx)(f.SwiperSlide,{className:"",children:(0,s.jsx)(Q,{className:e?.timeline,timeStatus:h,theme:p,index:g,nodeLength:t.scheduleList.length})},"timelineNode"+g)})}),(0,s.jsx)(f.Swiper,{breakpoints:V,className:"event-schedule-cards w-full !overflow-visible",onSwiper:r=>{a.current=r},onSlideChange:I,children:t.scheduleList.map((r,g)=>{const h=k(r.startDate,r.endDate);return(0,s.jsx)(f.SwiperSlide,{children:(0,s.jsx)(W,{timeStatus:h,className:(0,u.cn)(E?"laptop:mt-4 mt-2":"",e?.eventScheduleCard),item:r,theme:p,scheduleCount:t.scheduleList.length})},"SwiperSlideItem"+g)})})]})});L.displayName="EventSchedule";var X=(0,F.withLayout)(L);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Picture, Heading, Container } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper'\nimport dayjs from 'dayjs'\nimport { cva } from 'class-variance-authority'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u65F6\u95F4\u72B6\u6001\u7C7B\u578B\n */\nexport type TimeStatus = 'completed' | 'in-progress' | 'not-started'\n\n/**\n * \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n */\nexport interface StateIcon {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807\uFF08\u8FDB\u884C\u4E2D\uFF09 */\n active: Media\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807\uFF08\u672A\u5F00\u59CB\uFF09 */\n inactive: Media\n /** \u5DF2\u5B8C\u6210\u72B6\u6001\u7684\u56FE\u6807\uFF08\u53EF\u9009\uFF0C\u4E0D\u63D0\u4F9B\u5219\u4F7F\u7528 inactive\uFF09 */\n completed?: Media\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n endDate: string\n /**\n * \u5361\u7247\u80CC\u666F\u56FE\u6807\u914D\u7F6E\uFF0C\u72B6\u6001\u5316\u56FE\u6807\uFF08\u5FC5\u987B\u5305\u542B active \u548C inactive\uFF09\n *\n * @example\n * icon: {\n * active: { url: \"https://example.com/active-icon.svg\", alt: \"Active Icon\" },\n * inactive: { url: \"https://example.com/inactive-icon.svg\", alt: \"Inactive Icon\" }\n * }\n */\n icon?: StateIcon\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: string\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u83B7\u53D6\u65F6\u95F4\u72B6\u6001\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u65F6\u95F4\u72B6\u6001\uFF1Acompleted\uFF08\u5DF2\u5B8C\u6210\uFF09\u3001in-progress\uFF08\u8FDB\u884C\u4E2D\uFF09\u3001not-started\uFF08\u672A\u5F00\u59CB\uFF09\n */\nconst getTimeStatus = (startDate: string, endDate: string): TimeStatus => {\n const now = dayjs()\n const start = dayjs(startDate).startOf('day')\n const end = dayjs(endDate).endOf('day')\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u7ED3\u675F\u65F6\u95F4\u4E4B\u540E - \u5DF2\u5B8C\u6210\n if (now.isAfter(end)) {\n return 'completed'\n }\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u5F00\u59CB\u65F6\u95F4\u4E4B\u524D - \u672A\u5F00\u59CB\n if (now.isBefore(start)) {\n return 'not-started'\n }\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u5F00\u59CB\u548C\u7ED3\u675F\u4E4B\u95F4 - \u8FDB\u884C\u4E2D\n return 'in-progress'\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8FDB\u5EA6\u6761\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst timelineProgressActiveVariants = cva('h-1 w-full overflow-hidden', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F6CD4E]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\n 'completed-light': 'bg-[#F6CD4E]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst timelineNodeActiveVariants = cva('size-4 rounded-full transition-colors', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F6CD4E]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\uFF08\u4E0E\u8FDB\u884C\u4E2D\u989C\u8272\u4E00\u81F4\uFF09\n 'completed-light': 'bg-[#F6CD4E]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u5361\u7247\u6587\u672C\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\uFF08\u4FDD\u6301\u539F\u6709\u989C\u8272\uFF09\n 'in-progress-light': 'text-[#080A0F]',\n 'in-progress-dark': 'text-white',\n // \u672A\u5F00\u59CB\uFF0860% \u900F\u660E\u5EA6\uFF09\n 'not-started-light': 'text-[#080A0F]',\n 'not-started-dark': 'text-[#F5F6F7]',\n // \u5DF2\u5B8C\u6210\uFF0860% \u900F\u660E\u5EA6\uFF09\n 'completed-light': 'text-[#4A4C56]/60',\n 'completed-dark': 'text-[#F5F6F7]/60',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u5361\u7247\u5BB9\u5668\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst eventScheduleCardVariants = cva(\n 'laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden',\n {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F4E8BC]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\n 'completed-light': 'bg-[#F4E8BC]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n }\n)\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6 Props\n */\ninterface TimelineNodeProps {\n /** \u65F6\u95F4\u72B6\u6001 */\n timeStatus: TimeStatus\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u5F53\u524D\u8282\u70B9\u7D22\u5F15 */\n index: number\n /** \u8282\u70B9\u603B\u6570 */\n nodeLength: number\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ timeStatus, theme = 'light', className, index, nodeLength }: TimelineNodeProps) => {\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const state = `${timeStatus}-${theme}` as\n | 'in-progress-light'\n | 'in-progress-dark'\n | 'not-started-light'\n | 'not-started-dark'\n | 'completed-light'\n | 'completed-dark'\n\n // \u5224\u65AD\u9996\u5C3E\u4F4D\u7F6E\n const isFirst = index === 0\n const isLast = index === nodeLength - 1\n\n return (\n <div\n className={cn(\n `event-schedule-timeline-node event-schedule-timeline-node--${timeStatus} relative my-2 flex h-1 w-full items-center justify-center`,\n className\n )}\n >\n {/* \u8FDB\u5EA6\u6761\u80CC\u666F */}\n <div\n className={cn(\n `event-schedule-timeline-progress event-schedule-timeline-progress--${timeStatus}`,\n timelineProgressActiveVariants({ state }),\n isFirst && 'rounded-l-full',\n isLast && 'rounded-r-full'\n )}\n />\n {/* \u65F6\u95F4\u8282\u70B9\u5706\u70B9 */}\n <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n <div\n className={cn(\n `event-schedule-timeline-dot event-schedule-timeline-dot--${timeStatus}`,\n timelineNodeActiveVariants({ state })\n )}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u6839\u636E\u65F6\u95F4\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u56FE\u6807\n * @param icon \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n * @param timeStatus \u65F6\u95F4\u72B6\u6001\n * @returns \u56FE\u6807 Media \u5BF9\u8C61\n */\nconst getIconByTimeStatus = (icon: StateIcon | undefined, timeStatus: TimeStatus): Media | undefined => {\n if (!icon) return undefined\n // \u8FDB\u884C\u4E2D\u4F7F\u7528 active \u56FE\u6807\n if (timeStatus === 'in-progress') return icon.active\n // \u5DF2\u5B8C\u6210\u4F7F\u7528 completed \u56FE\u6807\uFF08\u5982\u679C\u6709\uFF09\uFF0C\u5426\u5219\u4F7F\u7528 inactive\n if (timeStatus === 'completed') return icon.completed || icon.inactive\n // \u672A\u5F00\u59CB\u4F7F\u7528 inactive \u56FE\u6807\n return icon.inactive\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n timeStatus,\n item,\n theme = 'light',\n className,\n scheduleCount,\n}: {\n timeStatus: TimeStatus\n item: EventScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n scheduleCount: number\n}) => {\n const currentIcon = React.useMemo(() => {\n return getIconByTimeStatus(item.icon, timeStatus)\n }, [item.icon, timeStatus])\n\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const cardState = `${timeStatus}-${theme}` as\n | 'in-progress-light'\n | 'in-progress-dark'\n | 'not-started-light'\n | 'not-started-dark'\n | 'completed-light'\n | 'completed-dark'\n\n return (\n <div\n className={cn(\n `event-schedule-card event-schedule-card--${timeStatus}`,\n eventScheduleCardVariants({ state: cardState }),\n className\n )}\n >\n {/* \u80CC\u666F\u56FE\u6807 */}\n {currentIcon && (\n <div\n className={`event-schedule-card__background-icon event-schedule-card__background-icon--${timeStatus} laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]`}\n >\n <Picture source={currentIcon.url} alt={currentIcon.alt} className=\"aspect-square\" />\n </div>\n )}\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div\n className={`event-schedule-card__content event-schedule-card__content--${timeStatus} tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8`}\n >\n <Heading\n html={item.title}\n className={cn(\n `event-schedule-card__title event-schedule-card__title--${timeStatus}`,\n scheduleCount >= 4 ? 'desktop:text-[24px]' : 'desktop:text-[32px]',\n 'laptop:text-[24px] line-clamp-1 text-[20px]',\n cardTextVariants({ state: cardState })\n )}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div\n className={`event-schedule-card__details event-schedule-card__details--${timeStatus} flex flex-col gap-0.5`}\n >\n {item.items.map((detail, index) => (\n <div\n key={index}\n className={`event-schedule-card__detail-item event-schedule-card__detail-item--${timeStatus} flex items-center gap-2`}\n >\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <Text\n className={cn(\n `event-schedule-card__detail-icon event-schedule-card__detail-icon--${timeStatus} desktop:size-6 size-5 shrink-0`,\n cardTextVariants({ state: cardState })\n )}\n html={detail.icon}\n />\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn(\n `event-schedule-card__detail-text event-schedule-card__detail-text--${timeStatus} lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]`,\n cardTextVariants({ state: cardState })\n )}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(\n ({ classNames = {}, data, className, ...rest }, ref) => {\n const theme = data.theme || 'light'\n const swiperRef = React.useRef<SwiperType | null>(null)\n const timelineSwiperRef = React.useRef<SwiperType | null>(null)\n const isSyncingRef = React.useRef(false) // \u9632\u6B62\u5FAA\u73AF\u89E6\u53D1\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u8BA1\u7B97\u8FDB\u884C\u4E2D item \u7684\u7D22\u5F15\uFF08\u7528\u4E8E\u81EA\u52A8\u6EDA\u52A8\uFF09\n const activeIndex = React.useMemo(() => {\n return data.scheduleList.findIndex(item => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return timeStatus === 'in-progress'\n })\n }, [data.scheduleList])\n\n /**\n * \u751F\u6210\u7EDF\u4E00\u7684 Swiper \u65AD\u70B9\u914D\u7F6E\n * @param itemsPerRow \u6BCF\u884C\u663E\u793A\u7684\u9879\u76EE\u6570\n * @param withSpaceBetween \u662F\u5426\u5305\u542B\u95F4\u8DDD\u914D\u7F6E\n * @returns Swiper \u65AD\u70B9\u914D\u7F6E\u5BF9\u8C61\n */\n const generateSwiperBreakpoints = React.useCallback((itemsPerRow: number, withSpaceBetween: boolean = false) => {\n // \u6839\u636E itemsPerRow \u786E\u5B9A\u4E0D\u540C\u65AD\u70B9\u4E0B\u7684 slidesPerView\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: 2.4 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2 }\n return { slidesPerView: itemsPerRow }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: itemsPerRow }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n // \u5982\u679C\u9700\u8981 spaceBetween\uFF0C\u5219\u6DFB\u52A0\u5230\u914D\u7F6E\u4E2D\n if (withSpaceBetween) {\n return {\n 0: { ...mobileConfig, spaceBetween: 12 },\n 768: { ...tabletConfig, spaceBetween: 12 },\n 1024: { ...laptopConfig, spaceBetween: 16 },\n 1440: { ...desktopConfig, spaceBetween: 16 },\n }\n }\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\uFF08\u5361\u7247 Swiper - \u5305\u542B\u95F4\u8DDD\uFF09\n const swiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, true)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n // \u65F6\u95F4\u8F74 Swiper \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0D\u5305\u542B\u95F4\u8DDD\uFF09\n const timeNodeSwiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, false)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n // \u540C\u6B65\u4E24\u4E2A Swiper \u7684\u6ED1\u52A8\n const handleCardSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !timelineSwiperRef.current) return\n isSyncingRef.current = true\n timelineSwiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n const handleTimelineSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !swiperRef.current) return\n isSyncingRef.current = true\n swiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n // \u81EA\u52A8\u6EDA\u52A8\u5230 active item\n React.useEffect(() => {\n if (swiperRef.current && timelineSwiperRef.current && activeIndex >= 0) {\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u786E\u4FDD Swiper \u5DF2\u7ECF\u5B8C\u5168\u521D\u59CB\u5316\n setTimeout(() => {\n isSyncingRef.current = true\n swiperRef.current?.slideTo(activeIndex, 500)\n timelineSwiperRef.current?.slideTo(activeIndex, 500)\n setTimeout(() => {\n isSyncingRef.current = false\n }, 600)\n }, 100)\n }\n }, [activeIndex])\n\n return (\n <Container {...rest} ref={ref} className={cn('event-schedule-root overflow-hidden', classNames?.root, className)}>\n {showTimeline && (\n <Swiper\n breakpoints={timeNodeSwiperBreakpoints}\n className=\"event-schedule-timeline h-4 w-full !overflow-visible\"\n onSwiper={swiper => {\n timelineSwiperRef.current = swiper\n }}\n onSlideChange={handleTimelineSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return (\n <SwiperSlide key={'timelineNode' + index} className=\"\">\n <TimelineNode\n className={classNames?.timeline}\n timeStatus={timeStatus}\n theme={theme}\n index={index}\n nodeLength={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n )}\n <Swiper\n breakpoints={swiperBreakpoints}\n className=\"event-schedule-cards w-full !overflow-visible\"\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n onSlideChange={handleCardSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n <EventScheduleCard\n timeStatus={timeStatus}\n className={cn(showTimeline ? 'laptop:mt-4 mt-2' : '', classNames?.eventScheduleCard)}\n item={item}\n theme={theme}\n scheduleCount={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </Container>\n )\n }\n)\n\nEventSchedule.displayName = 'EventSchedule'\nexport default withLayout(EventSchedule)\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { StateIcon, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_Styles", "import_components", "import_react", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Text, Picture, Heading, Container } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cva } from 'class-variance-authority'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u65F6\u95F4\u72B6\u6001\u7C7B\u578B\n */\nexport type TimeStatus = 'completed' | 'in-progress' | 'not-started'\n\n/**\n * \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n */\nexport interface StateIcon {\n /** \u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807\uFF08\u8FDB\u884C\u4E2D\uFF09 */\n active: Media\n /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807\uFF08\u672A\u5F00\u59CB\uFF09 */\n inactive: Media\n /** \u5DF2\u5B8C\u6210\u72B6\u6001\u7684\u56FE\u6807\uFF08\u53EF\u9009\uFF0C\u4E0D\u63D0\u4F9B\u5219\u4F7F\u7528 inactive\uFF09 */\n completed?: Media\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n /** \u6807\u9898 */\n title: string\n /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\uFF0C\u5982 '2024-12-01T00:00:00Z'\uFF09 */\n startDate: string\n /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\uFF0C\u5982 '2024-12-31T23:59:59Z'\uFF09 */\n endDate: string\n /**\n * \u5361\u7247\u80CC\u666F\u56FE\u6807\u914D\u7F6E\uFF0C\u72B6\u6001\u5316\u56FE\u6807\uFF08\u5FC5\u987B\u5305\u542B active \u548C inactive\uFF09\n *\n * @example\n * icon: {\n * active: { url: \"https://example.com/active-icon.svg\", alt: \"Active Icon\" },\n * inactive: { url: \"https://example.com/inactive-icon.svg\", alt: \"Inactive Icon\" }\n * }\n */\n icon?: StateIcon\n /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n items: {\n /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n icon?: string\n /** \u6587\u672C\u5185\u5BB9 */\n label: string\n }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n /** \u65E5\u7A0B\u5217\u8868 */\n scheduleList: EventScheduleItem[]\n /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n showTimeline?: boolean\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: EventScheduleData\n classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u83B7\u53D6\u65F6\u95F4\u72B6\u6001\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u65F6\u95F4\u72B6\u6001\uFF1Acompleted\uFF08\u5DF2\u5B8C\u6210\uFF09\u3001in-progress\uFF08\u8FDB\u884C\u4E2D\uFF09\u3001not-started\uFF08\u672A\u5F00\u59CB\uFF09\n */\nconst getTimeStatus = (startDate: string, endDate: string): TimeStatus => {\n const now = Date.now()\n const start = new Date(startDate).getTime()\n const end = new Date(endDate).getTime()\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u7ED3\u675F\u65F6\u95F4\u4E4B\u540E - \u5DF2\u5B8C\u6210\n if (now > end) {\n return 'completed'\n }\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u5F00\u59CB\u65F6\u95F4\u4E4B\u524D - \u672A\u5F00\u59CB\n if (now < start) {\n return 'not-started'\n }\n\n // \u5F53\u524D\u65F6\u95F4\u5728\u5F00\u59CB\u548C\u7ED3\u675F\u4E4B\u95F4 - \u8FDB\u884C\u4E2D\n return 'in-progress'\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8FDB\u5EA6\u6761\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst timelineProgressActiveVariants = cva('h-1 w-full overflow-hidden', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F6CD4E]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\n 'completed-light': 'bg-[#F6CD4E]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst timelineNodeActiveVariants = cva('size-4 rounded-full transition-colors', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F6CD4E]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\uFF08\u4E0E\u8FDB\u884C\u4E2D\u989C\u8272\u4E00\u81F4\uFF09\n 'completed-light': 'bg-[#F6CD4E]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u5361\u7247\u6587\u672C\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\uFF08\u4FDD\u6301\u539F\u6709\u989C\u8272\uFF09\n 'in-progress-light': 'text-[#080A0F]',\n 'in-progress-dark': 'text-white',\n // \u672A\u5F00\u59CB\uFF0860% \u900F\u660E\u5EA6\uFF09\n 'not-started-light': 'text-[#080A0F]',\n 'not-started-dark': 'text-[#F5F6F7]',\n // \u5DF2\u5B8C\u6210\uFF0860% \u900F\u660E\u5EA6\uFF09\n 'completed-light': 'text-[#4A4C56]/60',\n 'completed-dark': 'text-[#F5F6F7]/60',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n})\n\n/**\n * \u5361\u7247\u5BB9\u5668\u6837\u5F0F\u53D8\u4F53\uFF08\u652F\u6301\u4E09\u79CD\u65F6\u95F4\u72B6\u6001\uFF09\n */\nconst eventScheduleCardVariants = cva(\n 'laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden',\n {\n variants: {\n state: {\n // \u8FDB\u884C\u4E2D\n 'in-progress-light': 'bg-[#F4E8BC]',\n 'in-progress-dark': 'bg-[#D79941]',\n // \u672A\u5F00\u59CB\n 'not-started-light': 'bg-[#EAEAEC]',\n 'not-started-dark': 'bg-[#1E2024]',\n // \u5DF2\u5B8C\u6210\n 'completed-light': 'bg-[#F4E8BC]',\n 'completed-dark': 'bg-[#D79941]',\n },\n },\n defaultVariants: {\n state: 'not-started-light',\n },\n }\n)\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6 Props\n */\ninterface TimelineNodeProps {\n /** \u65F6\u95F4\u72B6\u6001 */\n timeStatus: TimeStatus\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u5F53\u524D\u8282\u70B9\u7D22\u5F15 */\n index: number\n /** \u8282\u70B9\u603B\u6570 */\n nodeLength: number\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ timeStatus, theme = 'light', className, index, nodeLength }: TimelineNodeProps) => {\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const state = `${timeStatus}-${theme}` as\n | 'in-progress-light'\n | 'in-progress-dark'\n | 'not-started-light'\n | 'not-started-dark'\n | 'completed-light'\n | 'completed-dark'\n\n // \u5224\u65AD\u9996\u5C3E\u4F4D\u7F6E\n const isFirst = index === 0\n const isLast = index === nodeLength - 1\n\n return (\n <div\n className={cn(\n `event-schedule-timeline-node event-schedule-timeline-node--${timeStatus} relative my-2 flex h-1 w-full items-center justify-center`,\n className\n )}\n >\n {/* \u8FDB\u5EA6\u6761\u80CC\u666F */}\n <div\n className={cn(\n `event-schedule-timeline-progress event-schedule-timeline-progress--${timeStatus}`,\n timelineProgressActiveVariants({ state }),\n isFirst && 'rounded-l-full',\n isLast && 'rounded-r-full'\n )}\n />\n {/* \u65F6\u95F4\u8282\u70B9\u5706\u70B9 */}\n <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n <div\n className={cn(\n `event-schedule-timeline-dot event-schedule-timeline-dot--${timeStatus}`,\n timelineNodeActiveVariants({ state })\n )}\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u6839\u636E\u65F6\u95F4\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u56FE\u6807\n * @param icon \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n * @param timeStatus \u65F6\u95F4\u72B6\u6001\n * @returns \u56FE\u6807 Media \u5BF9\u8C61\n */\nconst getIconByTimeStatus = (icon: StateIcon | undefined, timeStatus: TimeStatus): Media | undefined => {\n if (!icon) return undefined\n // \u8FDB\u884C\u4E2D\u4F7F\u7528 active \u56FE\u6807\n if (timeStatus === 'in-progress') return icon.active\n // \u5DF2\u5B8C\u6210\u4F7F\u7528 completed \u56FE\u6807\uFF08\u5982\u679C\u6709\uFF09\uFF0C\u5426\u5219\u4F7F\u7528 inactive\n if (timeStatus === 'completed') return icon.completed || icon.inactive\n // \u672A\u5F00\u59CB\u4F7F\u7528 inactive \u56FE\u6807\n return icon.inactive\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n timeStatus,\n item,\n theme = 'light',\n className,\n scheduleCount,\n}: {\n timeStatus: TimeStatus\n item: EventScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n scheduleCount: number\n}) => {\n const currentIcon = React.useMemo(() => {\n return getIconByTimeStatus(item.icon, timeStatus)\n }, [item.icon, timeStatus])\n\n // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n const cardState = `${timeStatus}-${theme}` as\n | 'in-progress-light'\n | 'in-progress-dark'\n | 'not-started-light'\n | 'not-started-dark'\n | 'completed-light'\n | 'completed-dark'\n\n return (\n <div\n className={cn(\n `event-schedule-card event-schedule-card--${timeStatus}`,\n eventScheduleCardVariants({ state: cardState }),\n className\n )}\n >\n {/* \u80CC\u666F\u56FE\u6807 */}\n {currentIcon && (\n <div\n className={`event-schedule-card__background-icon event-schedule-card__background-icon--${timeStatus} laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]`}\n >\n <Picture source={currentIcon.url} alt={currentIcon.alt} className=\"aspect-square\" />\n </div>\n )}\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div\n className={`event-schedule-card__content event-schedule-card__content--${timeStatus} tablet:px-4 tablet:py-3 desktop:pl-6 desktop:pr-16 relative z-20 flex h-full flex-col justify-between p-4 pr-8`}\n >\n <Heading\n html={item.title}\n className={cn(\n `event-schedule-card__title event-schedule-card__title--${timeStatus}`,\n scheduleCount >= 4 ? 'desktop:text-[24px]' : 'desktop:text-[32px]',\n 'laptop:text-[24px] line-clamp-1 text-[20px]',\n cardTextVariants({ state: cardState })\n )}\n />\n {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n <div\n className={`event-schedule-card__details event-schedule-card__details--${timeStatus} flex flex-col gap-0.5`}\n >\n {item.items.map((detail, index) => (\n <div\n key={index}\n className={`event-schedule-card__detail-item event-schedule-card__detail-item--${timeStatus} flex items-center gap-2`}\n >\n {/* \u56FE\u6807 */}\n {detail.icon && (\n <Text\n className={cn(\n `event-schedule-card__detail-icon event-schedule-card__detail-icon--${timeStatus} desktop:size-6 size-5 shrink-0`,\n cardTextVariants({ state: cardState })\n )}\n html={detail.icon}\n />\n )}\n {/* \u6587\u672C */}\n <Text\n html={detail.label}\n className={cn(\n `event-schedule-card__detail-text event-schedule-card__detail-text--${timeStatus} lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]`,\n cardTextVariants({ state: cardState })\n )}\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(\n ({ classNames = {}, data, className, ...rest }, ref) => {\n const theme = data.theme || 'light'\n const swiperRef = React.useRef<SwiperType | null>(null)\n const timelineSwiperRef = React.useRef<SwiperType | null>(null)\n const isSyncingRef = React.useRef(false) // \u9632\u6B62\u5FAA\u73AF\u89E6\u53D1\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n // \u8BA1\u7B97\u8FDB\u884C\u4E2D item \u7684\u7D22\u5F15\uFF08\u7528\u4E8E\u81EA\u52A8\u6EDA\u52A8\uFF09\n const activeIndex = React.useMemo(() => {\n return data.scheduleList.findIndex(item => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return timeStatus === 'in-progress'\n })\n }, [data.scheduleList])\n\n /**\n * \u751F\u6210\u7EDF\u4E00\u7684 Swiper \u65AD\u70B9\u914D\u7F6E\n * @param itemsPerRow \u6BCF\u884C\u663E\u793A\u7684\u9879\u76EE\u6570\n * @param withSpaceBetween \u662F\u5426\u5305\u542B\u95F4\u8DDD\u914D\u7F6E\n * @returns Swiper \u65AD\u70B9\u914D\u7F6E\u5BF9\u8C61\n */\n const generateSwiperBreakpoints = React.useCallback((itemsPerRow: number, withSpaceBetween: boolean = false) => {\n // \u6839\u636E itemsPerRow \u786E\u5B9A\u4E0D\u540C\u65AD\u70B9\u4E0B\u7684 slidesPerView\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: 2.4 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2 }\n return { slidesPerView: itemsPerRow }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2 }\n return { slidesPerView: itemsPerRow }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n // \u5982\u679C\u9700\u8981 spaceBetween\uFF0C\u5219\u6DFB\u52A0\u5230\u914D\u7F6E\u4E2D\n if (withSpaceBetween) {\n return {\n 0: { ...mobileConfig, spaceBetween: 12 },\n 768: { ...tabletConfig, spaceBetween: 12 },\n 1024: { ...laptopConfig, spaceBetween: 16 },\n 1440: { ...desktopConfig, spaceBetween: 16 },\n }\n }\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [])\n\n // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\uFF08\u5361\u7247 Swiper - \u5305\u542B\u95F4\u8DDD\uFF09\n const swiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, true)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n // \u65F6\u95F4\u8F74 Swiper \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0D\u5305\u542B\u95F4\u8DDD\uFF09\n const timeNodeSwiperBreakpoints = React.useMemo(() => {\n return generateSwiperBreakpoints(itemsPerRow, false)\n }, [itemsPerRow, generateSwiperBreakpoints])\n\n const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n // \u540C\u6B65\u4E24\u4E2A Swiper \u7684\u6ED1\u52A8\n const handleCardSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !timelineSwiperRef.current) return\n isSyncingRef.current = true\n timelineSwiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n const handleTimelineSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n if (isSyncingRef.current || !swiperRef.current) return\n isSyncingRef.current = true\n swiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n setTimeout(() => {\n isSyncingRef.current = false\n }, 50)\n }, [])\n\n // \u81EA\u52A8\u6EDA\u52A8\u5230 active item\n React.useEffect(() => {\n if (swiperRef.current && timelineSwiperRef.current && activeIndex >= 0) {\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u786E\u4FDD Swiper \u5DF2\u7ECF\u5B8C\u5168\u521D\u59CB\u5316\n setTimeout(() => {\n isSyncingRef.current = true\n swiperRef.current?.slideTo(activeIndex, 500)\n timelineSwiperRef.current?.slideTo(activeIndex, 500)\n setTimeout(() => {\n isSyncingRef.current = false\n }, 600)\n }, 100)\n }\n }, [activeIndex])\n\n return (\n <Container {...rest} ref={ref} className={cn('event-schedule-root overflow-hidden', classNames?.root, className)}>\n {showTimeline && (\n <Swiper\n breakpoints={timeNodeSwiperBreakpoints}\n className=\"event-schedule-timeline h-4 w-full !overflow-visible\"\n onSwiper={swiper => {\n timelineSwiperRef.current = swiper\n }}\n onSlideChange={handleTimelineSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return (\n <SwiperSlide key={'timelineNode' + index} className=\"\">\n <TimelineNode\n className={classNames?.timeline}\n timeStatus={timeStatus}\n theme={theme}\n index={index}\n nodeLength={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n )}\n <Swiper\n breakpoints={swiperBreakpoints}\n className=\"event-schedule-cards w-full !overflow-visible\"\n onSwiper={swiper => {\n swiperRef.current = swiper\n }}\n onSlideChange={handleCardSwiperSlideChange}\n >\n {data.scheduleList.map((item, index) => {\n const timeStatus = getTimeStatus(item.startDate, item.endDate)\n return (\n <SwiperSlide key={'SwiperSlideItem' + index}>\n <EventScheduleCard\n timeStatus={timeStatus}\n className={cn(showTimeline ? 'laptop:mt-4 mt-2' : '', classNames?.eventScheduleCard)}\n item={item}\n theme={theme}\n scheduleCount={data.scheduleList.length}\n />\n </SwiperSlide>\n )\n })}\n </Swiper>\n </Container>\n )\n }\n)\n\nEventSchedule.displayName = 'EventSchedule'\nexport default withLayout(EventSchedule)\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { StateIcon, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_Styles", "import_components", "import_react", "import_class_variance_authority", "getTimeStatus", "startDate", "endDate", "now", "start", "end", "timelineProgressActiveVariants", "timelineNodeActiveVariants", "cardTextVariants", "eventScheduleCardVariants", "TimelineNode", "timeStatus", "theme", "className", "index", "nodeLength", "state", "isFirst", "isLast", "getIconByTimeStatus", "icon", "EventScheduleCard", "item", "scheduleCount", "currentIcon", "cardState", "detail", "EventSchedule", "classNames", "data", "rest", "ref", "swiperRef", "timelineSwiperRef", "isSyncingRef", "itemsPerRow", "activeIndex", "generateSwiperBreakpoints", "withSpaceBetween", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "swiperBreakpoints", "timeNodeSwiperBreakpoints", "showTimeline", "handleCardSwiperSlideChange", "swiper", "handleTimelineSwiperSlideChange"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var oe=Object.create;var S=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var ce=(n,t)=>{for(var i in t)S(n,i,{get:t[i],enumerable:!0})},W=(n,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of le(t))!re.call(n,p)&&p!==i&&S(n,p,{get:()=>t[p],enumerable:!(l=ne(t,p))||l.enumerable});return n};var q=(n,t,i)=>(i=n!=null?oe(ie(n)):{},W(t||!n||!n.__esModule?S(i,"default",{value:n,enumerable:!0}):i,n)),se=n=>W(S({},"__esModule",{value:!0}),n);var me={};ce(me,{default:()=>ue});module.exports=se(me);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),D=require("../../../BizProductProvider.js"),K=require("../../../hooks/useComponentData.js"),h=require("react"),b=require("../../../utils/index.js"),A=require("../../../../AiuiProvider/index.js"),$=q(require("decimal.js")),M=require("../../../utils/textFormat.js"),U=require("../../../../../shared/Styles.js"),X=require("../../../../../components/index.js"),Y=require("../../../../../shared/track.js"),Z=q(require("../../CartActionButtons/index.js"));const de=()=>{const{locale:n="us",copyWriting:t}=(0,A.useAiuiContext)(),{product:i,variant:l,finalPrice:p,comparePrice:f,coupon:P,selectedOptions:u,selectedVariants:g,totalSavings:c,onAddToCart:B,onBuyNow:E,savingDetail:v,checkedBundle:C,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:m,setSavingDetail:T,addToCartLoading:O,buyNowLoading:j,profile:_,addOrder:L,setAddOrder:w}=(0,D.useBizProductContext)(),F=(0,K.useComponentData)("ProductSummary")??{},[z]=g,G=(0,h.useMemo)(()=>{const s=C?.variants.find(y=>y.variant.sku===z?.sku),r=new $.default(z?.price?.amount||0).minus(s?.price||z?.price?.amount).toNumber();let x=new $.default(z?.price?.amount||0);_?.email&&(x=x.minus(v?.member||0));const N=x.minus(v?.coupon).minus(r).toNumber();return parseFloat(N.toFixed(2))},[z,C,_,v?.member,v?.coupon]),{bundleVariant:I,giftVariant:V,exchangeVariant:R}=pe()||{},[d,k]=(0,h.useState)();(0,h.useEffect)(()=>{k({bundle:o.bundle?.value?void 0:I,gift:o.gift?.value?void 0:V,exchange:o.exchange?.value?void 0:R})},[I,V,R,o]);const ee=(0,h.useMemo)(()=>{const s=[];return L&&L.forEach((r,x)=>{o[r]?.value&&s.push({type:r,key:`${r}-${x}`})}),s},[L,o]),te=(0,h.useMemo)(()=>{const s=u?.quantity||"",r=u?.color||u?.colour||u?.couleur||"";return`${s&&r?`${s} | ${r}`:s||r}`},[u?.quantity,u?.color,u?.colour,u?.couleur]),ae=(0,h.useMemo)(()=>{const{image_1920:s,image_1440:r,image_1024:x,image_768:N,image_390:y}=F?.thumbnail||{};return(F?.thumbnail?`${s} 1920, ${r} 1440, ${x} 1024, ${N} 768, ${y} 390`:l.image?.url)||l.image?.url},[F?.thumbnail,l.image?.url]);return l.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,e.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,e.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,e.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,e.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:F?.readyWant?.replace?.("{title}",i?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:ae,className:"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),(0,e.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(X.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,Y.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${l.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:l.image?.url||i?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:i.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:te})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:G,currencyCode:l.price.currencyCode,locale:n})}),G<l?.price?.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:l?.price?.amount,currencyCode:l.price.currencyCode,locale:n})})]})]})}),ee.map(({type:s,key:r})=>s==="gift"&&o?.gift?.value?(0,e.jsx)(Q,{giftOperation:x=>{m?.({...o,gift:{value:void 0,canOperate:!0}}),k?.({...d,gift:x}),w?.(N=>N.filter(y=>y!=="gift"))},status:!!o?.gift,gift:o?.gift?.value,canOperate:o?.gift?.canOperate},r):s==="bundle"&&o?.bundle?.value?(0,e.jsx)(J,{bundleOperation:x=>{m?.({...o,bundle:{value:void 0,canOperate:!0}}),k?.({...d,bundle:x}),w?.(N=>N.filter(y=>y!=="bundle"))},status:!!o?.bundle,bundleListItem:o?.bundle?.value,canOperate:o?.bundle?.canOperate},r):s==="exchange"&&o?.exchange?.value?(0,e.jsx)(H,{exchangeOperation:x=>{m?.({...o,exchange:{value:void 0,canOperate:!0}}),k?.({...d,exchange:x}),w?.(N=>N.filter(y=>y!=="exchange"))},status:!!o?.exchange,canOperate:o?.exchange?.canOperate,exchange:o?.exchange?.value},r):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"laptop-md:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[18px] text-sm font-bold",html:F?.recommendBuy}),(0,e.jsxs)("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(H,{exchangeOperation:s=>{m?.({...o,exchange:{value:s,canOperate:!0}}),k?.({...d,exchange:void 0}),w?.(r=>[...r,"exchange"])},canOperate:o?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(J,{bundleOperation:s=>{T?.({...v,exchangePurchase:0}),m?.({...o,bundle:{value:s,canOperate:!0}}),k?.({...d,bundle:void 0}),w?.(r=>[...r,"bundle"])},canOperate:o?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(Q,{giftOperation:s=>{m?.({...o,gift:{value:s,canOperate:!0}}),k?.({...d,gift:void 0}),w?.(r=>[...r,"gift"])},canOperate:o?.gift?.canOperate,status:!d?.gift,gift:d?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${(0,M.replaceTemplate)(t?.totalPrice||"",{amount:(0,b.formatPrice)({amount:parseFloat(p.toFixed(2)),currencyCode:l.price.currencyCode,locale:n})})}`}),c>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:f,currencyCode:l.price.currencyCode,locale:n})}),(0,e.jsx)("div",{className:"mt-4 flex justify-end gap-3",children:(0,e.jsx)(Z.default,{availableForSale:l.availableForSale,addToCartText:t?.addToCart,buyNowText:t?.shopNow,addToCartLoading:O,buyNowLoading:j,addToCartClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",buyNowClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onAddToCart:B,onBuyNow:E})})]})]})]})})}):null},pe=()=>{const{bundle:n,variant:t,checkedBundle:i,freeGift:l,checkedGift:p,exchangePurchase:f,checkedExchangePurchase:P}=(0,D.useBizProductContext)();let u,g,c;const{bundleList:B}=n||{},{giftList:E=[]}=l||{},{giftList:v=[]}=f||{},C=B?.filter(O=>O.variants.slice(1,O.variants.length).every(j=>j.variant.availableForSale))||[],[o]=C;u=i||o;const[m]=E?.filter(O=>O.availableForSale)??[];g=p||m;const[T]=v?.filter(O=>O.availableForSale)??[];return c=P||T,{bundleVariant:u,giftVariant:g,exchangeVariant:c}},J=({bundleOperation:n,bundleListItem:t,canOperate:i,status:l})=>{const{locale:p="us",copyWriting:f}=(0,A.useAiuiContext)(),{variant:P,setCheckedBundle:u}=(0,D.useBizProductContext)(),g=t?.variants.filter(c=>c.variant.sku!==P.sku);return(0,e.jsx)("div",{className:"",children:g?.map(c=>(0,e.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:c?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsx)("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:c.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:c?.price||0,locale:p,currencyCode:c.variant?.price?.currencyCode||""})}),c.price<c.variant.price.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:c.variant.price.amount||0,locale:p,currencyCode:c.variant?.price?.currencyCode||""})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{u?.(l?void 0:t),n?.(t)},className:"size-auto shrink-0 underline",children:l?f?.remove:f?.add})]})]},c.variant.id))})},Q=({giftOperation:n,gift:t,status:i,canOperate:l})=>{const{locale:p="us",copyWriting:f}=(0,A.useAiuiContext)(),{freeGift:P,setCheckedGift:u}=(0,D.useBizProductContext)(),{freeLabel:g}=P||{},{options:c}=t||{},B=(0,h.useMemo)(()=>{const E=c?.find(m=>m.name==="color"||m.name==="colour"||m.name==="couleur")||{},v=c?.find(m=>m.name==="quantity")||{},C=E?E.values?.[0]?.label:"",o=v?v.values?.[0]?.label:"";return`${C&&o?o+" | "+C:o||C} | ${g}`},[g,c]);return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:B})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:g}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price.amount,locale:p,currencyCode:t.price.currencyCode})})]}),l&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{u?.(i?void 0:t),n(t)},className:"size-auto shrink-0 underline",children:i?f?.remove:f?.add})]})]})},H=({exchangeOperation:n,exchange:t,canOperate:i,status:l})=>{const{locale:p="us",copyWriting:f}=(0,A.useAiuiContext)(),{setCheckedExchangePurchase:P}=(0,D.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,b.formatPrice)({amount:t.finalPrice?.amount||0,locale:p,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,b.formatPrice)({amount:t.price?.amount||0,locale:p,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{P?.(l?void 0:t),n(t)},className:"size-auto shrink-0 underline",children:l?f?.remove:f?.add})]})]})};var ue=(0,U.withLayout)(de);
|
|
1
|
+
"use strict";var le=Object.create;var T=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var de=(l,t)=>{for(var s in t)T(l,s,{get:t[s],enumerable:!0})},q=(l,t,s,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ie(t))!se.call(l,n)&&n!==s&&T(l,n,{get:()=>t[n],enumerable:!(u=re(t,n))||u.enumerable});return l};var J=(l,t,s)=>(s=l!=null?le(ce(l)):{},q(t||!l||!l.__esModule?T(s,"default",{value:l,enumerable:!0}):s,l)),pe=l=>q(T({},"__esModule",{value:!0}),l);var fe={};de(fe,{default:()=>xe});module.exports=pe(fe);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),M=require("../../../hooks/useComponentData.js"),v=require("react"),g=require("../../../utils/index.js"),S=require("../../../../AiuiProvider/index.js"),$=J(require("decimal.js")),U=require("../../../utils/textFormat.js"),X=require("../../../../../shared/Styles.js"),Y=require("../../../../../components/index.js"),Z=require("../../../../../shared/track.js"),ee=J(require("../../CartActionButtons/index.js"));const ue=()=>{const{locale:l="us",copyWriting:t,trackingData:s}=(0,S.useAiuiContext)(),{product:u,variant:n,finalPrice:x,comparePrice:b,coupon:k,selectedOptions:p,selectedVariants:i,totalSavings:F,onAddToCart:w,onBuyNow:E,savingDetail:f,checkedBundle:y,joinedRecommendBuyProducts:o,setJoinedRecommendBuyProducts:P,setSavingDetail:C,addToCartLoading:j,buyNowLoading:te,profile:_,addOrder:L,setAddOrder:D}=(0,B.useBizProductContext)(),G=s?.showComparePrice??!0,z=(0,M.useComponentData)("ProductSummary")??{},[A]=i,I=(0,v.useMemo)(()=>{const c=y?.variants.find(N=>N.variant.sku===A?.sku),r=new $.default(A?.price?.amount||0).minus(c?.price||A?.price?.amount).toNumber();let m=new $.default(A?.price?.amount||0);_?.email&&(m=m.minus(f?.member||0));const h=m.minus(f?.coupon).minus(r).toNumber();return parseFloat(h.toFixed(2))},[A,y,_,f?.member,f?.coupon]),{bundleVariant:V,giftVariant:R,exchangeVariant:W}=me()||{},[d,O]=(0,v.useState)();(0,v.useEffect)(()=>{O({bundle:o.bundle?.value?void 0:V,gift:o.gift?.value?void 0:R,exchange:o.exchange?.value?void 0:W})},[V,R,W,o]);const ae=(0,v.useMemo)(()=>{const c=[];return L&&L.forEach((r,m)=>{o[r]?.value&&c.push({type:r,key:`${r}-${m}`})}),c},[L,o]),oe=(0,v.useMemo)(()=>{const c=p?.quantity||"",r=p?.color||p?.colour||p?.couleur||"";return`${c&&r?`${c} | ${r}`:c||r}`},[p?.quantity,p?.color,p?.colour,p?.couleur]),ne=(0,v.useMemo)(()=>{const{image_1920:c,image_1440:r,image_1024:m,image_768:h,image_390:N}=z?.thumbnail||{};return(z?.thumbnail?`${c} 1920, ${r} 1440, ${m} 1024, ${h} 768, ${N} 390`:n.image?.url)||n.image?.url},[z?.thumbnail,n.image?.url]);return n.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16",children:(0,e.jsx)("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:(0,e.jsxs)(a.Grid,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[(0,e.jsxs)(a.GridItem,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[(0,e.jsx)(a.Heading,{className:"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:z?.readyWant?.replace?.("{title}",u?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:ne,className:"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),(0,e.jsxs)(a.GridItem,{className:"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(Y.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,Z.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:n.image?.url||u?.images?.[0]?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:u.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:oe})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:I,currencyCode:n.price.currencyCode,locale:l})}),G&&I<n?.price?.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:n?.price?.amount,currencyCode:n.price.currencyCode,locale:l})})]})]})}),ae.map(({type:c,key:r})=>c==="gift"&&o?.gift?.value?(0,e.jsx)(H,{giftOperation:m=>{P?.({...o,gift:{value:void 0,canOperate:!0}}),O?.({...d,gift:m}),D?.(h=>h.filter(N=>N!=="gift"))},status:!!o?.gift,gift:o?.gift?.value,canOperate:o?.gift?.canOperate},r):c==="bundle"&&o?.bundle?.value?(0,e.jsx)(Q,{bundleOperation:m=>{P?.({...o,bundle:{value:void 0,canOperate:!0}}),O?.({...d,bundle:m}),D?.(h=>h.filter(N=>N!=="bundle"))},status:!!o?.bundle,bundleListItem:o?.bundle?.value,canOperate:o?.bundle?.canOperate},r):c==="exchange"&&o?.exchange?.value?(0,e.jsx)(K,{exchangeOperation:m=>{P?.({...o,exchange:{value:void 0,canOperate:!0}}),O?.({...d,exchange:m}),D?.(h=>h.filter(N=>N!=="exchange"))},status:!!o?.exchange,canOperate:o?.exchange?.canOperate,exchange:o?.exchange?.value},r):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"laptop-md:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[18px] text-sm font-bold",html:z?.recommendBuy}),(0,e.jsxs)("div",{className:"laptop-md:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(K,{exchangeOperation:c=>{P?.({...o,exchange:{value:c,canOperate:!0}}),O?.({...d,exchange:void 0}),D?.(r=>[...r,"exchange"])},canOperate:o?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(Q,{bundleOperation:c=>{C?.({...f,exchangePurchase:0}),P?.({...o,bundle:{value:c,canOperate:!0}}),O?.({...d,bundle:void 0}),D?.(r=>[...r,"bundle"])},canOperate:o?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(H,{giftOperation:c=>{P?.({...o,gift:{value:c,canOperate:!0}}),O?.({...d,gift:void 0}),D?.(r=>[...r,"gift"])},canOperate:o?.gift?.canOperate,status:!d?.gift,gift:d?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl text-right font-bold",html:`${(0,U.replaceTemplate)(t?.totalPrice||"",{amount:(0,g.formatPrice)({amount:parseFloat(x.toFixed(2)),currencyCode:n.price.currencyCode,locale:l})})}`}),G&&F>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:b,currencyCode:n.price.currencyCode,locale:l})}),(0,e.jsx)("div",{className:"mt-4 flex justify-end gap-3",children:(0,e.jsx)(ee.default,{availableForSale:n.availableForSale,addToCartText:t?.addToCart,buyNowText:t?.shopNow,addToCartLoading:j,buyNowLoading:te,addToCartClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",buyNowClassName:"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2",onAddToCart:w,onBuyNow:E})})]})]})]})})}):null},me=()=>{const{bundle:l,variant:t,checkedBundle:s,freeGift:u,checkedGift:n,exchangePurchase:x,checkedExchangePurchase:b}=(0,B.useBizProductContext)();let k,p,i;const{bundleList:F}=l||{},{giftList:w=[]}=u||{},{giftList:E=[]}=x||{},f=F?.filter(C=>C.variants.slice(1,C.variants.length).every(j=>j.variant.availableForSale))||[],[y]=f;k=s||y;const[o]=w?.filter(C=>C.availableForSale)??[];p=n||o;const[P]=E?.filter(C=>C.availableForSale)??[];return i=b||P,{bundleVariant:k,giftVariant:p,exchangeVariant:i}},Q=({bundleOperation:l,bundleListItem:t,canOperate:s,status:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{variant:b,setCheckedBundle:k}=(0,B.useBizProductContext)(),p=t?.variants.filter(i=>i.variant.sku!==b.sku);return(0,e.jsx)("div",{className:"",children:p?.map(i=>(0,e.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i?.variant?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsx)("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:i.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:i?.price||0,locale:n,currencyCode:i.variant?.price?.currencyCode||""})}),i.price<i.variant.price.amount&&(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:i.variant.price.amount||0,locale:n,currencyCode:i.variant?.price?.currencyCode||""})})]}),s&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(u?void 0:t),l?.(t)},className:"size-auto shrink-0 underline",children:u?x?.remove:x?.add})]})]},i.variant.id))})},H=({giftOperation:l,gift:t,status:s,canOperate:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{freeGift:b,setCheckedGift:k}=(0,B.useBizProductContext)(),{freeLabel:p}=b||{},{options:i}=t||{},F=(0,v.useMemo)(()=>{const w=i?.find(o=>o.name==="color"||o.name==="colour"||o.name==="couleur")||{},E=i?.find(o=>o.name==="quantity")||{},f=w?w.values?.[0]?.label:"",y=E?E.values?.[0]?.label:"";return`${f&&y?y+" | "+f:y||f} | ${p}`},[p,i]);return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:F})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:p}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:t.price.amount,locale:n,currencyCode:t.price.currencyCode})})]}),u&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(s?void 0:t),l(t)},className:"size-auto shrink-0 underline",children:s?x?.remove:x?.add})]})]})},K=({exchangeOperation:l,exchange:t,canOperate:s,status:u})=>{const{locale:n="us",copyWriting:x}=(0,S.useAiuiContext)(),{setCheckedExchangePurchase:b}=(0,B.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2"}),(0,e.jsxs)("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold",html:(0,g.formatPrice)({amount:t.finalPrice?.amount||0,locale:n,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,g.formatPrice)({amount:t.price?.amount||0,locale:n,currencyCode:t.price.currencyCode})})]}),s&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(u?void 0:t),l(t)},className:"size-auto shrink-0 underline",children:u?x?.remove:x?.add})]})]})};var xe=(0,X.withLayout)(ue);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useComponentData } from '../../../hooks/useComponentData.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { BundleListItem, ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n const productSummaryData = useComponentData('ProductSummary') ?? {}\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n return parseFloat(finalPrice.toFixed(2))\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const variantImage = useMemo(() => {\n const { image_1920, image_1440, image_1024, image_768, image_390 } = productSummaryData?.thumbnail || {}\n const responsiveSource = productSummaryData?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return responsiveSource || variant.image?.url\n }, [productSummaryData?.thumbnail, variant.image?.url])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variantImage}\n className=\"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]\"\n imgClassName=\"object-cover h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n return (\n <ProductBundleSummary\n key={key}\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )\n }\n if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n return (\n <ProductExchangeSummary\n key={key}\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\n )\n }\n return null\n })}\n </div>\n {(initialRecommendBuyProducts?.bundle ||\n initialRecommendBuyProducts?.gift ||\n initialRecommendBuyProducts?.exchange) && (\n <div className=\"laptop-md:mt-8 mt-6\">\n <Text className=\"laptop-md:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"laptop-md:gap-4 mt-4 flex flex-col gap-6\">\n {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: parseFloat(finalPrice.toFixed(2)), currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <CartActionButtons\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart}\n buyNowText={copyWriting?.shopNow}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n addToCartClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n buyNowClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n />\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n useBizProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n let exchangeVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleListItem,\n canOperate,\n status,\n}: {\n bundleOperation: (bundle?: BundleListItem) => void\n bundleListItem?: BundleListItem\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, setCheckedBundle } = useBizProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-1\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: bundleVariant?.price || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n )}\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedBundle?.(status ? undefined : bundleListItem)\n bundleOperation?.(bundleListItem)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"laptop-md:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductExchangeSummary = ({\n exchangeOperation,\n exchange,\n canOperate,\n status,\n}: {\n exchangeOperation: (exchange?: ProductVariant) => void\n exchange?: ProductVariant & { finalPrice?: ProductPrice }\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={exchange?.product?.title}\n />\n <Text className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_useComponentData", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "import_CartActionButtons", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "image_1920", "image_1440", "image_1024", "image_768", "image_390", "key", "ProductGiftSummary", "gift", "prev", "t", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "CartActionButtons", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase"]
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useComponentData } from '../../../hooks/useComponentData.js'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport type { BundleListItem, ProductVariant, ProductPrice, ProductOption } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nconst ProductSummary = () => {\n const { locale = 'us', copyWriting, trackingData } = useAiuiContext()\n const {\n product,\n variant,\n finalPrice,\n comparePrice,\n coupon,\n selectedOptions,\n selectedVariants,\n totalSavings,\n onAddToCart,\n onBuyNow,\n savingDetail,\n checkedBundle,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n setSavingDetail,\n addToCartLoading,\n buyNowLoading,\n profile,\n addOrder,\n setAddOrder,\n } = useBizProductContext()\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const productSummaryData = useComponentData('ProductSummary') ?? {}\n\n const [currentProductVariant] = selectedVariants\n\n const summaryFinalPrice = useMemo(() => {\n const currentBundleVariant = checkedBundle?.variants.find(v => v.variant.sku === currentProductVariant?.sku)\n const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n .toNumber()\n let currentProductPrice = new Decimal(currentProductVariant?.price?.amount || 0)\n if (profile?.email) {\n currentProductPrice = currentProductPrice.minus(savingDetail?.member || 0)\n }\n const finalPrice = currentProductPrice.minus(savingDetail?.coupon).minus(currentBundlePrice).toNumber()\n return parseFloat(finalPrice.toFixed(2))\n }, [currentProductVariant, checkedBundle, profile, savingDetail?.member, savingDetail?.coupon])\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n\n useEffect(() => {\n setInitialRecommendBuyProducts({\n bundle: joinedRecommendBuyProducts.bundle?.value ? undefined : bundleVariant,\n gift: joinedRecommendBuyProducts.gift?.value ? undefined : giftVariant,\n exchange: joinedRecommendBuyProducts.exchange?.value ? undefined : exchangeVariant,\n })\n }, [bundleVariant, giftVariant, exchangeVariant, joinedRecommendBuyProducts])\n\n // \u6839\u636E\u6DFB\u52A0\u987A\u5E8F\u751F\u6210\u5DF2\u6DFB\u52A0\u4EA7\u54C1\u7684\u5217\u8868\n const orderedJoinedProducts = useMemo(() => {\n const result: Array<{ type: 'bundle' | 'gift' | 'exchange'; key: string }> = []\n\n // \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6DFB\u52A0\n if (addOrder) {\n addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n }\n\n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n const productOptionsText = useMemo(() => {\n const quantity = selectedOptions?.quantity || ''\n const color = selectedOptions?.color || selectedOptions?.colour || selectedOptions?.couleur || ''\n return `${quantity && color ? `${quantity} | ${color}` : quantity || color}`\n }, [selectedOptions?.quantity, selectedOptions?.color, selectedOptions?.colour, selectedOptions?.couleur])\n\n const variantImage = useMemo(() => {\n const { image_1920, image_1440, image_1024, image_768, image_390 } = productSummaryData?.thumbnail || {}\n const responsiveSource = productSummaryData?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return responsiveSource || variant.image?.url\n }, [productSummaryData?.thumbnail, variant.image?.url])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 laptop-md:px-0 laptop-md:mt-[96px] lg-desktop:mt-[128px] mt-16\">\n <div className=\"laptop:rounded-2xl bg-[#F5F5F7]\">\n <Grid className=\"tablet:p-8 tablet:!pb-0 px-4 pt-6\">\n <GridItem className=\"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4\">\n <Heading\n className=\"lg-desktop:text-[48px] laptop:text-[32px] laptop-md:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]\"\n html={productSummaryData?.readyWant?.replace?.('{title}', product?.title)}\n />\n <div className=\"\">\n <Picture\n source={variantImage}\n className=\"lg-desktop:aspect-[644/320] laptop-md:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]\"\n imgClassName=\"object-cover h-full\"\n />\n </div>\n </GridItem>\n <GridItem className=\"tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 col-span-12 mt-8 flex flex-col justify-between gap-6 pb-6\">\n <div>\n <div className=\"flex flex-col gap-4\">\n <ExposureDetector\n exposureKey=\"listing_selector\"\n onExposure={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_impression',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n component_type: 'image',\n component_name: 'listing_selector',\n position: 1,\n },\n })\n }}\n >\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={product.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={productOptionsText}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: summaryFinalPrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {showComparePrice && summaryFinalPrice < variant?.price?.amount && (\n <Text\n className=\"laptop-md:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n </div>\n </div>\n </ExposureDetector>\n {/* \u6309\u7167\u6DFB\u52A0\u987A\u5E8F\u6E32\u67D3\u5DF2\u6DFB\u52A0\u7684\u4EA7\u54C1 */}\n {orderedJoinedProducts.map(({ type, key }) => {\n if (type === 'gift' && joinedRecommendBuyProducts?.gift?.value) {\n return (\n <ProductGiftSummary\n key={key}\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )\n }\n if (type === 'bundle' && joinedRecommendBuyProducts?.bundle?.value) {\n return (\n <ProductBundleSummary\n key={key}\n bundleOperation={bundle => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'bundle'))\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )\n }\n if (type === 'exchange' && joinedRecommendBuyProducts?.exchange?.value) {\n return (\n <ProductExchangeSummary\n key={key}\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\n )\n }\n return null\n })}\n </div>\n {(initialRecommendBuyProducts?.bundle ||\n initialRecommendBuyProducts?.gift ||\n initialRecommendBuyProducts?.exchange) && (\n <div className=\"laptop-md:mt-8 mt-6\">\n <Text className=\"laptop-md:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"laptop-md:gap-4 mt-4 flex flex-col gap-6\">\n {initialRecommendBuyProducts?.exchange && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'exchange'])\n }}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n status={!initialRecommendBuyProducts?.exchange}\n exchange={initialRecommendBuyProducts?.exchange}\n />\n )}\n {initialRecommendBuyProducts?.bundle && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'bundle'])\n }}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n status={!initialRecommendBuyProducts?.bundle}\n bundleListItem={initialRecommendBuyProducts?.bundle}\n />\n )}\n {initialRecommendBuyProducts?.gift && (\n <ProductGiftSummary\n giftOperation={gift => {\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n setAddOrder?.(prev => [...prev, 'gift'])\n }}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n status={!initialRecommendBuyProducts?.gift}\n gift={initialRecommendBuyProducts?.gift}\n />\n )}\n </div>\n </div>\n )}\n </div>\n <div className=\"text-right\">\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: parseFloat(finalPrice.toFixed(2)), currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {showComparePrice && totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl laptop-md:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"mt-4 flex justify-end gap-3\">\n <CartActionButtons\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart}\n buyNowText={copyWriting?.shopNow}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n addToCartClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n buyNowClassName=\"tablet:w-auto laptop:w-1/2 laptop-md:w-auto w-1/2\"\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n />\n </div>\n </div>\n </GridItem>\n </Grid>\n </div>\n </div>\n )\n}\n\nconst useRecommendBuyProducts = () => {\n const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n useBizProductContext()\n let bundleVariant = undefined\n let giftVariant = undefined\n let exchangeVariant = undefined\n const { bundleList } = bundle || {}\n\n const { giftList = [] } = freeGift || {}\n const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n const availableBundleList =\n bundleList?.filter(bundle =>\n bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n ) || []\n\n const [firstAvailableBundle] = availableBundleList\n bundleVariant = checkedBundle || firstAvailableBundle\n\n const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale) ?? []\n giftVariant = checkedGift || firstAvailableGift\n\n const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale) ?? []\n exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n bundleOperation,\n bundleListItem,\n canOperate,\n status,\n}: {\n bundleOperation: (bundle?: BundleListItem) => void\n bundleListItem?: BundleListItem\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { variant, setCheckedBundle } = useBizProductContext()\n const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n return (\n <div className=\"\">\n {bundleVariants?.map(bundleVariant => {\n return (\n <div className=\"flex items-center justify-between gap-4\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-1\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: bundleVariant?.price || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n {bundleVariant.price < bundleVariant.variant.price.amount && (\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: bundleVariant.variant.price.amount || 0,\n locale,\n currencyCode: bundleVariant.variant?.price?.currencyCode || '',\n })}\n />\n )}\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedBundle?.(status ? undefined : bundleListItem)\n bundleOperation?.(bundleListItem)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n )\n}\n\nconst ProductGiftSummary = ({\n giftOperation,\n gift,\n status,\n canOperate,\n}: {\n giftOperation: (gift?: ProductVariant) => void\n gift?: ProductVariant\n status?: boolean\n canOperate?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel } = freeGift || {}\n const { options } = gift || {}\n\n const giftOptionsText = useMemo(() => {\n const giftColorOption = (options?.find(\n option => option.name === 'color' || option.name === 'colour' || option.name === 'couleur'\n ) || {}) as ProductOption\n const giftQuantityOption = options?.find(option => option.name === 'quantity') || ({} as ProductOption)\n const giftColorOptionText = giftColorOption ? giftColorOption.values?.[0]?.label : ''\n const giftQuantityOptionText = giftQuantityOption ? giftQuantityOption.values?.[0]?.label : ''\n return `${giftColorOptionText && giftQuantityOptionText ? giftQuantityOptionText + ' | ' + giftColorOptionText : giftQuantityOptionText || giftColorOptionText} | ${freeLabel}`\n }, [freeLabel, options])\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={gift?.product?.title}\n />\n <Text\n className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\"\n html={giftOptionsText}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"laptop-md:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: gift.price.amount,\n locale,\n currencyCode: gift.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedGift?.(status ? undefined : gift)\n giftOperation(gift)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst ProductExchangeSummary = ({\n exchangeOperation,\n exchange,\n canOperate,\n status,\n}: {\n exchangeOperation: (exchange?: ProductVariant) => void\n exchange?: ProductVariant & { finalPrice?: ProductPrice }\n canOperate?: boolean\n status?: boolean\n}) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between gap-6\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"laptop:size-12 lg-desktop:size-16 border-1 size-10 shrink-0 rounded-lg border-[#E4E5E6] bg-[#EAEAEC] object-cover p-2\"\n />\n <div className=\"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]\">\n <Text\n className=\"laptop-md:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold\"\n html={exchange?.product?.title}\n />\n <Text className=\"laptop:text-[14px] laptop-md:text-[18px] text-[12px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end justify-center gap-2\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"laptop-md:text-2xl text-base font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"laptop-md:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_useComponentData", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "import_CartActionButtons", "ProductSummary", "locale", "copyWriting", "trackingData", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "showComparePrice", "productSummaryData", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "image_1920", "image_1440", "image_1024", "image_768", "image_390", "key", "ProductGiftSummary", "gift", "prev", "t", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "CartActionButtons", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var E=Object.create;var s=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var E=Object.create;var s=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var a in t)s(e,a,{get:t[a],enumerable:!0})},N=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of O(t))!j.call(e,o)&&o!==a&&s(e,o,{get:()=>t[o],enumerable:!(i=R(t,o))||i.enumerable});return e};var z=(e,t,a)=>(a=e!=null?E(_(e)):{},N(t||!e||!e.__esModule?s(a,"default",{value:e,enumerable:!0}):a,e)),U=e=>N(s({},"__esModule",{value:!0}),e);var G={};q(G,{default:()=>$});module.exports=U(G);var n=require("react/jsx-runtime"),r=require("../../../../../components/index.js"),h=require("../../../../AiuiProvider/index.js"),w=require("../../../BizProductProvider.js"),x=require("react"),l=require("../../../utils/index.js"),b=require("../../../utils/textFormat.js"),S=require("../../../hooks/useBenefits.js"),P=z(require("../../CartActionButtons/index.js"));const W=({totalSavingsSlot:e}={})=>{const{copyWriting:t,locale:a="us",trackingData:i}=(0,h.useAiuiContext)(),{variant:o,finalPrice:T,totalSavings:d,isLogin:p,comparePrice:H,onAddToCart:k,onBuyNow:A,savingDetail:u,addToCartLoading:B,buyNowLoading:F,discount:I,memberFunctionResult:f}=(0,w.useBizProductContext)(),M=(0,S.useBenefits)({variant:o}),{commonCoupon:c,memberDiscount:m}=M,L=i?.showComparePrice??!0,D=(0,x.useMemo)(()=>(0,b.replaceTemplate)(t?.totalSavings||"",{amount:(0,l.formatPrice)({amount:d,currencyCode:o.price.currencyCode,locale:a})}),[t?.totalSavings,d,o.price.currencyCode,a]),g=(0,x.useMemo)(()=>{if(!t?.unlockedSaving)return;const C=c?.enable?Number(c?.config?.fixed_value||0):0,v=m?.enable?m.config?.amount??0:0,y=Math.round((f?.withoutCouponMaxMemberTotalSave?Math.max(v,C):v+C)*100)/100;if(!(y<=0))return(0,b.replaceTemplate)(t.unlockedSaving,{amount:(0,l.formatPrice)({amount:y,currencyCode:o.price.currencyCode,locale:a})})},[t?.unlockedSaving,c?.enable,c?.config?.fixed_value,m?.enable,m?.config?.amount,f,o.price.currencyCode,a]);return(0,n.jsxs)(r.Container,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[o.availableForSale?(0,n.jsxs)("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[(0,n.jsxs)("div",{className:"flex items-center gap-1",children:[(0,n.jsx)(r.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:(0,l.formatPrice)({amount:parseFloat(T.toFixed(2)),currencyCode:o.price.currencyCode,locale:a})}),L&&(d>0||u?.member>0&&p)&&(0,n.jsx)(r.Text,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:(0,l.formatPrice)({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:a})}),u?.member>0&&p&&(0,n.jsx)(r.Text,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:t?.memberPrice||"Member Price"})]}),e||(d>0||u?.member>0&&p?(0,n.jsx)(r.Text,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${D}`}):g?(0,n.jsx)(r.Text,{className:"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:g}):null)]}):(0,n.jsx)(r.Text,{className:"text-[20px] font-bold text-[#999999]",html:t?.soldOut??"Sold Out"}),(0,n.jsx)("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:(0,n.jsx)(P.default,{availableForSale:o.availableForSale,addToCartText:t?.addToCart??"Add to Cart",buyNowText:t?.buyNow??"Buy Now",addToCartLoading:B,buyNowLoading:F,onAddToCart:k,onBuyNow:A})})]})};var $=W;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { useBenefits } from '../../../hooks/useBenefits.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n discount,\n memberFunctionResult,\n } = useBizProductContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "import_useBenefits", "import_CartActionButtons", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "discount", "memberFunctionResult", "benefits", "commonCoupon", "memberDiscount", "totalSavingsText", "unlockedSavingText", "couponSaving", "memberSaving", "totalUnlocked", "CartActionButtons"]
|
|
4
|
+
"sourcesContent": ["import { Text, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\nimport { useBenefits } from '../../../hooks/useBenefits.js'\nimport CartActionButtons from '../../CartActionButtons/index.js'\n\nexport interface ProductActionsProps {\n /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n const { copyWriting, locale = 'us', trackingData } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n addToCartLoading,\n buyNowLoading,\n discount,\n memberFunctionResult,\n } = useBizProductContext()\n const benefits = useBenefits({ variant })\n const { commonCoupon, memberDiscount } = benefits\n\n /** \u662F\u5426\u663E\u793A\u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09\uFF0C\u9ED8\u8BA4\u663E\u793A */\n const showComparePrice = trackingData?.showComparePrice ?? true\n\n const totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n const unlockedSavingText = useMemo(() => {\n if (!copyWriting?.unlockedSaving) return undefined\n\n const couponSaving = commonCoupon?.enable ? Number(commonCoupon?.config?.fixed_value || 0) : 0\n const memberSaving = memberDiscount?.enable ? (memberDiscount.config?.amount ?? 0) : 0\n\n // \u4E0D\u53EF\u53E0\u52A0\u65F6\u53D6\u4F1A\u5458\u4EF7\u4E0E code \u6298\u6263\u7684\u6700\u5927\u503C\uFF0C\u53EF\u53E0\u52A0\u65F6\u53D6\u4E8C\u8005\u4E4B\u548C\n const totalUnlocked = Math.round((\n memberFunctionResult?.withoutCouponMaxMemberTotalSave\n ? Math.max(memberSaving, couponSaving)\n : memberSaving + couponSaving\n ) * 100) / 100\n\n if (totalUnlocked <= 0) return undefined\n\n return replaceTemplate(copyWriting.unlockedSaving, {\n amount: formatPrice({\n amount: totalUnlocked,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })\n }, [\n copyWriting?.unlockedSaving,\n commonCoupon?.enable,\n commonCoupon?.config?.fixed_value,\n memberDiscount?.enable,\n memberDiscount?.config?.amount,\n memberFunctionResult,\n variant.price.currencyCode,\n locale,\n ])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n >\n {variant.availableForSale ? (\n <div className=\"laptop-md:items-end flex flex-col justify-between\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n html={formatPrice({\n amount: parseFloat(finalPrice.toFixed(2)),\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {showComparePrice && (totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n html={formatPrice({\n amount: variant?.price?.amount,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {totalSavingsSlot ||\n (totalSavings > 0 || (savingDetail?.member > 0 && isLogin) ? (\n <Text\n className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={`${totalSavingsText}`}\n />\n ) : unlockedSavingText ? (\n <Text\n className=\"text-info-quaternary tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n html={unlockedSavingText}\n />\n ) : null)}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n <CartActionButtons\n availableForSale={variant.availableForSale}\n addToCartText={copyWriting?.addToCart ?? 'Add to Cart'}\n buyNowText={copyWriting?.buyNow ?? 'Buy Now'}\n addToCartLoading={addToCartLoading}\n buyNowLoading={buyNowLoading}\n onAddToCart={onAddToCart}\n onBuyNow={onBuyNow}\n />\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "import_useBenefits", "import_CartActionButtons", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "trackingData", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "discount", "memberFunctionResult", "benefits", "commonCoupon", "memberDiscount", "showComparePrice", "totalSavingsText", "unlockedSavingText", "couponSaving", "memberSaving", "totalUnlocked", "CartActionButtons"]
|
|
7
7
|
}
|