@anker-in/headless-ui 1.1.9-alpha.1764216229618 → 1.1.9-alpha.1764231216581
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Listing/BizProductProvider.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/BizProductProvider.js.map +1 -1
- 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/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/BizProductProvider.d.ts +1 -1
- package/dist/esm/biz-components/Listing/BizProductProvider.js.map +1 -1
- 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/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -114,7 +114,7 @@ export interface ProductContextType {
|
|
|
114
114
|
compareData?: CompareData['data'];
|
|
115
115
|
onAddToCart?: () => void;
|
|
116
116
|
onBuyNow?: () => void;
|
|
117
|
-
creditsRedemption
|
|
117
|
+
creditsRedemption?: CreditsRedemption;
|
|
118
118
|
memberFunctionResult?: FunctionMemberPriceResult;
|
|
119
119
|
openModal: ({ title, content, domContent }: ModalData) => void;
|
|
120
120
|
openSignInPopup?: () => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Listing/BizProductProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, {\n createContext,\n useCallback,\n useContext,\n type Dispatch,\n type SetStateAction,\n type PropsWithChildren,\n useState,\n useEffect,\n} from 'react'\nimport type {\n Product,\n ProductPrice,\n ProductVariant,\n VariantCoupon,\n Options,\n FreeGift,\n BundleListItem,\n Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n id?: number\n name?: string\n code?: string\n}\n\nexport type UserProfile = {\n user_id: string\n email: string\n nick_name?: string\n full_name?: string\n first_name?: string\n last_name?: string\n dob?: string\n gender?: string\n phone_number?: string\n phone_account?: string\n country?: Country\n is_subscribe?: boolean\n avatar?: string\n can_change_password?: boolean\n invitation_code?: string\n phone_carrier?: string\n dob_programmed?: boolean\n activated?: boolean\n registed_at?: number\n activated_at?: number\n token?: string\n}\n\nexport type SavingDetail = {\n coupon: number\n bundle: number\n member: number\n freeGift: number\n compare: number\n exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n hasMemberPrice: boolean\n originalPrice: number\n withCouponMemberTotalSave: number\n withoutCouponMaxMemberTotalSave?: number\n labels: {\n key: string\n value: string\n desc: string\n }[]\n}\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n bundle?: {\n value?: BundleListItem\n canOperate?: boolean\n }\n gift?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n exchange?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n}\n\nexport type CreditsRedemption = {\n amount: number\n availablePoints: number\n usedPoints: number\n skuDetails?: {\n sku: string\n is_eligible: boolean\n }[]\n}\n\nexport interface ProductContextType {\n isLogin?: boolean\n isMobile?: boolean\n isDesktop?: boolean\n product: Product\n profile?: UserProfile\n variant: ProductVariant\n selectedVariants: Array<variantWithFinalPrice>\n renderRating?: React.ReactNode\n coupon?: VariantCoupon\n savingDetail: SavingDetail\n setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n finalPrice: number\n comparePrice: number\n totalSavings: number\n selectedOptions: Options\n setSelectedOptions: Dispatch<SetStateAction<Options>>\n freeGift?: FreeGift\n checkedGift?: ProductVariant\n setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n exchangePurchase?: FreeGift\n checkedExchangePurchase?: ProductVariant\n setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n checkedBundle?: BundleListItem\n setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n checkedCareBundle?: ProductVariant\n setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n bundle?: Bundle\n compareData?: CompareData['data']\n onAddToCart?: () => void\n onBuyNow?: () => void\n creditsRedemption
|
|
4
|
+
"sourcesContent": ["import React, {\n createContext,\n useCallback,\n useContext,\n type Dispatch,\n type SetStateAction,\n type PropsWithChildren,\n useState,\n useEffect,\n} from 'react'\nimport type {\n Product,\n ProductPrice,\n ProductVariant,\n VariantCoupon,\n Options,\n FreeGift,\n BundleListItem,\n Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n id?: number\n name?: string\n code?: string\n}\n\nexport type UserProfile = {\n user_id: string\n email: string\n nick_name?: string\n full_name?: string\n first_name?: string\n last_name?: string\n dob?: string\n gender?: string\n phone_number?: string\n phone_account?: string\n country?: Country\n is_subscribe?: boolean\n avatar?: string\n can_change_password?: boolean\n invitation_code?: string\n phone_carrier?: string\n dob_programmed?: boolean\n activated?: boolean\n registed_at?: number\n activated_at?: number\n token?: string\n}\n\nexport type SavingDetail = {\n coupon: number\n bundle: number\n member: number\n freeGift: number\n compare: number\n exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n hasMemberPrice: boolean\n originalPrice: number\n withCouponMemberTotalSave: number\n withoutCouponMaxMemberTotalSave?: number\n labels: {\n key: string\n value: string\n desc: string\n }[]\n}\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n bundle?: {\n value?: BundleListItem\n canOperate?: boolean\n }\n gift?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n exchange?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n}\n\nexport type CreditsRedemption = {\n amount: number\n availablePoints: number\n usedPoints: number\n skuDetails?: {\n sku: string\n is_eligible: boolean\n }[]\n}\n\nexport interface ProductContextType {\n isLogin?: boolean\n isMobile?: boolean\n isDesktop?: boolean\n product: Product\n profile?: UserProfile\n variant: ProductVariant\n selectedVariants: Array<variantWithFinalPrice>\n renderRating?: React.ReactNode\n coupon?: VariantCoupon\n savingDetail: SavingDetail\n setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n finalPrice: number\n comparePrice: number\n totalSavings: number\n selectedOptions: Options\n setSelectedOptions: Dispatch<SetStateAction<Options>>\n freeGift?: FreeGift\n checkedGift?: ProductVariant\n setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n exchangePurchase?: FreeGift\n checkedExchangePurchase?: ProductVariant\n setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n checkedBundle?: BundleListItem\n setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n checkedCareBundle?: ProductVariant\n setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n bundle?: Bundle\n compareData?: CompareData['data']\n onAddToCart?: () => void\n onBuyNow?: () => void\n creditsRedemption?: CreditsRedemption\n memberFunctionResult?: FunctionMemberPriceResult\n openModal: ({ title, content, domContent }: ModalData) => void\n openSignInPopup?: () => void\n openAuthCodePopup?: () => void\n openSignUpPopup?: () => void\n renderInstallments?: React.ReactNode\n onUseCouponChange?: (couponSaving: number) => void\n onUseMemberDiscountChange?: (memberSaving: number) => void\n discount?: DiscountData\n buyNowLoading?: boolean\n addToCartLoading?: boolean\n addOrder?: Array<'bundle' | 'gift' | 'exchange'>\n setAddOrder?: Dispatch<SetStateAction<Array<'bundle' | 'gift' | 'exchange'>>>\n}\n\n// const initialState: ProductContextType = {\n// isLogin: false,\n// isMobile: false,\n// product: {} as Product,\n// variant: {} as ProductVariant,\n// savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n// finalPrice: 0,\n// comparePrice: 0,\n// totalSavings: 0,\n// renderRating: null,\n// selectedOptions: {} as Options,\n// setSelectedOptions: () => {},\n// checkedBundle: undefined,\n// checkedGift: undefined,\n// setCheckedBundle: () => {},\n// setCheckedGift: () => {},\n// checkedCareBundle: undefined,\n// setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n const context = useContext(BizProductContext)\n if (!context) {\n throw new Error('useProductContext must be used in <ProductProvider>')\n }\n return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n product,\n isLogin,\n profile,\n isMobile,\n isDesktop,\n children,\n renderRating,\n freeGift,\n exchangePurchase,\n bundle,\n checkedBundle,\n checkedGift,\n setCheckedBundle,\n setCheckedGift,\n checkedExchangePurchase,\n setCheckedExchangePurchase,\n variant,\n selectedOptions,\n setSelectedOptions,\n compareData,\n coupon,\n finalPrice,\n comparePrice,\n totalSavings,\n savingDetail,\n setSavingDetail,\n selectedVariants,\n onAddToCart,\n onBuyNow,\n creditsRedemption,\n memberFunctionResult,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n buyNowLoading,\n addToCartLoading,\n}: PropsWithChildren<\n Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts' | 'addOrder' | 'setAddOrder'>\n>) => {\n const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<JoinedRecommendBuyProducts>({})\n const [addOrder, setAddOrder] = useState<Array<'bundle' | 'gift' | 'exchange'>>([])\n\n useEffect(() => {\n if (variant?.id) {\n setJoinedRecommendBuyProducts({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n gift: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setAddOrder([])\n }\n }, [variant?.id])\n\n return (\n <BizProductContext.Provider\n value={{\n product,\n variant,\n isMobile,\n isDesktop,\n isLogin,\n profile,\n coupon,\n renderRating,\n finalPrice,\n comparePrice,\n savingDetail,\n setSavingDetail,\n totalSavings,\n selectedOptions,\n setSelectedOptions,\n freeGift,\n exchangePurchase,\n checkedGift,\n setCheckedGift,\n checkedBundle,\n setCheckedBundle,\n bundle,\n compareData,\n selectedVariants,\n onAddToCart,\n onBuyNow,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n checkedExchangePurchase,\n setCheckedExchangePurchase,\n creditsRedemption,\n memberFunctionResult,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n buyNowLoading,\n addToCartLoading,\n addOrder,\n setAddOrder,\n }}\n >\n {children}\n </BizProductContext.Provider>\n )\n}\n\nexport default ProductProvider\n"],
|
|
5
5
|
"mappings": "0aAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,uBAAAE,EAAA,YAAAC,GAAA,yBAAAC,KAAA,eAAAC,GAAAL,IAgQI,IAAAM,EAAA,6BAhQJC,EASO,iBAwKA,MAAML,KAAoB,iBAAkC,CAAC,CAAuB,EAE9EE,GAAuB,IAAM,CAExC,GAAI,IADY,cAAWF,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,SAAO,cAAWA,CAAiB,CACrC,EAEMM,GAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,IAEM,CACJ,KAAM,CAACC,EAA4BC,CAA6B,KAAI,YAAqC,CAAC,CAAC,EACrG,CAACC,EAAUC,CAAW,KAAI,YAAgD,CAAC,CAAC,EAElF,sBAAU,IAAM,CACV5B,GAAS,KACX0B,EAA8B,CAC5B,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDE,EAAY,CAAC,CAAC,EAElB,EAAG,CAAC5B,GAAS,EAAE,CAAC,KAGd,OAACvB,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAO,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAa,EACA,8BAAAC,EACA,wBAAA5B,EACA,2BAAAC,EACA,kBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,SAAAG,EACA,YAAAC,CACF,EAEC,SAAAvC,EACH,CAEJ,EAEA,IAAOX,GAAQK",
|
|
6
6
|
"names": ["BizProductProvider_exports", "__export", "BizProductContext", "BizProductProvider_default", "useBizProductContext", "__toCommonJS", "import_jsx_runtime", "import_react", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemption", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderInstallments", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "buyNowLoading", "addToCartLoading", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "addOrder", "setAddOrder"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ee=Object.create;var A=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var re=(o,t)=>{for(var l in t)A(o,l,{get:t[l],enumerable:!0})},W=(o,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of ae(t))!oe.call(o,u)&&u!==l&&A(o,u,{get:()=>t[u],enumerable:!(r=te(t,u))||r.enumerable});return o};var le=(o,t,l)=>(l=o!=null?ee(ne(o)):{},W(t||!o||!o.__esModule?A(l,"default",{value:o,enumerable:!0}):l,o)),ie=o=>W(A({},"__esModule",{value:!0}),o);var ue={};re(ue,{default:()=>de});module.exports=ie(ue);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),v=require("react"),y=require("../../../utils/index.js"),G=require("../../../../AiuiProvider/index.js"),L=le(require("decimal.js")),J=require("../../../utils/textFormat.js"),Q=require("../../../../../shared/Styles.js"),H=require("../../../../../components/index.js"),U=require("../../../../../shared/track.js");const ce=()=>{const{locale:o="us",copyWriting:t}=(0,G.useAiuiContext)(),{product:l,variant:r,finalPrice:u,comparePrice:x,coupon:k,selectedOptions:p,selectedVariants:b,totalSavings:c,onAddToCart:D,onBuyNow:E,savingDetail:h,checkedBundle:N,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:m,setSavingDetail:F,addToCartLoading:P,buyNowLoading:j,profile:S,addOrder:I,setAddOrder:w}=(0,B.useBizProductContext)(),T=(0,v.useMemo)(()=>l?.payload?.components?.find(i=>i.componentKey==="ProductSummary")?.data||{},[l?.payload]),[z]=b,V=(0,v.useMemo)(()=>{const i=N?.variants.find(C=>C.variant.sku===z?.sku),s=new L.default(z?.price?.amount||0).minus(i?.price||z?.price?.amount).toNumber();let f=new L.default(z?.price?.amount||0);S?.email&&(f=f.minus(h?.member||0));const g=f.minus(h?.coupon).minus(s).toNumber();return Math.floor(g*100)/100},[z,N,S,h?.member,h?.coupon]),{bundleVariant:_,giftVariant:$,exchangeVariant:R}=se()||{},[d,O]=(0,v.useState)();(0,v.useEffect)(()=>{O({bundle:n.bundle?.value?void 0:_,gift:n.gift?.value?void 0:$,exchange:n.exchange?.value?void 0:R})},[_,$,R,n]);const X=(0,v.useMemo)(()=>{const i=[];return I&&I.forEach((s,f)=>{n[s]?.value&&i.push({type:s,key:`${s}-${f}`})}),i},[I,n]),Y=(0,v.useMemo)(()=>{const i=p?.quantity||"",s=p?.color||p?.colour||p?.couleur||"";return`${i&&s?`${i} | ${s}`:i||s}`},[p?.quantity,p?.color,p?.colour,p?.couleur]),Z=(0,v.useMemo)(()=>(r?.payload?.components?.find(g=>g.componentKey==="ProductGallery")?.data||[])?.find(g=>g?.galleries==="productList")?.images?.[0]?.image_1920||r.image?.url||r.image?.url,[r.image?.url,r?.payload?.components]);return r.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:T?.readyWant?.replace?.("{title}",l?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:Z,className:"lg-desktop:h-[320px] desktop:h-[272px] laptop:h-[191px] tablet:h-[380px] aspect-1 mx-auto h-[192px]",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)(H.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,U.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.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:r.image?.url||l?.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:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:l.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:Y})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,y.formatPrice)({amount:V,currencyCode:r.price.currencyCode,locale:o})}),V<r?.price?.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,y.formatPrice)({amount:r?.price?.amount,currencyCode:r.price.currencyCode,locale:o})})]})]})}),X.map(({type:i,key:s})=>i==="gift"&&n?.gift?.value?(0,e.jsx)(K,{giftOperation:f=>{m?.({...n,gift:{value:void 0,canOperate:!0}}),O?.({...d,gift:f}),w?.(g=>g.filter(C=>C!=="gift"))},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate},s):i==="bundle"&&n?.bundle?.value?(0,e.jsx)(q,{bundleOperation:f=>{m?.({...n,bundle:{value:void 0,canOperate:!0}}),O?.({...d,bundle:f}),w?.(g=>g.filter(C=>C!=="bundle"))},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate},s):i==="exchange"&&n?.exchange?.value?(0,e.jsx)(M,{exchangeOperation:f=>{m?.({...n,exchange:{value:void 0,canOperate:!0}}),O?.({...d,exchange:f}),w?.(g=>g.filter(C=>C!=="exchange"))},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value},s):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"desktop:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[18px] text-sm font-bold",html:T?.recommendBuy}),(0,e.jsxs)("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(M,{exchangeOperation:i=>{m?.({...n,exchange:{value:i,canOperate:!0}}),O?.({...d,exchange:void 0}),w?.(s=>[...s,"exchange"])},canOperate:n?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(q,{bundleOperation:i=>{F?.({...h,exchangePurchase:0}),m?.({...n,bundle:{value:i,canOperate:!0}}),O?.({...d,bundle:void 0}),w?.(s=>[...s,"bundle"])},canOperate:n?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(K,{giftOperation:i=>{m?.({...n,gift:{value:i,canOperate:!0}}),O?.({...d,gift:void 0}),w?.(s=>[...s,"gift"])},canOperate:n?.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 desktop:text-2xl text-right font-bold",html:`${(0,J.replaceTemplate)(t?.totalPrice||"",{amount:(0,y.formatPrice)({amount:Math.floor(u*100)/100,currencyCode:r.price.currencyCode,locale:o})})}`}),c>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,y.formatPrice)({amount:x,currencyCode:r.price.currencyCode,locale:o})}),(0,e.jsxs)("div",{className:"mt-4 flex justify-end gap-3",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:P,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:j,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:t?.shopNow})]})]})]})]})})}):null},se=()=>{const{bundle:o,variant:t,checkedBundle:l,freeGift:r,checkedGift:u,exchangePurchase:x,checkedExchangePurchase:k}=(0,B.useBizProductContext)();let p,b,c;const{bundleList:D}=o||{},{giftList:E=[]}=r||{},{giftList:h=[]}=x||{},N=D?.filter(P=>P.variants.slice(1,P.variants.length).every(j=>j.variant.availableForSale))||[],[n]=N;p=l||n;const[m]=E?.filter(P=>P.availableForSale)??[];b=u||m;const[F]=h?.filter(P=>P.availableForSale)??[];return c=k||F,{bundleVariant:p,giftVariant:b,exchangeVariant:c}},q=({bundleOperation:o,bundleListItem:t,canOperate:l,status:r})=>{const{locale:u="us",copyWriting:x}=(0,G.useAiuiContext)(),{variant:k,setCheckedBundle:p}=(0,B.useBizProductContext)(),b=t?.variants.filter(c=>c.variant.sku!==k.sku);return(0,e.jsx)("div",{className:"",children:b?.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:"desktop: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:"desktop:text-2xl text-base font-bold",html:(0,y.formatPrice)({amount:c?.price||0,locale:u,currencyCode:c.variant?.price?.currencyCode||""})}),c.price<c.variant.price.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,y.formatPrice)({amount:c.variant.price.amount||0,locale:u,currencyCode:c.variant?.price?.currencyCode||""})})]}),l&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(r?void 0:t),o?.(t)},className:"size-auto shrink-0 underline",children:r?x?.remove:x?.add})]})]},c.variant.id))})},K=({giftOperation:o,gift:t,status:l,canOperate:r})=>{const{locale:u="us",copyWriting:x}=(0,G.useAiuiContext)(),{freeGift:k,setCheckedGift:p}=(0,B.useBizProductContext)(),{freeLabel:b}=k||{},{options:c}=t||{},D=(0,v.useMemo)(()=>{const E=c?.find(m=>m.name==="color"||m.name==="colour"||m.name==="couleur")||{},h=c?.find(m=>m.name==="quantity")||{},N=E?E.values?.[0]?.label:"",n=h?h.values?.[0]?.label:"";return`${N&&n?n+" | "+N:n||N} | ${b}`},[b,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:"desktop: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] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),(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:"desktop:text-2xl text-base font-bold",html:b}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,y.formatPrice)({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),r&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(l?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:l?x?.remove:x?.add})]})]})},M=({exchangeOperation:o,exchange:t,canOperate:l,status:r})=>{const{locale:u="us",copyWriting:x}=(0,G.useAiuiContext)(),{setCheckedExchangePurchase:k}=(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:"desktop: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] desktop: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:"desktop:text-2xl text-base font-bold",html:(0,y.formatPrice)({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,y.formatPrice)({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),l&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{k?.(r?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:r?x?.remove:x?.add})]})]})};var de=(0,Q.withLayout)(ce);
|
|
1
|
+
"use strict";var ae=Object.create;var F=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var le=(o,t)=>{for(var r in t)F(o,r,{get:t[r],enumerable:!0})},W=(o,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of oe(t))!re.call(o,u)&&u!==r&&F(o,u,{get:()=>t[u],enumerable:!(i=ne(t,u))||i.enumerable});return o};var ce=(o,t,r)=>(r=o!=null?ae(ie(o)):{},W(t||!o||!o.__esModule?F(r,"default",{value:o,enumerable:!0}):r,o)),se=o=>W(F({},"__esModule",{value:!0}),o);var me={};le(me,{default:()=>pe});module.exports=se(me);var e=require("react/jsx-runtime"),a=require("../../../../../components/index.js"),B=require("../../../BizProductProvider.js"),g=require("react"),h=require("../../../utils/index.js"),A=require("../../../../AiuiProvider/index.js"),G=ce(require("decimal.js")),J=require("../../../utils/textFormat.js"),Q=require("../../../../../shared/Styles.js"),H=require("../../../../../components/index.js"),U=require("../../../../../shared/track.js");const de=()=>{const{locale:o="us",copyWriting:t}=(0,A.useAiuiContext)(),{product:r,variant:i,finalPrice:u,comparePrice:f,coupon:N,selectedOptions:p,selectedVariants:v,totalSavings:s,onAddToCart:D,onBuyNow:E,savingDetail:b,checkedBundle:P,joinedRecommendBuyProducts:n,setJoinedRecommendBuyProducts:m,setSavingDetail:j,addToCartLoading:O,buyNowLoading:S,profile:I,addOrder:$,setAddOrder:w}=(0,B.useBizProductContext)(),L=(0,g.useMemo)(()=>r?.payload?.components?.find(l=>l.componentKey==="ProductSummary")?.data||{},[r?.payload]),[z]=v,_=(0,g.useMemo)(()=>{const l=P?.variants.find(k=>k.variant.sku===z?.sku),c=new G.default(z?.price?.amount||0).minus(l?.price||z?.price?.amount).toNumber();let x=new G.default(z?.price?.amount||0);I?.email&&(x=x.minus(b?.member||0));const y=x.minus(b?.coupon).minus(c).toNumber();return Math.floor(y*100)/100},[z,P,I,b?.member,b?.coupon]),{bundleVariant:T,giftVariant:V,exchangeVariant:R}=ue()||{},[d,C]=(0,g.useState)();(0,g.useEffect)(()=>{C({bundle:n.bundle?.value?void 0:T,gift:n.gift?.value?void 0:V,exchange:n.exchange?.value?void 0:R})},[T,V,R,n]);const X=(0,g.useMemo)(()=>{const l=[];return $&&$.forEach((c,x)=>{n[c]?.value&&l.push({type:c,key:`${c}-${x}`})}),l},[$,n]),Y=(0,g.useMemo)(()=>{const l=p?.quantity||"",c=p?.color||p?.colour||p?.couleur||"";return`${l&&c?`${l} | ${c}`:l||c}`},[p?.quantity,p?.color,p?.colour,p?.couleur]),Z=(0,g.useMemo)(()=>{const l=i?.payload?.components?.find(te=>te.componentKey==="ProductSummary")?.data||{},{image_1920:c,image_1440:x,image_1024:y,image_768:k,image_390:ee}=l?.thumbnail||{};return(l?.thumbnail?`${c} 1920, ${x} 1440, ${y} 1024, ${k} 768, ${ee} 390`:i.image?.url)||i.image?.url},[i.image?.url,i?.payload?.components]);return i.availableForSale?(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:L?.readyWant?.replace?.("{title}",r?.title)}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:Z,className:"lg-desktop:aspect-[644/320] desktop: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)(H.ExposureDetector,{exposureKey:"listing_selector",onExposure:()=>{(0,U.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${i.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:i.image?.url||r?.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:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:r.title}),(0,e.jsx)(a.Text,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:Y})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold",html:(0,h.formatPrice)({amount:_,currencyCode:i.price.currencyCode,locale:o})}),_<i?.price?.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:(0,h.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:o})})]})]})}),X.map(({type:l,key:c})=>l==="gift"&&n?.gift?.value?(0,e.jsx)(K,{giftOperation:x=>{m?.({...n,gift:{value:void 0,canOperate:!0}}),C?.({...d,gift:x}),w?.(y=>y.filter(k=>k!=="gift"))},status:!!n?.gift,gift:n?.gift?.value,canOperate:n?.gift?.canOperate},c):l==="bundle"&&n?.bundle?.value?(0,e.jsx)(q,{bundleOperation:x=>{m?.({...n,bundle:{value:void 0,canOperate:!0}}),C?.({...d,bundle:x}),w?.(y=>y.filter(k=>k!=="bundle"))},status:!!n?.bundle,bundleListItem:n?.bundle?.value,canOperate:n?.bundle?.canOperate},c):l==="exchange"&&n?.exchange?.value?(0,e.jsx)(M,{exchangeOperation:x=>{m?.({...n,exchange:{value:void 0,canOperate:!0}}),C?.({...d,exchange:x}),w?.(y=>y.filter(k=>k!=="exchange"))},status:!!n?.exchange,canOperate:n?.exchange?.canOperate,exchange:n?.exchange?.value},c):null)]}),(d?.bundle||d?.gift||d?.exchange)&&(0,e.jsxs)("div",{className:"desktop:mt-8 mt-6",children:[(0,e.jsx)(a.Text,{className:"desktop:text-[18px] text-sm font-bold",html:L?.recommendBuy}),(0,e.jsxs)("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[d?.exchange&&(0,e.jsx)(M,{exchangeOperation:l=>{m?.({...n,exchange:{value:l,canOperate:!0}}),C?.({...d,exchange:void 0}),w?.(c=>[...c,"exchange"])},canOperate:n?.exchange?.canOperate,status:!d?.exchange,exchange:d?.exchange}),d?.bundle&&(0,e.jsx)(q,{bundleOperation:l=>{j?.({...b,exchangePurchase:0}),m?.({...n,bundle:{value:l,canOperate:!0}}),C?.({...d,bundle:void 0}),w?.(c=>[...c,"bundle"])},canOperate:n?.bundle?.canOperate,status:!d?.bundle,bundleListItem:d?.bundle}),d?.gift&&(0,e.jsx)(K,{giftOperation:l=>{m?.({...n,gift:{value:l,canOperate:!0}}),C?.({...d,gift:void 0}),w?.(c=>[...c,"gift"])},canOperate:n?.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 desktop:text-2xl text-right font-bold",html:`${(0,J.replaceTemplate)(t?.totalPrice||"",{amount:(0,h.formatPrice)({amount:Math.floor(u*100)/100,currencyCode:i.price.currencyCode,locale:o})})}`}),s>0&&(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:(0,h.formatPrice)({amount:f,currencyCode:i.price.currencyCode,locale:o})}),(0,e.jsxs)("div",{className:"mt-4 flex justify-end gap-3",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:O,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:S,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:t?.shopNow})]})]})]})]})})}):null},ue=()=>{const{bundle:o,variant:t,checkedBundle:r,freeGift:i,checkedGift:u,exchangePurchase:f,checkedExchangePurchase:N}=(0,B.useBizProductContext)();let p,v,s;const{bundleList:D}=o||{},{giftList:E=[]}=i||{},{giftList:b=[]}=f||{},P=D?.filter(O=>O.variants.slice(1,O.variants.length).every(S=>S.variant.availableForSale))||[],[n]=P;p=r||n;const[m]=E?.filter(O=>O.availableForSale)??[];v=u||m;const[j]=b?.filter(O=>O.availableForSale)??[];return s=N||j,{bundleVariant:p,giftVariant:v,exchangeVariant:s}},q=({bundleOperation:o,bundleListItem:t,canOperate:r,status:i})=>{const{locale:u="us",copyWriting:f}=(0,A.useAiuiContext)(),{variant:N,setCheckedBundle:p}=(0,B.useBizProductContext)(),v=t?.variants.filter(s=>s.variant.sku!==N.sku);return(0,e.jsx)("div",{className:"",children:v?.map(s=>(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:s?.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:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:s.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:"desktop:text-2xl text-base font-bold",html:(0,h.formatPrice)({amount:s?.price||0,locale:u,currencyCode:s.variant?.price?.currencyCode||""})}),s.price<s.variant.price.amount&&(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,h.formatPrice)({amount:s.variant.price.amount||0,locale:u,currencyCode:s.variant?.price?.currencyCode||""})})]}),r&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),o?.(t)},className:"size-auto shrink-0 underline",children:i?f?.remove:f?.add})]})]},s.variant.id))})},K=({giftOperation:o,gift:t,status:r,canOperate:i})=>{const{locale:u="us",copyWriting:f}=(0,A.useAiuiContext)(),{freeGift:N,setCheckedGift:p}=(0,B.useBizProductContext)(),{freeLabel:v}=N||{},{options:s}=t||{},D=(0,g.useMemo)(()=>{const E=s?.find(m=>m.name==="color"||m.name==="colour"||m.name==="couleur")||{},b=s?.find(m=>m.name==="quantity")||{},P=E?E.values?.[0]?.label:"",n=b?b.values?.[0]?.label:"";return`${P&&n?n+" | "+P:n||P} | ${v}`},[v,s]);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:"desktop: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] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),(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:"desktop:text-2xl text-base font-bold",html:v}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,h.formatPrice)({amount:t.price.amount,locale:u,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(r?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:r?f?.remove:f?.add})]})]})},M=({exchangeOperation:o,exchange:t,canOperate:r,status:i})=>{const{locale:u="us",copyWriting:f}=(0,A.useAiuiContext)(),{setCheckedExchangePurchase:N}=(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:"desktop: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] desktop: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:"desktop:text-2xl text-base font-bold",html:(0,h.formatPrice)({amount:t.finalPrice?.amount||0,locale:u,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,h.formatPrice)({amount:t.price?.amount||0,locale:u,currencyCode:t.price.currencyCode})})]}),r&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{N?.(i?void 0:t),o(t)},className:"size-auto shrink-0 underline",children:i?f?.remove:f?.add})]})]})};var pe=(0,Q.withLayout)(de);
|
|
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, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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'\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 = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\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 Math.floor(finalPrice * 100) / 100\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 variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => variantItem?.galleries === 'productList'\n )\n const variantProductGalleryItemImage = variantProductGalleryItem?.images?.[0]?.image_1920 || variant.image?.url\n return variantProductGalleryItemImage || variant.image?.url\n }, [variant.image?.url, variant?.payload?.components])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop: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:h-[320px] desktop:h-[272px] laptop:h-[191px] tablet:h-[380px] aspect-1 mx-auto h-[192px]\"\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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop: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 desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop: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 <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\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=\"desktop: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=\"desktop: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=\"desktop: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=\"desktop: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] desktop: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=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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": "ukBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA+GU,IAAAI,EAAA,6BA/GVC,EAA0E,8CAC1EC,EAAqC,0CACrCC,EAA6C,iBAC7CC,EAA4B,mCAC5BC,EAA+B,6CAE/BC,EAAoB,0BACpBC,EAAgC,wCAChCC,EAA2B,2CAC3BP,EAAiC,8CACjCQ,EAAwB,0CAExB,MAAMC,GAAiB,IAAM,CAC3B,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAAC,EACA,2BAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAqB,WAAQ,IAC1BpB,GAAS,SAAS,YAAY,KAAMqB,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACrB,GAAS,OAAO,CAAC,EAEf,CAACsB,CAAqB,EAAIhB,EAE1BiB,KAAoB,WAAQ,IAAM,CACtC,MAAMC,EAAuBb,GAAe,SAAS,KAAKc,GAAKA,EAAE,QAAQ,MAAQH,GAAuB,GAAG,EACrGI,EAAqB,IAAI,EAAAC,QAAQL,GAAuB,OAAO,QAAU,CAAC,EAC7E,MAAME,GAAsB,OAASF,GAAuB,OAAO,MAAM,EACzE,SAAS,EACZ,IAAIM,EAAsB,IAAI,EAAAD,QAAQL,GAAuB,OAAO,QAAU,CAAC,EAC3EL,GAAS,QACXW,EAAsBA,EAAoB,MAAMlB,GAAc,QAAU,CAAC,GAE3E,MAAMR,EAAa0B,EAAoB,MAAMlB,GAAc,MAAM,EAAE,MAAMgB,CAAkB,EAAE,SAAS,EACtG,OAAO,KAAK,MAAMxB,EAAa,GAAG,EAAI,GACxC,EAAG,CAACoB,EAAuBX,EAAeM,EAASP,GAAc,OAAQA,GAAc,MAAM,CAAC,EAExF,CAAE,cAAAmB,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,EAAIC,GAAwB,GAAK,CAAC,EAEhF,CAACC,EAA6BC,CAA8B,KAAI,YAInE,KAEH,aAAU,IAAM,CACdA,EAA+B,CAC7B,OAAQtB,EAA2B,QAAQ,MAAQ,OAAYiB,EAC/D,KAAMjB,EAA2B,MAAM,MAAQ,OAAYkB,EAC3D,SAAUlB,EAA2B,UAAU,MAAQ,OAAYmB,CACrE,CAAC,CACH,EAAG,CAACF,EAAeC,EAAaC,EAAiBnB,CAA0B,CAAC,EAG5E,MAAMuB,KAAwB,WAAQ,IAAM,CAC1C,MAAMC,EAAuE,CAAC,EAG9E,OAAIlB,GACFA,EAAS,QAAQ,CAACmB,EAAMC,IAAU,CAC5B1B,EAA2ByB,CAAI,GAAG,OACpCD,EAAO,KAAK,CAAE,KAAAC,EAAM,IAAK,GAAGA,CAAI,IAAIC,CAAK,EAAG,CAAC,CAEjD,CAAC,EAGIF,CACT,EAAG,CAAClB,EAAUN,CAA0B,CAAC,EAEnC2B,KAAqB,WAAQ,IAAM,CACvC,MAAMC,EAAWnC,GAAiB,UAAY,GACxCoC,EAAQpC,GAAiB,OAASA,GAAiB,QAAUA,GAAiB,SAAW,GAC/F,MAAO,GAAGmC,GAAYC,EAAQ,GAAGD,CAAQ,MAAMC,CAAK,GAAKD,GAAYC,CAAK,EAC5E,EAAG,CAACpC,GAAiB,SAAUA,GAAiB,MAAOA,GAAiB,OAAQA,GAAiB,OAAO,CAAC,EAEnGqC,KAAe,WAAQ,
|
|
6
|
-
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "item", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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'\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 = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\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 Math.floor(finalPrice * 100) / 100\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 variantProductSummary =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n const { image_1920, image_1440, image_1024, image_768, image_390 } = variantProductSummary?.thumbnail || {}\n const variantProductGalleryItemImage = variantProductSummary?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return variantProductGalleryItemImage || variant.image?.url\n }, [variant.image?.url, variant?.payload?.components])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop: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] desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop: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 desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop: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 <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\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=\"desktop: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=\"desktop: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=\"desktop: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=\"desktop: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] desktop: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=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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": "ukBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA+GU,IAAAI,EAAA,6BA/GVC,EAA0E,8CAC1EC,EAAqC,0CACrCC,EAA6C,iBAC7CC,EAA4B,mCAC5BC,EAA+B,6CAE/BC,EAAoB,0BACpBC,EAAgC,wCAChCC,EAA2B,2CAC3BP,EAAiC,8CACjCQ,EAAwB,0CAExB,MAAMC,GAAiB,IAAM,CAC3B,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CACJ,QAAAC,EACA,QAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAAC,EACA,2BAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EAEnBC,KAAqB,WAAQ,IAC1BpB,GAAS,SAAS,YAAY,KAAMqB,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACrB,GAAS,OAAO,CAAC,EAEf,CAACsB,CAAqB,EAAIhB,EAE1BiB,KAAoB,WAAQ,IAAM,CACtC,MAAMC,EAAuBb,GAAe,SAAS,KAAKc,GAAKA,EAAE,QAAQ,MAAQH,GAAuB,GAAG,EACrGI,EAAqB,IAAI,EAAAC,QAAQL,GAAuB,OAAO,QAAU,CAAC,EAC7E,MAAME,GAAsB,OAASF,GAAuB,OAAO,MAAM,EACzE,SAAS,EACZ,IAAIM,EAAsB,IAAI,EAAAD,QAAQL,GAAuB,OAAO,QAAU,CAAC,EAC3EL,GAAS,QACXW,EAAsBA,EAAoB,MAAMlB,GAAc,QAAU,CAAC,GAE3E,MAAMR,EAAa0B,EAAoB,MAAMlB,GAAc,MAAM,EAAE,MAAMgB,CAAkB,EAAE,SAAS,EACtG,OAAO,KAAK,MAAMxB,EAAa,GAAG,EAAI,GACxC,EAAG,CAACoB,EAAuBX,EAAeM,EAASP,GAAc,OAAQA,GAAc,MAAM,CAAC,EAExF,CAAE,cAAAmB,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,EAAIC,GAAwB,GAAK,CAAC,EAEhF,CAACC,EAA6BC,CAA8B,KAAI,YAInE,KAEH,aAAU,IAAM,CACdA,EAA+B,CAC7B,OAAQtB,EAA2B,QAAQ,MAAQ,OAAYiB,EAC/D,KAAMjB,EAA2B,MAAM,MAAQ,OAAYkB,EAC3D,SAAUlB,EAA2B,UAAU,MAAQ,OAAYmB,CACrE,CAAC,CACH,EAAG,CAACF,EAAeC,EAAaC,EAAiBnB,CAA0B,CAAC,EAG5E,MAAMuB,KAAwB,WAAQ,IAAM,CAC1C,MAAMC,EAAuE,CAAC,EAG9E,OAAIlB,GACFA,EAAS,QAAQ,CAACmB,EAAMC,IAAU,CAC5B1B,EAA2ByB,CAAI,GAAG,OACpCD,EAAO,KAAK,CAAE,KAAAC,EAAM,IAAK,GAAGA,CAAI,IAAIC,CAAK,EAAG,CAAC,CAEjD,CAAC,EAGIF,CACT,EAAG,CAAClB,EAAUN,CAA0B,CAAC,EAEnC2B,KAAqB,WAAQ,IAAM,CACvC,MAAMC,EAAWnC,GAAiB,UAAY,GACxCoC,EAAQpC,GAAiB,OAASA,GAAiB,QAAUA,GAAiB,SAAW,GAC/F,MAAO,GAAGmC,GAAYC,EAAQ,GAAGD,CAAQ,MAAMC,CAAK,GAAKD,GAAYC,CAAK,EAC5E,EAAG,CAACpC,GAAiB,SAAUA,GAAiB,MAAOA,GAAiB,OAAQA,GAAiB,OAAO,CAAC,EAEnGqC,KAAe,WAAQ,IAAM,CACjC,MAAMC,EACJ1C,GAAS,SAAS,YAAY,KAAMoB,IAAcA,GAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAChG,CAAE,WAAAuB,EAAY,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,UAAAC,EAAU,EAAIL,GAAuB,WAAa,CAAC,EAI1G,OAHuCA,GAAuB,UAC1D,GAAGC,CAAU,UAAUC,CAAU,UAAUC,CAAU,UAAUC,CAAS,SAASC,EAAS,OAC1F/C,EAAQ,OAAO,MACsBA,EAAQ,OAAO,GAC1D,EAAG,CAACA,EAAQ,OAAO,IAAKA,GAAS,SAAS,UAAU,CAAC,EAGrD,OADoBA,EAAQ,oBAI1B,OAAC,OAAI,UAAU,8FACb,mBAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,UAAU,oCACd,qBAAC,YAAS,UAAU,uFAClB,oBAAC,WACC,UAAU,gIACV,KAAMmB,GAAoB,WAAW,UAAU,UAAWpB,GAAS,KAAK,EAC1E,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQ0C,EACR,UAAU,yHACV,aAAa,sBACf,EACF,GACF,KACA,QAAC,YAAS,UAAU,yHAClB,qBAAC,OACC,qBAAC,OAAI,UAAU,sBACb,oBAAC,oBACC,YAAY,mBACZ,WAAY,IAAM,IAChB,WAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,sBAAsBzC,EAAQ,GAAG,GAC7C,eAAgB,QAChB,eAAgB,mBAChB,SAAU,CACZ,CACF,CAAC,CACH,EAEA,oBAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQA,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,wHACZ,KACA,QAAC,OAAI,UAAU,0DACb,oBAAC,QACC,UAAU,gFACV,KAAMA,EAAQ,MAChB,KACA,OAAC,QACC,UAAU,8EACV,KAAMuC,EACR,GACF,GACF,KACA,QAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uCACV,QAAM,eAAY,CAChB,OAAQhB,EACR,aAActB,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,EACCyB,EAAoBtB,GAAS,OAAO,WACnC,OAAC,QACC,UAAU,kFACV,QAAM,eAAY,CAChB,OAAQA,GAAS,OAAO,OACxB,aAAcA,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,GAEJ,GACF,EACF,EAECqC,EAAsB,IAAI,CAAC,CAAE,KAAAE,EAAM,IAAAY,CAAI,IAClCZ,IAAS,QAAUzB,GAA4B,MAAM,SAErD,OAACsC,EAAA,CAEC,cAAeC,GAAQ,CACrBtC,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDsB,IAAiC,CAAE,GAAGD,EAA6B,KAAAkB,CAAK,CAAC,EAEzEhC,IAAciC,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,CACtD,EACA,OAAQ,CAAC,CAACzC,GAA4B,KACtC,KAAMA,GAA4B,MAAM,MACxC,WAAYA,GAA4B,MAAM,YAfzCqC,CAgBP,EAGAZ,IAAS,UAAYzB,GAA4B,QAAQ,SAEzD,OAAC0C,EAAA,CAEC,gBAAiBC,GAAU,CACzB1C,IAAgC,CAC9B,GAAGD,EACH,OAAQ,CACN,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDsB,IAAiC,CAAE,GAAGD,EAA6B,OAAAsB,CAAO,CAAC,EAE3EpC,IAAciC,GAAQA,EAAK,OAAOC,GAAKA,IAAM,QAAQ,CAAC,CACxD,EACA,OAAQ,CAAC,CAACzC,GAA4B,OACtC,eAAgBA,GAA4B,QAAQ,MACpD,WAAYA,GAA4B,QAAQ,YAf3CqC,CAgBP,EAGAZ,IAAS,YAAczB,GAA4B,UAAU,SAE7D,OAAC4C,EAAA,CAEC,kBAAmBC,GAAY,CAC7B5C,IAAgC,CAC9B,GAAGD,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDsB,IAAiC,CAAE,GAAGD,EAA6B,SAAAwB,CAAS,CAAC,EAE7EtC,IAAciC,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,CAC1D,EACA,OAAQ,CAAC,CAACzC,GAA4B,SACtC,WAAYA,GAA4B,UAAU,WAClD,SAAUA,GAA4B,UAAU,OAf3CqC,CAgBP,EAGG,IACR,GACH,GACEhB,GAA6B,QAC7BA,GAA6B,MAC7BA,GAA6B,cAC7B,QAAC,OAAI,UAAU,oBACb,oBAAC,QAAK,UAAU,wCAAwC,KAAMb,GAAoB,aAAc,KAChG,QAAC,OAAI,UAAU,yCACZ,UAAAa,GAA6B,aAC5B,OAACuB,EAAA,CACC,kBAAmBC,GAAY,CAC7B5C,IAAgC,CAC9B,GAAGD,EACH,SAAU,CACR,MAAO6C,EACP,WAAY,EACd,CACF,CAAC,EACDvB,IAAiC,CAAE,GAAGD,EAA6B,SAAU,MAAU,CAAC,EAExFd,IAAciC,GAAQ,CAAC,GAAGA,EAAM,UAAU,CAAC,CAC7C,EACA,WAAYxC,GAA4B,UAAU,WAClD,OAAQ,CAACqB,GAA6B,SACtC,SAAUA,GAA6B,SACzC,EAEDA,GAA6B,WAC5B,OAACqB,EAAA,CACC,gBAAiBC,GAAU,CACzBzC,IAAkB,CAAE,GAAGJ,EAAc,iBAAkB,CAAE,CAAC,EAC1DG,IAAgC,CAC9B,GAAGD,EACH,OAAQ,CACN,MAAO2C,EACP,WAAY,EACd,CACF,CAAC,EACDrB,IAAiC,CAAE,GAAGD,EAA6B,OAAQ,MAAU,CAAC,EAEtFd,IAAciC,GAAQ,CAAC,GAAGA,EAAM,QAAQ,CAAC,CAC3C,EACA,WAAYxC,GAA4B,QAAQ,WAChD,OAAQ,CAACqB,GAA6B,OACtC,eAAgBA,GAA6B,OAC/C,EAEDA,GAA6B,SAC5B,OAACiB,EAAA,CACC,cAAeC,GAAQ,CACrBtC,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAOuC,EACP,WAAY,EACd,CACF,CAAC,EACDjB,IAAiC,CAAE,GAAGD,EAA6B,KAAM,MAAU,CAAC,EAEpFd,IAAciC,GAAQ,CAAC,GAAGA,EAAM,MAAM,CAAC,CACzC,EACA,WAAYxC,GAA4B,MAAM,WAC9C,OAAQ,CAACqB,GAA6B,KACtC,KAAMA,GAA6B,KACrC,GAEJ,GACF,GAEJ,KACA,QAAC,OAAI,UAAU,aACb,oBAAC,QACC,UAAU,uDACV,KAAM,MAAG,mBAAgBlC,GAAa,YAAc,GAAI,CAAE,UAAQ,eAAY,CAAE,OAAQ,KAAK,MAAMG,EAAa,GAAG,EAAI,IAAK,aAAcD,EAAQ,MAAM,aAAc,OAAAH,CAAO,CAAC,CAAE,CAAC,CAAC,GACpL,EAECS,EAAe,MACd,OAAC,QACC,UAAU,uFACV,QAAM,eAAY,CAChB,OAAQJ,EACR,aAAcF,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,KAEF,QAAC,OAAI,UAAU,8BACb,oBAAC,UACC,KAAK,KACL,QAAQ,YACR,QAASiB,EACT,UAAU,kDACV,QAAS,IAAMP,IAAc,EAE5B,SAAAT,GAAa,UAChB,KACA,OAAC,UACC,KAAK,KACL,QAASiB,EACT,QAAQ,UACR,UAAU,kDACV,QAAS,IAAMP,IAAW,EAEzB,SAAAV,GAAa,QAChB,GACF,GACF,GACF,GACF,EACF,EACF,EA/PuB,IAiQ3B,EAEMiC,GAA0B,IAAM,CACpC,KAAM,CAAE,OAAAuB,EAAQ,QAAAtD,EAAS,cAAAU,EAAe,SAAA+C,EAAU,YAAAC,EAAa,iBAAAC,EAAkB,wBAAAC,CAAwB,KACvG,wBAAqB,EACvB,IAAIhC,EACAC,EACAC,EACJ,KAAM,CAAE,WAAA+B,CAAW,EAAIP,GAAU,CAAC,EAE5B,CAAE,SAAAQ,EAAW,CAAC,CAAE,EAAIL,GAAY,CAAC,EACjC,CAAE,SAAUM,EAAe,CAAC,CAAE,EAAIJ,GAAoB,CAAC,EAEvDK,EACJH,GAAY,OAAOP,GACjBA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAM9B,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,GAAK,CAAC,EAEF,CAACyC,CAAoB,EAAID,EAC/BpC,EAAgBlB,GAAiBuD,EAEjC,KAAM,CAACC,CAAkB,EAAIJ,GAAU,OAAOZ,GAAQA,EAAK,gBAAgB,GAAK,CAAC,EACjFrB,EAAc6B,GAAeQ,EAE7B,KAAM,CAACC,CAAsB,EAAIJ,GAAc,OAAOP,GAAYA,EAAS,gBAAgB,GAAK,CAAC,EACjG,OAAA1B,EAAkB8B,GAA2BO,EAEtC,CAAE,cAAAvC,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,CACvD,EAEMuB,EAAuB,CAAC,CAC5B,gBAAAe,EACA,eAAAC,EACA,WAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAAE,OAAA1E,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,QAAAE,EAAS,iBAAAwE,CAAiB,KAAI,wBAAqB,EACrDC,EAAiBJ,GAAgB,SAAS,OAAO7C,GAAKA,EAAE,QAAQ,MAAQxB,EAAQ,GAAG,EAEzF,SACE,OAAC,OAAI,UAAU,GACZ,SAAAyE,GAAgB,IAAI7C,MAEjB,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQA,GAAe,SAAS,OAAO,IACvC,UAAU,wHACZ,KACA,OAAC,OAAI,UAAU,uEACb,mBAAC,QACC,UAAU,mEACV,KAAMA,EAAc,QAAQ,QAAQ,MACtC,EACF,GACF,KACA,QAAC,OAAI,UAAU,+CACZ,WAAC,CAACyC,MACD,QAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uCACV,QAAM,eAAY,CAChB,OAAQzC,GAAe,OAAS,EAChC,OAAA/B,EACA,aAAc+B,EAAc,SAAS,OAAO,cAAgB,EAC9D,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,WACjD,OAAC,QACC,UAAU,mEACV,QAAM,eAAY,CAChB,OAAQA,EAAc,QAAQ,MAAM,QAAU,EAC9C,OAAA/B,EACA,aAAc+B,EAAc,SAAS,OAAO,cAAgB,EAC9D,CAAC,EACH,GAEJ,EAED0C,MACC,OAAC,UACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbE,IAAmBD,EAAS,OAAYF,CAAc,EACtDD,IAAkBC,CAAc,CAClC,EACA,UAAU,+BAET,SAAAE,EAASzE,GAAa,OAASA,GAAa,IAC/C,GAEJ,IAjD4D8B,EAAc,QAAQ,EAkDpF,CAEH,EACH,CAEJ,EAEMqB,EAAqB,CAAC,CAC1B,cAAAyB,EACA,KAAAxB,EACA,OAAAqB,EACA,WAAAD,CACF,IAKM,CACJ,KAAM,CAAE,OAAAzE,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,SAAA2D,EAAU,eAAAkB,CAAe,KAAI,wBAAqB,EACpD,CAAE,UAAAC,CAAU,EAAInB,GAAY,CAAC,EAC7B,CAAE,QAAAoB,CAAQ,EAAI3B,GAAQ,CAAC,EAEvB4B,KAAkB,WAAQ,IAAM,CACpC,MAAMC,EAAmBF,GAAS,KAChCG,GAAUA,EAAO,OAAS,SAAWA,EAAO,OAAS,UAAYA,EAAO,OAAS,SACnF,GAAK,CAAC,EACAC,EAAqBJ,GAAS,KAAKG,GAAUA,EAAO,OAAS,UAAU,GAAM,CAAC,EAC9EE,EAAsBH,EAAkBA,EAAgB,SAAS,CAAC,GAAG,MAAQ,GAC7EI,EAAyBF,EAAqBA,EAAmB,SAAS,CAAC,GAAG,MAAQ,GAC5F,MAAO,GAAGC,GAAuBC,EAAyBA,EAAyB,MAAQD,EAAsBC,GAA0BD,CAAmB,MAAMN,CAAS,EAC/K,EAAG,CAACA,EAAWC,CAAO,CAAC,EAEvB,SACE,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQ3B,GAAM,OAAO,IACrB,UAAU,wHACZ,KACA,QAAC,OAAI,UAAU,0DACb,oBAAC,QACC,UAAU,gFACV,KAAMA,GAAM,SAAS,MACvB,KACA,OAAC,QACC,UAAU,8EACV,KAAM4B,EACR,GACF,GACF,KACA,QAAC,OAAI,UAAU,+CACZ,WAAC,CAAC5B,MACD,QAAC,OAAI,UAAU,0BACb,oBAAC,QAAK,UAAU,uCAAuC,KAAM0B,EAAW,KACxE,OAAC,QACC,UAAU,mEACV,QAAM,eAAY,CAChB,OAAQ1B,EAAK,MAAM,OACnB,OAAArD,EACA,aAAcqD,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,EAEDoB,MACC,OAAC,UACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbK,IAAiBJ,EAAS,OAAYrB,CAAI,EAC1CwB,EAAcxB,CAAI,CACpB,EACA,UAAU,+BAET,SAAAqB,EAASzE,GAAa,OAASA,GAAa,IAC/C,GAEJ,GACF,CAEJ,EAEMyD,EAAyB,CAAC,CAC9B,kBAAA6B,EACA,SAAA5B,EACA,WAAAc,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAAE,OAAA1E,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,2BAAAuF,CAA2B,KAAI,wBAAqB,EAE5D,SACE,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WACC,OAAQ7B,GAAU,OAAO,IACzB,UAAU,wHACZ,KACA,QAAC,OAAI,UAAU,0DACb,oBAAC,QACC,UAAU,gFACV,KAAMA,GAAU,SAAS,MAC3B,KACA,OAAC,QAAK,UAAU,8EAA8E,GAChG,GACF,KACA,QAAC,OAAI,UAAU,+CACZ,WAAC,CAACA,MACD,QAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uCACV,QAAM,eAAY,CAChB,OAAQA,EAAS,YAAY,QAAU,EACvC,OAAA3D,EACA,aAAc2D,EAAS,MAAM,YAC/B,CAAC,EACH,KACA,OAAC,QACC,UAAU,mEACV,QAAM,eAAY,CAChB,OAAQA,EAAS,OAAO,QAAU,EAClC,OAAA3D,EACA,aAAc2D,EAAS,MAAM,YAC/B,CAAC,EACH,GACF,EAEDc,MACC,OAAC,UACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbe,IAA6Bd,EAAS,OAAYf,CAAQ,EAC1D4B,EAAkB5B,CAAQ,CAC5B,EACA,UAAU,+BAET,SAAAe,EAASzE,GAAa,OAASA,GAAa,IAC/C,GAEJ,GACF,CAEJ,EAEA,IAAOd,MAAQ,cAAWY,EAAc",
|
|
6
|
+
"names": ["ProductSummary_exports", "__export", "ProductSummary_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "import_react", "import_utils", "import_AiuiProvider", "import_decimal", "import_textFormat", "import_Styles", "import_track", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "item", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "variantProductSummary", "image_1920", "image_1440", "image_1024", "image_768", "image_390", "key", "ProductGiftSummary", "gift", "prev", "t", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var N=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var M=(e,o)=>{for(var a in o)N(e,a,{get:o[a],enumerable:!0})},B=(e,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of x(o))!k.call(e,r)&&r!==a&&N(e,r,{get:()=>o[r],enumerable:!(l=R(o,r))||l.enumerable});return e};var C=e=>B(N({},"__esModule",{value:!0}),e);var P={};M(P,{default:()=>L});module.exports=C(P);var p=require("react/jsx-runtime"),E=require("../../../../../helpers/index.js"),n=require("react");const H=(e,o)=>{const[a,l]=(0,n.useState)(null),r=(0,n.useRef)(null),u=(0,n.useRef)(new Map),m=(0,n.useRef)(!1),g=(0,n.useRef)(null);(0,n.useEffect)(()=>{g.current=a},[a]),(0,n.useEffect)(()=>{if(!e||e.length===0)return;r.current&&r.current.disconnect();const f=document.getElementById("purchase-bar"),v=f?f.clientHeight:100;u.current.clear();const t=[];if(e.forEach(s=>{const d=s.id||s.href?.replace("#",""),h=document.getElementById(d);h&&(u.current.set(d,s),t.push(h))}),t.length===0){l(e[0]);return}const c={root:null,rootMargin:`-${v}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},w=s=>{if(m.current)return;if((window.scrollY||document.documentElement.scrollTop)<v+50){const i=e[0];i&&g.current?.id!==i.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",i.label),l(i),o?.(i));return}const h=s.filter(i=>i.isIntersecting).sort((i,S)=>i.boundingClientRect.top-S.boundingClientRect.top);if(h.length>0){const S=h[0].target.id,b=u.current.get(S);b&&(l(b),o?.(b))}else{const i=[...s].sort((S,b)=>Math.abs(S.boundingClientRect.top)-Math.abs(b.boundingClientRect.top));if(i.length>0){const b=i[0].target.id,I=u.current.get(b);I&&(l(I),o?.(I))}}};r.current=new IntersectionObserver(w,c),t.forEach(s=>{r.current?.observe(s)});const T=()=>{if(m.current)return;if((window.scrollY||document.documentElement.scrollTop)<v+50){const d=e[0];d&&(l(d),o?.(d))}};return window.addEventListener("scroll",T,{passive:!0}),()=>{r.current&&r.current.disconnect(),window.removeEventListener("scroll",T)}},[e]),(0,n.useEffect)(()=>{!a&&e&&e.length>0&&l(e[0])},[e,a]);const y=(0,n.useCallback)(f=>{l(f);const v=f.id||f.href?.replace("#",""),t=document.getElementById(v);if(t){const c=document.getElementById("purchase-bar"),w=c?c.clientHeight:100;m.current=!0;const s=t.getBoundingClientRect().top+window.scrollY-w-10;window.scrollTo({top:s,behavior:"smooth"}),setTimeout(()=>{m.current=!1},1e3)}},[]);return{activeTab:a||e?.[0],setActiveTab:y}},O=({tabs:e,onSpyNavItemClick:o,className:a,renderRating:l})=>{const r=(0,n.useMemo)(()=>l?[...e,{label:"Reviews",id:"review",href:""}]:e,[e,l]),{activeTab:u,setActiveTab:m}=H(r),g=(0,n.useRef)(null),y=(0,n.useRef)(new Map),f=(0,n.useCallback)(t=>{m(t),o?.(t)},[o,m]);(0,n.useEffect)(()=>{if(!u||!g.current)return;const t=y.current.get(u.id);if(!t)return;const c=g.current,w=t.getBoundingClientRect(),T=c.getBoundingClientRect(),s=w.left+w.width/2-T.left,d=T.width/2,h=s-d;c.scrollTo({left:c.scrollLeft+h,behavior:"smooth"})},[u?.id]);const v=(0,n.useCallback)((t,c)=>{c?y.current.set(t,c):y.current.delete(t)},[]);return(0,p.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,E.cn)("overflow-x-auto",a),children:(0,p.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:r?.map(t=>(0,p.jsx)("button",{ref:c=>v(t.id,c),children:t.id==="review"?(0,p.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[l,(0,p.jsx)("div",{className:(0,E.cn)("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":u?.id===t.id})})]}):(0,p.jsxs)("div",{className:(0,E.cn)("desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":u?.id===t.id}),onClick:()=>f(t),children:[t.label,(0,p.jsx)("div",{className:(0,E.cn)("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":u?.id===t.id})})]})},t.id))})})};var L=O;
|
|
1
|
+
"use strict";var N=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var M=(e,o)=>{for(var a in o)N(e,a,{get:o[a],enumerable:!0})},B=(e,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of x(o))!k.call(e,r)&&r!==a&&N(e,r,{get:()=>o[r],enumerable:!(l=R(o,r))||l.enumerable});return e};var C=e=>B(N({},"__esModule",{value:!0}),e);var P={};M(P,{default:()=>L});module.exports=C(P);var p=require("react/jsx-runtime"),E=require("../../../../../helpers/index.js"),n=require("react");const H=(e,o)=>{const[a,l]=(0,n.useState)(null),r=(0,n.useRef)(null),u=(0,n.useRef)(new Map),m=(0,n.useRef)(!1),g=(0,n.useRef)(null);(0,n.useEffect)(()=>{g.current=a},[a]),(0,n.useEffect)(()=>{if(!e||e.length===0)return;r.current&&r.current.disconnect();const f=document.getElementById("purchase-bar"),v=f?f.clientHeight:100;u.current.clear();const t=[];if(e.forEach(s=>{const d=s.id||s.href?.replace("#",""),h=document.getElementById(d);h&&(u.current.set(d,s),t.push(h))}),t.length===0){l(e[0]);return}const c={root:null,rootMargin:`-${v}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},w=s=>{if(m.current)return;if((window.scrollY||document.documentElement.scrollTop)<v+50){const i=e[0];i&&g.current?.id!==i.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",i.label),l(i),o?.(i));return}const h=s.filter(i=>i.isIntersecting).sort((i,S)=>i.boundingClientRect.top-S.boundingClientRect.top);if(h.length>0){const S=h[0].target.id,b=u.current.get(S);b&&(l(b),o?.(b))}else{const i=[...s].sort((S,b)=>Math.abs(S.boundingClientRect.top)-Math.abs(b.boundingClientRect.top));if(i.length>0){const b=i[0].target.id,I=u.current.get(b);I&&(l(I),o?.(I))}}};r.current=new IntersectionObserver(w,c),t.forEach(s=>{r.current?.observe(s)});const T=()=>{if(m.current)return;if((window.scrollY||document.documentElement.scrollTop)<v+50){const d=e[0];d&&(l(d),o?.(d))}};return window.addEventListener("scroll",T,{passive:!0}),()=>{r.current&&r.current.disconnect(),window.removeEventListener("scroll",T)}},[e,o]),(0,n.useEffect)(()=>{!a&&e&&e.length>0&&l(e[0])},[e,a]);const y=(0,n.useCallback)(f=>{l(f);const v=f.id||f.href?.replace("#",""),t=document.getElementById(v);if(t){const c=document.getElementById("purchase-bar"),w=c?c.clientHeight:100;m.current=!0;const s=t.getBoundingClientRect().top+window.scrollY-w-10;window.scrollTo({top:s,behavior:"smooth"}),setTimeout(()=>{m.current=!1},1e3)}},[]);return{activeTab:a||e?.[0],setActiveTab:y}},O=({tabs:e,onSpyNavItemClick:o,className:a,renderRating:l})=>{const r=(0,n.useMemo)(()=>l?[...e,{label:"Reviews",id:"review",href:""}]:e,[e,l]),{activeTab:u,setActiveTab:m}=H(r),g=(0,n.useRef)(null),y=(0,n.useRef)(new Map),f=(0,n.useCallback)(t=>{m(t),o?.(t)},[o,m]);(0,n.useEffect)(()=>{if(!u||!g.current)return;const t=y.current.get(u.id);if(!t)return;const c=g.current,w=t.getBoundingClientRect(),T=c.getBoundingClientRect(),s=w.left+w.width/2-T.left,d=T.width/2,h=s-d;c.scrollTo({left:c.scrollLeft+h,behavior:"smooth"})},[u?.id]);const v=(0,n.useCallback)((t,c)=>{c?y.current.set(t,c):y.current.delete(t)},[]);return(0,p.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,E.cn)("overflow-x-auto",a),children:(0,p.jsx)("div",{className:"tablet:gap-8 flex gap-6",children:r?.map(t=>(0,p.jsx)("button",{ref:c=>v(t.id,c),children:t.id==="review"?(0,p.jsxs)("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[l,(0,p.jsx)("div",{className:(0,E.cn)("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":u?.id===t.id})})]}):(0,p.jsxs)("div",{className:(0,E.cn)("desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":u?.id===t.id}),onClick:()=>f(t),children:[t.label,(0,p.jsx)("div",{className:(0,E.cn)("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":u?.id===t.id})})]})},t.id))})})};var L=O;
|
|
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/ScrollSpyNav/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs, onActiveChange])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "b", "sortedEntries", "handleScroll", "handleSetActiveTab", "scrollToPosition", "ScrollSpyNav", "onSpyNavItemClick", "className", "renderRating", "combinedTabs", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var J=Object.create;var d=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Q(e))!Y.call(t,s)&&s!==n&&d(t,s,{get:()=>e[s],enumerable:!(c=K(e,s))||c.enumerable});return t};var tt=(t,e,n)=>(n=t!=null?J(X(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>M(d({},"__esModule",{value:!0}),t);var nt={};Z(nt,{default:()=>rt});module.exports=et(nt);var i=require("react/jsx-runtime"),r=tt(require("react")),f=require("gsap"),
|
|
1
|
+
"use strict";"use client";var J=Object.create;var d=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Q(e))!Y.call(t,s)&&s!==n&&d(t,s,{get:()=>e[s],enumerable:!(c=K(e,s))||c.enumerable});return t};var tt=(t,e,n)=>(n=t!=null?J(X(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),et=t=>M(d({},"__esModule",{value:!0}),t);var nt={};Z(nt,{default:()=>rt});module.exports=et(nt);var i=require("react/jsx-runtime"),r=tt(require("react")),f=require("gsap"),b=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),p=require("../../helpers/utils.js"),z=require("../../components/index.js"),P=require("../../shared/Styles.js"),S=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",D=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold",mobFlexCol:s=!1},V)=>{const{title:u,caption:g,theme:k,extensions:m,align:h="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),o=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:B,inView:L}=(0,I.useInView)();return(0,r.useImperativeHandle)(V,()=>y.current),(0,r.useEffect)(()=>{f.gsap.registerPlugin(b.SplitText,T.ScrollTrigger);function U(){if(!l.current)return;const j=l.current?.clientHeight||80;o.current&&o.current.revert(),a.current&&a.current.kill(),o.current=new b.SplitText(l.current,{type:"words",wordsClass:"word"});const v=o.current.words;f.gsap.set(v,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${j*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:C=>{const F=C.progress,R=v.length||1,O=.5,w=1/R,N=w*(1-O),H=(R-1)*N+w,W=Math.min(1,H>0?F/H:0);v.forEach((_,q)=>{const A=q*N,G=w;let x=(W-A)/G;x=Math.max(0,Math.min(1,x)),f.gsap.set(_,{opacity:x})})}})}return L&&U(),()=>{o.current&&o.current.revert(),a.current&&a.current.kill()}},[L]),(u||g)&&(0,i.jsxs)("div",{ref:y,id:m?.id,className:(0,p.cn)("titleBottom title-box mb-6 flex items-end justify-between gap-2",{"md-tablet:flex-col md-tablet:items-start":s}),children:[(0,i.jsx)("div",{ref:B,className:(0,p.cn)("flex-1 space-y-4",e,{"aiui-dark":k==="dark","text-center":h==="center","text-right":h==="right","text-left":h==="left"}),children:(0,i.jsx)(z.Heading,{ref:l,as:n,size:4,html:g||u,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,p.cn)({"aiui-dark":k==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${u}#${g}`,children:[(0,i.jsx)("div",{className:"flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});D.displayName="Title";var rt=(0,P.withLayout)(D);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, as = 'h2', weight = 'bold', mobFlexCol = false }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n ref={innerRef}\n id={extensions?.id}\n className={cn('titleBottom title-box mb-6 flex items-end justify-between gap-2', {\n 'flex-col items-start': mobFlexCol,\n })}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
-
"mappings": "ykBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAkGY,IAAAI,EAAA,6BAjGZC,EAA8D,qBAC9DC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAClB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAAC,EAAK,KAAM,OAAAC,EAAS,OAAQ,WAAAC,EAAa,EAAM,EAAGC,IAAQ,CAC5E,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,EAAO,WAAAC,EAAY,MAAAC,EAAQ,MAAO,EAAIV,EACxDW,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,gCAAoBX,EAAK,IAAMM,EAAS,OAAyB,KAEjE,aAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASM,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GAC7CC,EAAkB,SACpBA,EAAkB,QAAQ,OAAO,EAE/BC,EAAiB,SACnBA,EAAiB,QAAQ,KAAK,EAEhCD,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,oBAAqB,GACrB,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,QAAU,EACxBI,EAAU,GACVC,EAAW,EAAIF,EACfG,EAAOD,GAAY,EAAID,GACvBG,GAAWJ,EAAQ,GAAKG,EAAOD,EAC/BG,EAAqB,KAAK,IAAI,EAAGD,EAAU,EAAIL,EAAWK,EAAU,CAAC,EAC3EP,EAAM,QAAQ,CAACS,EAAWC,IAAc,CACtC,MAAMC,EAAQD,EAAIJ,EACZM,EAAQP,EACd,IAAIQ,GAAWL,EAAqBG,GAASC,EAC7CC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAO,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIhB,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,GAGRV,GAASC,OACR,QAAC,OACC,IAAKI,EACL,GAAIF,GAAY,GAChB,aAAW,MAAG,kEAAmE,CAC/E,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, as = 'h2', weight = 'bold', mobFlexCol = false }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n ref={innerRef}\n id={extensions?.id}\n className={cn('titleBottom title-box mb-6 flex items-end justify-between gap-2', {\n 'md-tablet:flex-col md-tablet:items-start': mobFlexCol,\n })}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "weight", "mobFlexCol", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
|
|
7
7
|
}
|
|
@@ -114,7 +114,7 @@ export interface ProductContextType {
|
|
|
114
114
|
compareData?: CompareData['data'];
|
|
115
115
|
onAddToCart?: () => void;
|
|
116
116
|
onBuyNow?: () => void;
|
|
117
|
-
creditsRedemption
|
|
117
|
+
creditsRedemption?: CreditsRedemption;
|
|
118
118
|
memberFunctionResult?: FunctionMemberPriceResult;
|
|
119
119
|
openModal: ({ title, content, domContent }: ModalData) => void;
|
|
120
120
|
openSignInPopup?: () => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Listing/BizProductProvider.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, {\n createContext,\n useCallback,\n useContext,\n type Dispatch,\n type SetStateAction,\n type PropsWithChildren,\n useState,\n useEffect,\n} from 'react'\nimport type {\n Product,\n ProductPrice,\n ProductVariant,\n VariantCoupon,\n Options,\n FreeGift,\n BundleListItem,\n Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n id?: number\n name?: string\n code?: string\n}\n\nexport type UserProfile = {\n user_id: string\n email: string\n nick_name?: string\n full_name?: string\n first_name?: string\n last_name?: string\n dob?: string\n gender?: string\n phone_number?: string\n phone_account?: string\n country?: Country\n is_subscribe?: boolean\n avatar?: string\n can_change_password?: boolean\n invitation_code?: string\n phone_carrier?: string\n dob_programmed?: boolean\n activated?: boolean\n registed_at?: number\n activated_at?: number\n token?: string\n}\n\nexport type SavingDetail = {\n coupon: number\n bundle: number\n member: number\n freeGift: number\n compare: number\n exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n hasMemberPrice: boolean\n originalPrice: number\n withCouponMemberTotalSave: number\n withoutCouponMaxMemberTotalSave?: number\n labels: {\n key: string\n value: string\n desc: string\n }[]\n}\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n bundle?: {\n value?: BundleListItem\n canOperate?: boolean\n }\n gift?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n exchange?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n}\n\nexport type CreditsRedemption = {\n amount: number\n availablePoints: number\n usedPoints: number\n skuDetails?: {\n sku: string\n is_eligible: boolean\n }[]\n}\n\nexport interface ProductContextType {\n isLogin?: boolean\n isMobile?: boolean\n isDesktop?: boolean\n product: Product\n profile?: UserProfile\n variant: ProductVariant\n selectedVariants: Array<variantWithFinalPrice>\n renderRating?: React.ReactNode\n coupon?: VariantCoupon\n savingDetail: SavingDetail\n setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n finalPrice: number\n comparePrice: number\n totalSavings: number\n selectedOptions: Options\n setSelectedOptions: Dispatch<SetStateAction<Options>>\n freeGift?: FreeGift\n checkedGift?: ProductVariant\n setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n exchangePurchase?: FreeGift\n checkedExchangePurchase?: ProductVariant\n setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n checkedBundle?: BundleListItem\n setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n checkedCareBundle?: ProductVariant\n setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n bundle?: Bundle\n compareData?: CompareData['data']\n onAddToCart?: () => void\n onBuyNow?: () => void\n creditsRedemption
|
|
4
|
+
"sourcesContent": ["import React, {\n createContext,\n useCallback,\n useContext,\n type Dispatch,\n type SetStateAction,\n type PropsWithChildren,\n useState,\n useEffect,\n} from 'react'\nimport type {\n Product,\n ProductPrice,\n ProductVariant,\n VariantCoupon,\n Options,\n FreeGift,\n BundleListItem,\n Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n id?: number\n name?: string\n code?: string\n}\n\nexport type UserProfile = {\n user_id: string\n email: string\n nick_name?: string\n full_name?: string\n first_name?: string\n last_name?: string\n dob?: string\n gender?: string\n phone_number?: string\n phone_account?: string\n country?: Country\n is_subscribe?: boolean\n avatar?: string\n can_change_password?: boolean\n invitation_code?: string\n phone_carrier?: string\n dob_programmed?: boolean\n activated?: boolean\n registed_at?: number\n activated_at?: number\n token?: string\n}\n\nexport type SavingDetail = {\n coupon: number\n bundle: number\n member: number\n freeGift: number\n compare: number\n exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n hasMemberPrice: boolean\n originalPrice: number\n withCouponMemberTotalSave: number\n withoutCouponMaxMemberTotalSave?: number\n labels: {\n key: string\n value: string\n desc: string\n }[]\n}\n\nexport type ModalData = {\n needClickAway?: boolean\n className?: string\n title?: string\n content?: string\n domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n bundle?: {\n value?: BundleListItem\n canOperate?: boolean\n }\n gift?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n exchange?: {\n value?: ProductVariant\n canOperate?: boolean\n }\n}\n\nexport type CreditsRedemption = {\n amount: number\n availablePoints: number\n usedPoints: number\n skuDetails?: {\n sku: string\n is_eligible: boolean\n }[]\n}\n\nexport interface ProductContextType {\n isLogin?: boolean\n isMobile?: boolean\n isDesktop?: boolean\n product: Product\n profile?: UserProfile\n variant: ProductVariant\n selectedVariants: Array<variantWithFinalPrice>\n renderRating?: React.ReactNode\n coupon?: VariantCoupon\n savingDetail: SavingDetail\n setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n finalPrice: number\n comparePrice: number\n totalSavings: number\n selectedOptions: Options\n setSelectedOptions: Dispatch<SetStateAction<Options>>\n freeGift?: FreeGift\n checkedGift?: ProductVariant\n setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n exchangePurchase?: FreeGift\n checkedExchangePurchase?: ProductVariant\n setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n checkedBundle?: BundleListItem\n setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n checkedCareBundle?: ProductVariant\n setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n bundle?: Bundle\n compareData?: CompareData['data']\n onAddToCart?: () => void\n onBuyNow?: () => void\n creditsRedemption?: CreditsRedemption\n memberFunctionResult?: FunctionMemberPriceResult\n openModal: ({ title, content, domContent }: ModalData) => void\n openSignInPopup?: () => void\n openAuthCodePopup?: () => void\n openSignUpPopup?: () => void\n renderInstallments?: React.ReactNode\n onUseCouponChange?: (couponSaving: number) => void\n onUseMemberDiscountChange?: (memberSaving: number) => void\n discount?: DiscountData\n buyNowLoading?: boolean\n addToCartLoading?: boolean\n addOrder?: Array<'bundle' | 'gift' | 'exchange'>\n setAddOrder?: Dispatch<SetStateAction<Array<'bundle' | 'gift' | 'exchange'>>>\n}\n\n// const initialState: ProductContextType = {\n// isLogin: false,\n// isMobile: false,\n// product: {} as Product,\n// variant: {} as ProductVariant,\n// savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n// finalPrice: 0,\n// comparePrice: 0,\n// totalSavings: 0,\n// renderRating: null,\n// selectedOptions: {} as Options,\n// setSelectedOptions: () => {},\n// checkedBundle: undefined,\n// checkedGift: undefined,\n// setCheckedBundle: () => {},\n// setCheckedGift: () => {},\n// checkedCareBundle: undefined,\n// setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n const context = useContext(BizProductContext)\n if (!context) {\n throw new Error('useProductContext must be used in <ProductProvider>')\n }\n return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n product,\n isLogin,\n profile,\n isMobile,\n isDesktop,\n children,\n renderRating,\n freeGift,\n exchangePurchase,\n bundle,\n checkedBundle,\n checkedGift,\n setCheckedBundle,\n setCheckedGift,\n checkedExchangePurchase,\n setCheckedExchangePurchase,\n variant,\n selectedOptions,\n setSelectedOptions,\n compareData,\n coupon,\n finalPrice,\n comparePrice,\n totalSavings,\n savingDetail,\n setSavingDetail,\n selectedVariants,\n onAddToCart,\n onBuyNow,\n creditsRedemption,\n memberFunctionResult,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n buyNowLoading,\n addToCartLoading,\n}: PropsWithChildren<\n Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts' | 'addOrder' | 'setAddOrder'>\n>) => {\n const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<JoinedRecommendBuyProducts>({})\n const [addOrder, setAddOrder] = useState<Array<'bundle' | 'gift' | 'exchange'>>([])\n\n useEffect(() => {\n if (variant?.id) {\n setJoinedRecommendBuyProducts({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n gift: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setAddOrder([])\n }\n }, [variant?.id])\n\n return (\n <BizProductContext.Provider\n value={{\n product,\n variant,\n isMobile,\n isDesktop,\n isLogin,\n profile,\n coupon,\n renderRating,\n finalPrice,\n comparePrice,\n savingDetail,\n setSavingDetail,\n totalSavings,\n selectedOptions,\n setSelectedOptions,\n freeGift,\n exchangePurchase,\n checkedGift,\n setCheckedGift,\n checkedBundle,\n setCheckedBundle,\n bundle,\n compareData,\n selectedVariants,\n onAddToCart,\n onBuyNow,\n joinedRecommendBuyProducts,\n setJoinedRecommendBuyProducts,\n checkedExchangePurchase,\n setCheckedExchangePurchase,\n creditsRedemption,\n memberFunctionResult,\n openModal,\n openSignInPopup,\n openAuthCodePopup,\n openSignUpPopup,\n renderInstallments,\n onUseCouponChange,\n onUseMemberDiscountChange,\n discount,\n buyNowLoading,\n addToCartLoading,\n addOrder,\n setAddOrder,\n }}\n >\n {children}\n </BizProductContext.Provider>\n )\n}\n\nexport default ProductProvider\n"],
|
|
5
5
|
"mappings": "AAgQI,cAAAA,MAAA,oBAhQJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,EACA,aAAAC,MACK,QAwKA,MAAMC,EAAoBJ,EAAkC,CAAC,CAAuB,EAE9EK,GAAuB,IAAM,CAExC,GAAI,CADYJ,EAAWG,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOH,EAAWG,CAAiB,CACrC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,IAEM,CACJ,KAAM,CAACC,EAA4BC,CAA6B,EAAI/C,EAAqC,CAAC,CAAC,EACrG,CAACgD,EAAUC,CAAW,EAAIjD,EAAgD,CAAC,CAAC,EAElF,OAAAC,EAAU,IAAM,CACVoB,GAAS,KACX0B,EAA8B,CAC5B,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDE,EAAY,CAAC,CAAC,EAElB,EAAG,CAAC5B,GAAS,EAAE,CAAC,EAGdxB,EAACK,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAG,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAa,EACA,8BAAAC,EACA,wBAAA5B,EACA,2BAAAC,EACA,kBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,SAAAG,EACA,YAAAC,CACF,EAEC,SAAAvC,EACH,CAEJ,EAEA,IAAOwC,GAAQ9C",
|
|
6
6
|
"names": ["jsx", "createContext", "useContext", "useState", "useEffect", "BizProductContext", "useBizProductContext", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemption", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderInstallments", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "buyNowLoading", "addToCartLoading", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "addOrder", "setAddOrder", "BizProductProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Text as s,Button as G,Grid as Y,GridItem as q,Picture as A,Heading as Z}from"../../../../../components/index.js";import{useBizProductContext as F}from"../../../BizProductProvider.js";import{useEffect as ee,useMemo as B,useState as te}from"react";import{formatPrice as y}from"../../../utils/index.js";import{useAiuiContext as j}from"../../../../AiuiProvider/index.js";import K from"decimal.js";import{replaceTemplate as ae}from"../../../utils/textFormat.js";import{withLayout as ne}from"../../../../../shared/Styles.js";import{ExposureDetector as oe}from"../../../../../components/index.js";import{gaTrack as re}from"../../../../../shared/track.js";const le=()=>{const{locale:m="us",copyWriting:a}=j(),{product:u,variant:o,finalPrice:g,comparePrice:x,coupon:k,selectedOptions:d,selectedVariants:b,totalSavings:l,onAddToCart:D,onBuyNow:E,savingDetail:h,checkedBundle:N,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:p,setSavingDetail:I,addToCartLoading:P,buyNowLoading:L,profile:T,addOrder:S,setAddOrder:w}=F(),V=B(()=>u?.payload?.components?.find(r=>r.componentKey==="ProductSummary")?.data||{},[u?.payload]),[z]=b,_=B(()=>{const r=N?.variants.find(C=>C.variant.sku===z?.sku),i=new K(z?.price?.amount||0).minus(r?.price||z?.price?.amount).toNumber();let f=new K(z?.price?.amount||0);T?.email&&(f=f.minus(h?.member||0));const v=f.minus(h?.coupon).minus(i).toNumber();return Math.floor(v*100)/100},[z,N,T,h?.member,h?.coupon]),{bundleVariant:$,giftVariant:R,exchangeVariant:W}=ie()||{},[c,O]=te();ee(()=>{O({bundle:t.bundle?.value?void 0:$,gift:t.gift?.value?void 0:R,exchange:t.exchange?.value?void 0:W})},[$,R,W,t]);const H=B(()=>{const r=[];return S&&S.forEach((i,f)=>{t[i]?.value&&r.push({type:i,key:`${i}-${f}`})}),r},[S,t]),U=B(()=>{const r=d?.quantity||"",i=d?.color||d?.colour||d?.couleur||"";return`${r&&i?`${r} | ${i}`:r||i}`},[d?.quantity,d?.color,d?.colour,d?.couleur]),X=B(()=>(o?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[])?.find(v=>v?.galleries==="productList")?.images?.[0]?.image_1920||o.image?.url||o.image?.url,[o.image?.url,o?.payload?.components]);return o.availableForSale?e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16",children:e("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:n(Y,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[n(q,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[e(Z,{className:"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:V?.readyWant?.replace?.("{title}",u?.title)}),e("div",{className:"",children:e(A,{source:X,className:"lg-desktop:h-[320px] desktop:h-[272px] laptop:h-[191px] tablet:h-[380px] aspect-1 mx-auto h-[192px]",imgClassName:"object-cover h-full"})})]}),n(q,{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:[n("div",{children:[n("div",{className:"flex flex-col gap-4",children:[e(oe,{exposureKey:"listing_selector",onExposure:()=>{re({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${o.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:o.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:u.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:U})]})]}),n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:y({amount:_,currencyCode:o.price.currencyCode,locale:m})}),_<o?.price?.amount&&e(s,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:m})})]})]})}),H.map(({type:r,key:i})=>r==="gift"&&t?.gift?.value?e(J,{giftOperation:f=>{p?.({...t,gift:{value:void 0,canOperate:!0}}),O?.({...c,gift:f}),w?.(v=>v.filter(C=>C!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},i):r==="bundle"&&t?.bundle?.value?e(M,{bundleOperation:f=>{p?.({...t,bundle:{value:void 0,canOperate:!0}}),O?.({...c,bundle:f}),w?.(v=>v.filter(C=>C!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},i):r==="exchange"&&t?.exchange?.value?e(Q,{exchangeOperation:f=>{p?.({...t,exchange:{value:void 0,canOperate:!0}}),O?.({...c,exchange:f}),w?.(v=>v.filter(C=>C!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},i):null)]}),(c?.bundle||c?.gift||c?.exchange)&&n("div",{className:"desktop:mt-8 mt-6",children:[e(s,{className:"desktop:text-[18px] text-sm font-bold",html:V?.recommendBuy}),n("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[c?.exchange&&e(Q,{exchangeOperation:r=>{p?.({...t,exchange:{value:r,canOperate:!0}}),O?.({...c,exchange:void 0}),w?.(i=>[...i,"exchange"])},canOperate:t?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&e(M,{bundleOperation:r=>{I?.({...h,exchangePurchase:0}),p?.({...t,bundle:{value:r,canOperate:!0}}),O?.({...c,bundle:void 0}),w?.(i=>[...i,"bundle"])},canOperate:t?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&e(J,{giftOperation:r=>{p?.({...t,gift:{value:r,canOperate:!0}}),O?.({...c,gift:void 0}),w?.(i=>[...i,"gift"])},canOperate:t?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),n("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl text-right font-bold",html:`${ae(a?.totalPrice||"",{amount:y({amount:Math.floor(g*100)/100,currencyCode:o.price.currencyCode,locale:m})})}`}),l>0&&e(s,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:y({amount:x,currencyCode:o.price.currencyCode,locale:m})}),n("div",{className:"mt-4 flex justify-end gap-3",children:[e(G,{size:"lg",variant:"secondary",loading:P,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:a?.addToCart}),e(G,{size:"lg",loading:L,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:a?.shopNow})]})]})]})]})})}):null},ie=()=>{const{bundle:m,variant:a,checkedBundle:u,freeGift:o,checkedGift:g,exchangePurchase:x,checkedExchangePurchase:k}=F();let d,b,l;const{bundleList:D}=m||{},{giftList:E=[]}=o||{},{giftList:h=[]}=x||{},N=D?.filter(P=>P.variants.slice(1,P.variants.length).every(L=>L.variant.availableForSale))||[],[t]=N;d=u||t;const[p]=E?.filter(P=>P.availableForSale)??[];b=g||p;const[I]=h?.filter(P=>P.availableForSale)??[];return l=k||I,{bundleVariant:d,giftVariant:b,exchangeVariant:l}},M=({bundleOperation:m,bundleListItem:a,canOperate:u,status:o})=>{const{locale:g="us",copyWriting:x}=j(),{variant:k,setCheckedBundle:d}=F(),b=a?.variants.filter(l=>l.variant.sku!==k.sku);return e("div",{className:"",children:b?.map(l=>n("div",{className:"flex items-center justify-between gap-4",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:l?.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"}),e("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:l.variant.product.title})})]}),n("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:y({amount:l?.price||0,locale:g,currencyCode:l.variant?.price?.currencyCode||""})}),l.price<l.variant.price.amount&&e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:l.variant.price.amount||0,locale:g,currencyCode:l.variant?.price?.currencyCode||""})})]}),u&&e(G,{size:"icon",variant:"link",onClick:()=>{d?.(o?void 0:a),m?.(a)},className:"size-auto shrink-0 underline",children:o?x?.remove:x?.add})]})]},l.variant.id))})},J=({giftOperation:m,gift:a,status:u,canOperate:o})=>{const{locale:g="us",copyWriting:x}=j(),{freeGift:k,setCheckedGift:d}=F(),{freeLabel:b}=k||{},{options:l}=a||{},D=B(()=>{const E=l?.find(p=>p.name==="color"||p.name==="colour"||p.name==="couleur")||{},h=l?.find(p=>p.name==="quantity")||{},N=E?E.values?.[0]?.label:"",t=h?h.values?.[0]?.label:"";return`${N&&t?t+" | "+N:t||N} | ${b}`},[b,l]);return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:a?.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:b}),e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:a.price.amount,locale:g,currencyCode:a.price.currencyCode})})]}),o&&e(G,{size:"icon",variant:"link",onClick:()=>{d?.(u?void 0:a),m(a)},className:"size-auto shrink-0 underline",children:u?x?.remove:x?.add})]})]})},Q=({exchangeOperation:m,exchange:a,canOperate:u,status:o})=>{const{locale:g="us",copyWriting:x}=j(),{setCheckedExchangePurchase:k}=F();return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(A,{source:a?.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:y({amount:a.finalPrice?.amount||0,locale:g,currencyCode:a.price.currencyCode})}),e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:y({amount:a.price?.amount||0,locale:g,currencyCode:a.price.currencyCode})})]}),u&&e(G,{size:"icon",variant:"link",onClick:()=>{k?.(o?void 0:a),m(a)},className:"size-auto shrink-0 underline",children:o?x?.remove:x?.add})]})]})};var ye=ne(le);export{ye as default};
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Text as s,Button as A,Grid as ee,GridItem as q,Picture as F,Heading as te}from"../../../../../components/index.js";import{useBizProductContext as j}from"../../../BizProductProvider.js";import{useEffect as ae,useMemo as B,useState as ne}from"react";import{formatPrice as k}from"../../../utils/index.js";import{useAiuiContext as S}from"../../../../AiuiProvider/index.js";import K from"decimal.js";import{replaceTemplate as oe}from"../../../utils/textFormat.js";import{withLayout as ie}from"../../../../../shared/Styles.js";import{ExposureDetector as re}from"../../../../../components/index.js";import{gaTrack as le}from"../../../../../shared/track.js";const ce=()=>{const{locale:x="us",copyWriting:a}=S(),{product:u,variant:o,finalPrice:g,comparePrice:f,coupon:N,selectedOptions:d,selectedVariants:v,totalSavings:l,onAddToCart:D,onBuyNow:E,savingDetail:b,checkedBundle:P,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:p,setSavingDetail:$,addToCartLoading:O,buyNowLoading:G,profile:L,addOrder:I,setAddOrder:w}=j(),_=B(()=>u?.payload?.components?.find(i=>i.componentKey==="ProductSummary")?.data||{},[u?.payload]),[z]=v,T=B(()=>{const i=P?.variants.find(y=>y.variant.sku===z?.sku),r=new K(z?.price?.amount||0).minus(i?.price||z?.price?.amount).toNumber();let m=new K(z?.price?.amount||0);L?.email&&(m=m.minus(b?.member||0));const h=m.minus(b?.coupon).minus(r).toNumber();return Math.floor(h*100)/100},[z,P,L,b?.member,b?.coupon]),{bundleVariant:V,giftVariant:R,exchangeVariant:W}=se()||{},[c,C]=ne();ae(()=>{C({bundle:t.bundle?.value?void 0:V,gift:t.gift?.value?void 0:R,exchange:t.exchange?.value?void 0:W})},[V,R,W,t]);const H=B(()=>{const i=[];return I&&I.forEach((r,m)=>{t[r]?.value&&i.push({type:r,key:`${r}-${m}`})}),i},[I,t]),U=B(()=>{const i=d?.quantity||"",r=d?.color||d?.colour||d?.couleur||"";return`${i&&r?`${i} | ${r}`:i||r}`},[d?.quantity,d?.color,d?.colour,d?.couleur]),X=B(()=>{const i=o?.payload?.components?.find(Z=>Z.componentKey==="ProductSummary")?.data||{},{image_1920:r,image_1440:m,image_1024:h,image_768:y,image_390:Y}=i?.thumbnail||{};return(i?.thumbnail?`${r} 1920, ${m} 1440, ${h} 1024, ${y} 768, ${Y} 390`:o.image?.url)||o.image?.url},[o.image?.url,o?.payload?.components]);return o.availableForSale?e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 desktop:mt-[96px] lg-desktop:mt-[128px] mt-16",children:e("div",{className:"laptop:rounded-2xl bg-[#F5F5F7]",children:n(ee,{className:"tablet:p-8 tablet:!pb-0 px-4 pt-6",children:[n(q,{className:"laptop:col-start-1 laptop:col-span-5 col-span-12 flex flex-col justify-between gap-4",children:[e(te,{className:"lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] mb-4 text-[24px] font-bold leading-none [&>span]:text-[#D1D1D1]",html:_?.readyWant?.replace?.("{title}",u?.title)}),e("div",{className:"",children:e(F,{source:X,className:"lg-desktop:aspect-[644/320] desktop:aspect-[503/270] laptop:aspect-[332/190] tablet:aspect-[704/380] aspect-[358/190]",imgClassName:"object-cover h-full"})})]}),n(q,{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:[n("div",{children:[n("div",{className:"flex flex-col gap-4",children:[e(re,{exposureKey:"listing_selector",onExposure:()=>{le({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${o.sku}`,component_type:"image",component_name:"listing_selector",position:1}})},children:n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(F,{source:o.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:u.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:U})]})]}),n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:k({amount:T,currencyCode:o.price.currencyCode,locale:x})}),T<o?.price?.amount&&e(s,{className:"desktop:text-2xl laptop:text-xl text-base font-bold text-[#6D6D6F] line-through",html:k({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:x})})]})]})}),H.map(({type:i,key:r})=>i==="gift"&&t?.gift?.value?e(J,{giftOperation:m=>{p?.({...t,gift:{value:void 0,canOperate:!0}}),C?.({...c,gift:m}),w?.(h=>h.filter(y=>y!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},r):i==="bundle"&&t?.bundle?.value?e(M,{bundleOperation:m=>{p?.({...t,bundle:{value:void 0,canOperate:!0}}),C?.({...c,bundle:m}),w?.(h=>h.filter(y=>y!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},r):i==="exchange"&&t?.exchange?.value?e(Q,{exchangeOperation:m=>{p?.({...t,exchange:{value:void 0,canOperate:!0}}),C?.({...c,exchange:m}),w?.(h=>h.filter(y=>y!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},r):null)]}),(c?.bundle||c?.gift||c?.exchange)&&n("div",{className:"desktop:mt-8 mt-6",children:[e(s,{className:"desktop:text-[18px] text-sm font-bold",html:_?.recommendBuy}),n("div",{className:"desktop:gap-4 mt-4 flex flex-col gap-6",children:[c?.exchange&&e(Q,{exchangeOperation:i=>{p?.({...t,exchange:{value:i,canOperate:!0}}),C?.({...c,exchange:void 0}),w?.(r=>[...r,"exchange"])},canOperate:t?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&e(M,{bundleOperation:i=>{$?.({...b,exchangePurchase:0}),p?.({...t,bundle:{value:i,canOperate:!0}}),C?.({...c,bundle:void 0}),w?.(r=>[...r,"bundle"])},canOperate:t?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&e(J,{giftOperation:i=>{p?.({...t,gift:{value:i,canOperate:!0}}),C?.({...c,gift:void 0}),w?.(r=>[...r,"gift"])},canOperate:t?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),n("div",{className:"text-right",children:[e(s,{className:"laptop:text-xl desktop:text-2xl text-right font-bold",html:`${oe(a?.totalPrice||"",{amount:k({amount:Math.floor(g*100)/100,currencyCode:o.price.currencyCode,locale:x})})}`}),l>0&&e(s,{className:"laptop:text-xl desktop:text-2xl ml-1 text-base font-bold text-[#6D6D6F] line-through",html:k({amount:f,currencyCode:o.price.currencyCode,locale:x})}),n("div",{className:"mt-4 flex justify-end gap-3",children:[e(A,{size:"lg",variant:"secondary",loading:O,className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>D?.(),children:a?.addToCart}),e(A,{size:"lg",loading:G,variant:"primary",className:"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2",onClick:()=>E?.(),children:a?.shopNow})]})]})]})]})})}):null},se=()=>{const{bundle:x,variant:a,checkedBundle:u,freeGift:o,checkedGift:g,exchangePurchase:f,checkedExchangePurchase:N}=j();let d,v,l;const{bundleList:D}=x||{},{giftList:E=[]}=o||{},{giftList:b=[]}=f||{},P=D?.filter(O=>O.variants.slice(1,O.variants.length).every(G=>G.variant.availableForSale))||[],[t]=P;d=u||t;const[p]=E?.filter(O=>O.availableForSale)??[];v=g||p;const[$]=b?.filter(O=>O.availableForSale)??[];return l=N||$,{bundleVariant:d,giftVariant:v,exchangeVariant:l}},M=({bundleOperation:x,bundleListItem:a,canOperate:u,status:o})=>{const{locale:g="us",copyWriting:f}=S(),{variant:N,setCheckedBundle:d}=j(),v=a?.variants.filter(l=>l.variant.sku!==N.sku);return e("div",{className:"",children:v?.map(l=>n("div",{className:"flex items-center justify-between gap-4",children:[n("div",{className:"flex items-center gap-4",children:[e(F,{source:l?.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"}),e("div",{className:"tablet:max-w-none line-clamp-2 flex max-w-[178px] flex-col gap-[6px]",children:e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold",html:l.variant.product.title})})]}),n("div",{className:"flex flex-col items-end justify-center gap-1",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:k({amount:l?.price||0,locale:g,currencyCode:l.variant?.price?.currencyCode||""})}),l.price<l.variant.price.amount&&e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:k({amount:l.variant.price.amount||0,locale:g,currencyCode:l.variant?.price?.currencyCode||""})})]}),u&&e(A,{size:"icon",variant:"link",onClick:()=>{d?.(o?void 0:a),x?.(a)},className:"size-auto shrink-0 underline",children:o?f?.remove:f?.add})]})]},l.variant.id))})},J=({giftOperation:x,gift:a,status:u,canOperate:o})=>{const{locale:g="us",copyWriting:f}=S(),{freeGift:N,setCheckedGift:d}=j(),{freeLabel:v}=N||{},{options:l}=a||{},D=B(()=>{const E=l?.find(p=>p.name==="color"||p.name==="colour"||p.name==="couleur")||{},b=l?.find(p=>p.name==="quantity")||{},P=E?E.values?.[0]?.label:"",t=b?b.values?.[0]?.label:"";return`${P&&t?t+" | "+P:t||P} | ${v}`},[v,l]);return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(F,{source:a?.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]",html:D})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:v}),e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:k({amount:a.price.amount,locale:g,currencyCode:a.price.currencyCode})})]}),o&&e(A,{size:"icon",variant:"link",onClick:()=>{d?.(u?void 0:a),x(a)},className:"size-auto shrink-0 underline",children:u?f?.remove:f?.add})]})]})},Q=({exchangeOperation:x,exchange:a,canOperate:u,status:o})=>{const{locale:g="us",copyWriting:f}=S(),{setCheckedExchangePurchase:N}=j();return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(F,{source:a?.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"}),n("div",{className:"tablet:max-w-none flex max-w-[178px] flex-col gap-[6px]",children:[e(s,{className:"desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px] font-bold",html:a?.product?.title}),e(s,{className:"laptop:text-[14px] desktop:text-[18px] text-[12px] font-bold text-[#6D6D6F]"})]})]}),n("div",{className:"flex flex-col items-end justify-center gap-2",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(s,{className:"desktop:text-2xl text-base font-bold",html:k({amount:a.finalPrice?.amount||0,locale:g,currencyCode:a.price.currencyCode})}),e(s,{className:"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:k({amount:a.price?.amount||0,locale:g,currencyCode:a.price.currencyCode})})]}),u&&e(A,{size:"icon",variant:"link",onClick:()=>{N?.(o?void 0:a),x(a)},className:"size-auto shrink-0 underline",children:o?f?.remove:f?.add})]})]})};var Pe=ie(ce);export{Pe as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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'\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 = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\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 Math.floor(finalPrice * 100) / 100\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 variantProductGallery =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n const variantProductGalleryItem = variantProductGallery?.find(\n (variantItem: any) => variantItem?.galleries === 'productList'\n )\n const variantProductGalleryItemImage = variantProductGalleryItem?.images?.[0]?.image_1920 || variant.image?.url\n return variantProductGalleryItemImage || variant.image?.url\n }, [variant.image?.url, variant?.payload?.components])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop: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:h-[320px] desktop:h-[272px] laptop:h-[191px] tablet:h-[380px] aspect-1 mx-auto h-[192px]\"\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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop: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 desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop: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 <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\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=\"desktop: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=\"desktop: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=\"desktop: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=\"desktop: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] desktop: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=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "replaceTemplate", "withLayout", "ExposureDetector", "gaTrack", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "item", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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'\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 = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n }, [product?.payload])\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 Math.floor(finalPrice * 100) / 100\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 variantProductSummary =\n variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductSummary')?.data || {}\n const { image_1920, image_1440, image_1024, image_768, image_390 } = variantProductSummary?.thumbnail || {}\n const variantProductGalleryItemImage = variantProductSummary?.thumbnail\n ? `${image_1920} 1920, ${image_1440} 1440, ${image_1024} 1024, ${image_768} 768, ${image_390} 390`\n : variant.image?.url\n return variantProductGalleryItemImage || variant.image?.url\n }, [variant.image?.url, variant?.payload?.components])\n\n const isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 desktop: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] desktop: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] desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop: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=\"desktop:mt-8 mt-6\">\n <Text className=\"desktop:text-[18px] text-sm font-bold\" html={productSummaryData?.recommendBuy} />\n <div className=\"desktop: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 desktop:text-2xl text-right font-bold\"\n html={`${replaceTemplate(copyWriting?.totalPrice || '', { amount: formatPrice({ amount: Math.floor(finalPrice * 100) / 100, currencyCode: variant.price.currencyCode, locale }) })}`}\n />\n\n {totalSavings > 0 && (\n <Text\n className=\"laptop:text-xl desktop: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 <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"tablet:w-auto laptop:w-1/2 desktop:w-auto w-1/2\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.shopNow}\n </Button>\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=\"desktop: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=\"desktop: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=\"desktop: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=\"desktop: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] desktop: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=\"desktop:text-2xl text-base font-bold\" html={freeLabel} />\n <Text\n className=\"desktop: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=\"desktop: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] desktop: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=\"desktop: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=\"desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n html={formatPrice({\n amount: exchange.price?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n </div>\n )}\n {canOperate && (\n <Button\n size=\"icon\"\n variant=\"link\"\n onClick={() => {\n setCheckedExchangePurchase?.(status ? undefined : exchange)\n exchangeOperation(exchange)\n }}\n className=\"size-auto shrink-0 underline\"\n >\n {status ? copyWriting?.remove : copyWriting?.add}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "replaceTemplate", "withLayout", "ExposureDetector", "gaTrack", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "addOrder", "setAddOrder", "productSummaryData", "item", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "productOptionsText", "quantity", "color", "variantImage", "variantProductSummary", "image_1920", "image_1440", "image_1024", "image_768", "image_390", "key", "ProductGiftSummary", "gift", "prev", "t", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "options", "giftOptionsText", "giftColorOption", "option", "giftQuantityOption", "giftColorOptionText", "giftQuantityOptionText", "exchangeOperation", "setCheckedExchangePurchase", "ProductSummary_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as y,jsxs as x}from"react/jsx-runtime";import{cn as E}from"../../../../../helpers/index.js";import{useState as k,useCallback as R,useRef as T,useEffect as I,useMemo as M}from"react";const B=(t,
|
|
1
|
+
import{jsx as y,jsxs as x}from"react/jsx-runtime";import{cn as E}from"../../../../../helpers/index.js";import{useState as k,useCallback as R,useRef as T,useEffect as I,useMemo as M}from"react";const B=(t,a)=>{const[d,l]=k(null),s=T(null),c=T(new Map),p=T(!1),h=T(null);I(()=>{h.current=d},[d]),I(()=>{if(!t||t.length===0)return;s.current&&s.current.disconnect();const u=document.getElementById("purchase-bar"),f=u?u.clientHeight:100;c.current.clear();const e=[];if(t.forEach(o=>{const i=o.id||o.href?.replace("#",""),m=document.getElementById(i);m&&(c.current.set(i,o),e.push(m))}),e.length===0){l(t[0]);return}const n={root:null,rootMargin:`-${f}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},b=o=>{if(p.current)return;if((window.scrollY||document.documentElement.scrollTop)<f+50){const r=t[0];r&&h.current?.id!==r.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",r.label),l(r),a?.(r));return}const m=o.filter(r=>r.isIntersecting).sort((r,w)=>r.boundingClientRect.top-w.boundingClientRect.top);if(m.length>0){const w=m[0].target.id,v=c.current.get(w);v&&(l(v),a?.(v))}else{const r=[...o].sort((w,v)=>Math.abs(w.boundingClientRect.top)-Math.abs(v.boundingClientRect.top));if(r.length>0){const v=r[0].target.id,N=c.current.get(v);N&&(l(N),a?.(N))}}};s.current=new IntersectionObserver(b,n),e.forEach(o=>{s.current?.observe(o)});const g=()=>{if(p.current)return;if((window.scrollY||document.documentElement.scrollTop)<f+50){const i=t[0];i&&(l(i),a?.(i))}};return window.addEventListener("scroll",g,{passive:!0}),()=>{s.current&&s.current.disconnect(),window.removeEventListener("scroll",g)}},[t,a]),I(()=>{!d&&t&&t.length>0&&l(t[0])},[t,d]);const S=R(u=>{l(u);const f=u.id||u.href?.replace("#",""),e=document.getElementById(f);if(e){const n=document.getElementById("purchase-bar"),b=n?n.clientHeight:100;p.current=!0;const o=e.getBoundingClientRect().top+window.scrollY-b-10;window.scrollTo({top:o,behavior:"smooth"}),setTimeout(()=>{p.current=!1},1e3)}},[]);return{activeTab:d||t?.[0],setActiveTab:S}},C=({tabs:t,onSpyNavItemClick:a,className:d,renderRating:l})=>{const s=M(()=>l?[...t,{label:"Reviews",id:"review",href:""}]:t,[t,l]),{activeTab:c,setActiveTab:p}=B(s),h=T(null),S=T(new Map),u=R(e=>{p(e),a?.(e)},[a,p]);I(()=>{if(!c||!h.current)return;const e=S.current.get(c.id);if(!e)return;const n=h.current,b=e.getBoundingClientRect(),g=n.getBoundingClientRect(),o=b.left+b.width/2-g.left,i=g.width/2,m=o-i;n.scrollTo({left:n.scrollLeft+m,behavior:"smooth"})},[c?.id]);const f=R((e,n)=>{n?S.current.set(e,n):S.current.delete(e)},[]);return y("div",{ref:h,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:E("overflow-x-auto",d),children:y("div",{className:"tablet:gap-8 flex gap-6",children:s?.map(e=>y("button",{ref:n=>f(e.id,n),children:e.id==="review"?x("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[l,y("div",{className:E("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":c?.id===e.id})})]}):x("div",{className:E("desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":c?.id===e.id}),onClick:()=>u(e),children:[e.label,y("div",{className:E("desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":c?.id===e.id})})]})},e.id))})})};var L=C;export{L as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\n\n// \u81EA\u5B9A\u4E49 hook\uFF1A\u76D1\u542C\u9875\u9762\u6EDA\u52A8\uFF0C\u81EA\u52A8\u66F4\u65B0\u5F53\u524D\u6FC0\u6D3B\u7684 tab\nconst useScrollSpy = (tabs: ScrollSpyNavItem[], onActiveChange?: (tab: ScrollSpyNavItem) => void) => {\n const [activeTab, setActiveTab] = useState<ScrollSpyNavItem | null>(null)\n const observerRef = useRef<IntersectionObserver | null>(null)\n const sectionsRef = useRef<Map<string, ScrollSpyNavItem>>(new Map())\n const isManualScrollRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u4E3A\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\n const activeTabRef = useRef<ScrollSpyNavItem | null>(null) // \u7528 ref \u5B58\u50A8\u5F53\u524D\u6FC0\u6D3B\u7684 tab\uFF0C\u907F\u514D\u95ED\u5305\u95EE\u9898\n\n // \u540C\u6B65 activeTab \u5230 ref\n useEffect(() => {\n activeTabRef.current = activeTab\n }, [activeTab])\n\n useEffect(() => {\n if (!tabs || tabs.length === 0) return\n\n // \u6E05\u7406\u4E4B\u524D\u7684 observer\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n\n // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u521B\u5EFA Map \u5B58\u50A8 section \u4FE1\u606F\n sectionsRef.current.clear()\n const elements: Element[] = []\n\n tabs.forEach(tab => {\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n if (element) {\n sectionsRef.current.set(id, tab)\n elements.push(element)\n }\n })\n\n if (elements.length === 0) {\n // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5143\u7D20\uFF0C\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab \u4E3A\u6FC0\u6D3B\u72B6\u6001\n setActiveTab(tabs[0])\n return\n }\n\n // \u4F7F\u7528 IntersectionObserver \u76D1\u542C\u5143\u7D20\u8FDB\u5165\u89C6\u53E3\n const observerOptions: IntersectionObserverInit = {\n root: null,\n rootMargin: `-${navHeight}px 0px -50% 0px`, // \u4E0A\u65B9\u504F\u79FB\u5BFC\u822A\u680F\u9AD8\u5EA6\uFF0C\u4E0B\u65B9\u504F\u79FB50%\u89C6\u53E3\u9AD8\u5EA6\n threshold: [0, 0.25, 0.5, 0.75, 1],\n }\n\n const observerCallback: IntersectionObserverCallback = entries => {\n // \u5982\u679C\u662F\u624B\u52A8\u70B9\u51FB\u89E6\u53D1\u7684\u6EDA\u52A8\uFF0C\u4E0D\u8981\u66F4\u65B0\u72B6\u6001\n if (isManualScrollRef.current) {\n return\n }\n\n // \u68C0\u67E5\u662F\u5426\u6EDA\u52A8\u5230\u9875\u9762\u9876\u90E8\uFF08\u7279\u6B8A\u5904\u7406\u7B2C\u4E00\u4E2A\u5143\u7D20\uFF09\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n if (scrollTop < navHeight + 50) {\n // \u5728\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n const firstTab = tabs[0]\n if (firstTab && activeTabRef.current?.id !== firstTab.id) {\n console.log('\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:', firstTab.label)\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n return\n }\n\n // \u627E\u51FA\u6240\u6709\u6B63\u5728\u4EA4\u53C9\u7684 entries\n const intersectingEntries = entries\n .filter(entry => entry.isIntersecting)\n .sort((a, b) => {\n // \u6309\u7167\u5143\u7D20\u5728\u9875\u9762\u4E0A\u7684\u4F4D\u7F6E\u6392\u5E8F\uFF08\u4ECE\u4E0A\u5230\u4E0B\uFF09\n return a.boundingClientRect.top - b.boundingClientRect.top\n })\n\n if (intersectingEntries.length > 0) {\n // \u9009\u62E9\u6700\u4E0A\u9762\u7684\u6B63\u5728\u4EA4\u53C9\u7684\u5143\u7D20\n const topEntry = intersectingEntries[0]\n const id = topEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n } else {\n // \u5982\u679C\u6CA1\u6709\u5143\u7D20\u6B63\u5728\u4EA4\u53C9\uFF0C\u627E\u51FA\u6700\u63A5\u8FD1\u89C6\u53E3\u9876\u90E8\u7684\u5143\u7D20\n const sortedEntries = [...entries].sort((a, b) => {\n return Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top)\n })\n\n if (sortedEntries.length > 0) {\n const closestEntry = sortedEntries[0]\n const id = closestEntry.target.id\n const tab = sectionsRef.current.get(id)\n\n if (tab) {\n setActiveTab(tab)\n onActiveChange?.(tab)\n }\n }\n }\n }\n\n observerRef.current = new IntersectionObserver(observerCallback, observerOptions)\n\n // \u89C2\u5BDF\u6240\u6709 section \u5143\u7D20\n elements.forEach(element => {\n observerRef.current?.observe(element)\n })\n\n // \u6DFB\u52A0\u6EDA\u52A8\u4E8B\u4EF6\u76D1\u542C\uFF0C\u5904\u7406\u9875\u9762\u9876\u90E8\u7684\u60C5\u51B5\n const handleScroll = () => {\n if (isManualScrollRef.current) {\n return\n }\n\n const scrollTop = window.scrollY || document.documentElement.scrollTop\n // \u5982\u679C\u6EDA\u52A8\u5230\u63A5\u8FD1\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab\n if (scrollTop < navHeight + 50) {\n const firstTab = tabs[0]\n if (firstTab) {\n setActiveTab(firstTab)\n onActiveChange?.(firstTab)\n }\n }\n }\n\n window.addEventListener('scroll', handleScroll, { passive: true })\n\n return () => {\n if (observerRef.current) {\n observerRef.current.disconnect()\n }\n window.removeEventListener('scroll', handleScroll)\n }\n }, [tabs, onActiveChange])\n\n // \u521D\u59CB\u5316\u65F6\u8BBE\u7F6E\u7B2C\u4E00\u4E2A tab\n useEffect(() => {\n if (!activeTab && tabs && tabs.length > 0) {\n setActiveTab(tabs[0])\n }\n }, [tabs, activeTab])\n\n // \u624B\u52A8\u8BBE\u7F6E\u6FC0\u6D3B tab \u5E76\u6EDA\u52A8\u5230\u5BF9\u5E94\u4F4D\u7F6E\n const handleSetActiveTab = useCallback((tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n\n // \u6EDA\u52A8\u5230\u5BF9\u5E94\u7684\u951A\u70B9\n const id = tab.id || tab.href?.replace('#', '')\n const element = document.getElementById(id)\n\n if (element) {\n const purchaseBar = document.getElementById('purchase-bar')\n const navHeight = purchaseBar ? purchaseBar.clientHeight : 100\n\n // \u8BBE\u7F6E\u624B\u52A8\u6EDA\u52A8\u6807\u5FD7\n isManualScrollRef.current = true\n\n // \u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF08\u5143\u7D20\u9876\u90E8 - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u95F4\u8DDD\uFF09\n const elementTop = element.getBoundingClientRect().top + window.scrollY\n const scrollToPosition = elementTop - navHeight - 10\n\n window.scrollTo({\n top: scrollToPosition,\n behavior: 'smooth',\n })\n\n // \u6EDA\u52A8\u7ED3\u675F\u540E\u91CD\u7F6E\u6807\u5FD7\n setTimeout(() => {\n isManualScrollRef.current = false\n }, 1000) // 1\u79D2\u540E\u91CD\u7F6E\uFF0C\u786E\u4FDD\u6EDA\u52A8\u52A8\u753B\u5B8C\u6210\n }\n }, [])\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const combinedTabs = useMemo(() => {\n if (renderRating) {\n return [...tabs, { label: 'Reviews', id: 'review', href: '' }]\n }\n return tabs\n }, [tabs, renderRating])\n\n const { activeTab, setActiveTab } = useScrollSpy(combinedTabs)\n\n // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const onTabClick = useCallback(\n (tab: ScrollSpyNavItem) => {\n setActiveTab(tab)\n onSpyNavItemClick?.(tab)\n },\n [onSpyNavItemClick, setActiveTab]\n )\n\n // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n useEffect(() => {\n if (!activeTab || !scrollContainerRef.current) return\n\n const activeTabElement = tabRefs.current.get(activeTab.id)\n if (!activeTabElement) return\n\n const container = scrollContainerRef.current\n const tabRect = activeTabElement.getBoundingClientRect()\n const containerRect = container.getBoundingClientRect()\n\n // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n const containerCenter = containerRect.width / 2\n const scrollOffset = tabCenter - containerCenter\n\n container.scrollTo({\n left: container.scrollLeft + scrollOffset,\n behavior: 'smooth',\n })\n }, [activeTab?.id])\n\n // \u8BBE\u7F6E tab ref\n const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n if (element) {\n tabRefs.current.set(tabId, element)\n } else {\n tabRefs.current.delete(tabId)\n }\n }, [])\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('overflow-x-auto', className)}\n >\n <div className=\"tablet:gap-8 flex gap-6\">\n {combinedTabs?.map(tab => (\n <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n {tab.id === 'review' ? (\n <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n {renderRating}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n ) : (\n <div\n className={cn(\n 'desktop:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n }\n )}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'desktop:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </div>\n )}\n </button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "useState", "useCallback", "useRef", "useEffect", "useMemo", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "b", "sortedEntries", "handleScroll", "handleSetActiveTab", "scrollToPosition", "ScrollSpyNav", "onSpyNavItemClick", "className", "renderRating", "combinedTabs", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "el", "ScrollSpyNav_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as R}from"react/jsx-runtime";import W,{useEffect as _,useRef as s,useImperativeHandle as q}from"react";import{gsap as f}from"gsap";import{SplitText as
|
|
1
|
+
"use client";import{jsx as e,jsxs as R}from"react/jsx-runtime";import W,{useEffect as _,useRef as s,useImperativeHandle as q}from"react";import{gsap as f}from"gsap";import{SplitText as b}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as A}from"../../components/index.js";import{withLayout as G}from"../../shared/Styles.js";import{trackUrlRef as J}from"../../shared/trackUrlRef.js";import{useInView as K}from"react-intersection-observer";const k="link",y="title",L=W.forwardRef(({data:N,className:H,as:M="h2",weight:E="bold",mobFlexCol:$=!1},D)=>{const{title:o,caption:l,theme:u,extensions:i,align:a="left"}=N,g=s(null),r=s(null),t=s(null),n=s(null),{ref:z,inView:h}=K();return q(D,()=>g.current),_(()=>{f.registerPlugin(b,T);function P(){if(!r.current)return;const S=r.current?.clientHeight||80;t.current&&t.current.revert(),n.current&&n.current.kill(),t.current=new b(r.current,{type:"words",wordsClass:"word"});const c=t.current.words;f.set(c,{opacity:0}),n.current=T.create({trigger:r.current,start:"bottom bottom-=4%",end:`bottom+=${S*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:I=>{const V=I.progress,v=c.length||1,B=.5,m=1/v,w=m*(1-B),x=(v-1)*w+m,U=Math.min(1,x>0?V/x:0);c.forEach((j,C)=>{const F=C*w,O=m;let d=(U-F)/O;d=Math.max(0,Math.min(1,d)),f.set(j,{opacity:d})})}})}return h&&P(),()=>{t.current&&t.current.revert(),n.current&&n.current.kill()}},[h]),(o||l)&&R("div",{ref:g,id:i?.id,className:p("titleBottom title-box mb-6 flex items-end justify-between gap-2",{"md-tablet:flex-col md-tablet:items-start":$}),children:[e("div",{ref:z,className:p("flex-1 space-y-4",H,{"aiui-dark":u==="dark","text-center":a==="center","text-right":a==="right","text-left":a==="left"}),children:e(A,{ref:r,as:M,size:4,html:l||o,weight:E})}),i?.textLink&&R("a",{className:p({"aiui-dark":u==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:J(i?.link,`${k}_${y}`),"data-headless-type-name":`${k}#${y}`,"data-headless-title-desc-button":`${o}#${l}`,children:[e("div",{className:"flex-1 truncate whitespace-nowrap",children:i?.textLink}),e("div",{className:"size-6",children:e("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:e("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});L.displayName="Title";var st=G(L);export{st as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, as = 'h2', weight = 'bold', mobFlexCol = false }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n ref={innerRef}\n id={extensions?.id}\n className={cn('titleBottom title-box mb-6 flex items-end justify-between gap-2', {\n 'flex-col items-start': mobFlexCol,\n })}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
-
"mappings": "aAkGY,cAAAA,EAGA,QAAAC,MAHA,oBAjGZ,OAAOC,GAAS,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQd,EAAM,WAClB,CAAC,CAAE,KAAAe,EAAM,UAAAC,EAAW,GAAAC,EAAK,KAAM,OAAAC,EAAS,OAAQ,WAAAC,EAAa,EAAM,EAAGC,IAAQ,CAC5E,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,EAAO,WAAAC,EAAY,MAAAC,EAAQ,MAAO,EAAIV,EACxDW,EAAWxB,EAAuB,IAAI,EACtCyB,EAAWzB,EAA2B,IAAI,EAC1C0B,EAAoB1B,EAAyB,IAAI,EACjD2B,EAAmB3B,EAA6B,IAAI,EAEpD,CAAE,IAAK4B,EAAW,OAAAC,CAAO,EAAIpB,EAAU,EAE7C,OAAAR,EAAoBiB,EAAK,IAAMM,EAAS,OAAyB,EAEjEzB,EAAU,IAAM,CACdG,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAAS0B,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GAC7CC,EAAkB,SACpBA,EAAkB,QAAQ,OAAO,EAE/BC,EAAiB,SACnBA,EAAiB,QAAQ,KAAK,EAEhCD,EAAkB,QAAU,IAAIvB,EAAUsB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxCxB,EAAK,IAAI8B,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAUvB,EAAc,OAAO,CAC9C,QAASqB,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,oBAAqB,GACrB,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,QAAU,EACxBI,EAAU,GACVC,EAAW,EAAIF,EACfG,EAAOD,GAAY,EAAID,GACvBG,GAAWJ,EAAQ,GAAKG,EAAOD,EAC/BG,EAAqB,KAAK,IAAI,EAAGD,EAAU,EAAIL,EAAWK,EAAU,CAAC,EAC3EP,EAAM,QAAQ,CAACS,EAAWC,IAAc,CACtC,MAAMC,EAAQD,EAAIJ,EACZM,EAAQP,EACd,IAAIQ,GAAWL,EAAqBG,GAASC,EAC7CC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAO,CAAC,EAC1C3C,EAAK,IAAIuC,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIhB,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,GAGRV,GAASC,IACRvB,EAAC,OACC,IAAK2B,EACL,GAAIF,GAAY,GAChB,UAAWjB,EAAG,kEAAmE,CAC/E,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n ({ data, className, as = 'h2', weight = 'bold', mobFlexCol = false }, ref) => {\n const { title, caption, theme, extensions, align = 'left' } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n ref={innerRef}\n id={extensions?.id}\n className={cn('titleBottom title-box mb-6 flex items-end justify-between gap-2', {\n 'md-tablet:flex-col md-tablet:items-start': mobFlexCol,\n })}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1 space-y-4', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-right': align === 'right',\n 'text-left': align === 'left',\n })}\n >\n <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n </div>\n {extensions?.textLink && (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </a>\n )}\n </div>\n )\n )\n }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "as", "weight", "mobFlexCol", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
|
|
7
7
|
}
|