@anker-in/headless-ui 1.0.26-alpha.1763367560339 → 1.0.26-alpha.1763429992784
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +2 -0
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/Listing/BizProductProvider.d.ts +3 -1
- package/dist/cjs/biz-components/Listing/BizProductProvider.js +1 -1
- package/dist/cjs/biz-components/Listing/BizProductProvider.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +4 -4
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +2 -0
- package/dist/esm/biz-components/Listing/BizProductProvider.d.ts +3 -1
- package/dist/esm/biz-components/Listing/BizProductProvider.js +1 -1
- package/dist/esm/biz-components/Listing/BizProductProvider.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Text as r,Button as O,Grid as X,GridItem as T,Picture as w,Heading as Y}from"../../../../../components";import{useBizProductContext as B}from"../../../BizProductProvider";import{useEffect as J,useMemo as M,useState as H}from"react";import{formatPrice as g}from"../../../utils";import{useAiuiContext as A}from"../../../../AiuiProvider";import K from"decimal.js";import{replaceTemplate as Z}from"../../../utils/textFormat";import{withLayout as ee}from"../../../../../shared/Styles.js";import{ExposureDetector as te}from"../../../../../components/index.js";import{gaTrack as ae}from"../../../../../shared/track.js";const ne=()=>{const{locale:u="us",copyWriting:a}=A(),{product:d,variant:o,finalPrice:p,comparePrice:f,coupon:C,selectedOptions:m,selectedVariants:l,totalSavings:D,onAddToCart:j,onBuyNow:F,savingDetail:h,checkedBundle:z,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:v,setSavingDetail:L,addToCartLoading:b,buyNowLoading:G,profile:S}=B(),[E]=l,R=M(()=>{const c=z?.variants.find(P=>P.variant.sku===E?.sku),s=new K(E?.price?.amount||0).minus(c?.price||E?.price?.amount).toNumber();let x=new K(E?.price?.amount||0);S?.email&&(x=x.minus(h?.member||0));const y=x.minus(h?.coupon).minus(s).toNumber();return Math.floor(y*100)/100},[E,z,S,h?.member,h?.coupon]);if(!o.availableForSale)return null;const{bundleVariant:V,giftVariant:_,exchangeVariant:I}=oe()||{},[i,N]=H(),[$,k]=H([]);J(()=>{N({bundle:t.bundle?.value?void 0:V,gift:t.gift?.value?void 0:_,exchange:t.exchange?.value?void 0:I})},[V,_,I,t]);const U=M(()=>{const c=[];return $.forEach((s,x)=>{t[s]?.value&&c.push({type:s,key:`${s}-${x}`})}),c},[$,t]);return J(()=>{k([])},[o?.id]),e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:e("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:n(X,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[n(T,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[e(Y,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${d.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"",children:e(w,{source:o.image?.url||d?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-[center_36%]"})})]}),n(T,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[n("div",{children:[n("div",{className:"flex flex-col gap-4",children:[e(te,{exposureKey:"listing_selector",onExposure:()=>{ae({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",children:[n("div",{className:"shrink-0 flex items-center gap-4",children:[e(w,{source:o.image?.url||d?.images?.[0]?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:d.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${m.color||m.colour||m.couleur}`})]})]}),n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:R,currencyCode:o.price.currencyCode,locale:u})}),R<o?.price?.amount&&e(r,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:g({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:u})})]})]})}),U.map(({type:c,key:s})=>c==="gift"&&t?.gift?.value?e(q,{giftOperation:x=>{v?.({...t,gift:{value:void 0,canOperate:!0}}),N?.({...i,gift:x}),k(y=>y.filter(P=>P!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},s):c==="bundle"&&t?.bundle?.value?e(W,{bundleOperation:x=>{v?.({...t,bundle:{value:void 0,canOperate:!0}}),N?.({...i,bundle:x}),k(y=>y.filter(P=>P!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},s):c==="exchange"&&t?.exchange?.value?e(Q,{exchangeOperation:x=>{v?.({...t,exchange:{value:void 0,canOperate:!0}}),N?.({...i,exchange:x}),k(y=>y.filter(P=>P!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},s):null)]}),(i?.bundle||i?.gift||i?.exchange)&&n("div",{className:"mt-6",children:[e(r,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),n("div",{className:"flex flex-col gap-6 mt-6",children:[i?.exchange&&e(Q,{exchangeOperation:c=>{v?.({...t,exchange:{value:c,canOperate:!0}}),N?.({...i,exchange:void 0}),k(s=>[...s,"exchange"])},canOperate:t?.exchange?.canOperate,status:!i?.exchange,exchange:i?.exchange}),i?.bundle&&e(W,{bundleOperation:c=>{L?.({...h,exchangePurchase:0}),v?.({...t,bundle:{value:c,canOperate:!0}}),N?.({...i,bundle:void 0}),k(s=>[...s,"bundle"])},canOperate:t?.bundle?.canOperate,status:!i?.bundle,bundleListItem:i?.bundle}),i?.gift&&e(q,{giftOperation:c=>{v?.({...t,gift:{value:c,canOperate:!0}}),N?.({...i,gift:void 0}),k(s=>[...s,"gift"])},canOperate:t?.gift?.canOperate,status:!i?.gift,gift:i?.gift})]})]})]}),n("div",{className:"text-right",children:[e(r,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${Z(a?.totalPrice||"",{amount:g({amount:Math.floor(p*100)/100,currencyCode:o.price.currencyCode,locale:u})})}`}),D>0&&e(r,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:g({amount:f,currencyCode:o.price.currencyCode,locale:u})}),n("div",{className:"flex gap-3 mt-2 justify-end",children:[e(O,{size:"lg",variant:"secondary",loading:b,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>j?.(),children:a?.addToCart}),e(O,{size:"lg",loading:G,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>F?.(),children:a?.shopNow})]})]})]})]})})})},oe=()=>{const{bundle:u,variant:a,checkedBundle:d,freeGift:o,checkedGift:p,exchangePurchase:f,checkedExchangePurchase:C}=B();let m,l,D;const{bundleList:j}=u||{},{giftList:F=[]}=o||{},{giftList:h=[]}=f||{},z=j?.filter(b=>b.variants.slice(1,b.variants.length).every(G=>G.variant.availableForSale))||[],[t]=z;m=d||t;const[v]=F?.filter(b=>b.availableForSale);l=p||v;const[L]=h?.filter(b=>b.availableForSale);return D=C||L,{bundleVariant:m,giftVariant:l,exchangeVariant:D}},W=({bundleOperation:u,bundleListItem:a,canOperate:d,status:o})=>{const{locale:p="us"}=A(),{variant:f,setCheckedBundle:C}=B(),m=a?.variants.filter(l=>l.variant.sku!==f.sku);return e("div",{className:"",children:m?.map(l=>n("div",{className:"flex items-center gap-4 justify-between",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:l?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(r,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:l.variant.product.title})})]}),n("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:l?.price||0,locale:p,currencyCode:l.variant?.price?.currencyCode||""})}),l.price<l.variant.price.amount&&e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:l.variant.price.amount||0,locale:p,currencyCode:l.variant?.price?.currencyCode||""})})]}),d&&e(O,{size:"icon",variant:"link",onClick:()=>{C?.(o?void 0:a),u?.(a)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]},l.variant.id))})},q=({giftOperation:u,gift:a,status:d,canOperate:o})=>{const{locale:p="us"}=A(),{freeGift:f,setCheckedGift:C}=B(),{freeLabel:m,count:l}=f||{};return n("div",{className:"flex items-center justify-between",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:a?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:a?.product?.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${l} | ${m}`})]})]}),n("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:m}),e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:a.price.amount,locale:p,currencyCode:a.price.currencyCode})})]}),o&&e(O,{size:"icon",variant:"link",onClick:()=>{C?.(d?void 0:a),u(a)},className:"shrink-0 size-auto underline",children:d?"Remove":"Add"})]})]})},Q=({exchangeOperation:u,exchange:a,canOperate:d,status:o})=>{const{locale:p="us"}=A(),{setCheckedExchangePurchase:f}=B();return n("div",{className:"flex items-center justify-between",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:a?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:a?.product?.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),n("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:a.finalPrice?.amount||0,locale:p,currencyCode:a.price.currencyCode})}),e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:a.price?.amount||0,locale:p,currencyCode:a.price.currencyCode})})]}),d&&e(O,{size:"icon",variant:"link",onClick:()=>{f?.(o?void 0:a),u(a)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})};var ve=ee(ne);export{ve as default};
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Text as r,Button as O,Grid as Q,GridItem as T,Picture as w,Heading as U}from"../../../../../components";import{useBizProductContext as B}from"../../../BizProductProvider";import{useEffect as X,useMemo as J,useState as Y}from"react";import{formatPrice as g}from"../../../utils";import{useAiuiContext as A}from"../../../../AiuiProvider";import M from"decimal.js";import{replaceTemplate as Z}from"../../../utils/textFormat";import{withLayout as ee}from"../../../../../shared/Styles.js";import{ExposureDetector as te}from"../../../../../components/index.js";import{gaTrack as ae}from"../../../../../shared/track.js";const ne=()=>{const{locale:u="us",copyWriting:a}=A(),{product:d,variant:o,finalPrice:p,comparePrice:f,coupon:P,selectedOptions:m,selectedVariants:l,totalSavings:D,onAddToCart:j,onBuyNow:F,savingDetail:h,checkedBundle:z,joinedRecommendBuyProducts:t,setJoinedRecommendBuyProducts:v,setSavingDetail:L,addToCartLoading:b,buyNowLoading:G,profile:R,addOrder:S,setAddOrder:C}=B(),[E]=l,V=J(()=>{const c=z?.variants.find(y=>y.variant.sku===E?.sku),s=new M(E?.price?.amount||0).minus(c?.price||E?.price?.amount).toNumber();let x=new M(E?.price?.amount||0);R?.email&&(x=x.minus(h?.member||0));const N=x.minus(h?.coupon).minus(s).toNumber();return Math.floor(N*100)/100},[E,z,R,h?.member,h?.coupon]);if(!o.availableForSale)return null;const{bundleVariant:_,giftVariant:I,exchangeVariant:$}=oe()||{},[i,k]=Y();X(()=>{k({bundle:t.bundle?.value?void 0:_,gift:t.gift?.value?void 0:I,exchange:t.exchange?.value?void 0:$})},[_,I,$,t]);const q=J(()=>{const c=[];return S&&S.forEach((s,x)=>{t[s]?.value&&c.push({type:s,key:`${s}-${x}`})}),c},[S,t]);return e("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:e("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:n(Q,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[n(T,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[e(U,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${d.title} is ready <br/><span>Just the way you want it.</span>`}),e("div",{className:"",children:e(w,{source:o.image?.url||d?.images?.[0]?.url,className:"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]",imgClassName:"object-cover h-full object-[center_36%]"})})]}),n(T,{className:"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[n("div",{children:[n("div",{className:"flex flex-col gap-4",children:[e(te,{exposureKey:"listing_selector",onExposure:()=>{ae({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(w,{source:o.image?.url||d?.images?.[0]?.url,className:"size-10 shrink-0 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:d.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${m.color||m.colour||m.couleur}`})]})]}),n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:V,currencyCode:o.price.currencyCode,locale:u})}),V<o?.price?.amount&&e(r,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:g({amount:o?.price?.amount,currencyCode:o.price.currencyCode,locale:u})})]})]})}),q.map(({type:c,key:s})=>c==="gift"&&t?.gift?.value?e(K,{giftOperation:x=>{v?.({...t,gift:{value:void 0,canOperate:!0}}),k?.({...i,gift:x}),C?.(N=>N.filter(y=>y!=="gift"))},status:!!t?.gift,gift:t?.gift?.value,canOperate:t?.gift?.canOperate},s):c==="bundle"&&t?.bundle?.value?e(H,{bundleOperation:x=>{v?.({...t,bundle:{value:void 0,canOperate:!0}}),k?.({...i,bundle:x}),C?.(N=>N.filter(y=>y!=="bundle"))},status:!!t?.bundle,bundleListItem:t?.bundle?.value,canOperate:t?.bundle?.canOperate},s):c==="exchange"&&t?.exchange?.value?e(W,{exchangeOperation:x=>{v?.({...t,exchange:{value:void 0,canOperate:!0}}),k?.({...i,exchange:x}),C?.(N=>N.filter(y=>y!=="exchange"))},status:!!t?.exchange,canOperate:t?.exchange?.canOperate,exchange:t?.exchange?.value},s):null)]}),(i?.bundle||i?.gift||i?.exchange)&&n("div",{className:"mt-6 desktop:mt-8",children:[e(r,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),n("div",{className:"flex flex-col gap-6 mt-4 desktop:gap-4",children:[i?.exchange&&e(W,{exchangeOperation:c=>{v?.({...t,exchange:{value:c,canOperate:!0}}),k?.({...i,exchange:void 0}),C?.(s=>[...s,"exchange"])},canOperate:t?.exchange?.canOperate,status:!i?.exchange,exchange:i?.exchange}),i?.bundle&&e(H,{bundleOperation:c=>{L?.({...h,exchangePurchase:0}),v?.({...t,bundle:{value:c,canOperate:!0}}),k?.({...i,bundle:void 0}),C?.(s=>[...s,"bundle"])},canOperate:t?.bundle?.canOperate,status:!i?.bundle,bundleListItem:i?.bundle}),i?.gift&&e(K,{giftOperation:c=>{v?.({...t,gift:{value:c,canOperate:!0}}),k?.({...i,gift:void 0}),C?.(s=>[...s,"gift"])},canOperate:t?.gift?.canOperate,status:!i?.gift,gift:i?.gift})]})]})]}),n("div",{className:"text-right",children:[e(r,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${Z(a?.totalPrice||"",{amount:g({amount:Math.floor(p*100)/100,currencyCode:o.price.currencyCode,locale:u})})}`}),D>0&&e(r,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:g({amount:f,currencyCode:o.price.currencyCode,locale:u})}),n("div",{className:"gap-3 mt-4 flex justify-end",children:[e(O,{size:"lg",variant:"secondary",loading:b,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>j?.(),children:a?.addToCart}),e(O,{size:"lg",loading:G,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>F?.(),children:a?.shopNow})]})]})]})]})})})},oe=()=>{const{bundle:u,variant:a,checkedBundle:d,freeGift:o,checkedGift:p,exchangePurchase:f,checkedExchangePurchase:P}=B();let m,l,D;const{bundleList:j}=u||{},{giftList:F=[]}=o||{},{giftList:h=[]}=f||{},z=j?.filter(b=>b.variants.slice(1,b.variants.length).every(G=>G.variant.availableForSale))||[],[t]=z;m=d||t;const[v]=F?.filter(b=>b.availableForSale);l=p||v;const[L]=h?.filter(b=>b.availableForSale);return D=P||L,{bundleVariant:m,giftVariant:l,exchangeVariant:D}},H=({bundleOperation:u,bundleListItem:a,canOperate:d,status:o})=>{const{locale:p="us"}=A(),{variant:f,setCheckedBundle:P}=B(),m=a?.variants.filter(l=>l.variant.sku!==f.sku);return e("div",{className:"",children:m?.map(l=>n("div",{className:"flex items-center gap-4 justify-between",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:l?.variant?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),e("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:e(r,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:l.variant.product.title})})]}),n("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:l?.price||0,locale:p,currencyCode:l.variant?.price?.currencyCode||""})}),l.price<l.variant.price.amount&&e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:l.variant.price.amount||0,locale:p,currencyCode:l.variant?.price?.currencyCode||""})})]}),d&&e(O,{size:"icon",variant:"link",onClick:()=>{P?.(o?void 0:a),u?.(a)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]},l.variant.id))})},K=({giftOperation:u,gift:a,status:d,canOperate:o})=>{const{locale:p="us"}=A(),{freeGift:f,setCheckedGift:P}=B(),{freeLabel:m,count:l}=f||{};return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:a?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:a?.product?.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${l} | ${m}`})]})]}),n("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:m}),e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:a.price.amount,locale:p,currencyCode:a.price.currencyCode})})]}),o&&e(O,{size:"icon",variant:"link",onClick:()=>{P?.(d?void 0:a),u(a)},className:"shrink-0 size-auto underline",children:d?"Remove":"Add"})]})]})},W=({exchangeOperation:u,exchange:a,canOperate:d,status:o})=>{const{locale:p="us"}=A(),{setCheckedExchangePurchase:f}=B();return n("div",{className:"flex items-center justify-between gap-6",children:[n("div",{className:"flex items-center gap-4",children:[e(w,{source:a?.image?.url,className:"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),n("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[e(r,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:a?.product?.title}),e(r,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),n("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!a&&n("div",{className:"flex items-center gap-1",children:[e(r,{className:"text-base desktop:text-2xl font-bold",html:g({amount:a.finalPrice?.amount||0,locale:p,currencyCode:a.price.currencyCode})}),e(r,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:g({amount:a.price?.amount||0,locale:p,currencyCode:a.price.currencyCode})})]}),d&&e(O,{size:"icon",variant:"link",onClick:()=>{f?.(o?void 0:a),u(a)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})};var ve=ee(ne);export{ve 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'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\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 } = useBizProductContext()\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 isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n bundle?: BundleListItem\n gift?: ProductVariant\n exchange?: ProductVariant\n }>()\n // \u8BB0\u5F55\u6DFB\u52A0\u987A\u5E8F\n const [addOrder, setAddOrder] = useState<Array<'bundle' | 'gift' | 'exchange'>>([])\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 addOrder.forEach((type, index) => {\n if (joinedRecommendBuyProducts[type]?.value) {\n result.push({ type, key: `${type}-${index}` })\n }\n })\n \n return result\n }, [addOrder, joinedRecommendBuyProducts])\n\n // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u91CD\u7F6E\u6DFB\u52A0\u987A\u5E8F\n useEffect(() => {\n setAddOrder([])\n }, [variant?.id])\n\n return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n <Heading\n className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n />\n <div className=\"\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n imgClassName=\"object-cover h-full object-[center_36%]\"\n />\n </div>\n </GridItem>\n <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\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\">\n <div className=\"shrink-0 flex items-center gap-4\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={product.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl 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=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\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=\"mt-6\">\n <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n <div className=\"flex flex-col gap-6 mt-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 font-bold text-right\"\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=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"flex gap-3 mt-2 justify-end\">\n <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\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' } = 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 gap-4 justify-between\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-1 justify-center\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl 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=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {!!status ? 'Remove' : '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' } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel, count } = freeGift || {}\n\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={gift?.image?.url}\n className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={gift?.product?.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x${count} | ${freeLabel}`}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {status ? 'Remove' : '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' } = useAiuiContext()\n const { setCheckedExchangePurchase } = useBizProductContext()\n\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <Picture\n source={exchange?.image?.url}\n className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={exchange?.product?.title}\n />\n <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {status ? 'Remove' : 'Add'}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
-
"mappings": "
|
|
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", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport Decimal from 'decimal.js'\nimport { replaceTemplate } from '../../../utils/textFormat'\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 [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 isAvailable = variant.availableForSale\n if (!isAvailable) return null\n\n const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\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 return (\n <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]\">\n <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n <Grid className=\"px-4 pt-6 tablet:p-8 tablet:!pb-0\">\n <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between\">\n <Heading\n className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n />\n <div className=\"\">\n <Picture\n source={variant.image?.url || product?.images?.[0]?.url}\n className=\"lg-desktop:aspect-[644/368] desktop:aspect-[503/272] laptop:aspect-[331/191] tablet:aspect-[704/380] aspect-[358/192]\"\n imgClassName=\"object-cover h-full object-[center_36%]\"\n />\n </div>\n </GridItem>\n <GridItem className=\"col-span-12 mt-8 pb-6 tablet:pb-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between\">\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=\"size-10 shrink-0 laptop:size-12 p-2 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={product.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n />\n </div>\n </div>\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl 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=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\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=\"mt-6 desktop:mt-8\">\n <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n <div className=\"flex flex-col gap-6 mt-4 desktop:gap-4\">\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 font-bold text-right\"\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=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n <div className=\"gap-3 mt-4 flex justify-end\">\n <Button\n size=\"lg\"\n variant=\"secondary\"\n loading={addToCartLoading}\n className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n onClick={() => onAddToCart?.()}\n >\n {copyWriting?.addToCart}\n </Button>\n <Button\n size=\"lg\"\n loading={buyNowLoading}\n variant=\"primary\"\n className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\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' } = 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 gap-4 justify-between\" key={bundleVariant.variant.id}>\n <div className=\"flex items-center gap-4\">\n <Picture\n source={bundleVariant?.variant?.image?.url}\n className=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n html={bundleVariant.variant.product.title}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-1 justify-center\">\n {!!bundleListItem && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl 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=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {!!status ? 'Remove' : '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' } = useAiuiContext()\n const { freeGift, setCheckedGift } = useBizProductContext()\n const { freeLabel, count } = freeGift || {}\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=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={gift?.product?.title}\n />\n <Text\n className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n html={`x${count} | ${freeLabel}`}\n />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {!!gift && (\n <div className=\"flex items-center gap-1\">\n <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {status ? 'Remove' : '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' } = 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=\"size-10 laptop:size-12 p-2 lg-desktop:size-16 shrink-0 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg\"\n />\n <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n <Text\n className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n html={exchange?.product?.title}\n />\n <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n </div>\n </div>\n <div className=\"flex flex-col items-end gap-2 justify-center\">\n {!!exchange && (\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-base desktop:text-2xl font-bold\"\n html={formatPrice({\n amount: exchange.finalPrice?.amount || 0,\n locale,\n currencyCode: exchange.price.currencyCode,\n })}\n />\n <Text\n className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\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=\"shrink-0 size-auto underline\"\n >\n {status ? 'Remove' : 'Add'}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(ProductSummary)\n"],
|
|
5
|
+
"mappings": "AA0FU,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1FV,OAAS,QAAAC,EAAM,UAAAC,EAAmB,QAAAC,EAAM,YAAAC,EAAU,WAAAC,EAAS,WAAAC,MAAe,4BAC1E,OAAS,wBAAAC,MAA4B,8BACrC,OAAS,aAAAC,EAAW,WAAAC,EAAS,YAAAC,MAAgB,QAC7C,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,kBAAAC,MAAsB,2BAE/B,OAAOC,MAAa,aACpB,OAAS,mBAAAC,MAAuB,4BAChC,OAAS,cAAAC,OAAkB,kCAC3B,OAAS,oBAAAC,OAAwB,qCACjC,OAAS,WAAAC,OAAe,iCAExB,MAAMC,GAAiB,IAAM,CAC3B,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIR,EAAe,EAChD,CACJ,QAAAS,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,EAAIjC,EAAqB,EAEnB,CAACkC,CAAqB,EAAId,EAE1Be,EAAoBjC,EAAQ,IAAM,CACtC,MAAMkC,EAAuBX,GAAe,SAAS,KAAKY,GAAKA,EAAE,QAAQ,MAAQH,GAAuB,GAAG,EACrGI,EAAqB,IAAIhC,EAAQ4B,GAAuB,OAAO,QAAU,CAAC,EAC7E,MAAME,GAAsB,OAASF,GAAuB,OAAO,MAAM,EACzE,SAAS,EACZ,IAAIK,EAAsB,IAAIjC,EAAQ4B,GAAuB,OAAO,QAAU,CAAC,EACzEH,GAAS,QACbQ,EAAsBA,EAAoB,MAAMf,GAAc,QAAU,CAAC,GAE3E,MAAMR,EAAauB,EAAoB,MAAMf,GAAc,MAAM,EAAE,MAAMc,CAAkB,EAAE,SAAS,EACtG,OAAO,KAAK,MAAMtB,EAAa,GAAG,EAAI,GACxC,EAAG,CAACkB,EAAuBT,EAAeM,EAASP,GAAc,OAAQA,GAAc,MAAM,CAAC,EAG9F,GAAI,CADgBT,EAAQ,iBACV,OAAO,KAEzB,KAAM,CAAE,cAAAyB,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,EAAIC,GAAwB,GAAK,CAAC,EAChF,CAACC,EAA6BC,CAA8B,EAAI1C,EAInE,EAEHF,EAAU,IAAM,CACd4C,EAA+B,CAC7B,OAAQnB,EAA2B,QAAQ,MAAQ,OAAYc,EAC/D,KAAMd,EAA2B,MAAM,MAAQ,OAAYe,EAC3D,SAAUf,EAA2B,UAAU,MAAQ,OAAYgB,CACrE,CAAC,CACH,EAAG,CAACF,EAAeC,EAAaC,EAAiBhB,CAA0B,CAAC,EAG5E,MAAMoB,EAAwB5C,EAAQ,IAAM,CAC1C,MAAM6C,EAAuE,CAAC,EAG9E,OAAIf,GACFA,EAAS,QAAQ,CAACgB,EAAMC,IAAU,CAC5BvB,EAA2BsB,CAAI,GAAG,OACpCD,EAAO,KAAK,CAAE,KAAAC,EAAM,IAAK,GAAGA,CAAI,IAAIC,CAAK,EAAG,CAAC,CAEjD,CAAC,EAGIF,CACT,EAAG,CAACf,EAAUN,CAA0B,CAAC,EAEzC,OACElC,EAAC,OAAI,UAAU,8FACb,SAAAA,EAAC,OAAI,UAAU,kCACb,SAAAC,EAACG,EAAA,CAAK,UAAU,oCACd,UAAAH,EAACI,EAAA,CAAS,UAAU,uFAClB,UAAAL,EAACO,EAAA,CACC,UAAU,+HACV,KAAM,GAAGe,EAAQ,KAAK,wDACxB,EACAtB,EAAC,OAAI,UAAU,GACb,SAAAA,EAACM,EAAA,CACC,OAAQiB,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,yHACV,aAAa,0CACf,EACF,GACF,EACArB,EAACI,EAAA,CAAS,UAAU,yHAClB,UAAAJ,EAAC,OACC,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACiB,GAAA,CACC,YAAY,mBACZ,WAAY,IAAM,CAChBC,GAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,sBAAsBK,EAAQ,GAAG,GAC7C,eAAgB,QAChB,eAAgB,mBAChB,SAAU,CACZ,CACF,CAAC,CACH,EAEA,SAAAtB,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CACC,OAAQiB,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,sIACZ,EACArB,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACE,EAAA,CACC,UAAU,gFACV,KAAMoB,EAAQ,MAChB,EACAtB,EAACE,EAAA,CACC,UAAU,8EACV,KAAM,QAAQyB,EAAgB,OAASA,EAAgB,QAAUA,EAAgB,OAAO,GAC1F,GACF,GACF,EACA1B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,uCACV,KAAMU,EAAY,CAChB,OAAQ+B,EACR,aAAcpB,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,EACCuB,EAAoBpB,GAAS,OAAO,QACnCvB,EAACE,EAAA,CACC,UAAU,kFACV,KAAMU,EAAY,CAChB,OAAQW,GAAS,OAAO,OACxB,aAAcA,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,GAEJ,GACF,EACF,EAECkC,EAAsB,IAAI,CAAC,CAAE,KAAAE,EAAM,IAAAE,CAAI,IAClCF,IAAS,QAAUtB,GAA4B,MAAM,MAErDlC,EAAC2D,EAAA,CAEC,cAAeC,GAAQ,CACrBzB,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDmB,IAAiC,CAAE,GAAGD,EAA6B,KAAAQ,CAAK,CAAC,EAEzEnB,IAAcoB,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,CACtD,EACA,OAAQ,CAAC,CAAC5B,GAA4B,KACtC,KAAMA,GAA4B,MAAM,MACxC,WAAYA,GAA4B,MAAM,YAfzCwB,CAgBP,EAGAF,IAAS,UAAYtB,GAA4B,QAAQ,MAEzDlC,EAAC+D,EAAA,CAEC,gBAAiBC,GAAU,CACzB7B,IAAgC,CAC9B,GAAGD,EACH,OAAQ,CACN,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDmB,IAAiC,CAAE,GAAGD,EAA6B,OAAAY,CAAO,CAAC,EAE3EvB,IAAcoB,GAAQA,EAAK,OAAOC,GAAKA,IAAM,QAAQ,CAAC,CACxD,EACA,OAAQ,CAAC,CAAC5B,GAA4B,OACtC,eAAgBA,GAA4B,QAAQ,MACpD,WAAYA,GAA4B,QAAQ,YAf3CwB,CAgBP,EAGAF,IAAS,YAActB,GAA4B,UAAU,MAE7DlC,EAACiE,EAAA,CAEC,kBAAmBC,GAAY,CAC7B/B,IAAgC,CAC9B,GAAGD,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDmB,IAAiC,CAAE,GAAGD,EAA6B,SAAAc,CAAS,CAAC,EAE7EzB,IAAcoB,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,CAC1D,EACA,OAAQ,CAAC,CAAC5B,GAA4B,SACtC,WAAYA,GAA4B,UAAU,WAClD,SAAUA,GAA4B,UAAU,OAf3CwB,CAgBP,EAGG,IACR,GACH,GACEN,GAA6B,QAC7BA,GAA6B,MAC7BA,GAA6B,WAC7BnD,EAAC,OAAI,UAAU,oBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,wCAAwC,KAAM,gBAAiB,EAC/ED,EAAC,OAAI,UAAU,yCACZ,UAAAmD,GAA6B,UAC5BpD,EAACiE,EAAA,CACC,kBAAmBC,GAAY,CAC7B/B,IAAgC,CAC9B,GAAGD,EACH,SAAU,CACR,MAAOgC,EACP,WAAY,EACd,CACF,CAAC,EACDb,IAAiC,CAAE,GAAGD,EAA6B,SAAU,MAAU,CAAC,EAExFX,IAAcoB,GAAQ,CAAC,GAAGA,EAAM,UAAU,CAAC,CAC7C,EACA,WAAY3B,GAA4B,UAAU,WAClD,OAAQ,CAACkB,GAA6B,SACtC,SAAUA,GAA6B,SACzC,EAEDA,GAA6B,QAC5BpD,EAAC+D,EAAA,CACC,gBAAiBC,GAAU,CACzB5B,IAAkB,CAAE,GAAGJ,EAAc,iBAAkB,CAAE,CAAC,EAC1DG,IAAgC,CAC9B,GAAGD,EACH,OAAQ,CACN,MAAO8B,EACP,WAAY,EACd,CACF,CAAC,EACDX,IAAiC,CAAE,GAAGD,EAA6B,OAAQ,MAAU,CAAC,EAEtFX,IAAcoB,GAAQ,CAAC,GAAGA,EAAM,QAAQ,CAAC,CAC3C,EACA,WAAY3B,GAA4B,QAAQ,WAChD,OAAQ,CAACkB,GAA6B,OACtC,eAAgBA,GAA6B,OAC/C,EAEDA,GAA6B,MAC5BpD,EAAC2D,EAAA,CACC,cAAeC,GAAQ,CACrBzB,IAAgC,CAC9B,GAAGD,EACH,KAAM,CACJ,MAAO0B,EACP,WAAY,EACd,CACF,CAAC,EACDP,IAAiC,CAAE,GAAGD,EAA6B,KAAM,MAAU,CAAC,EAEpFX,IAAcoB,GAAQ,CAAC,GAAGA,EAAM,MAAM,CAAC,CACzC,EACA,WAAY3B,GAA4B,MAAM,WAC9C,OAAQ,CAACkB,GAA6B,KACtC,KAAMA,GAA6B,KACrC,GAEJ,GACF,GAEJ,EACAnD,EAAC,OAAI,UAAU,aACb,UAAAD,EAACE,EAAA,CACC,UAAU,uDACV,KAAM,GAAGa,EAAgBM,GAAa,YAAc,GAAI,CAAE,OAAQT,EAAY,CAAE,OAAQ,KAAK,MAAMY,EAAa,GAAG,EAAI,IAAK,aAAcD,EAAQ,MAAM,aAAc,OAAAH,CAAO,CAAC,CAAE,CAAC,CAAC,GACpL,EAECS,EAAe,GACd7B,EAACE,EAAA,CACC,UAAU,uFACV,KAAMU,EAAY,CAChB,OAAQa,EACR,aAAcF,EAAQ,MAAM,aAC5B,OAAAH,CACF,CAAC,EACH,EAEFnB,EAAC,OAAI,UAAU,8BACb,UAAAD,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACR,QAASkC,EACT,UAAU,kDACV,QAAS,IAAMP,IAAc,EAE5B,SAAAT,GAAa,UAChB,EACArB,EAACG,EAAA,CACC,KAAK,KACL,QAASmC,EACT,QAAQ,UACR,UAAU,kDACV,QAAS,IAAMP,IAAW,EAEzB,SAAAV,GAAa,QAChB,GACF,GACF,GACF,GACF,EACF,EACF,CAEJ,EAEM8B,GAA0B,IAAM,CACpC,KAAM,CAAE,OAAAa,EAAQ,QAAAzC,EAAS,cAAAU,EAAe,SAAAkC,EAAU,YAAAC,EAAa,iBAAAC,EAAkB,wBAAAC,CAAwB,EACvG9D,EAAqB,EACvB,IAAIwC,EACAC,EACAC,EACJ,KAAM,CAAE,WAAAqB,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,MAAMnB,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,GAAK,CAAC,EAEF,CAAC8B,CAAoB,EAAID,EAC/B1B,EAAgBf,GAAiB0C,EAEjC,KAAM,CAACC,CAAkB,EAAIJ,GAAU,OAAOZ,GAAQA,EAAK,gBAAgB,EAC3EX,EAAcmB,GAAeQ,EAE7B,KAAM,CAACC,CAAsB,EAAIJ,GAAc,OAAOP,GAAYA,EAAS,gBAAgB,EAC3F,OAAAhB,EAAkBoB,GAA2BO,EAEtC,CAAE,cAAA7B,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,CACvD,EAEMa,EAAuB,CAAC,CAC5B,gBAAAe,EACA,eAAAC,EACA,WAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAAE,OAAA7D,EAAS,IAAK,EAAIP,EAAe,EACnC,CAAE,QAAAU,EAAS,iBAAA2D,CAAiB,EAAI1E,EAAqB,EACrD2E,EAAiBJ,GAAgB,SAAS,OAAOlC,GAAKA,EAAE,QAAQ,MAAQtB,EAAQ,GAAG,EAEzF,OACEvB,EAAC,OAAI,UAAU,GACZ,SAAAmF,GAAgB,IAAInC,GAEjB/C,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CACC,OAAQ0C,GAAe,SAAS,OAAO,IACvC,UAAU,sIACZ,EACAhD,EAAC,OAAI,UAAU,uEACb,SAAAA,EAACE,EAAA,CACC,UAAU,mEACV,KAAM8C,EAAc,QAAQ,QAAQ,MACtC,EACF,GACF,EACA/C,EAAC,OAAI,UAAU,+CACZ,WAAC,CAAC8E,GACD9E,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,uCACV,KAAMU,EAAY,CAChB,OAAQoC,GAAe,OAAS,EAChC,OAAA5B,EACA,aAAc4B,EAAc,SAAS,OAAO,cAAgB,EAC9D,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,QACjDhD,EAACE,EAAA,CACC,UAAU,mEACV,KAAMU,EAAY,CAChB,OAAQoC,EAAc,QAAQ,MAAM,QAAU,EAC9C,OAAA5B,EACA,aAAc4B,EAAc,SAAS,OAAO,cAAgB,EAC9D,CAAC,EACH,GAEJ,EAEDgC,GACChF,EAACG,EAAA,CACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACb+E,IAAmBD,EAAS,OAAYF,CAAc,EACtDD,IAAkBC,CAAc,CAClC,EACA,UAAU,+BAET,SAAEE,EAAS,SAAW,MACzB,GAEJ,IAjD4DjC,EAAc,QAAQ,EAkDpF,CAEH,EACH,CAEJ,EAEMW,EAAqB,CAAC,CAC1B,cAAAyB,EACA,KAAAxB,EACA,OAAAqB,EACA,WAAAD,CACF,IAKM,CACJ,KAAM,CAAE,OAAA5D,EAAS,IAAK,EAAIP,EAAe,EACnC,CAAE,SAAAsD,EAAU,eAAAkB,CAAe,EAAI7E,EAAqB,EACpD,CAAE,UAAA8E,EAAW,MAAAC,CAAM,EAAIpB,GAAY,CAAC,EAE1C,OACElE,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CACC,OAAQsD,GAAM,OAAO,IACrB,UAAU,sIACZ,EACA3D,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACE,EAAA,CACC,UAAU,gFACV,KAAM0D,GAAM,SAAS,MACvB,EACA5D,EAACE,EAAA,CACC,UAAU,8EACV,KAAM,IAAIqF,CAAK,MAAMD,CAAS,GAChC,GACF,GACF,EACArF,EAAC,OAAI,UAAU,+CACZ,WAAC,CAAC2D,GACD3D,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMoF,EAAW,EACxEtF,EAACE,EAAA,CACC,UAAU,mEACV,KAAMU,EAAY,CAChB,OAAQgD,EAAK,MAAM,OACnB,OAAAxC,EACA,aAAcwC,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,EAEDoB,GACChF,EAACG,EAAA,CACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbkF,IAAiBJ,EAAS,OAAYrB,CAAI,EAC1CwB,EAAcxB,CAAI,CACpB,EACA,UAAU,+BAET,SAAAqB,EAAS,SAAW,MACvB,GAEJ,GACF,CAEJ,EAEMhB,EAAyB,CAAC,CAC9B,kBAAAuB,EACA,SAAAtB,EACA,WAAAc,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAAE,OAAA7D,EAAS,IAAK,EAAIP,EAAe,EACnC,CAAE,2BAAA4E,CAA2B,EAAIjF,EAAqB,EAE5D,OACEP,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CACC,OAAQ4D,GAAU,OAAO,IACzB,UAAU,sIACZ,EACAjE,EAAC,OAAI,UAAU,0DACb,UAAAD,EAACE,EAAA,CACC,UAAU,gFACV,KAAMgE,GAAU,SAAS,MAC3B,EACAlE,EAACE,EAAA,CAAK,UAAU,8EAA8E,GAChG,GACF,EACAD,EAAC,OAAI,UAAU,+CACZ,WAAC,CAACiE,GACDjE,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,uCACV,KAAMU,EAAY,CAChB,OAAQsD,EAAS,YAAY,QAAU,EACvC,OAAA9C,EACA,aAAc8C,EAAS,MAAM,YAC/B,CAAC,EACH,EACAlE,EAACE,EAAA,CACC,UAAU,mEACV,KAAMU,EAAY,CAChB,OAAQsD,EAAS,OAAO,QAAU,EAClC,OAAA9C,EACA,aAAc8C,EAAS,MAAM,YAC/B,CAAC,EACH,GACF,EAEDc,GACChF,EAACG,EAAA,CACC,KAAK,OACL,QAAQ,OACR,QAAS,IAAM,CACbsF,IAA6BR,EAAS,OAAYf,CAAQ,EAC1DsB,EAAkBtB,CAAQ,CAC5B,EACA,UAAU,+BAET,SAAAe,EAAS,SAAW,MACvB,GAEJ,GACF,CAEJ,EAEA,IAAOS,GAAQ1E,GAAWG,EAAc",
|
|
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", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "orderedJoinedProducts", "result", "type", "index", "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", "count", "exchangeOperation", "setCheckedExchangePurchase", "ProductSummary_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as m}from"react/jsx-runtime";import{Text as l,Button as d,Container as v}from"../../../../../components";import{useAiuiContext as N}from"../../../../AiuiProvider/index.js";import{useBizProductContext as w}from"../../../BizProductProvider.js";import{useMemo as s}from"react";import{formatPrice as i}from"../../../utils";import{replaceTemplate as u}from"../../../utils/textFormat";const h=()=>{const{copyWriting:t,locale:a="us"}=N(),{variant:e,finalPrice:
|
|
1
|
+
import{jsx as o,jsxs as m}from"react/jsx-runtime";import{Text as l,Button as d,Container as v}from"../../../../../components";import{useAiuiContext as N}from"../../../../AiuiProvider/index.js";import{useBizProductContext as w}from"../../../BizProductProvider.js";import{useMemo as s}from"react";import{formatPrice as i}from"../../../utils";import{replaceTemplate as u}from"../../../utils/textFormat";const h=()=>{const{copyWriting:t,locale:a="us"}=N(),{variant:e,finalPrice:b,totalSavings:n,memberFunctionResult:S,isLogin:c,comparePrice:x,onAddToCart:p,onBuyNow:g,savingDetail:r,coupon:k,addToCartLoading:f,buyNowLoading:y,profile:P}=w(),C=s(()=>u(t?.totalSavings||"",{amount:i({amount:n,currencyCode:e.price.currencyCode,locale:a})}),[t?.totalSavings,n,e.price.currencyCode,a]),T=s(()=>u(t?.memberSaving||"",{amount:i({amount:r?.member,currencyCode:e.price.currencyCode,locale:a})}),[t?.memberSaving,r?.member,e.price.currencyCode,a]);return m(v,{childClassName:"tablet:flex tablet:justify-between tablet:items-center tablet:gap-4",className:"bg-white py-3 border-t border-[#E4E5E6] desktop:border-none",children:[e.availableForSale?m("div",{className:"flex flex-col justify-between desktop:items-end",children:[m("div",{className:"flex items-center gap-1",children:[o(l,{className:"text-xl tablet:text-2xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:i({amount:Math.floor(b*100)/100,currencyCode:e.price.currencyCode,locale:a})}),(n>0||r?.member>0&&c)&&o(l,{className:"text-xl tablet:text-2xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:i({amount:x,currencyCode:e.price.currencyCode,locale:a})}),r?.member>0&&c&&o(l,{className:"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded",html:t?.memberPrice||"Member Price"})]}),(n>0||r?.member>0&&c)&&o(l,{className:"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${C}`})]}):o(l,{className:"text-[20px] font-bold text-[#999999]",html:t?.soldOut??"Sold Out"}),m("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[o(d,{variant:"secondary",disabled:!e.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>p?.(),loading:f,children:t?.addToCart??"Add to Cart"}),o(d,{variant:"primary",disabled:!e.availableForSale,size:"lg",loading:y,className:"w-1/2 tablet:w-auto",onClick:()=>g?.(),children:t?.buyNow??"Buy Now"})]})]})};var M=h;export{M as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Button, Container } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductActions = () => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n memberFunctionResult,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n coupon,\n addToCartLoading,\n buyNowLoading,\n profile,\n } = useBizProductContext()\n\n const totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n const memberPriceSaveText = useMemo(() => {\n return replaceTemplate(copyWriting?.memberSaving || '', {\n amount: formatPrice({\n amount: savingDetail?.member,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })\n }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-between tablet:items-center tablet:gap-4\"\n className=\"bg-white py-3 border-t border-[#E4E5E6]\"\n >\n {variant.availableForSale ? (\n <div className=\"flex flex-col justify-between desktop:items-end\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-xl tablet:text-2xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n html={formatPrice({\n amount: Math.floor(finalPrice * 100) / 100,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-xl tablet:text-2xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\n html={`${totalSavingsText}`}\n />\n )}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n <Button\n variant=\"secondary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n className=\"w-1/2 tablet:w-auto\"\n onClick={() => onAddToCart?.()}\n loading={addToCartLoading}\n >\n {copyWriting?.addToCart ?? 'Add to Cart'}\n </Button>\n <Button\n variant=\"primary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n loading={buyNowLoading}\n className=\"w-1/2 tablet:w-auto\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.buyNow ?? 'Buy Now'}\n </Button>\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
-
"mappings": "AAgDU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAhDV,OAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,MAAiB,4BACxC,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAAe,QACxB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,mBAAAC,MAAuB,4BAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIP,EAAe,EAChD,CACJ,QAAAQ,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,CACF,EAAInB,EAAqB,EAEnBoB,EAAmBnB,EAAQ,IACxBE,EAAgBE,GAAa,cAAgB,GAAI,CACtD,OAAQH,EAAY,CAAE,OAAQO,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAE1Ee,EAAsBpB,EAAQ,IAC3BE,EAAgBE,GAAa,cAAgB,GAAI,CACtD,OAAQH,EAAY,CAClB,OAAQa,GAAc,OACtB,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,CACH,CAAC,EACA,CAACD,GAAa,aAAcU,GAAc,OAAQR,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAExF,OACEX,EAACG,EAAA,CACC,eAAe,sEACf,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Text, Button, Container } from '../../../../../components'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { replaceTemplate } from '../../../utils/textFormat'\n\nconst ProductActions = () => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const {\n variant,\n finalPrice,\n totalSavings,\n memberFunctionResult,\n isLogin,\n comparePrice,\n onAddToCart,\n onBuyNow,\n savingDetail,\n coupon,\n addToCartLoading,\n buyNowLoading,\n profile,\n } = useBizProductContext()\n\n const totalSavingsText = useMemo(() => {\n return replaceTemplate(copyWriting?.totalSavings || '', {\n amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n })\n }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n const memberPriceSaveText = useMemo(() => {\n return replaceTemplate(copyWriting?.memberSaving || '', {\n amount: formatPrice({\n amount: savingDetail?.member,\n currencyCode: variant.price.currencyCode,\n locale,\n }),\n })\n }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n return (\n <Container\n childClassName=\"tablet:flex tablet:justify-between tablet:items-center tablet:gap-4\"\n className=\"bg-white py-3 border-t border-[#E4E5E6] desktop:border-none\"\n >\n {variant.availableForSale ? (\n <div className=\"flex flex-col justify-between desktop:items-end\">\n <div className=\"flex items-center gap-1\">\n <Text\n className=\"text-xl tablet:text-2xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n html={formatPrice({\n amount: Math.floor(finalPrice * 100) / 100,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-xl tablet:text-2xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl\"\n html={formatPrice({\n amount: comparePrice,\n currencyCode: variant.price.currencyCode,\n locale,\n })}\n />\n )}\n {savingDetail?.member > 0 && isLogin && (\n <Text\n className=\"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded\"\n html={copyWriting?.memberPrice || 'Member Price'}\n />\n )}\n </div>\n {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n <Text\n className=\"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl\"\n html={`${totalSavingsText}`}\n />\n )}\n </div>\n ) : (\n <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n )}\n <div className=\"flex items-center gap-2 mt-2 tablet:mt-0\">\n <Button\n variant=\"secondary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n className=\"w-1/2 tablet:w-auto\"\n onClick={() => onAddToCart?.()}\n loading={addToCartLoading}\n >\n {copyWriting?.addToCart ?? 'Add to Cart'}\n </Button>\n <Button\n variant=\"primary\"\n disabled={!variant.availableForSale}\n size=\"lg\"\n loading={buyNowLoading}\n className=\"w-1/2 tablet:w-auto\"\n onClick={() => onBuyNow?.()}\n >\n {copyWriting?.buyNow ?? 'Buy Now'}\n </Button>\n </div>\n </Container>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
+
"mappings": "AAgDU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAhDV,OAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,MAAiB,4BACxC,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAAe,QACxB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,mBAAAC,MAAuB,4BAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIP,EAAe,EAChD,CACJ,QAAAQ,EACA,WAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,CACF,EAAInB,EAAqB,EAEnBoB,EAAmBnB,EAAQ,IACxBE,EAAgBE,GAAa,cAAgB,GAAI,CACtD,OAAQH,EAAY,CAAE,OAAQO,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAE1Ee,EAAsBpB,EAAQ,IAC3BE,EAAgBE,GAAa,cAAgB,GAAI,CACtD,OAAQH,EAAY,CAClB,OAAQa,GAAc,OACtB,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,CACH,CAAC,EACA,CAACD,GAAa,aAAcU,GAAc,OAAQR,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAExF,OACEX,EAACG,EAAA,CACC,eAAe,sEACf,UAAU,8DAET,UAAAS,EAAQ,iBACPZ,EAAC,OAAI,UAAU,kDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,uFACV,KAAMM,EAAY,CAChB,OAAQ,KAAK,MAAMM,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMM,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,gHACV,KAAMM,EAAY,CAChB,OAAQU,EACR,aAAcL,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDS,GAAc,OAAS,GAAKJ,GAC3BjB,EAACE,EAAA,CACC,UAAU,gEACV,KAAMS,GAAa,aAAe,eACpC,GAEJ,GACEI,EAAe,GAAMM,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,wFACV,KAAM,GAAGwB,CAAgB,GAC3B,GAEJ,EAEA1B,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMS,GAAa,SAAW,WAAY,EAEnGV,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACG,EAAA,CACC,QAAQ,YACR,SAAU,CAACU,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAC7B,QAASI,EAER,SAAAZ,GAAa,WAAa,cAC7B,EACAX,EAACG,EAAA,CACC,QAAQ,UACR,SAAU,CAACU,EAAQ,iBACnB,KAAK,KACL,QAASW,EACT,UAAU,sBACV,QAAS,IAAMJ,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOiB,EAAQlB",
|
|
6
6
|
"names": ["jsx", "jsxs", "Text", "Button", "Container", "useAiuiContext", "useBizProductContext", "useMemo", "formatPrice", "replaceTemplate", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "addToCartLoading", "buyNowLoading", "profile", "totalSavingsText", "memberPriceSaveText", "ProductActions_default"]
|
|
7
7
|
}
|