@anker-in/headless-ui 1.0.26-alpha.1763024077250 → 1.0.26-alpha.1763039123313
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/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +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 +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/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 +2 -2
- 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/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js.map +2 -2
- package/dist/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 +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +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 +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/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 +2 -2
- 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/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Q=Object.create;var w=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},R=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of X(t))!Z.call(n,r)&&r!==o&&w(n,r,{get:()=>t[r],enumerable:!(i=U(t,r))||i.enumerable});return n};var ee=(n,t,o)=>(o=n!=null?Q(Y(n)):{},R(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),te=n=>R(w({},"__esModule",{value:!0}),n);var oe={};_(oe,{default:()=>le});module.exports=te(oe);var e=require("react/jsx-runtime"),a=require("../../../../../components"),h=require("../../../BizProductProvider"),N=require("react"),p=require("../../../utils"),C=require("../../../../AiuiProvider"),A=ee(require("decimal.js")),$=require("../../../utils/textFormat");const ae=()=>{const{locale:n="us",copyWriting:t}=(0,C.useAiuiContext)(),{product:o,variant:i,finalPrice:r,comparePrice:m,coupon:b,selectedOptions:u,selectedVariants:c,totalSavings:P,onAddToCart:B,onBuyNow:D,savingDetail:v,checkedBundle:O,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:E,setCheckedExchangePurchase:x,setCheckedBundle:k,setSavingDetail:M,addToCartLoading:J,buyNowLoading:H,profile:j}=(0,h.useBizProductContext)(),[y]=c,F=(0,N.useMemo)(()=>{const d=O?.variants.find(K=>K.variant.sku===y?.sku),W=new A.default(y?.price?.amount||0).minus(d?.price||y?.price?.amount).toNumber();let z=new A.default(y?.price?.amount||0);j?.email&&(z=z.minus(v?.member||0));const q=z.minus(v?.coupon).minus(W).toNumber();return Math.floor(q*100)/100},[y,O,j,v?.member,v?.coupon]);if(!i.availableForSale)return null;const{bundleVariant:G,giftVariant:L,exchangeVariant:S}=ne()||{},[s,g]=(0,N.useState)();return(0,N.useEffect)(()=>{g({bundle:l.bundle?.value?void 0:G,gift:l.gift?.value?void 0:L,exchange:l.exchange?.value?void 0:S})},[G,L,S,l]),(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[(0,e.jsxs)(a.GridItem,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[(0,e.jsx)(a.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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-top"})})]}),(0,e.jsxs)(a.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",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${u.color||u.colour||u.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:F,currencyCode:i.price.currencyCode,locale:n})}),F<i?.price?.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(I,{giftOperation:d=>{E?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),g?.({...s,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(V,{bundleOperation:d=>{k?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),g?.({...s,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(T,{exchangeOperation:d=>{x?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),g?.({...s,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(s?.bundle||s?.gift||s?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[s?.exchange&&(0,e.jsx)(T,{exchangeOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),g?.({...s,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!s?.exchange,exchange:s?.exchange}),s?.bundle&&(0,e.jsx)(V,{bundleOperation:d=>{E?.(void 0),x?.(void 0),M?.({...v,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),g?.({...s,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!s?.bundle,bundleListItem:s?.bundle}),s?.gift&&(0,e.jsx)(I,{giftOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),g?.({...s,gift:void 0})},canOperate:l?.gift?.canOperate,status:!s?.gift,gift:s?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${(0,$.replaceTemplate)(t?.totalPrice||"",{amount:(0,p.formatPrice)({amount:Math.floor(r*100)/100,currencyCode:i.price.currencyCode,locale:n})})}`}),P>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:m,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:J,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>B?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:H,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},ne=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:r,exchangePurchase:m,checkedExchangePurchase:b}=(0,h.useBizProductContext)();let u,c,P;const{bundleList:B}=n||{},{giftList:D=[]}=i||{},{giftList:v=[]}=m||{},O=B?.filter(x=>x.variants.slice(1,x.variants.length).every(k=>k.variant.availableForSale))||[],[l]=O;u=o||l;const[f]=D?.filter(x=>x.availableForSale);c=r||f;const[E]=v?.filter(x=>x.availableForSale);return P=b||E,{bundleVariant:u,giftVariant:c,exchangeVariant:P}},V=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{variant:m,setCheckedBundle:b}=(0,h.useBizProductContext)(),u=t?.variants.filter(c=>c.variant.sku!==m.sku);return(0,e.jsx)("div",{className:"",children:u?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-4 justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:c?.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"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(a.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:c.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:c?.price||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})}),c.price<c.variant.price.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:c.variant.price.amount||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]},c.variant.id))})},I=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{freeGift:m,setCheckedGift:b}=(0,h.useBizProductContext)(),{freeLabel:u,count:c}=m||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${c} | ${u}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:u}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price.amount,locale:r,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},T=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{setCheckedExchangePurchase:m}=(0,h.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:t.finalPrice?.amount||0,locale:r,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price?.amount||0,locale:r,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{m?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var le=ae;
|
|
1
|
+
"use strict";var K=Object.create;var w=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},R=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of U(t))!Y.call(n,r)&&r!==o&&w(n,r,{get:()=>t[r],enumerable:!(i=Q(t,r))||i.enumerable});return n};var ee=(n,t,o)=>(o=n!=null?K(X(n)):{},R(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),te=n=>R(w({},"__esModule",{value:!0}),n);var oe={};Z(oe,{default:()=>le});module.exports=te(oe);var e=require("react/jsx-runtime"),a=require("../../../../../components"),h=require("../../../BizProductProvider"),N=require("react"),p=require("../../../utils"),C=require("../../../../AiuiProvider"),A=ee(require("decimal.js")),$=require("../../../utils/textFormat");const ae=()=>{const{locale:n="us",copyWriting:t}=(0,C.useAiuiContext)(),{product:o,variant:i,finalPrice:r,comparePrice:m,coupon:b,selectedOptions:u,selectedVariants:c,totalSavings:P,onAddToCart:B,onBuyNow:D,savingDetail:v,checkedBundle:O,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:E,setCheckedExchangePurchase:x,setCheckedBundle:k,setSavingDetail:M,addToCartLoading:J,buyNowLoading:H,profile:j}=(0,h.useBizProductContext)(),[y]=c,F=(0,N.useMemo)(()=>{const d=O?.variants.find(q=>q.variant.sku===y?.sku),W=new A.default(y?.price?.amount||0).minus(d?.price||y?.price?.amount).toNumber();let z=new A.default(y?.price?.amount||0);j?.email&&(z=z.minus(v?.member||0));const _=z.minus(v?.coupon).minus(W).toNumber();return Math.floor(_*100)/100},[y,O,j,v?.member,v?.coupon]);if(!i.availableForSale)return null;const{bundleVariant:G,giftVariant:L,exchangeVariant:S}=ne()||{},[s,g]=(0,N.useState)();return(0,N.useEffect)(()=>{g({bundle:l.bundle?.value?void 0:G,gift:l.gift?.value?void 0:L,exchange:l.exchange?.value?void 0:S})},[G,L,S,l]),(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 pt-6 tablet:p-8 tablet:!pb-0",children:[(0,e.jsxs)(a.GridItem,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5 gap-4 flex flex-col justify-between",children:[(0,e.jsx)(a.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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%]"})})]}),(0,e.jsxs)(a.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",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${u.color||u.colour||u.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:F,currencyCode:i.price.currencyCode,locale:n})}),F<i?.price?.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(I,{giftOperation:d=>{E?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),g?.({...s,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(V,{bundleOperation:d=>{k?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),g?.({...s,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(T,{exchangeOperation:d=>{x?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),g?.({...s,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(s?.bundle||s?.gift||s?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[s?.exchange&&(0,e.jsx)(T,{exchangeOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),g?.({...s,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!s?.exchange,exchange:s?.exchange}),s?.bundle&&(0,e.jsx)(V,{bundleOperation:d=>{E?.(void 0),x?.(void 0),M?.({...v,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),g?.({...s,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!s?.bundle,bundleListItem:s?.bundle}),s?.gift&&(0,e.jsx)(I,{giftOperation:d=>{k?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),g?.({...s,gift:void 0})},canOperate:l?.gift?.canOperate,status:!s?.gift,gift:s?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${(0,$.replaceTemplate)(t?.totalPrice||"",{amount:(0,p.formatPrice)({amount:Math.floor(r*100)/100,currencyCode:i.price.currencyCode,locale:n})})}`}),P>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:m,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",loading:J,className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>B?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",loading:H,variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},ne=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:r,exchangePurchase:m,checkedExchangePurchase:b}=(0,h.useBizProductContext)();let u,c,P;const{bundleList:B}=n||{},{giftList:D=[]}=i||{},{giftList:v=[]}=m||{},O=B?.filter(x=>x.variants.slice(1,x.variants.length).every(k=>k.variant.availableForSale))||[],[l]=O;u=o||l;const[f]=D?.filter(x=>x.availableForSale);c=r||f;const[E]=v?.filter(x=>x.availableForSale);return P=b||E,{bundleVariant:u,giftVariant:c,exchangeVariant:P}},V=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{variant:m,setCheckedBundle:b}=(0,h.useBizProductContext)(),u=t?.variants.filter(c=>c.variant.sku!==m.sku);return(0,e.jsx)("div",{className:"",children:u?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-4 justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:c?.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"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(a.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:c.variant.product.title})})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:c?.price||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})}),c.price<c.variant.price.amount&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:c.variant.price.amount||0,locale:r,currencyCode:c.variant?.price?.currencyCode||""})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]},c.variant.id))})},I=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{freeGift:m,setCheckedGift:b}=(0,h.useBizProductContext)(),{freeLabel:u,count:c}=m||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${c} | ${u}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:u}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price.amount,locale:r,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},T=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,C.useAiuiContext)(),{setCheckedExchangePurchase:m}=(0,h.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.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"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,p.formatPrice)({amount:t.finalPrice?.amount||0,locale:r,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,p.formatPrice)({amount:t.price?.amount||0,locale:r,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{m?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var le=ae;
|
|
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'\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 setCheckedGift,\n setCheckedExchangePurchase,\n setCheckedBundle,\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\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 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-top\"\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 <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 {joinedRecommendBuyProducts?.gift?.value && (\n <ProductGiftSummary\n giftOperation={gift => {\n setCheckedGift?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )}\n {joinedRecommendBuyProducts?.bundle?.value && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )}\n {joinedRecommendBuyProducts?.exchange?.value && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setCheckedExchangePurchase?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\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 setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n gift: {\n value: joinedRecommendBuyProducts?.gift?.value,\n canOperate: true,\n },\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\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 setCheckedGift?.(undefined)\n setCheckedExchangePurchase?.(undefined)\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n gift: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: undefined,\n canOperate: true,\n },\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\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 setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: joinedRecommendBuyProducts?.exchange?.value,\n canOperate: true,\n },\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\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 ProductSummary\n"],
|
|
5
|
-
"mappings": "4jBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAwEU,IAAAI,EAAA,6BAxEVC,EAA0E,qCAC1EC,EAAqC,uCACrCC,EAA6C,iBAC7CC,EAA4B,0BAC5BC,EAA+B,oCAE/BC,EAAoB,0BACpBC,EAAgC,qCAEhC,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,eAAAC,EACA,2BAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,QAAAC,CACF,KAAI,wBAAqB,EAEnB,CAACC,CAAqB,EAAIf,EAE1BgB,KAAoB,WAAQ,IAAM,CACtC,MAAMC,EAAuBZ,GAAe,SAAS,KAAKa,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,EACzED,GAAS,QACbO,EAAsBA,EAAoB,MAAMjB,GAAc,QAAU,CAAC,GAE3E,MAAMR,EAAayB,EAAoB,MAAMjB,GAAc,MAAM,EAAE,MAAMe,CAAkB,EAAE,SAAS,EACtG,OAAO,KAAK,MAAMvB,EAAa,GAAG,EAAI,GACxC,EAAG,CAACmB,EAAuBV,EAAeS,EAASV,GAAc,OAAQA,GAAc,MAAM,CAAC,EAG9F,GAAI,CADgBT,EAAQ,iBACV,OAAO,KAEzB,KAAM,CAAE,cAAA2B,EAAe,YAAAC,EAAa,gBAAAC,CAAgB,EAAIC,GAAwB,GAAK,CAAC,EAChF,CAACC,EAA6BC,CAA8B,KAAI,YAInE,EAEH,sBAAU,IAAM,CACdA,EAA+B,CAC7B,OAAQrB,EAA2B,QAAQ,MAAQ,OAAYgB,EAC/D,KAAMhB,EAA2B,MAAM,MAAQ,OAAYiB,EAC3D,SAAUjB,EAA2B,UAAU,MAAQ,OAAYkB,CACrE,CAAC,CACH,EAAG,CAACF,EAAeC,EAAaC,EAAiBlB,CAA0B,CAAC,KAG1E,OAAC,OAAI,UAAU,8FACb,mBAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,UAAU,oCACd,qBAAC,YAAS,UAAU,uFAClB,oBAAC,WACC,UAAU,+HACV,KAAM,GAAGZ,EAAQ,KAAK,wDACxB,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQC,EAAQ,OAAO,KAAOD,GAAS,SAAS,CAAC,GAAG,IACpD,UAAU,yHACV,aAAa,
|
|
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'\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 setCheckedGift,\n setCheckedExchangePurchase,\n setCheckedBundle,\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\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 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 <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 {joinedRecommendBuyProducts?.gift?.value && (\n <ProductGiftSummary\n giftOperation={gift => {\n setCheckedGift?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n gift: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n }}\n status={!!joinedRecommendBuyProducts?.gift}\n gift={joinedRecommendBuyProducts?.gift?.value}\n canOperate={joinedRecommendBuyProducts?.gift?.canOperate}\n />\n )}\n {joinedRecommendBuyProducts?.bundle?.value && (\n <ProductBundleSummary\n bundleOperation={bundle => {\n setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n bundle: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n }}\n status={!!joinedRecommendBuyProducts?.bundle}\n bundleListItem={joinedRecommendBuyProducts?.bundle?.value}\n canOperate={joinedRecommendBuyProducts?.bundle?.canOperate}\n />\n )}\n {joinedRecommendBuyProducts?.exchange?.value && (\n <ProductExchangeSummary\n exchangeOperation={exchange => {\n setCheckedExchangePurchase?.(undefined)\n setJoinedRecommendBuyProducts?.({\n ...joinedRecommendBuyProducts,\n exchange: {\n value: undefined,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n }}\n status={!!joinedRecommendBuyProducts?.exchange}\n canOperate={joinedRecommendBuyProducts?.exchange?.canOperate}\n exchange={joinedRecommendBuyProducts?.exchange?.value}\n />\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 setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n gift: {\n value: joinedRecommendBuyProducts?.gift?.value,\n canOperate: true,\n },\n exchange: {\n value: exchange,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\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 setCheckedGift?.(undefined)\n setCheckedExchangePurchase?.(undefined)\n setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n setJoinedRecommendBuyProducts?.({\n gift: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: undefined,\n canOperate: true,\n },\n bundle: {\n value: bundle,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\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 setCheckedBundle?.(undefined)\n setJoinedRecommendBuyProducts?.({\n bundle: {\n value: undefined,\n canOperate: true,\n },\n exchange: {\n value: joinedRecommendBuyProducts?.exchange?.value,\n canOperate: true,\n },\n gift: {\n value: gift,\n canOperate: true,\n },\n })\n setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\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 ProductSummary\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
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", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "setCheckedGift", "setCheckedExchangePurchase", "setCheckedBundle", "setSavingDetail", "addToCartLoading", "buyNowLoading", "profile", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "v", "currentBundlePrice", "Decimal", "currentProductPrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "canOperate", "status", "bundleVariants", "giftOperation", "freeLabel", "count", "exchangeOperation"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of w(t))!S.call(e,r)&&r!==o&&d(e,r,{get:()=>t[r],enumerable:!(m=N(t,r))||m.enumerable});return e};var P=e=>k(d({},"__esModule",{value:!0}),e);var A={};h(A,{default:()=>B});module.exports=P(A);var a=require("react/jsx-runtime"),l=require("../../../../../components"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),s=require("react"),n=require("../../../utils"),u=require("../../../utils/textFormat");const T=()=>{const{copyWriting:e,locale:t="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:m,totalSavings:r,memberFunctionResult:F,isLogin:c,comparePrice:b,onAddToCart:g,onBuyNow:f,savingDetail:i,coupon:z,addToCartLoading:v,buyNowLoading:y,profile:L}=(0,x.useBizProductContext)(),C=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.totalSavings||"",{amount:(0,n.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),[e?.totalSavings,r,o.price.currencyCode,t]),M=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.memberSaving||"",{amount:(0,n.formatPrice)({amount:i?.member,currencyCode:o.price.currencyCode,locale:t})}),[e?.memberSaving,i?.member,o.price.currencyCode,t]);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4
|
|
1
|
+
"use strict";var d=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},k=(e,t,o,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of w(t))!S.call(e,r)&&r!==o&&d(e,r,{get:()=>t[r],enumerable:!(m=N(t,r))||m.enumerable});return e};var P=e=>k(d({},"__esModule",{value:!0}),e);var A={};h(A,{default:()=>B});module.exports=P(A);var a=require("react/jsx-runtime"),l=require("../../../../../components"),p=require("../../../../AiuiProvider/index.js"),x=require("../../../BizProductProvider.js"),s=require("react"),n=require("../../../utils"),u=require("../../../utils/textFormat");const T=()=>{const{copyWriting:e,locale:t="us"}=(0,p.useAiuiContext)(),{variant:o,finalPrice:m,totalSavings:r,memberFunctionResult:F,isLogin:c,comparePrice:b,onAddToCart:g,onBuyNow:f,savingDetail:i,coupon:z,addToCartLoading:v,buyNowLoading:y,profile:L}=(0,x.useBizProductContext)(),C=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.totalSavings||"",{amount:(0,n.formatPrice)({amount:r,currencyCode:o.price.currencyCode,locale:t})}),[e?.totalSavings,r,o.price.currencyCode,t]),M=(0,s.useMemo)(()=>(0,u.replaceTemplate)(e?.memberSaving||"",{amount:(0,n.formatPrice)({amount:i?.member,currencyCode:o.price.currencyCode,locale:t})}),[e?.memberSaving,i?.member,o.price.currencyCode,t]);return(0,a.jsxs)("div",{className:"bg-white py-3 px-4 desktop:p-0 tablet:flex tablet:justify-end tablet:items-center tablet:gap-4",children:[o.availableForSale?(0,a.jsxs)("div",{className:"flex flex-col justify-between desktop:items-end",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(l.Text,{className:"text-xl font-bold !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:Math.floor(m*100)/100,currencyCode:o.price.currencyCode,locale:t})}),(r>0||i?.member>0&&c)&&(0,a.jsx)(l.Text,{className:"text-xl font-bold line-through text-[#999] !leading-[1.2] desktop:text-xl lg-desktop:text-2xl",html:(0,n.formatPrice)({amount:b,currencyCode:o.price.currencyCode,locale:t})}),i?.member>0&&c&&(0,a.jsx)(l.Text,{className:"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded",html:e?.memberPrice||"Member Price"})]}),(r>0||i?.member>0&&c)&&(0,a.jsx)(l.Text,{className:"text-brand-0 text-[18px] !leading-[1.2] font-bold desktop:text-xl lg-desktop:text-2xl",html:`${C}`})]}):(0,a.jsx)(l.Text,{className:"text-[20px] font-bold text-[#999999]",html:e?.soldOut??"Sold Out"}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-2 tablet:mt-0",children:[(0,a.jsx)(l.Button,{variant:"secondary",disabled:!o.availableForSale,size:"lg",className:"w-1/2 tablet:w-auto",onClick:()=>g?.(),loading:v,children:e?.addToCart??"Add to Cart"}),(0,a.jsx)(l.Button,{variant:"primary",disabled:!o.availableForSale,size:"lg",loading:y,className:"w-1/2 tablet:w-auto",onClick:()=>f?.(),children:e?.buyNow??"Buy Now"})]})]})};var B=T;
|
|
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 } 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 <div className=\"bg-white py-3 px-4
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6CU,IAAAI,EAAA,6BA7CVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAgC,qCAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,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,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBf,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAE1Ee,KAAsB,WAAQ,OAC3B,mBAAgBhB,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAClB,OAAQU,GAAc,OACtB,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,CACH,CAAC,EACA,CAACD,GAAa,aAAcU,GAAc,OAAQR,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAExF,SACE,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import { Text, Button } 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 <div className=\"bg-white py-3 px-4 desktop:p-0 tablet:flex tablet:justify-end tablet:items-center tablet:gap-4\">\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 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 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 className=\"bg-brand-0 font-bold text-white px-1 py-[2px] text-sm rounded\" html={copyWriting?.memberPrice || 'Member Price'} />\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 </div>\n )\n}\n\nexport default ProductActions\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6CU,IAAAI,EAAA,6BA7CVC,EAA6B,qCAC7BC,EAA+B,6CAC/BC,EAAqC,0CACrCC,EAAwB,iBACxBC,EAA4B,0BAC5BC,EAAgC,qCAEhC,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAChD,CACJ,QAAAC,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,KAAI,wBAAqB,EAEnBC,KAAmB,WAAQ,OACxB,mBAAgBf,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAAE,OAAQI,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAE1Ee,KAAsB,WAAQ,OAC3B,mBAAgBhB,GAAa,cAAgB,GAAI,CACtD,UAAQ,eAAY,CAClB,OAAQU,GAAc,OACtB,aAAcR,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,CACH,CAAC,EACA,CAACD,GAAa,aAAcU,GAAc,OAAQR,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAExF,SACE,QAAC,OAAI,UAAU,iGACZ,UAAAC,EAAQ,oBACP,QAAC,OAAI,UAAU,kDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,QACC,UAAU,uEACV,QAAM,eAAY,CAChB,OAAQ,KAAK,MAAMC,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMM,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,gGACV,QAAM,eAAY,CAChB,OAAQC,EACR,aAAcL,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDS,GAAc,OAAS,GAAKJ,MAC3B,OAAC,QAAK,UAAU,gEAAgE,KAAMN,GAAa,aAAe,eAAgB,GAEtI,GACEI,EAAe,GAAMM,GAAc,OAAS,GAAKJ,OACjD,OAAC,QACC,UAAU,wFACV,KAAM,GAAGS,CAAgB,GAC3B,GAEJ,KAEA,OAAC,QAAK,UAAU,uCAAuC,KAAMf,GAAa,SAAW,WAAY,KAEnG,QAAC,OAAI,UAAU,2CACb,oBAAC,UACC,QAAQ,YACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMM,IAAc,EAC7B,QAASI,EAER,SAAAZ,GAAa,WAAa,cAC7B,KACA,OAAC,UACC,QAAQ,UACR,SAAU,CAACE,EAAQ,iBACnB,KAAK,KACL,QAASW,EACT,UAAU,sBACV,QAAS,IAAMJ,IAAW,EAEzB,SAAAT,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOV,EAAQS",
|
|
6
6
|
"names": ["ProductActions_exports", "__export", "ProductActions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_AiuiProvider", "import_BizProductProvider", "import_react", "import_utils", "import_textFormat", "ProductActions", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "memberFunctionResult", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "coupon", "addToCartLoading", "buyNowLoading", "profile", "totalSavingsText", "memberPriceSaveText"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var I=Object.defineProperty;var
|
|
1
|
+
"use strict";var I=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var i in r)I(e,i,{get:r[i],enumerable:!0})},M=(e,r,i,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of C(r))!N.call(e,n)&&n!==i&&I(e,n,{get:()=>r[n],enumerable:!(u=x(r,n))||u.enumerable});return e};var k=e=>M(I({},"__esModule",{value:!0}),e);var P={};B(P,{default:()=>L});module.exports=k(P);var y=require("react/jsx-runtime"),A=require("../../../../AiuiProvider/index.js"),w=require("../../../../../helpers/index.js"),o=require("react"),D=require("gsap"),$=require("../../../BizProductProvider.js");const H=(e,r)=>{const[i,u]=(0,o.useState)(null),n=(0,o.useRef)(null),f=(0,o.useRef)(new Map),d=(0,o.useRef)(!1),g=(0,o.useRef)(null);(0,o.useEffect)(()=>{g.current=i},[i]),(0,o.useEffect)(()=>{if(!e||e.length===0)return;n.current&&n.current.disconnect();const p=document.getElementById("purchase-bar"),t=p?p.clientHeight:100;f.current.clear();const l=[];if(e.forEach(c=>{const a=c.id||c.href?.replace("#",""),T=document.getElementById(a);T&&(f.current.set(a,c),l.push(T))}),l.length===0){u(e[0]);return}const m={root:null,rootMargin:`-${t}px 0px -50% 0px`,threshold:[0,.25,.5,.75,1]},h=c=>{if(d.current)return;if((window.scrollY||document.documentElement.scrollTop)<t+50){const s=e[0];s&&g.current?.id!==s.id&&(console.log("\u9875\u9762\u9876\u90E8\uFF0C\u6FC0\u6D3B\u7B2C\u4E00\u4E2A tab:",s.label),u(s),r?.(s));return}const T=c.filter(s=>s.isIntersecting).sort((s,b)=>s.boundingClientRect.top-b.boundingClientRect.top);if(T.length>0){const b=T[0].target.id,v=f.current.get(b);v&&(u(v),r?.(v))}else{const s=[...c].sort((b,v)=>Math.abs(b.boundingClientRect.top)-Math.abs(v.boundingClientRect.top));if(s.length>0){const v=s[0].target.id,R=f.current.get(v);R&&(u(R),r?.(R))}}};n.current=new IntersectionObserver(h,m),l.forEach(c=>{n.current?.observe(c)});const S=()=>{if(d.current)return;if((window.scrollY||document.documentElement.scrollTop)<t+50){const a=e[0];a&&(u(a),r?.(a))}};return window.addEventListener("scroll",S,{passive:!0}),()=>{n.current&&n.current.disconnect(),window.removeEventListener("scroll",S)}},[e]),(0,o.useEffect)(()=>{!i&&e&&e.length>0&&u(e[0])},[e,i]);const E=(0,o.useCallback)(p=>{u(p);const t=p.id||p.href?.replace("#",""),l=document.getElementById(t);if(l){const m=document.getElementById("purchase-bar"),h=m?m.clientHeight:100;d.current=!0;const c=l.getBoundingClientRect().top+window.scrollY-h-10;window.scrollTo({top:c,behavior:"smooth"}),setTimeout(()=>{d.current=!1},1e3)}},[]);return{activeTab:i||e?.[0],setActiveTab:E}},O=({tabs:e,onSpyNavItemClick:r,className:i,renderRating:u})=>{const{activeTab:n,setActiveTab:f}=H(e),d=(0,o.useRef)(null),g=(0,o.useRef)(new Map),E=(0,o.useCallback)(t=>{f(t),r?.(t)},[r,f]);(0,o.useEffect)(()=>{if(!n||!d.current)return;const t=g.current.get(n.id);if(!t)return;const l=d.current,m=t.getBoundingClientRect(),h=l.getBoundingClientRect(),S=m.left+m.width/2-h.left,c=h.width/2,a=S-c;l.scrollTo({left:l.scrollLeft+a,behavior:"smooth"})},[n?.id]);const p=(0,o.useCallback)((t,l)=>{l?g.current.set(t,l):g.current.delete(t)},[]);return(0,y.jsxs)("div",{ref:d,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:(0,w.cn)("flex tablet:gap-8 gap-6 overflow-x-auto",i),children:[e?.map(t=>(0,y.jsxs)("button",{ref:l=>p(t.id,l),className:(0,w.cn)("text-sm relative py-[10px] font-bold text-[#949494] desktop:text-[#1d1d1f] whitespace-nowrap flex-shrink-0",{"text-[#1d1d1f]":n?.id===t.id}),onClick:()=>E(t),children:[t.label,(0,y.jsx)("div",{className:(0,w.cn)("absolute hidden desktop:block bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0",{"w-full":n?.id===t.id})})]},t.id)),u]})};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 { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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(\n (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 )\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n const { isMobile } = useBizProductContext()\n \n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const { activeTab, setActiveTab } = useScrollSpy(tabs)\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 (!isMobile || !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, isMobile])\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 // \u79FB\u52A8\u7AEF\u6E32\u67D3\uFF1A\u6A2A\u5411\u6EDA\u52A8\n if (isMobile) {\n return (\n <div\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n className={cn('flex gap-6 overflow-x-auto -mx-4 px-4', className)}\n >\n {tabs?.map(tab => (\n <button\n ref={el => setTabRef(tab.id, el)}\n className={cn('text-sm relative py-[10px] text-[#949494] font-bold whitespace-nowrap flex-shrink-0', {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n })}\n key={tab.id}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n </button>\n ))}\n {renderRating}\n </div>\n )\n }\n\n // \u684C\u9762\u7AEF\u6E32\u67D3\n return (\n <div className={cn('flex gap-8', className)}>\n {tabs?.map(tab => (\n <button className=\"text-sm relative py-[10px] font-bold\" key={tab.id} onClick={() => onTabClick(tab)}>\n {tab.label}\n <div\n className={cn('absolute bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0', {\n 'w-full': activeTab?.id === tab.id,\n })}\n />\n </button>\n ))}\n {renderRating}\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_helpers", "import_react", "import_gsap", "import_BizProductProvider", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { useBizProductContext } from '../../../BizProductProvider.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(\n (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 )\n\n return { activeTab: activeTab || tabs?.[0], setActiveTab: handleSetActiveTab }\n}\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n \n // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n const { activeTab, setActiveTab } = useScrollSpy(tabs)\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('flex tablet:gap-8 gap-6 overflow-x-auto', className)}\n >\n {tabs?.map(tab => (\n <button\n ref={el => setTabRef(tab.id, el)}\n className={cn('text-sm relative py-[10px] font-bold text-[#949494] desktop:text-[#1d1d1f] whitespace-nowrap flex-shrink-0', {\n 'text-[#1d1d1f]': activeTab?.id === tab.id,\n })}\n key={tab.id}\n onClick={() => onTabClick(tab)}\n >\n {tab.label}\n <div\n className={cn(\n 'absolute hidden desktop:block bottom-0 left-0 w-0 transition-all duration-300 ease-in-out h-[2px] bg-brand-0',\n {\n 'w-full': activeTab?.id === tab.id,\n }\n )}\n />\n </button>\n ))}\n {renderRating}\n </div>\n )\n}\n\nexport default ScrollSpyNav\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ScrollSpyNav_exports", "__export", "ScrollSpyNav_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_helpers", "import_react", "import_gsap", "import_BizProductProvider", "useScrollSpy", "tabs", "onActiveChange", "activeTab", "setActiveTab", "observerRef", "sectionsRef", "isManualScrollRef", "activeTabRef", "purchaseBar", "navHeight", "elements", "tab", "id", "element", "observerOptions", "observerCallback", "entries", "firstTab", "intersectingEntries", "entry", "a", "sortedEntries", "b", "handleScroll", "handleSetActiveTab", "scrollToPosition", "ScrollSpyNav", "onSpyNavItemClick", "className", "renderRating", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.create;var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!x.call(e,r)&&r!==o&&p(e,r,{get:()=>t[r],enumerable:!(s=f(t,r))||s.enumerable});return e};var N=(e,t,o)=>(o=e!=null?u(v(e)):{},d(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),h=e=>d(p({},"__esModule",{value:!0}),e);var P={};y(P,{default:()=>k});module.exports=h(P);var a=require("react/jsx-runtime"),m=require("react"),i=require("../../../../components"),j=require("gsap"),I=require("../../../AiuiProvider/index.js"),H=require("../../../../helpers/index.js"),n=require("../index.js"),c=require("../../BizProductProvider.js"),l=N(require("./ScrollSpyNav/index.js"));const g=({onSpyNavItemClick:e})=>{const{product:t,renderRating:o}=(0,c.useBizProductContext)(),s=(0,m.useMemo)(()=>t?.payload?.components?.find(r=>r.componentKey==="PurchaseBar")?.data||[],[t?.payload]);return(0,a.jsxs)("div",{id:"purchase-bar",className:"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]",children:[(0,a.jsx)(i.Container,{children:(0,a.jsxs)("div",{className:"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full",children:[(0,a.jsxs)("div",{className:"flex-1 py-3 desktop:pt-6 desktop:pb-0 tablet:flex-none",children:[(0,a.jsx)(i.Heading,{size:2,className:"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]",html:t?.title}),(0,a.jsx)("div",{className:"justify-between hidden desktop:flex gap-8 items-center mt-3",children:(0,a.jsx)(l.default,{tabs:s,className:"",renderRating:o,onSpyNavItemClick:e})})]}),(0,a.jsx)("div",{className:"hidden desktop:block",children:(0,a.jsx)(n.ProductActions,{})})]})}),(0,a.jsxs)(i.Container,{className:"desktop:hidden relative",children:[(0,a.jsx)("div",{className:"w-[100%] h-[1px] bg-[#E4E5E6] absolute top-0 left-0"}),(0,a.jsx)(l.default,{tabs:s,renderRating:o,onSpyNavItemClick:e})]})]})};var k=g;
|
|
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/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useRef, useState, useMemo } from 'react'\nimport { Text, Heading, Button, Container } from '../../../../components'\nimport type { PurchaseBarProps, ScrollSpyNavProps, ScrollSpyNavItem } from './types.js'\nimport { gsap } from 'gsap'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ProductActions } from '../index.js'\nimport { useBizProductContext } from '../../BizProductProvider.js'\nimport ScrollSpyNav from './ScrollSpyNav/index.js'\n\nconst PurchaseBar = ({ onSpyNavItemClick }: PurchaseBarProps) => {\n const { product, renderRating } = useBizProductContext()\n\n const PurchaseBarData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'PurchaseBar')?.data || []\n }, [product?.payload])\n\n return (\n <div id=\"purchase-bar\" className=\"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]\">\n <Container>\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useRef, useState, useMemo } from 'react'\nimport { Text, Heading, Button, Container } from '../../../../components'\nimport type { PurchaseBarProps, ScrollSpyNavProps, ScrollSpyNavItem } from './types.js'\nimport { gsap } from 'gsap'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ProductActions } from '../index.js'\nimport { useBizProductContext } from '../../BizProductProvider.js'\nimport ScrollSpyNav from './ScrollSpyNav/index.js'\n\nconst PurchaseBar = ({ onSpyNavItemClick }: PurchaseBarProps) => {\n const { product, renderRating } = useBizProductContext()\n\n const PurchaseBarData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'PurchaseBar')?.data || []\n }, [product?.payload])\n\n return (\n <div id=\"purchase-bar\" className=\"bg-white sticky top-0 left-0 w-full z-[52] border-b border-[#E4E5E6]\">\n <Container>\n <div className=\"flex gap-[10px] items-center tablet:justify-between tablet:gap-0 tablet:w-full\">\n <div className=\"flex-1 py-3 desktop:pt-6 desktop:pb-0 tablet:flex-none\">\n <Heading\n size={2}\n className=\"line-clamp-2 tablet:max-w-[406px] desktop:max-w-[570px] lg-desktop:max-w-[683px]\"\n html={product?.title}\n />\n <div className=\"justify-between hidden desktop:flex gap-8 items-center mt-3\">\n <ScrollSpyNav\n tabs={PurchaseBarData}\n className=\"\"\n renderRating={renderRating}\n onSpyNavItemClick={onSpyNavItemClick}\n />\n </div>\n </div>\n <div className=\"hidden desktop:block\">\n <ProductActions />\n </div>\n </div>\n </Container>\n <Container className=\"desktop:hidden relative\">\n <div className=\"w-[100%] h-[1px] bg-[#E4E5E6] absolute top-0 left-0\"></div>\n <ScrollSpyNav tabs={PurchaseBarData} renderRating={renderRating} onSpyNavItemClick={onSpyNavItemClick} />\n </Container>\n </div>\n )\n}\n\nexport default PurchaseBar\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBU,IAAAI,EAAA,6BArBVC,EAAkE,iBAClEC,EAAiD,kCAEjDC,EAAqB,gBACrBC,EAA+B,0CAC/BC,EAAmB,wCACnBC,EAA+B,uBAC/BC,EAAqC,uCACrCC,EAAyB,sCAEzB,MAAMC,EAAc,CAAC,CAAE,kBAAAC,CAAkB,IAAwB,CAC/D,KAAM,CAAE,QAAAC,EAAS,aAAAC,CAAa,KAAI,wBAAqB,EAEjDC,KAAkB,WAAQ,IACvBF,GAAS,SAAS,YAAY,KAAMG,GAAcA,EAAK,eAAiB,aAAa,GAAG,MAAQ,CAAC,EACvG,CAACH,GAAS,OAAO,CAAC,EAErB,SACE,QAAC,OAAI,GAAG,eAAe,UAAU,uEAC/B,oBAAC,aACC,oBAAC,OAAI,UAAU,iFACb,qBAAC,OAAI,UAAU,yDACb,oBAAC,WACC,KAAM,EACN,UAAU,mFACV,KAAMA,GAAS,MACjB,KACA,OAAC,OAAI,UAAU,8DACb,mBAAC,EAAAI,QAAA,CACC,KAAMF,EACN,UAAU,GACV,aAAcD,EACd,kBAAmBF,EACrB,EACF,GACF,KACA,OAAC,OAAI,UAAU,uBACb,mBAAC,mBAAe,EAClB,GACF,EACF,KACA,QAAC,aAAU,UAAU,0BACnB,oBAAC,OAAI,UAAU,sDAAsD,KACrE,OAAC,EAAAK,QAAA,CAAa,KAAMF,EAAiB,aAAcD,EAAc,kBAAmBF,EAAmB,GACzG,GACF,CAEJ,EAEA,IAAOZ,EAAQW",
|
|
6
6
|
"names": ["PurchaseBar_exports", "__export", "PurchaseBar_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_gsap", "import_AiuiProvider", "import_helpers", "import__", "import_BizProductProvider", "import_ScrollSpyNav", "PurchaseBar", "onSpyNavItemClick", "product", "renderRating", "PurchaseBarData", "item", "ScrollSpyNav"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as M}from"react/jsx-runtime";import{Text as u}from"../../../../../../components/index.js";import{createContext as g,useContext as
|
|
1
|
+
import{jsx as i,jsxs as M}from"react/jsx-runtime";import{Text as u}from"../../../../../../components/index.js";import{createContext as g,useContext as B,useState as m,forwardRef as v}from"react";import{cn as r}from"../../../../../../helpers/index.js";import{Content as x,List as L,Root as C,Trigger as P}from"@radix-ui/react-tabs";const b=g(void 0),h=()=>{const e=B(b);if(!e)throw new Error("ProductBenefitsTabs components must be used within ProductBenefitsTabs");return e},a=({defaultValue:e,value:t,onValueChange:s,children:n,className:o,...l})=>{const[T,p]=m(e),d=t??T,f=c=>{t===void 0&&p(c),s?.(c)};return i(b.Provider,{value:{activeValue:d,setActiveValue:f},children:i("div",{id:"ipc-product-detail-benefits-tabs",className:r("bg-[#EAEAEC] rounded-lg pt-[10px]",o),...l,children:i(C,{value:d,onValueChange:f,children:n})})})},E=v(({children:e,className:t,...s},n)=>i(L,{className:r("flex space-x-6 overflow-x-auto px-4 border-b border-[#E4E5E6] relative",t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},ref:n,...s,children:e})),N=({value:e,children:t,className:s,...n})=>{const{activeValue:o}=h(),l=o===e;return M(P,{value:e,className:r("text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold lg-desktop:pb-4 pb-[10px] text-[#6D6D6F]",s),...n,children:[i(u,{className:r("absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300",l&&"w-full")}),t]})},w=({children:e,className:t,...s})=>i(u,{size:1,className:r("font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand",t),...s,children:e}),H=({value:e,children:t,className:s,...n})=>i(x,{value:e,className:r(s),...n,children:t});a.displayName="ProductBenefitsTabs",a.List=E,a.Trigger=N,a.Badge=w,a.Content=H;var k=a;export{k as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n createContext,\n useContext,\n useState,\n type ReactNode,\n type HTMLAttributes,\n useEffect,\n useRef,\n forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n activeValue: string | undefined\n setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n const context = useContext(BenefitsTabsContext)\n if (!context) {\n throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n }\n return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n defaultValue?: string\n value?: string\n onValueChange?: (value: string) => void\n children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n defaultValue,\n value,\n onValueChange,\n children,\n className,\n ...props\n}: BenefitsTabsProps) => {\n const [internalValue, setInternalValue] = useState(defaultValue)\n\n const activeValue = value ?? internalValue\n const setActiveValue = (newValue: string) => {\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onValueChange?.(newValue)\n }\n\n return (\n <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n <div\n id=\"ipc-product-detail-benefits-tabs\"\n className={cn('bg-[#EAEAEC] rounded-
|
|
5
|
-
"mappings": "AA+DQ,cAAAA,EAwCJ,QAAAC,MAxCI,oBA/DR,OAAS,QAAAC,MAAY,wCACrB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAKA,cAAAC,MACK,QACP,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAQ7C,MAAMC,EAAsBT,EAAmD,MAAS,EAElFU,EAAyB,IAAM,CACnC,MAAMC,EAAUV,EAAWQ,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAASW,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACE1B,EAACY,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAzB,EAAC,OACC,GAAG,mCACH,UAAWO,EAAG,
|
|
4
|
+
"sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n createContext,\n useContext,\n useState,\n type ReactNode,\n type HTMLAttributes,\n useEffect,\n useRef,\n forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n activeValue: string | undefined\n setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n const context = useContext(BenefitsTabsContext)\n if (!context) {\n throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n }\n return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n defaultValue?: string\n value?: string\n onValueChange?: (value: string) => void\n children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n defaultValue,\n value,\n onValueChange,\n children,\n className,\n ...props\n}: BenefitsTabsProps) => {\n const [internalValue, setInternalValue] = useState(defaultValue)\n\n const activeValue = value ?? internalValue\n const setActiveValue = (newValue: string) => {\n if (value === undefined) {\n setInternalValue(newValue)\n }\n onValueChange?.(newValue)\n }\n\n return (\n <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n <div\n id=\"ipc-product-detail-benefits-tabs\"\n className={cn('bg-[#EAEAEC] rounded-lg pt-[10px]', className)}\n {...props}\n >\n <Root value={activeValue} onValueChange={setActiveValue}>\n {children}\n </Root>\n </div>\n </BenefitsTabsContext.Provider>\n )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode\n}\n\nconst BenefitsTabsList = forwardRef<HTMLDivElement, BenefitsTabsListProps>(({ children, className, ...props }, ref) => {\n return (\n <List\n className={cn('flex space-x-6 overflow-x-auto px-4 border-b border-[#E4E5E6] relative', className)}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n ref={ref}\n {...props}\n >\n {children}\n </List>\n )\n})\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n value: string\n children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n const { activeValue } = useBenefitsTabsContext()\n const isActive = activeValue === value\n\n return (\n <Trigger\n value={value}\n className={cn(\n 'text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold lg-desktop:pb-4 pb-[10px] text-[#6D6D6F]',\n className\n )}\n {...props}\n >\n <Text\n className={cn(\n 'absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300',\n isActive && 'w-full'\n )}\n />\n {children}\n </Trigger>\n )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n return (\n <Text\n size={1}\n className={cn('font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand', className)}\n {...props}\n >\n {children}\n </Text>\n )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n value: string\n children: ReactNode\n}\n\nconst BenefitsTabsContent = ({ value, children, className, ...props }: BenefitsTabsContentProps) => {\n return (\n <Content value={value} className={cn(className)} {...props}>\n {children}\n </Content>\n )\n}\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
|
|
5
|
+
"mappings": "AA+DQ,cAAAA,EAwCJ,QAAAC,MAxCI,oBA/DR,OAAS,QAAAC,MAAY,wCACrB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAKA,cAAAC,MACK,QACP,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAQ7C,MAAMC,EAAsBT,EAAmD,MAAS,EAElFU,EAAyB,IAAM,CACnC,MAAMC,EAAUV,EAAWQ,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAASW,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACE1B,EAACY,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAzB,EAAC,OACC,GAAG,mCACH,UAAWO,EAAG,oCAAqCa,CAAS,EAC3D,GAAGC,EAEJ,SAAArB,EAACU,EAAA,CAAK,MAAOc,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmBrB,EAAkD,CAAC,CAAE,SAAAa,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGO,IAE3G5B,EAACS,EAAA,CACC,UAAWF,EAAG,yEAA0Ea,CAAS,EACjG,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,IAAKQ,EACJ,GAAGP,EAEH,SAAAF,EACH,CAEH,EAQKU,EAAsB,CAAC,CAAE,MAAAZ,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCiB,EAAWN,IAAgBP,EAEjC,OACEhB,EAACU,EAAA,CACC,MAAOM,EACP,UAAWV,EACT,2HACAa,CACF,EACC,GAAGC,EAEJ,UAAArB,EAACE,EAAA,CACC,UAAWK,EACT,wFACAuB,GAAY,QACd,EACF,EACCX,GACH,CAEJ,EAOMY,EAAoB,CAAC,CAAE,SAAAZ,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEvDrB,EAACE,EAAA,CACC,KAAM,EACN,UAAWK,EAAG,+EAAgFa,CAAS,EACtG,GAAGC,EAEH,SAAAF,EACH,EAUEa,EAAsB,CAAC,CAAE,MAAAf,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEhErB,EAACQ,EAAA,CAAQ,MAAOS,EAAO,UAAWV,EAAGa,CAAS,EAAI,GAAGC,EAClD,SAAAF,EACH,EAIJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUc,EAC9Bd,EAAoB,MAAQgB,EAC5BhB,EAAoB,QAAUiB,EAE9B,IAAOC,EAAQlB",
|
|
6
6
|
"names": ["jsx", "jsxs", "Text", "createContext", "useContext", "useState", "forwardRef", "cn", "Content", "List", "Root", "Trigger", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "ref", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent", "ProductBenefitsTabs_default"]
|
|
7
7
|
}
|
package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i,jsxs as r}from"react/jsx-runtime";import{Text as o,Picture as y,Checkbox as C}from"../../../../../../components";import{cn as m}from"../../../../../../helpers/index.js";import{useAiuiContext as N}from"../../../../../AiuiProvider";import{useBizProductContext as B}from"../../../../BizProductProvider.js";import{formatPrice as u}from"../../../../utils";const b=()=>{const{locale:l="us"}=N(),{variant:v,bundle:f,checkedBundle:a,setCheckedBundle:d,setCheckedGift:D,savingDetail:P,setSavingDetail:z,setCheckedExchangePurchase:L,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:n}=B(),{title:x,bundleList:h,showAtListing:g}=f||{},p=h?.filter(e=>e.variants.slice(1,e.variants.length).every(s=>s.variant.availableForSale));if(!p?.length&&g)return null;const k=e=>{a?.id===e.id?(d?.(void 0),c?.({...n,bundle:{value:void 0,canOperate:!0}})):(d?.(e),c?.({...n,bundle:{value:e,canOperate:!1}}))};return r("div",{className:"ipc-product-detail-bundle",children:[i(o,{size:3,className:"font-bold",html:x}),i("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 desktop:mt-4",children:p?.map(e=>{const s=e.variants.filter(t=>t.variant.sku!==v.sku);return i("div",{children:r("div",{className:m("flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2",{"border-brand":a?.id===e.id}),children:[i(C,{onCheckedChange:()=>k(e),size:"lg",className:m("rounded-full border-[#D1D1D1] border-[2px]",{"border-brand":a?.id===e.id}),id:e.id,value:e.id,checked:a?.id===e.id}),i("label",{htmlFor:e.id,className:"size-full cursor-pointer py-6",children:s?.map(t=>r("div",{className:"flex justify-between items-center gap-6 ",children:[r("div",{className:"flex items-center gap-2",children:[i(y,{source:t?.variant?.image?.url,className:"size-12 flex-shrink-0"}),i(o,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:t.variant.product.title})]}),r("div",{className:"flex items-center justify-end gap-1 laptop:flex-row flex-col shrink-0",children:[i(o,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:u({amount:t.price,locale:l,currencyCode:t.variant.price.currencyCode})}),t.price<t.variant.price.amount&&i(o,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:u({amount:t.variant.price.amount,locale:l,currencyCode:t.variant.price.currencyCode})})]})]},t.variant.id))})]})},e.id)})})]})};var O=b;export{O as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|