@anker-in/headless-ui 1.3.58 → 1.3.59-alpha.1786958928599
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/CartDetail/CartPriceSummary/CartPriceSummary.d.ts +3 -1
- package/dist/cjs/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.js +1 -1
- package/dist/cjs/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +19 -0
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.d.ts +7 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.js +2 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/index.js.map +7 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.d.ts +8 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +2 -0
- package/dist/cjs/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +7 -0
- package/dist/cjs/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/index.d.ts +3 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/hooks/useDraggableScroll.js +1 -1
- package/dist/cjs/hooks/useDraggableScroll.js.map +2 -2
- package/dist/cjs/hooks/useExposure.d.ts +1 -1
- package/dist/cjs/hooks/useExposure.js +1 -1
- package/dist/cjs/hooks/useExposure.js.map +2 -2
- package/dist/cjs/hooks/useViewItemList.d.ts +1 -1
- package/dist/cjs/hooks/useViewItemList.js.map +2 -2
- package/dist/esm/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.d.ts +3 -1
- package/dist/esm/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.js +1 -1
- package/dist/esm/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +19 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.d.ts +7 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.js +2 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/index.js.map +7 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.d.ts +8 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js +2 -0
- package/dist/esm/biz-components/ShelfDisplayHorizontal/shelfDisplayHorizontalItem.js.map +7 -0
- package/dist/esm/biz-components/Specs/dropdown.d.ts +2 -1
- package/dist/esm/biz-components/Specs/dropdown.js +2 -2
- package/dist/esm/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/index.d.ts +3 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/hooks/useDraggableScroll.js +1 -1
- package/dist/esm/hooks/useDraggableScroll.js.map +2 -2
- package/dist/esm/hooks/useExposure.d.ts +1 -1
- package/dist/esm/hooks/useExposure.js +1 -1
- package/dist/esm/hooks/useExposure.js.map +2 -2
- package/dist/esm/hooks/useViewItemList.d.ts +1 -1
- package/dist/esm/hooks/useViewItemList.js.map +2 -2
- package/dist/tokens/base.css +4 -0
- package/package.json +1 -1
- package/style.css +89 -12
|
@@ -11,6 +11,8 @@ export interface CartPriceSummaryProps {
|
|
|
11
11
|
appliedCoupons?: string[];
|
|
12
12
|
/** 移除折扣码回调，参数为折扣码 */
|
|
13
13
|
onCouponRemove?: (code: string) => void;
|
|
14
|
+
/** 折扣码应用失败时的错误信息，非空时 Input 变红并显示该文案 */
|
|
15
|
+
couponError?: string;
|
|
14
16
|
/** 折扣码应用按钮 loading 状态 */
|
|
15
17
|
couponLoading?: boolean;
|
|
16
18
|
/** 小计金额（格式化字符串，含货币符号） */
|
|
@@ -43,7 +45,7 @@ export interface CartPriceSummaryProps {
|
|
|
43
45
|
/** 根容器 className */
|
|
44
46
|
className?: string;
|
|
45
47
|
/** 语义化类名覆盖 */
|
|
46
|
-
classNames?: Partial<Record<'root' | 'couponToggle' | 'couponLink' | 'couponInput' | 'couponTags' | 'couponTag' | 'couponTagText' | 'couponTagRemove' | 'priceRow' | 'priceRowLabel' | 'priceRowValue' | 'discountBox' | 'discountRow' | 'discountRowValue' | 'discountTotalRow' | 'discountTotalValue' | 'divider' | 'totalRow' | 'totalValue' | 'checkoutButton' | 'cashReduction' | 'installment', string>>;
|
|
48
|
+
classNames?: Partial<Record<'root' | 'couponToggle' | 'couponLink' | 'couponInput' | 'couponErrorMessage' | 'couponTags' | 'couponTag' | 'couponTagText' | 'couponTagRemove' | 'priceRow' | 'priceRowLabel' | 'priceRowValue' | 'discountBox' | 'discountRow' | 'discountRowValue' | 'discountTotalRow' | 'discountTotalValue' | 'divider' | 'totalRow' | 'totalValue' | 'checkoutButton' | 'cashReduction' | 'installment', string>>;
|
|
47
49
|
}
|
|
48
50
|
declare const CartPriceSummary: React.ForwardRefExoticComponent<CartPriceSummaryProps & React.RefAttributes<HTMLDivElement>>;
|
|
49
51
|
export default CartPriceSummary;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var D=Object.create;var m=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var Z=(o,i)=>{for(var r in i)m(o,r,{get:i[r],enumerable:!0})},N=(o,i,r,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of O(i))!W.call(o,l)&&l!==r&&m(o,l,{get:()=>i[l],enumerable:!(p=M(i,l))||p.enumerable});return o};var _=(o,i,r)=>(r=o!=null?D(H(o)):{},N(i||!o||!o.__esModule?m(r,"default",{value:o,enumerable:!0}):r,o)),F=o=>N(m({},"__esModule",{value:!0}),o);var J={};Z(J,{default:()=>G});module.exports=F(J);var t=require("react/jsx-runtime"),T=_(require("react")),a=require("../../../helpers/index.js"),c=require("../../../components/index.js"),V=require("../index.js");const U=({className:o})=>(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,a.cn)("shrink-0",o),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{fill:"currentColor",d:"M11.5286 5.52827C11.789 5.26792 12.211 5.26792 12.4713 5.52827C12.7317 5.78862 12.7317 6.21063 12.4713 6.47098L8.47134 10.471C8.211 10.7313 7.78899 10.7313 7.52864 10.471L3.52864 6.47098C3.26829 6.21063 3.26829 5.78862 3.52864 5.52827C3.78899 5.26792 4.211 5.26792 4.47134 5.52827L7.99999 9.05692L11.5286 5.52827Z"})}),Y=({className:o})=>(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",className:(0,a.cn)("shrink-0",o),children:(0,t.jsx)("path",{d:"M0.182919 0.183095C0.426997 -0.0609829 0.822822 -0.0610803 1.0668 0.183095L3.56999 2.68858L6.07548 0.183095C6.31954 -0.0609728 6.71538 -0.0610506 6.95936 0.183095C7.20328 0.427211 7.20326 0.822886 6.95936 1.06698L4.45387 3.57247L6.95706 6.07795C7.20096 6.32205 7.20091 6.71774 6.95706 6.96184C6.71298 7.20588 6.31714 7.206 6.07317 6.96184L3.56999 4.45635L1.0668 6.95953C0.822725 7.20361 0.426899 7.20371 0.182919 6.95953C-0.0609731 6.71542 -0.0609728 6.31973 0.182919 6.07565L2.6861 3.57247L0.182919 1.06698C-0.0609927 0.822872 -0.060953 0.427189 0.182919 0.183095Z",fill:"#767880"})}),b=({className:o})=>(0,t.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:(0,a.cn)("shrink-0",o),children:[(0,t.jsx)("circle",{cx:"10",cy:"10",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),(0,t.jsx)("path",{d:"M10 9V14M10 6V6.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),z=T.forwardRef(({couponInputValue:o,onCouponInputChange:i,onCouponApply:r,appliedCoupons:p,onCouponRemove:l,couponLoading:j=!1,subtotal:y,shipping:v,taxes:h,productDiscount:x,orderDiscount:f,discountTotal:d,total:u,onCheckout:k,showCashReduction:R,showInstallment:C,installmentIcons:g,copy:P,className:S,classNames:e={},...B},I)=>{const n={...V.DEFAULT_CART_COPY,...P},L=i!==void 0||r!==void 0||p&&p.length>0,[w,E]=T.useState(!1),A=x!==void 0||f!==void 0;return(0,t.jsx)("div",{ref:I,className:(0,a.cn)("cart-price-summary-root","laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ","",S,e.root),...B,children:(0,t.jsxs)("div",{className:"laptop:w-[74.8%] laptop:ml-auto laptop:gap-4 laptop:items-end laptop:p-0 flex flex-col gap-2 p-4",children:[L&&(0,t.jsxs)("button",{type:"button",className:(0,a.cn)("cart-price-summary-coupon-toggle","group flex w-full cursor-pointer items-center justify-between",e.couponToggle),onClick:()=>E(s=>!s),children:[(0,t.jsx)("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.couponTitle||"Have a discount code?"}),(0,t.jsxs)("span",{className:(0,a.cn)("cart-price-summary-coupon-link","text-brand-primary text-brand-0 laptop:text-base flex items-start gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]",e.couponLink),children:[n.couponLink||"Apply/Check",(0,t.jsx)(U,{className:(0,a.cn)("text-brand-primary laptop:size-5 size-4 transition-transform duration-200",w&&"rotate-180")})]})]}),w&&(0,t.jsxs)("div",{className:"laptop:max-w-[404px] flex flex-col items-end gap-2",children:[(0,t.jsx)(c.Input,{size:"lg",type:"text",value:o,onChange:s=>i?.(s.target.value),placeholder:n.couponPlaceholder||"Enter Code",className:(0,a.cn)("cart-price-summary-coupon-input","border-lines-primary laptop:h-[54px] h-[44px] w-full bg-transparent",e.couponInput),inputClassName:"text-sm laptop:text-base font-bold w-[315px] flex-1",children:(0,t.jsx)(c.InputSlot,{children:(0,t.jsx)("div",{className:"border-lines-primary flex items-center border-l pl-2 pr-4",children:(0,t.jsx)(c.Button,{variant:"ghost",size:"lg",loading:j,className:"hover:!text-info-primary text-info-primary laptop:text-base cursor-pointer !p-0 text-sm font-bold leading-[1.4] tracking-[-0.02em] underline hover:!bg-transparent",onClick:()=>r?.(o||""),children:n.couponApply||"Apply"})})})}),p&&p.length>0&&(0,t.jsx)("div",{className:(0,a.cn)("cart-price-summary-coupon-tags","laptop:gap-2 flex flex-wrap gap-1",e.couponTags),children:p.map(s=>(0,t.jsxs)("span",{className:(0,a.cn)("cart-price-summary-coupon-tag","bg-container-secondary rounded-box-small flex items-center gap-1 py-1 pl-2 pr-1",e.couponTag),children:[(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-coupon-tag-text","text-info-tertiary laptop:text-base whitespace-nowrap text-xs font-bold !leading-[1.4] tracking-[-0.02em]",e.couponTagText),children:s}),(0,t.jsx)("button",{type:"button",className:(0,a.cn)("cart-price-summary-coupon-tag-remove","text-info-tertiary hover:text-info-primary laptop:size-5 flex size-4 cursor-pointer items-center justify-center rounded-full bg-[#EAEAEC]",e.couponTagRemove),onClick:()=>l?.(s),children:(0,t.jsx)(Y,{})})]},s))})]}),(0,t.jsxs)("div",{className:(0,a.cn)("laptop:gap-4 flex w-full flex-col gap-2",!w&&L&&"laptop:flex hidden"),children:[y!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.subtotalLabel||"Subtotal:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:y})]}),v!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.shippingLabel||"Shipping:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:v})]}),h!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.taxesLabel||"Taxes:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:h})]}),A&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-box","bg-container-secondary rounded-box-small laptop:p-4 flex w-full flex-col gap-2 p-2",e.discountBox),children:[x!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-row","text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.discountRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.productDiscountsLabel||"Product discounts:"}),(0,t.jsx)("span",{className:(0,a.cn)("text-marketing-1",e.discountRowValue),children:x})]}),f!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-row","text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.discountRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.orderDiscountLabel||"Order discount:"}),(0,t.jsx)("span",{className:(0,a.cn)("text-marketing-1",e.discountRowValue),children:f})]})]})]}),(d!==void 0||u!==void 0)&&(0,t.jsxs)("div",{className:"flex w-full flex-col gap-4",children:[d!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-total-row","flex w-full items-center justify-between whitespace-nowrap",e.discountTotalRow),children:[(0,t.jsx)("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.discountTotalLabel||"Discount total:"}),(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-discount-total-value","text-marketing-1 laptop:text-base text-right text-sm font-bold leading-[1.2] tracking-[-0.04em]",e.discountTotalValue),children:d})]}),d!==void 0&&u!==void 0&&(0,t.jsx)("div",{className:(0,a.cn)("cart-price-summary-divider","border-lines-primary w-full border-t",e.divider)}),u!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-total-row","flex w-full items-center justify-between whitespace-nowrap",e.totalRow),children:[(0,t.jsx)("span",{className:"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:n.totalLabel||"Total:"}),(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-total-value","text-info-primary laptop:text-2xl text-right text-xl font-bold leading-[1.2] tracking-[-0.04em]",e.totalValue),children:u})]})]}),R&&n.cashReductionText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-cash-reduction-mobile","laptop:hidden flex items-start gap-1",e.cashReduction),children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),(0,t.jsx)(b,{className:"text-info-quaternary laptop:size-5 size-4"})]}),(0,t.jsxs)("div",{className:(0,a.cn)("laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4",!C&&"justify-end"),children:[k&&(0,t.jsx)(c.Button,{variant:"primary",size:"lg",className:(0,a.cn)("cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0",e.checkoutButton),onClick:k,children:n.checkOut||"Check Out"}),R&&n.cashReductionText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-cash-reduction","laptop:flex hidden items-start gap-1",e.cashReduction),children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),(0,t.jsx)(b,{className:"text-info-quaternary laptop:size-5 size-4"})]}),C&&n.installmentText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-installment","laptop:flex-row order-1 flex flex-col items-start gap-0.5",e.installment),children:[g&&g.length>0&&(0,t.jsx)("span",{className:"flex shrink-0 items-center",children:g.map((s,q)=>(0,t.jsx)("img",{src:s.src,alt:s.alt||"",className:"laptop:size-5 -mr-1 size-4 object-cover"},q))}),(0,t.jsxs)("div",{className:"flex gap-1",children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.installmentText}),(0,t.jsx)(b,{className:"text-info-quaternary laptop:size-5 size-4"})]})]})]})]})})});z.displayName="CartPriceSummary";var G=z;
|
|
1
|
+
"use strict";"use client";var W=Object.create;var m=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Y=(o,r)=>{for(var i in r)m(o,i,{get:r[i],enumerable:!0})},E=(o,r,i,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of _(r))!U.call(o,s)&&s!==i&&m(o,s,{get:()=>r[s],enumerable:!(c=Z(r,s))||c.enumerable});return o};var G=(o,r,i)=>(i=o!=null?W(F(o)):{},E(r||!o||!o.__esModule?m(i,"default",{value:o,enumerable:!0}):i,o)),J=o=>E(m({},"__esModule",{value:!0}),o);var $={};Y($,{default:()=>X});module.exports=J($);var t=require("react/jsx-runtime"),x=G(require("react")),a=require("../../../helpers/index.js"),l=require("../../../components/index.js"),V=require("../index.js");const K=({className:o})=>(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,a.cn)("shrink-0",o),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{fill:"currentColor",d:"M11.5286 5.52827C11.789 5.26792 12.211 5.26792 12.4713 5.52827C12.7317 5.78862 12.7317 6.21063 12.4713 6.47098L8.47134 10.471C8.211 10.7313 7.78899 10.7313 7.52864 10.471L3.52864 6.47098C3.26829 6.21063 3.26829 5.78862 3.52864 5.52827C3.78899 5.26792 4.211 5.26792 4.47134 5.52827L7.99999 9.05692L11.5286 5.52827Z"})}),Q=({className:o})=>(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",className:(0,a.cn)("shrink-0",o),children:(0,t.jsx)("path",{d:"M0.182919 0.183095C0.426997 -0.0609829 0.822822 -0.0610803 1.0668 0.183095L3.56999 2.68858L6.07548 0.183095C6.31954 -0.0609728 6.71538 -0.0610506 6.95936 0.183095C7.20328 0.427211 7.20326 0.822886 6.95936 1.06698L4.45387 3.57247L6.95706 6.07795C7.20096 6.32205 7.20091 6.71774 6.95706 6.96184C6.71298 7.20588 6.31714 7.206 6.07317 6.96184L3.56999 4.45635L1.0668 6.95953C0.822725 7.20361 0.426899 7.20371 0.182919 6.95953C-0.0609731 6.71542 -0.0609728 6.31973 0.182919 6.07565L2.6861 3.57247L0.182919 1.06698C-0.0609927 0.822872 -0.060953 0.427189 0.182919 0.183095Z",fill:"#767880"})}),v=({className:o})=>(0,t.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:(0,a.cn)("shrink-0",o),children:[(0,t.jsx)("circle",{cx:"10",cy:"10",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),(0,t.jsx)("path",{d:"M10 9V14M10 6V6.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),S=x.forwardRef(({couponInputValue:o,onCouponInputChange:r,onCouponApply:i,couponError:c,appliedCoupons:s,onCouponRemove:j,couponLoading:I=!1,subtotal:h,shipping:k,taxes:C,productDiscount:f,orderDiscount:g,discountTotal:u,total:d,onCheckout:R,showCashReduction:L,showInstallment:N,installmentIcons:w,copy:B,className:P,classNames:e={},...M},A)=>{const n={...V.DEFAULT_CART_COPY,...B},T=r!==void 0||i!==void 0||s&&s.length>0,[b,q]=x.useState(!1),[y,z]=x.useState("");x.useEffect(()=>{c&&z(c)},[c]);const D=p=>{z(""),r?.(p.target.value)},O=f!==void 0||g!==void 0;return(0,t.jsx)("div",{ref:A,className:(0,a.cn)("cart-price-summary-root","laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ","",P,e.root),...M,children:(0,t.jsxs)("div",{className:"laptop:w-[74.8%] laptop:ml-auto laptop:gap-4 laptop:items-end laptop:p-0 flex flex-col gap-2 p-4",children:[T&&(0,t.jsxs)("button",{type:"button",className:(0,a.cn)("cart-price-summary-coupon-toggle","group flex w-full cursor-pointer items-center justify-between",e.couponToggle),onClick:()=>q(p=>!p),children:[(0,t.jsx)("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.couponTitle||"Have a discount code?"}),(0,t.jsxs)("span",{className:(0,a.cn)("cart-price-summary-coupon-link","text-brand-primary text-brand-0 laptop:text-base flex items-start gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]",e.couponLink),children:[n.couponLink||"Apply/Check",(0,t.jsx)(K,{className:(0,a.cn)("text-brand-primary laptop:size-5 size-4 transition-transform duration-200",b&&"rotate-180")})]})]}),b&&(0,t.jsxs)("div",{className:"laptop:max-w-[404px] flex flex-col items-end gap-2",children:[(0,t.jsx)(l.Input,{size:"lg",type:"text",value:o,onChange:D,placeholder:n.couponPlaceholder||"Enter Code",className:(0,a.cn)("cart-price-summary-coupon-input","border-lines-primary laptop:h-[54px] h-[44px] w-full bg-transparent",y&&"border-error-0",e.couponInput),inputClassName:"text-sm laptop:text-base font-bold bg-white w-[315px] flex-1",children:(0,t.jsx)(l.InputSlot,{children:(0,t.jsx)("div",{className:"border-lines-primary flex items-center border-l pl-2 pr-4",children:(0,t.jsx)(l.Button,{variant:"ghost",size:"lg",loading:I,className:"hover:!text-info-primary text-info-primary laptop:text-base cursor-pointer !p-0 text-sm font-bold leading-[1.4] tracking-[-0.02em] underline hover:!bg-transparent",onClick:()=>i?.(o||""),children:n.couponApply||"Apply"})})})}),y&&(0,t.jsx)("p",{className:(0,a.cn)("cart-price-summary-coupon-error-message","text-error-0 text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.couponErrorMessage),children:y}),s&&s.length>0&&(0,t.jsx)("div",{className:(0,a.cn)("cart-price-summary-coupon-tags","laptop:gap-2 flex flex-wrap gap-1",e.couponTags),children:s.map(p=>(0,t.jsxs)("span",{className:(0,a.cn)("cart-price-summary-coupon-tag","bg-container-secondary rounded-box-small flex items-center gap-1 py-1 pl-2 pr-1",e.couponTag),children:[(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-coupon-tag-text","text-info-tertiary laptop:text-base whitespace-nowrap text-xs font-bold !leading-[1.4] tracking-[-0.02em]",e.couponTagText),children:p}),(0,t.jsx)("button",{type:"button",className:(0,a.cn)("cart-price-summary-coupon-tag-remove","text-info-tertiary hover:text-info-primary laptop:size-5 flex size-4 cursor-pointer items-center justify-center rounded-full bg-[#EAEAEC]",e.couponTagRemove),onClick:()=>j?.(p),children:(0,t.jsx)(Q,{})})]},p))})]}),(0,t.jsxs)("div",{className:(0,a.cn)("laptop:gap-4 flex w-full flex-col gap-2",!b&&T&&"laptop:flex hidden"),children:[h!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.subtotalLabel||"Subtotal:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:h})]}),k!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.shippingLabel||"Shipping:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:k})]}),C!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-price-row","text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.priceRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.taxesLabel||"Taxes:"}),(0,t.jsx)("span",{className:e.priceRowValue,children:C})]}),O&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-box","bg-container-secondary rounded-box-small laptop:p-4 flex w-full flex-col gap-2 p-2",e.discountBox),children:[f!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-row","text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.discountRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.productDiscountsLabel||"Product discounts:"}),(0,t.jsx)("span",{className:(0,a.cn)("text-marketing-1",e.discountRowValue),children:f})]}),g!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-row","text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.discountRow),children:[(0,t.jsx)("span",{className:e.priceRowLabel,children:n.orderDiscountLabel||"Order discount:"}),(0,t.jsx)("span",{className:(0,a.cn)("text-marketing-1",e.discountRowValue),children:g})]})]})]}),(u!==void 0||d!==void 0)&&(0,t.jsxs)("div",{className:"flex w-full flex-col gap-4",children:[u!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-discount-total-row","flex w-full items-center justify-between whitespace-nowrap",e.discountTotalRow),children:[(0,t.jsx)("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.discountTotalLabel||"Discount total:"}),(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-discount-total-value","text-marketing-1 laptop:text-base text-right text-sm font-bold leading-[1.2] tracking-[-0.04em]",e.discountTotalValue),children:u})]}),u!==void 0&&d!==void 0&&(0,t.jsx)("div",{className:(0,a.cn)("cart-price-summary-divider","border-lines-primary w-full border-t",e.divider)}),d!==void 0&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-total-row","flex w-full items-center justify-between whitespace-nowrap",e.totalRow),children:[(0,t.jsx)("span",{className:"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:n.totalLabel||"Total:"}),(0,t.jsx)("span",{className:(0,a.cn)("cart-price-summary-total-value","text-info-primary laptop:text-2xl text-right text-xl font-bold leading-[1.2] tracking-[-0.04em]",e.totalValue),children:d})]})]}),L&&n.cashReductionText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-cash-reduction-mobile","laptop:hidden flex items-start gap-1",e.cashReduction),children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),(0,t.jsx)(v,{className:"text-info-quaternary laptop:size-5 size-4"})]}),(0,t.jsxs)("div",{className:(0,a.cn)("laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4",!N&&"justify-end"),children:[R&&(0,t.jsx)(l.Button,{variant:"primary",size:"lg",className:(0,a.cn)("cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0",e.checkoutButton),onClick:R,children:n.checkOut||"Check Out"}),L&&n.cashReductionText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-cash-reduction","laptop:flex hidden items-start gap-1",e.cashReduction),children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),(0,t.jsx)(v,{className:"text-info-quaternary laptop:size-5 size-4"})]}),N&&n.installmentText&&(0,t.jsxs)("div",{className:(0,a.cn)("cart-price-summary-installment","laptop:flex-row order-1 flex flex-col items-start gap-0.5",e.installment),children:[w&&w.length>0&&(0,t.jsx)("span",{className:"flex shrink-0 items-center",children:w.map((p,H)=>(0,t.jsx)("img",{src:p.src,alt:p.alt||"",className:"laptop:size-5 -mr-1 size-4 object-cover"},H))}),(0,t.jsxs)("div",{className:"flex gap-1",children:[(0,t.jsx)("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.installmentText}),(0,t.jsx)(v,{className:"text-info-quaternary laptop:size-5 size-4"})]})]})]})]})})});S.displayName="CartPriceSummary";var X=S;
|
|
2
2
|
//# sourceMappingURL=CartPriceSummary.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/biz-components/CartDetail/CartPriceSummary/CartPriceSummary.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../helpers/index.js'\nimport { Button, Input, InputSlot } from '../../../components/index.js'\nimport { DEFAULT_CART_COPY } from '../index.js'\nimport type { CartPriceSummaryCopy } from '../types.js'\n\n// \u2500\u2500 Icon: Chevron right \u2500\u2500\nconst DownIcon = ({ className }: { className?: string }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('shrink-0', className)}\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n fill=\"currentColor\"\n d=\"M11.5286 5.52827C11.789 5.26792 12.211 5.26792 12.4713 5.52827C12.7317 5.78862 12.7317 6.21063 12.4713 6.47098L8.47134 10.471C8.211 10.7313 7.78899 10.7313 7.52864 10.471L3.52864 6.47098C3.26829 6.21063 3.26829 5.78862 3.52864 5.52827C3.78899 5.26792 4.211 5.26792 4.47134 5.52827L7.99999 9.05692L11.5286 5.52827Z\"\n />\n </svg>\n)\n\n// \u2500\u2500 Icon: Close (used in coupon tag remove button) \u2500\u2500\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n className={cn('shrink-0', className)}\n >\n <path\n d=\"M0.182919 0.183095C0.426997 -0.0609829 0.822822 -0.0610803 1.0668 0.183095L3.56999 2.68858L6.07548 0.183095C6.31954 -0.0609728 6.71538 -0.0610506 6.95936 0.183095C7.20328 0.427211 7.20326 0.822886 6.95936 1.06698L4.45387 3.57247L6.95706 6.07795C7.20096 6.32205 7.20091 6.71774 6.95706 6.96184C6.71298 7.20588 6.31714 7.206 6.07317 6.96184L3.56999 4.45635L1.0668 6.95953C0.822725 7.20361 0.426899 7.20371 0.182919 6.95953C-0.0609731 6.71542 -0.0609728 6.31973 0.182919 6.07565L2.6861 3.57247L0.182919 1.06698C-0.0609927 0.822872 -0.060953 0.427189 0.182919 0.183095Z\"\n fill=\"#767880\"\n />\n </svg>\n)\n\n// \u2500\u2500 Icon: Info \u2500\u2500\nconst InfoIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('shrink-0', className)}\n >\n <circle cx=\"10\" cy=\"10\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n <path d=\"M10 9V14M10 6V6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n)\n\nexport interface CartPriceSummaryProps {\n /** \u6298\u6263\u7801\u8F93\u5165\u6846\u7684\u503C */\n couponInputValue?: string\n /** \u6298\u6263\u7801\u8F93\u5165\u53D8\u5316\u56DE\u8C03 */\n onCouponInputChange?: (value: string) => void\n /** \u70B9\u51FB\u5E94\u7528\u6298\u6263\u7801\u56DE\u8C03\uFF0C\u53C2\u6570\u4E3A\u8F93\u5165\u6846\u4E2D\u7684\u6298\u6263\u7801 */\n onCouponApply?: (code: string) => void\n /** \u5DF2\u5E94\u7528\u7684\u6298\u6263\u7801\u5217\u8868 */\n appliedCoupons?: string[]\n /** \u79FB\u9664\u6298\u6263\u7801\u56DE\u8C03\uFF0C\u53C2\u6570\u4E3A\u6298\u6263\u7801 */\n onCouponRemove?: (code: string) => void\n /** \u6298\u6263\u7801\u5E94\u7528\u6309\u94AE loading \u72B6\u6001 */\n couponLoading?: boolean\n\n /** \u5C0F\u8BA1\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\uFF09 */\n subtotal?: string\n /** \u8FD0\u8D39\u6587\u6848 */\n shipping?: string\n /** \u7A0E\u8D39\u6587\u6848 */\n taxes?: string\n\n /** \u4EA7\u54C1\u6298\u6263\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n productDiscount?: string\n /** \u8BA2\u5355\u6298\u6263\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n orderDiscount?: string\n\n /** \u6298\u6263\u603B\u8BA1\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n discountTotal?: string\n /** \u6700\u7EC8\u603B\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\uFF09 */\n total?: string\n\n /** \u7ED3\u8D26\u6309\u94AE\u70B9\u51FB\u56DE\u8C03 */\n onCheckout?: () => void\n\n /** \u662F\u5426\u663E\u793A\u73B0\u91D1\u51CF\u514D\u63D0\u793A */\n showCashReduction?: boolean\n /** \u662F\u5426\u663E\u793A\u5206\u671F\u4ED8\u6B3E\u4FE1\u606F */\n showInstallment?: boolean\n /** \u5206\u671F\u4ED8\u6B3E\u652F\u4ED8\u65B9\u5F0F\u56FE\u6807\u5217\u8868 */\n installmentIcons?: { src: string; alt?: string }[]\n\n /** \u6587\u6848\u8986\u76D6\uFF0C\u7528\u4E8E\u56FD\u9645\u5316 */\n copy?: CartPriceSummaryCopy\n /** \u6839\u5BB9\u5668 className */\n className?: string\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<\n Record<\n | 'root'\n | 'couponToggle'\n | 'couponLink'\n | 'couponInput'\n | 'couponTags'\n | 'couponTag'\n | 'couponTagText'\n | 'couponTagRemove'\n | 'priceRow'\n | 'priceRowLabel'\n | 'priceRowValue'\n | 'discountBox'\n | 'discountRow'\n | 'discountRowValue'\n | 'discountTotalRow'\n | 'discountTotalValue'\n | 'divider'\n | 'totalRow'\n | 'totalValue'\n | 'checkoutButton'\n | 'cashReduction'\n | 'installment',\n string\n >\n >\n}\n\nconst CartPriceSummary = React.forwardRef<HTMLDivElement, CartPriceSummaryProps>(\n (\n {\n couponInputValue,\n onCouponInputChange,\n onCouponApply,\n appliedCoupons,\n onCouponRemove,\n couponLoading = false,\n\n subtotal,\n shipping,\n taxes,\n\n productDiscount,\n orderDiscount,\n\n discountTotal,\n total,\n\n onCheckout,\n\n showCashReduction,\n showInstallment,\n installmentIcons,\n\n copy,\n className,\n classNames = {},\n ...props\n },\n ref\n ) => {\n const c = { ...DEFAULT_CART_COPY, ...copy }\n\n const hasCouponSection =\n onCouponInputChange !== undefined || onCouponApply !== undefined || (appliedCoupons && appliedCoupons.length > 0)\n\n const [couponExpanded, setCouponExpanded] = React.useState(false)\n\n const hasDiscounts = productDiscount !== undefined || orderDiscount !== undefined\n\n return (\n <div\n ref={ref}\n className={cn(\n 'cart-price-summary-root',\n 'laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ',\n '',\n className,\n classNames.root\n )}\n {...props}\n >\n <div className=\"laptop:w-[74.8%] laptop:ml-auto laptop:gap-4 laptop:items-end laptop:p-0 flex flex-col gap-2 p-4\">\n {/* \u6298\u6263\u7801\u5165\u53E3 */}\n {hasCouponSection && (\n <button\n type=\"button\"\n className={cn(\n 'cart-price-summary-coupon-toggle',\n 'group flex w-full cursor-pointer items-center justify-between',\n classNames.couponToggle\n )}\n onClick={() => setCouponExpanded(prev => !prev)}\n >\n <span className=\"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.couponTitle || 'Have a discount code?'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-coupon-link',\n 'text-brand-primary text-brand-0 laptop:text-base flex items-start gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.couponLink\n )}\n >\n {c.couponLink || 'Apply/Check'}\n <DownIcon\n className={cn(\n 'text-brand-primary laptop:size-5 size-4 transition-transform duration-200',\n couponExpanded && 'rotate-180'\n )}\n />\n </span>\n </button>\n )}\n\n {/* \u6298\u6263\u7801\u8F93\u5165\u4E0E\u6807\u7B7E */}\n {couponExpanded && (\n <div className=\"laptop:max-w-[404px] flex flex-col items-end gap-2\">\n {/* \u8F93\u5165\u6846 + \u5E94\u7528\u6309\u94AE */}\n <Input\n size=\"lg\"\n type=\"text\"\n value={couponInputValue}\n onChange={e => onCouponInputChange?.(e.target.value)}\n placeholder={c.couponPlaceholder || 'Enter Code'}\n className={cn(\n 'cart-price-summary-coupon-input',\n 'border-lines-primary laptop:h-[54px] h-[44px] w-full bg-transparent',\n classNames.couponInput\n )}\n inputClassName=\"text-sm laptop:text-base font-bold w-[315px] flex-1\"\n >\n <InputSlot>\n <div className=\"border-lines-primary flex items-center border-l pl-2 pr-4\">\n <Button\n variant=\"ghost\"\n size=\"lg\"\n loading={couponLoading}\n className=\"hover:!text-info-primary text-info-primary laptop:text-base cursor-pointer !p-0 text-sm font-bold leading-[1.4] tracking-[-0.02em] underline hover:!bg-transparent\"\n onClick={() => onCouponApply?.(couponInputValue || '')}\n >\n {c.couponApply || 'Apply'}\n </Button>\n </div>\n </InputSlot>\n </Input>\n\n {/* \u5DF2\u5E94\u7528\u6298\u6263\u7801\u6807\u7B7E */}\n {appliedCoupons && appliedCoupons.length > 0 && (\n <div\n className={cn(\n 'cart-price-summary-coupon-tags',\n 'laptop:gap-2 flex flex-wrap gap-1',\n classNames.couponTags\n )}\n >\n {appliedCoupons.map(code => (\n <span\n key={code}\n className={cn(\n 'cart-price-summary-coupon-tag',\n 'bg-container-secondary rounded-box-small flex items-center gap-1 py-1 pl-2 pr-1',\n classNames.couponTag\n )}\n >\n <span\n className={cn(\n 'cart-price-summary-coupon-tag-text',\n 'text-info-tertiary laptop:text-base whitespace-nowrap text-xs font-bold !leading-[1.4] tracking-[-0.02em]',\n classNames.couponTagText\n )}\n >\n {code}\n </span>\n <button\n type=\"button\"\n className={cn(\n 'cart-price-summary-coupon-tag-remove',\n 'text-info-tertiary hover:text-info-primary laptop:size-5 flex size-4 cursor-pointer items-center justify-center rounded-full bg-[#EAEAEC]',\n classNames.couponTagRemove\n )}\n onClick={() => onCouponRemove?.(code)}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u4EF7\u683C\u660E\u7EC6\uFF1A\u79FB\u52A8\u7AEF\u6298\u6263\u7801\u6298\u53E0\u65F6\u9690\u85CF\uFF1B\u5E73\u677F\u53CA\u4EE5\u4E0A\u59CB\u7EC8\u53EF\u89C1 */}\n <div\n className={cn(\n 'laptop:gap-4 flex w-full flex-col gap-2',\n !couponExpanded && hasCouponSection && 'laptop:flex hidden'\n )}\n >\n {/* \u5C0F\u8BA1 */}\n {subtotal !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.subtotalLabel || 'Subtotal:'}</span>\n <span className={classNames.priceRowValue}>{subtotal}</span>\n </div>\n )}\n\n {/* \u8FD0\u8D39 */}\n {shipping !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.shippingLabel || 'Shipping:'}</span>\n <span className={classNames.priceRowValue}>{shipping}</span>\n </div>\n )}\n\n {/* \u7A0E\u8D39 */}\n {taxes !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.taxesLabel || 'Taxes:'}</span>\n <span className={classNames.priceRowValue}>{taxes}</span>\n </div>\n )}\n\n {/* \u6298\u6263\u6C47\u603B */}\n {hasDiscounts && (\n <div\n className={cn(\n 'cart-price-summary-discount-box',\n 'bg-container-secondary rounded-box-small laptop:p-4 flex w-full flex-col gap-2 p-2',\n classNames.discountBox\n )}\n >\n {productDiscount !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-row',\n 'text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.discountRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.productDiscountsLabel || 'Product discounts:'}</span>\n <span className={cn('text-marketing-1', classNames.discountRowValue)}>{productDiscount}</span>\n </div>\n )}\n {orderDiscount !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-row',\n 'text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.discountRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.orderDiscountLabel || 'Order discount:'}</span>\n <span className={cn('text-marketing-1', classNames.discountRowValue)}>{orderDiscount}</span>\n </div>\n )}\n </div>\n )}\n </div>\n\n {/* \u6298\u6263\u603B\u8BA1\u4E0E\u6700\u7EC8\u603B\u4EF7 */}\n {(discountTotal !== undefined || total !== undefined) && (\n <div className=\"flex w-full flex-col gap-4\">\n {discountTotal !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-total-row',\n 'flex w-full items-center justify-between whitespace-nowrap',\n classNames.discountTotalRow\n )}\n >\n <span className=\"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.discountTotalLabel || 'Discount total:'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-discount-total-value',\n 'text-marketing-1 laptop:text-base text-right text-sm font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.discountTotalValue\n )}\n >\n {discountTotal}\n </span>\n </div>\n )}\n\n {discountTotal !== undefined && total !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-divider',\n 'border-lines-primary w-full border-t',\n classNames.divider\n )}\n />\n )}\n\n {total !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-total-row',\n 'flex w-full items-center justify-between whitespace-nowrap',\n classNames.totalRow\n )}\n >\n <span className=\"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {c.totalLabel || 'Total:'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-total-value',\n 'text-info-primary laptop:text-2xl text-right text-xl font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.totalValue\n )}\n >\n {total}\n </span>\n </div>\n )}\n </div>\n )}\n {/* \u79FB\u52A8\u7AEF\u73B0\u91D1\u51CF\u514D\u63D0\u793A */}\n {showCashReduction && c.cashReductionText && (\n <div\n className={cn(\n 'cart-price-summary-cash-reduction-mobile',\n 'laptop:hidden flex items-start gap-1',\n classNames.cashReduction\n )}\n >\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.cashReductionText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n )}\n <div\n className={cn(\n 'laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4',\n !showInstallment && 'justify-end'\n )}\n >\n {/* \u7ED3\u8D26\u6309\u94AE */}\n {onCheckout && (\n <Button\n variant=\"primary\"\n size=\"lg\"\n className={cn(\n 'cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0',\n classNames.checkoutButton\n )}\n onClick={onCheckout}\n >\n {c.checkOut || 'Check Out'}\n </Button>\n )}\n\n {/* \u73B0\u91D1\u51CF\u514D\u63D0\u793A */}\n {showCashReduction && c.cashReductionText && (\n <div\n className={cn(\n 'cart-price-summary-cash-reduction',\n 'laptop:flex hidden items-start gap-1',\n classNames.cashReduction\n )}\n >\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.cashReductionText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n )}\n\n {/* \u5206\u671F\u4ED8\u6B3E\u4FE1\u606F */}\n {showInstallment && c.installmentText && (\n <div\n className={cn(\n 'cart-price-summary-installment',\n 'laptop:flex-row order-1 flex flex-col items-start gap-0.5',\n classNames.installment\n )}\n >\n {installmentIcons && installmentIcons.length > 0 && (\n <span className=\"flex shrink-0 items-center\">\n {installmentIcons.map((icon, index) => (\n <img\n key={index}\n src={icon.src}\n alt={icon.alt || ''}\n className=\"laptop:size-5 -mr-1 size-4 object-cover\"\n />\n ))}\n </span>\n )}\n <div className=\"flex gap-1\">\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.installmentText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nCartPriceSummary.displayName = 'CartPriceSummary'\n\nexport default CartPriceSummary\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkBI,IAAAI,EAAA,6BAhBJC,EAAuB,oBACvBC,EAAmB,qCACnBC,EAAyC,wCACzCC,EAAkC,uBAIlC,MAAMC,EAAW,CAAC,CAAE,UAAAC,CAAU,OAC5B,OAAC,OACC,MAAM,6BACN,aAAW,MAAG,WAAYA,CAAS,EACnC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,KAAK,eACL,EAAE,4TACJ,EACF,EAIIC,EAAY,CAAC,CAAE,UAAAD,CAAU,OAC7B,OAAC,OACC,MAAM,6BACN,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,OACL,aAAW,MAAG,WAAYA,CAAS,EAEnC,mBAAC,QACC,EAAE,wjBACF,KAAK,UACP,EACF,EAIIE,EAAW,CAAC,CAAE,UAAAF,CAAU,OAC5B,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,aAAW,MAAG,WAAYA,CAAS,EAEnC,oBAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,MAAM,OAAO,eAAe,YAAY,MAAM,KACxE,OAAC,QAAK,EAAE,oBAAoB,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,GAC5F,
|
|
6
|
-
"names": ["CartPriceSummary_exports", "__export", "CartPriceSummary_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import__", "DownIcon", "className", "CloseIcon", "InfoIcon", "CartPriceSummary", "couponInputValue", "onCouponInputChange", "onCouponApply", "appliedCoupons", "onCouponRemove", "couponLoading", "subtotal", "shipping", "taxes", "productDiscount", "orderDiscount", "discountTotal", "total", "onCheckout", "showCashReduction", "showInstallment", "installmentIcons", "copy", "classNames", "props", "ref", "c", "hasCouponSection", "couponExpanded", "setCouponExpanded", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../helpers/index.js'\nimport { Button, Input, InputSlot } from '../../../components/index.js'\nimport { DEFAULT_CART_COPY } from '../index.js'\nimport type { CartPriceSummaryCopy } from '../types.js'\n\n// \u2500\u2500 Icon: Chevron right \u2500\u2500\nconst DownIcon = ({ className }: { className?: string }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('shrink-0', className)}\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n fill=\"currentColor\"\n d=\"M11.5286 5.52827C11.789 5.26792 12.211 5.26792 12.4713 5.52827C12.7317 5.78862 12.7317 6.21063 12.4713 6.47098L8.47134 10.471C8.211 10.7313 7.78899 10.7313 7.52864 10.471L3.52864 6.47098C3.26829 6.21063 3.26829 5.78862 3.52864 5.52827C3.78899 5.26792 4.211 5.26792 4.47134 5.52827L7.99999 9.05692L11.5286 5.52827Z\"\n />\n </svg>\n)\n\n// \u2500\u2500 Icon: Close (used in coupon tag remove button) \u2500\u2500\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n className={cn('shrink-0', className)}\n >\n <path\n d=\"M0.182919 0.183095C0.426997 -0.0609829 0.822822 -0.0610803 1.0668 0.183095L3.56999 2.68858L6.07548 0.183095C6.31954 -0.0609728 6.71538 -0.0610506 6.95936 0.183095C7.20328 0.427211 7.20326 0.822886 6.95936 1.06698L4.45387 3.57247L6.95706 6.07795C7.20096 6.32205 7.20091 6.71774 6.95706 6.96184C6.71298 7.20588 6.31714 7.206 6.07317 6.96184L3.56999 4.45635L1.0668 6.95953C0.822725 7.20361 0.426899 7.20371 0.182919 6.95953C-0.0609731 6.71542 -0.0609728 6.31973 0.182919 6.07565L2.6861 3.57247L0.182919 1.06698C-0.0609927 0.822872 -0.060953 0.427189 0.182919 0.183095Z\"\n fill=\"#767880\"\n />\n </svg>\n)\n\n// \u2500\u2500 Icon: Info \u2500\u2500\nconst InfoIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('shrink-0', className)}\n >\n <circle cx=\"10\" cy=\"10\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n <path d=\"M10 9V14M10 6V6.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n)\n\nexport interface CartPriceSummaryProps {\n /** \u6298\u6263\u7801\u8F93\u5165\u6846\u7684\u503C */\n couponInputValue?: string\n /** \u6298\u6263\u7801\u8F93\u5165\u53D8\u5316\u56DE\u8C03 */\n onCouponInputChange?: (value: string) => void\n /** \u70B9\u51FB\u5E94\u7528\u6298\u6263\u7801\u56DE\u8C03\uFF0C\u53C2\u6570\u4E3A\u8F93\u5165\u6846\u4E2D\u7684\u6298\u6263\u7801 */\n onCouponApply?: (code: string) => void\n /** \u5DF2\u5E94\u7528\u7684\u6298\u6263\u7801\u5217\u8868 */\n appliedCoupons?: string[]\n /** \u79FB\u9664\u6298\u6263\u7801\u56DE\u8C03\uFF0C\u53C2\u6570\u4E3A\u6298\u6263\u7801 */\n onCouponRemove?: (code: string) => void\n /** \u6298\u6263\u7801\u5E94\u7528\u5931\u8D25\u65F6\u7684\u9519\u8BEF\u4FE1\u606F\uFF0C\u975E\u7A7A\u65F6 Input \u53D8\u7EA2\u5E76\u663E\u793A\u8BE5\u6587\u6848 */\n couponError?: string\n /** \u6298\u6263\u7801\u5E94\u7528\u6309\u94AE loading \u72B6\u6001 */\n couponLoading?: boolean\n\n /** \u5C0F\u8BA1\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\uFF09 */\n subtotal?: string\n /** \u8FD0\u8D39\u6587\u6848 */\n shipping?: string\n /** \u7A0E\u8D39\u6587\u6848 */\n taxes?: string\n\n /** \u4EA7\u54C1\u6298\u6263\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n productDiscount?: string\n /** \u8BA2\u5355\u6298\u6263\u91D1\u989D\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n orderDiscount?: string\n\n /** \u6298\u6263\u603B\u8BA1\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\u548C\u8D1F\u53F7\uFF09 */\n discountTotal?: string\n /** \u6700\u7EC8\u603B\u4EF7\uFF08\u683C\u5F0F\u5316\u5B57\u7B26\u4E32\uFF0C\u542B\u8D27\u5E01\u7B26\u53F7\uFF09 */\n total?: string\n\n /** \u7ED3\u8D26\u6309\u94AE\u70B9\u51FB\u56DE\u8C03 */\n onCheckout?: () => void\n\n /** \u662F\u5426\u663E\u793A\u73B0\u91D1\u51CF\u514D\u63D0\u793A */\n showCashReduction?: boolean\n /** \u662F\u5426\u663E\u793A\u5206\u671F\u4ED8\u6B3E\u4FE1\u606F */\n showInstallment?: boolean\n /** \u5206\u671F\u4ED8\u6B3E\u652F\u4ED8\u65B9\u5F0F\u56FE\u6807\u5217\u8868 */\n installmentIcons?: { src: string; alt?: string }[]\n\n /** \u6587\u6848\u8986\u76D6\uFF0C\u7528\u4E8E\u56FD\u9645\u5316 */\n copy?: CartPriceSummaryCopy\n /** \u6839\u5BB9\u5668 className */\n className?: string\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<\n Record<\n | 'root'\n | 'couponToggle'\n | 'couponLink'\n | 'couponInput'\n | 'couponErrorMessage'\n | 'couponTags'\n | 'couponTag'\n | 'couponTagText'\n | 'couponTagRemove'\n | 'priceRow'\n | 'priceRowLabel'\n | 'priceRowValue'\n | 'discountBox'\n | 'discountRow'\n | 'discountRowValue'\n | 'discountTotalRow'\n | 'discountTotalValue'\n | 'divider'\n | 'totalRow'\n | 'totalValue'\n | 'checkoutButton'\n | 'cashReduction'\n | 'installment',\n string\n >\n >\n}\n\nconst CartPriceSummary = React.forwardRef<HTMLDivElement, CartPriceSummaryProps>(\n (\n {\n couponInputValue,\n onCouponInputChange,\n onCouponApply,\n couponError: couponErrorProp,\n appliedCoupons,\n onCouponRemove,\n couponLoading = false,\n\n subtotal,\n shipping,\n taxes,\n\n productDiscount,\n orderDiscount,\n\n discountTotal,\n total,\n\n onCheckout,\n\n showCashReduction,\n showInstallment,\n installmentIcons,\n\n copy,\n className,\n classNames = {},\n ...props\n },\n ref\n ) => {\n const c = { ...DEFAULT_CART_COPY, ...copy }\n\n const hasCouponSection =\n onCouponInputChange !== undefined || onCouponApply !== undefined || (appliedCoupons && appliedCoupons.length > 0)\n\n const [couponExpanded, setCouponExpanded] = React.useState(false)\n const [couponError, setCouponError] = React.useState('')\n\n React.useEffect(() => {\n if (couponErrorProp) {\n setCouponError(couponErrorProp)\n }\n }, [couponErrorProp])\n\n const handleCouponInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setCouponError('')\n onCouponInputChange?.(e.target.value)\n }\n\n const hasDiscounts = productDiscount !== undefined || orderDiscount !== undefined\n\n return (\n <div\n ref={ref}\n className={cn(\n 'cart-price-summary-root',\n 'laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ',\n '',\n className,\n classNames.root\n )}\n {...props}\n >\n <div className=\"laptop:w-[74.8%] laptop:ml-auto laptop:gap-4 laptop:items-end laptop:p-0 flex flex-col gap-2 p-4\">\n {/* \u6298\u6263\u7801\u5165\u53E3 */}\n {hasCouponSection && (\n <button\n type=\"button\"\n className={cn(\n 'cart-price-summary-coupon-toggle',\n 'group flex w-full cursor-pointer items-center justify-between',\n classNames.couponToggle\n )}\n onClick={() => setCouponExpanded(prev => !prev)}\n >\n <span className=\"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.couponTitle || 'Have a discount code?'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-coupon-link',\n 'text-brand-primary text-brand-0 laptop:text-base flex items-start gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.couponLink\n )}\n >\n {c.couponLink || 'Apply/Check'}\n <DownIcon\n className={cn(\n 'text-brand-primary laptop:size-5 size-4 transition-transform duration-200',\n couponExpanded && 'rotate-180'\n )}\n />\n </span>\n </button>\n )}\n\n {/* \u6298\u6263\u7801\u8F93\u5165\u4E0E\u6807\u7B7E */}\n {couponExpanded && (\n <div className=\"laptop:max-w-[404px] flex flex-col items-end gap-2\">\n {/* \u8F93\u5165\u6846 + \u5E94\u7528\u6309\u94AE */}\n <Input\n size=\"lg\"\n type=\"text\"\n value={couponInputValue}\n onChange={handleCouponInputChange}\n placeholder={c.couponPlaceholder || 'Enter Code'}\n className={cn(\n 'cart-price-summary-coupon-input',\n 'border-lines-primary laptop:h-[54px] h-[44px] w-full bg-transparent',\n couponError && 'border-error-0',\n classNames.couponInput\n )}\n inputClassName=\"text-sm laptop:text-base font-bold bg-white w-[315px] flex-1\"\n >\n <InputSlot>\n <div className=\"border-lines-primary flex items-center border-l pl-2 pr-4\">\n <Button\n variant=\"ghost\"\n size=\"lg\"\n loading={couponLoading}\n className=\"hover:!text-info-primary text-info-primary laptop:text-base cursor-pointer !p-0 text-sm font-bold leading-[1.4] tracking-[-0.02em] underline hover:!bg-transparent\"\n onClick={() => onCouponApply?.(couponInputValue || '')}\n >\n {c.couponApply || 'Apply'}\n </Button>\n </div>\n </InputSlot>\n </Input>\n\n {couponError && (\n <p\n className={cn(\n 'cart-price-summary-coupon-error-message',\n 'text-error-0 text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.couponErrorMessage\n )}\n >\n {couponError}\n </p>\n )}\n\n {/* \u5DF2\u5E94\u7528\u6298\u6263\u7801\u6807\u7B7E */}\n {appliedCoupons && appliedCoupons.length > 0 && (\n <div\n className={cn(\n 'cart-price-summary-coupon-tags',\n 'laptop:gap-2 flex flex-wrap gap-1',\n classNames.couponTags\n )}\n >\n {appliedCoupons.map(code => (\n <span\n key={code}\n className={cn(\n 'cart-price-summary-coupon-tag',\n 'bg-container-secondary rounded-box-small flex items-center gap-1 py-1 pl-2 pr-1',\n classNames.couponTag\n )}\n >\n <span\n className={cn(\n 'cart-price-summary-coupon-tag-text',\n 'text-info-tertiary laptop:text-base whitespace-nowrap text-xs font-bold !leading-[1.4] tracking-[-0.02em]',\n classNames.couponTagText\n )}\n >\n {code}\n </span>\n <button\n type=\"button\"\n className={cn(\n 'cart-price-summary-coupon-tag-remove',\n 'text-info-tertiary hover:text-info-primary laptop:size-5 flex size-4 cursor-pointer items-center justify-center rounded-full bg-[#EAEAEC]',\n classNames.couponTagRemove\n )}\n onClick={() => onCouponRemove?.(code)}\n >\n <CloseIcon />\n </button>\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u4EF7\u683C\u660E\u7EC6\uFF1A\u79FB\u52A8\u7AEF\u6298\u6263\u7801\u6298\u53E0\u65F6\u9690\u85CF\uFF1B\u5E73\u677F\u53CA\u4EE5\u4E0A\u59CB\u7EC8\u53EF\u89C1 */}\n <div\n className={cn(\n 'laptop:gap-4 flex w-full flex-col gap-2',\n !couponExpanded && hasCouponSection && 'laptop:flex hidden'\n )}\n >\n {/* \u5C0F\u8BA1 */}\n {subtotal !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.subtotalLabel || 'Subtotal:'}</span>\n <span className={classNames.priceRowValue}>{subtotal}</span>\n </div>\n )}\n\n {/* \u8FD0\u8D39 */}\n {shipping !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.shippingLabel || 'Shipping:'}</span>\n <span className={classNames.priceRowValue}>{shipping}</span>\n </div>\n )}\n\n {/* \u7A0E\u8D39 */}\n {taxes !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-price-row',\n 'text-info-tertiary laptop:text-base flex w-full items-center justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.priceRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.taxesLabel || 'Taxes:'}</span>\n <span className={classNames.priceRowValue}>{taxes}</span>\n </div>\n )}\n\n {/* \u6298\u6263\u6C47\u603B */}\n {hasDiscounts && (\n <div\n className={cn(\n 'cart-price-summary-discount-box',\n 'bg-container-secondary rounded-box-small laptop:p-4 flex w-full flex-col gap-2 p-2',\n classNames.discountBox\n )}\n >\n {productDiscount !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-row',\n 'text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.discountRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.productDiscountsLabel || 'Product discounts:'}</span>\n <span className={cn('text-marketing-1', classNames.discountRowValue)}>{productDiscount}</span>\n </div>\n )}\n {orderDiscount !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-row',\n 'text-info-tertiary laptop:text-base flex w-full items-start justify-between whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]',\n classNames.discountRow\n )}\n >\n <span className={classNames.priceRowLabel}>{c.orderDiscountLabel || 'Order discount:'}</span>\n <span className={cn('text-marketing-1', classNames.discountRowValue)}>{orderDiscount}</span>\n </div>\n )}\n </div>\n )}\n </div>\n\n {/* \u6298\u6263\u603B\u8BA1\u4E0E\u6700\u7EC8\u603B\u4EF7 */}\n {(discountTotal !== undefined || total !== undefined) && (\n <div className=\"flex w-full flex-col gap-4\">\n {discountTotal !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-discount-total-row',\n 'flex w-full items-center justify-between whitespace-nowrap',\n classNames.discountTotalRow\n )}\n >\n <span className=\"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.discountTotalLabel || 'Discount total:'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-discount-total-value',\n 'text-marketing-1 laptop:text-base text-right text-sm font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.discountTotalValue\n )}\n >\n {discountTotal}\n </span>\n </div>\n )}\n\n {discountTotal !== undefined && total !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-divider',\n 'border-lines-primary w-full border-t',\n classNames.divider\n )}\n />\n )}\n\n {total !== undefined && (\n <div\n className={cn(\n 'cart-price-summary-total-row',\n 'flex w-full items-center justify-between whitespace-nowrap',\n classNames.totalRow\n )}\n >\n <span className=\"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {c.totalLabel || 'Total:'}\n </span>\n <span\n className={cn(\n 'cart-price-summary-total-value',\n 'text-info-primary laptop:text-2xl text-right text-xl font-bold leading-[1.2] tracking-[-0.04em]',\n classNames.totalValue\n )}\n >\n {total}\n </span>\n </div>\n )}\n </div>\n )}\n {/* \u79FB\u52A8\u7AEF\u73B0\u91D1\u51CF\u514D\u63D0\u793A */}\n {showCashReduction && c.cashReductionText && (\n <div\n className={cn(\n 'cart-price-summary-cash-reduction-mobile',\n 'laptop:hidden flex items-start gap-1',\n classNames.cashReduction\n )}\n >\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.cashReductionText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n )}\n <div\n className={cn(\n 'laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4',\n !showInstallment && 'justify-end'\n )}\n >\n {/* \u7ED3\u8D26\u6309\u94AE */}\n {onCheckout && (\n <Button\n variant=\"primary\"\n size=\"lg\"\n className={cn(\n 'cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0',\n classNames.checkoutButton\n )}\n onClick={onCheckout}\n >\n {c.checkOut || 'Check Out'}\n </Button>\n )}\n\n {/* \u73B0\u91D1\u51CF\u514D\u63D0\u793A */}\n {showCashReduction && c.cashReductionText && (\n <div\n className={cn(\n 'cart-price-summary-cash-reduction',\n 'laptop:flex hidden items-start gap-1',\n classNames.cashReduction\n )}\n >\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.cashReductionText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n )}\n\n {/* \u5206\u671F\u4ED8\u6B3E\u4FE1\u606F */}\n {showInstallment && c.installmentText && (\n <div\n className={cn(\n 'cart-price-summary-installment',\n 'laptop:flex-row order-1 flex flex-col items-start gap-0.5',\n classNames.installment\n )}\n >\n {installmentIcons && installmentIcons.length > 0 && (\n <span className=\"flex shrink-0 items-center\">\n {installmentIcons.map((icon, index) => (\n <img\n key={index}\n src={icon.src}\n alt={icon.alt || ''}\n className=\"laptop:size-5 -mr-1 size-4 object-cover\"\n />\n ))}\n </span>\n )}\n <div className=\"flex gap-1\">\n <span className=\"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]\">\n {c.installmentText}\n </span>\n <InfoIcon className=\"text-info-quaternary laptop:size-5 size-4\" />\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n)\n\nCartPriceSummary.displayName = 'CartPriceSummary'\n\nexport default CartPriceSummary\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["CartPriceSummary_exports", "__export", "CartPriceSummary_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import__", "DownIcon", "className", "CloseIcon", "InfoIcon", "CartPriceSummary", "couponInputValue", "onCouponInputChange", "onCouponApply", "couponErrorProp", "appliedCoupons", "onCouponRemove", "couponLoading", "subtotal", "shipping", "taxes", "productDiscount", "orderDiscount", "discountTotal", "total", "onCheckout", "showCashReduction", "showInstallment", "installmentIcons", "copy", "classNames", "props", "ref", "c", "hasCouponSection", "couponExpanded", "setCouponExpanded", "couponError", "setCouponError", "handleCouponInputChange", "e", "hasDiscounts", "prev", "code", "icon", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var ue=Object.create;var w=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,_e=Object.prototype.hasOwnProperty;var we=(s,n)=>{for(var o in n)w(s,o,{get:n[o],enumerable:!0})},B=(s,n,o,g)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of he(n))!_e.call(s,p)&&p!==o&&w(s,p,{get:()=>n[p],enumerable:!(g=fe(n,p))||g.enumerable});return s};var v=(s,n,o)=>(o=s!=null?ue(ge(s)):{},B(n||!s||!s.__esModule?w(o,"default",{value:s,enumerable:!0}):o,s)),ye=s=>B(w({},"__esModule",{value:!0}),s);var Te={};we(Te,{default:()=>Se});module.exports=ye(Te);var r=require("react/jsx-runtime"),a=v(require("react")),b=require("../../helpers/utils.js"),m=require("../../components/tabs.js"),z=v(require("../Title/index.js")),q=v(require("../SwiperBox/index.js")),A=require("../../shared/Styles.js"),S=require("../../shared/track.js"),T=require("react-responsive"),$=require("../../hooks/useRollout.js"),h=require("./shelfDisplayItem.js");const ve="image",be="product_shelf",E=s=>s==null?"default":String(s).replace(/[^a-zA-Z0-9_-]/g,"")||"default",N=a.default.forwardRef(({data:s,event:n,buildData:o,breakpoints:g,className:p="",recommendedData:_,target:O="_self",metafields:Q,isDisplayGudgments:k=!1,isDisplayBackImage:W=!1,renderOriginalPrice:Z,renderPriceLabel:j,renderPrice:F,onAddCart:G,onBuyNow:J,onLearnMore:K,formatPrice:U,...X},Y)=>{const{productsTab:d=[],productsCard:ee=[],title:D,isShowTab:y=!0,tabShape:te="square",isShowTag:se=!1,isShowOriginalPrice:ne=!0,isShowRecommendedCard:ae=!1,isTile:ie=!1,...re}=s,I=(0,a.useRef)(!1),x=(0,a.useRef)(null),oe=(0,a.useId)(),[le,ce]=(0,a.useState)(!1);(0,a.useEffect)(()=>{ce(!0)},[]);const me=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),pe=(0,T.useMediaQuery)({query:"(min-width: 1025px)"}),[de,M]=(0,$.useRollout)({threshold:0});(0,a.useImperativeHandle)(Y,()=>x.current);const P=()=>{(0,S.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:_?.map((e,l)=>{const t=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||t?.sku,item_name:e?.name,item_variant:t?.name,price:t?.price,index:l+1}})}})};(0,a.useEffect)(()=>{M&&_?.length&&!I.current&&(I.current=!0,P())},[M,_]);const R=(e,l)=>{if(l){const t=_?.map?.(i=>({...i,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const c=e?.map?.(t=>{const i=o?.products?.find(u=>u?.handle===t?.handle);if(i)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...i}})?.filter(t=>t);return c?.length?c:[]},L=E(oe),C=(e,l)=>{const c={...re,event:n,isShowTag:se,isShowOriginalPrice:ne,target:O,metafields:Q,itemLength:e.length,isDisplayBackImage:W,renderOriginalPrice:Z,renderPriceLabel:j,renderPrice:F,onAddCart:G,onBuyNow:J,onLearnMore:K,formatPrice:U};if(ie&&le&&pe)return(0,r.jsx)("div",{className:(0,b.cn)("shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4",y?"mt-6":""),children:e.map((f,V)=>(0,r.jsx)(h.ShelfDisplayWrapItem,{data:f,configuration:{...c,index:V}},f?.id||f?.handle||V))});const t=e.length<=1&&k,i=!me&&e.length<=2&&k,u=f=>{switch(f){case 1440:return i?e.length:4;case 1024:return i?e.length:3;default:return i?e.length:2.3}},H=l?`${L}-${E(l)}`:L;return(0,r.jsx)(q.default,{data:{list:e,configuration:c},id:H,className:`${y?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?h.ShelfDisplayHorizontalItem:h.ShelfDisplayWrapItem,breakpoints:g||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:t?1:1.2},768:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:u()},1024:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:u(1024)},1440:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:u(1440)}}},H)};return(0,r.jsxs)("div",{ref:x,...X,className:(0,b.cn)("shelf-display-wrap text-info-primary w-full",p,{"aiui-dark":s?.theme==="dark"}),children:[D&&(0,r.jsx)(z.default,{data:{title:D}}),(0,r.jsx)("div",{ref:de,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:y&&d?.length>0?(0,r.jsxs)(m.Tabs,{defaultValue:d?.[0]?.tab,onValueChange:e=>{const l=d?.find(c=>c?.tab===e);if(l){if(!l.isShowRecommendedTab){(0,S.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ve,component_name:be,component_title:s?.title,component_position:1,navigation:e}});return}P()}},shape:te==="rounded"?"rounded":"square",children:[(0,r.jsx)(m.TabsList,{children:d.map(e=>(0,r.jsx)(m.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),d.map(e=>(0,r.jsx)(m.TabsContent,{value:e?.tab,children:C(R(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):C(R(ee,ae))})]})});N.displayName="ShelfDisplay";var Se=(0,A.withLayout)(N);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const isView = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n return newCurrentData?.length ? newCurrentData : []\n }\n if (!Array.isArray(currentData)) return []\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n }\n\n const safeInstanceId = sanitizeCssSelector(instanceId)\n\n const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n const isOnce = items.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? items.length : 4\n case 1024:\n return isShowGudgments ? items.length : 3\n default:\n return isShowGudgments ? items.length : 2.3\n }\n }\n const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n return (\n <SwiperBox\n key={swiperInstanceId}\n data={{
|
|
5
|
-
"mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "isView", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "SwiperBox", "Title", "currentTab", "tab"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useId, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n isTile = false,\n ...other\n } = data\n\n const isView = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n setMounted(true)\n }, [])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n const getItems = (currentData: ShelfDisplayItem[], flag: boolean): ShelfDisplayItem[] => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => ({ ...item, isShowRecommended: true }))\n return newCurrentData?.length ? newCurrentData : []\n }\n if (!Array.isArray(currentData)) return []\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n return newCurrentData?.length ? (newCurrentData as ShelfDisplayItem[]) : []\n }\n\n const safeInstanceId = sanitizeCssSelector(instanceId)\n\n const renderSwiperBox = (items: ShelfDisplayItem[], tabValue?: string) => {\n const configuration = {\n ...other,\n event,\n isShowTag,\n isShowOriginalPrice,\n target,\n metafields,\n itemLength: items.length,\n isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n }\n\n if (isTile && mounted && isLaptop) {\n return (\n <div className={cn('shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4', isShowTab ? 'mt-6' : '')}>\n {items.map((item, index) => (\n <ShelfDisplayWrapItem\n key={item?.id || item?.handle || index}\n data={item}\n configuration={{ ...configuration, index }}\n />\n ))}\n </div>\n )\n }\n\n const isOnce = items.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && items.length <= 2 && isDisplayGudgments\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? items.length : 4\n case 1024:\n return isShowGudgments ? items.length : 3\n default:\n return isShowGudgments ? items.length : 2.3\n }\n }\n const swiperInstanceId = tabValue ? `${safeInstanceId}-${sanitizeCssSelector(tabValue)}` : safeInstanceId\n\n return (\n <SwiperBox\n key={swiperInstanceId}\n data={{ list: items, configuration }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: { spaceBetween: 12, freeMode: false, slidesPerView: 1 },\n 374: { spaceBetween: 12, freeMode: false, slidesPerView: isOnce ? 1 : 1.2 },\n 768: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength() },\n 1024: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1024) },\n 1440: { spaceBetween: isOnce ? 0 : 16, freeMode: false, slidesPerView: showItemLength(1440) },\n }\n }\n />\n )\n }\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n {isShowTab && productsTab?.length > 0 ? (\n <Tabs\n defaultValue={productsTab?.[0]?.tab}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (!currentTab) return\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n {productsTab.map(tab => (\n <TabsContent key={tab?.id || tab?.tab} value={tab?.tab}>\n {renderSwiperBox(getItems(tab?.data || [], tab?.isShowRecommendedTab), tab?.tab)}\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n renderSwiperBox(getItems(productsCard, isShowRecommendedCard))\n )}\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "isTile", "other", "isView", "innerRef", "instanceId", "mounted", "setMounted", "isMobile", "isLaptop", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "configuration", "isOnce", "isShowGudgments", "showItemLength", "size", "swiperInstanceId", "SwiperBox", "Title", "currentTab", "tab"]
|
|
7
7
|
}
|
|
@@ -57,6 +57,12 @@ export interface ShelfDisplayItem {
|
|
|
57
57
|
custom_theme?: string;
|
|
58
58
|
custom_bg_image?: string;
|
|
59
59
|
}
|
|
60
|
+
export interface SocialEndorsementItem {
|
|
61
|
+
/** 图标：图片 URL 字符串，或 SVG React 节点 */
|
|
62
|
+
icon: string | React.ReactNode;
|
|
63
|
+
/** 无障碍标签 */
|
|
64
|
+
label?: string;
|
|
65
|
+
}
|
|
60
66
|
export type ShelfDisplayType = {
|
|
61
67
|
title?: string;
|
|
62
68
|
isShowTab?: boolean;
|
|
@@ -81,6 +87,18 @@ export type ShelfDisplayType = {
|
|
|
81
87
|
secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore';
|
|
82
88
|
theme?: 'light' | 'dark';
|
|
83
89
|
containerProps?: ContainerProps;
|
|
90
|
+
/** 是否平铺网格布局（≥1025px 生效，一行 3 个，≥1440px 一行 4 个，≤1024px 仍为轮播） */
|
|
91
|
+
isTile?: boolean;
|
|
92
|
+
/** shelf-prices-tag（折扣价格标签）是否显示，默认 false。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
93
|
+
isShowPricesTag?: boolean;
|
|
94
|
+
/** shelf-prices-tag 文案颜色，建议使用 Design Token CSS 变量，如 var(--info-primary-color)。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
95
|
+
pricesTagTextColor?: string;
|
|
96
|
+
/** shelf-prices-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
97
|
+
pricesTagBgColor?: string;
|
|
98
|
+
/** shelf-items-tag（自定义标签）文案颜色。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
99
|
+
itemsTagTextColor?: string;
|
|
100
|
+
/** shelf-items-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
101
|
+
itemsTagBgColor?: string;
|
|
84
102
|
};
|
|
85
103
|
export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
86
104
|
data: ShelfDisplayType;
|
|
@@ -103,6 +121,7 @@ export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
103
121
|
slidesPerView: number;
|
|
104
122
|
};
|
|
105
123
|
};
|
|
124
|
+
/** 元数据：折扣文案（discounts.off / discountsCopy.off）及社媒背书图标（socialEndorsements: SocialEndorsementItem[]） */
|
|
106
125
|
metafields?: any;
|
|
107
126
|
isDisplayGudgments?: boolean;
|
|
108
127
|
isDisplayBackImage?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var S=Object.create;var p=Object.defineProperty;var
|
|
1
|
+
"use strict";var S=Object.create;var p=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var v=(e,n)=>{for(var i in n)p(e,i,{get:n[i],enumerable:!0})},y=(e,n,i,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of P(n))!I.call(e,t)&&t!==i&&p(e,t,{get:()=>n[t],enumerable:!(a=T(n,t))||a.enumerable});return e};var C=(e,n,i)=>(i=e!=null?S(x(e)):{},y(n||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>y(p({},"__esModule",{value:!0}),e);var B={};v(B,{formatVariantPrice:()=>_});module.exports=w(B);var g=C(require("decimal.js")),r=require("../../helpers/index.js");function _({amount:e,baseAmount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:d,customFormatPrice:o}){if(typeof Intl>"u")return{price:`${r.PRICE_SYMBOL[t]}${e}`,basePrice:`${r.PRICE_SYMBOL[t]}${n}`,discount:`${r.PRICE_SYMBOL[t]}${n-e||0}`};const c=n>e;let l=null;const u=(0,r.languageTerritory)(t);if(u){const s=new Intl.NumberFormat(u,{style:"percent"});l=c?s.format((n-e)/n):null}let m;if(c){const s=new g.default(n).sub(e||0).toNumber();m=o?o({amount:s,locale:t}):(0,r.formatPrice)({amount:s,currencyDisplay:a,currencyCode:i||"USD",locale:t,maximumFractionDigits:2})}const h=o?o({amount:e,locale:t}):(0,r.formatPrice)({amount:e,currencyCode:i,currencyDisplay:a,locale:t,removeTrailingZeros:d}),D=c?o?o({amount:n,locale:t}):(0,r.formatPrice)({amount:n,currencyCode:i,currencyDisplay:a,locale:t,maximumFractionDigits:f,minimumFractionDigits:b,removeTrailingZeros:d}):void 0;return{price:h,basePrice:D,discount:l,discountAmount:m}}
|
|
2
2
|
//# sourceMappingURL=shelfDisplay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
|
|
4
|
-
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n amount: number\n isDigits?: boolean\n withOutSymbol?: boolean\n locale?: string\n forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n customFormatPrice,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n customFormatPrice?: FormattedPriceFunc\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = customFormatPrice\n ? customFormatPrice({ amount: savePriceAmount, locale })\n : formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = customFormatPrice\n ? customFormatPrice({ amount, locale })\n : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? customFormatPrice\n ? customFormatPrice({ amount: baseAmount, locale })\n : formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n custom_bg_image?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /**\n * \u6309\u94AE\u4E8B\u4EF6\n * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n */\n event?: EventType\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n\n /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n formatPrice?: FormattedPriceFunc\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n */\n renderOriginalPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n }\n ) => React.ReactNode\n /**\n * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n */\n renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n /**\n * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n */\n renderPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n variant: any\n coupon: any\n isSoldOut: boolean\n }\n ) => React.ReactNode\n}\n"],
|
|
4
|
+
"sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport type FormattedPriceFunc = (params: {\n amount: number\n isDigits?: boolean\n withOutSymbol?: boolean\n locale?: string\n forceFormat?: boolean\n}) => string\n\nexport function formatVariantPrice({\n amount,\n baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n customFormatPrice,\n}: {\n baseAmount: number\n amount: number\n currencyCode: string\n currencyDisplay?: CurrencyDisplayType\n locale: string\n maximumFractionDigits?: number\n minimumFractionDigits?: number\n removeTrailingZeros?: boolean\n customFormatPrice?: FormattedPriceFunc\n}) {\n if (typeof Intl === 'undefined') {\n return {\n price: `${PRICE_SYMBOL[locale]}${amount}`,\n basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n }\n }\n\n const hasDiscount = baseAmount > amount\n let discount = null\n const currentLocale = languageTerritory(locale)\n if (currentLocale) {\n const formatDiscount = new Intl.NumberFormat(currentLocale, {\n style: 'percent',\n })\n discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n }\n // \u6298\u6263\u91D1\u989D\n let discountAmount\n if (hasDiscount) {\n const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n discountAmount = customFormatPrice\n ? customFormatPrice({ amount: savePriceAmount, locale })\n : formatPrice({\n amount: savePriceAmount,\n currencyDisplay,\n currencyCode: currencyCode || 'USD',\n locale,\n maximumFractionDigits: 2,\n })\n }\n\n const price = customFormatPrice\n ? customFormatPrice({ amount, locale })\n : formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n const basePrice = hasDiscount\n ? customFormatPrice\n ? customFormatPrice({ amount: baseAmount, locale })\n : formatPrice({\n amount: baseAmount,\n currencyCode,\n currencyDisplay,\n locale,\n maximumFractionDigits,\n minimumFractionDigits,\n removeTrailingZeros,\n })\n : undefined\n\n return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n custom_primary_link?: string\n custom_secondary_link?: string\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n custom_name?: string\n custom_description?: string\n custom_image?: string\n custom_theme?: string\n custom_bg_image?: string\n}\n\nexport interface SocialEndorsementItem {\n /** \u56FE\u6807\uFF1A\u56FE\u7247 URL \u5B57\u7B26\u4E32\uFF0C\u6216 SVG React \u8282\u70B9 */\n icon: string | React.ReactNode\n /** \u65E0\u969C\u788D\u6807\u7B7E */\n label?: string\n}\n\nexport type ShelfDisplayType = {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n isShowRecommendedCard?: boolean\n isShowOriginalPrice?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any[]\n productsCard?: any[]\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n /** \u662F\u5426\u5E73\u94FA\u7F51\u683C\u5E03\u5C40\uFF08\u22651025px \u751F\u6548\uFF0C\u4E00\u884C 3 \u4E2A\uFF0C\u22651440px \u4E00\u884C 4 \u4E2A\uFF0C\u22641024px \u4ECD\u4E3A\u8F6E\u64AD\uFF09 */\n isTile?: boolean\n /** shelf-prices-tag\uFF08\u6298\u6263\u4EF7\u683C\u6807\u7B7E\uFF09\u662F\u5426\u663E\u793A\uFF0C\u9ED8\u8BA4 false\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n isShowPricesTag?: boolean\n /** shelf-prices-tag \u6587\u6848\u989C\u8272\uFF0C\u5EFA\u8BAE\u4F7F\u7528 Design Token CSS \u53D8\u91CF\uFF0C\u5982 var(--info-primary-color)\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n pricesTagTextColor?: string\n /** shelf-prices-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n pricesTagBgColor?: string\n /** shelf-items-tag\uFF08\u81EA\u5B9A\u4E49\u6807\u7B7E\uFF09\u6587\u6848\u989C\u8272\u3002\u8BBE\u7F6E\u540E\u4F1A\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n itemsTagTextColor?: string\n /** shelf-items-tag \u80CC\u666F\u989C\u8272\uFF0C\u8BBE\u7F6E\u540E\u4F1A\u8986\u76D6\u9ED8\u8BA4\u7684\u54C1\u724C\u6E10\u53D8\u80CC\u666F\u5E76\u9690\u85CF\u9ED8\u8BA4\u54C1\u724C\u8272\u63CF\u8FB9\u3002\u4EC5\u4F5C\u7528\u4E8E\u7EB5\u5411\u5361\u7247 ShelfDisplayWrapItem */\n itemsTagBgColor?: string\n}\n\nexport interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n data: ShelfDisplayType\n buildData?: {\n categories: any[]\n products: any[]\n }\n recommendedData?: any[]\n /**\n * \u6309\u94AE\u4E8B\u4EF6\n * @deprecated \u8BF7\u4F7F\u7528 onAddCart / onBuyNow / onLearnMore \u914D\u5408 primaryFun / secondaryFun \u66FF\u4EE3\n */\n event?: EventType\n key?: string\n target?: '_self' | '_blank'\n breakpoints?: {\n [key: number]: {\n spaceBetween: number\n freeMode: boolean\n slidesPerView: number\n }\n }\n /** \u5143\u6570\u636E\uFF1A\u6298\u6263\u6587\u6848\uFF08discounts.off / discountsCopy.off\uFF09\u53CA\u793E\u5A92\u80CC\u4E66\u56FE\u6807\uFF08socialEndorsements: SocialEndorsementItem[]\uFF09 */\n metafields?: any\n isDisplayGudgments?: boolean\n isDisplayBackImage?: boolean\n\n /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n onAddCart?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n onBuyNow?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n onLearnMore?: (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) => void\n /** \u81EA\u5B9A\u4E49\u4EF7\u683C\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u672A\u4F20\u5219\u4F7F\u7528\u9ED8\u8BA4\u683C\u5F0F\u5316\u903B\u8F91 */\n formatPrice?: FormattedPriceFunc\n /**\n * \u539F\u4EF7\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5728\u539F\u4EF7\u4F4D\u7F6E\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF08\u5982\u6298\u6263\u4FE1\u606F\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u539F\u4EF7\u6E32\u67D3\uFF08\u5212\u7EBF\u4EF7\uFF09\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\n */\n renderOriginalPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n }\n ) => React.ReactNode\n /**\n * \u4EF7\u683C\u6807\u7B7E\u6E32\u67D3\u51FD\u6570\uFF0C\u5728\u4EF7\u683C\u4E0B\u65B9\u5C55\u793A\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002\n * \u4E0D\u4F20\u65F6\u4E0D\u5C55\u793A\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param variant - \u5F53\u524D\u5339\u914D\u7684\u53D8\u4F53\u6570\u636E\n */\n renderPriceLabel?: (item: ShelfDisplayItem, variant: any) => React.ReactNode\n /**\n * \u4EF7\u683C\u533A\u57DF\u6E32\u67D3\u51FD\u6570\uFF0C\u7528\u4E8E\u5B8C\u5168\u81EA\u5B9A\u4E49\u4EF7\u683C\u533A\u57DF\uFF08\u5305\u62EC\u6700\u7EC8\u4EF7\u683C\u3001\u539F\u4EF7\u3001\u552E\u7F44\u72B6\u6001\u7B49\uFF09\u3002\n * \u4E0D\u4F20\u65F6\u4F7F\u7528\u9ED8\u8BA4\u7684\u4EF7\u683C\u6E32\u67D3\u903B\u8F91\u3002\n * @param item - \u5F53\u524D\u4EA7\u54C1\u6570\u636E\n * @param priceInfo - \u683C\u5F0F\u5316\u540E\u7684\u4EF7\u683C\u4FE1\u606F\u53CA\u4E0A\u4E0B\u6587\n */\n renderPrice?: (\n item: ShelfDisplayItem,\n priceInfo: {\n price: string\n basePrice: string | undefined\n discount: string | null\n discountAmount: string | undefined\n variant: any\n coupon: any\n isSoldOut: boolean\n }\n ) => React.ReactNode\n}\n"],
|
|
5
5
|
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoB,yBAGpBC,EAA6D,kCAUtD,SAASH,EAAmB,CACjC,OAAAI,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACF,EAUG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAG,eAAaJ,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAG,eAAaI,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAG,eAAaG,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcR,EAAaD,EACjC,IAAIU,EAAW,KACf,MAAMC,KAAgB,qBAAkBP,CAAM,EAC9C,GAAIO,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQX,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIY,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAI,EAAAC,QAAQd,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1Ea,EAAiBL,EACbA,EAAkB,CAAE,OAAQM,EAAiB,OAAAV,CAAO,CAAC,KACrD,eAAY,CACV,OAAQU,EACR,gBAAAX,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACP,CAEA,MAAMY,EAAQR,EACVA,EAAkB,CAAE,OAAAR,EAAQ,OAAAI,CAAO,CAAC,KACpC,eAAY,CAAE,OAAAJ,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAChFU,EAAYR,EACdD,EACEA,EAAkB,CAAE,OAAQP,EAAY,OAAAG,CAAO,CAAC,KAChD,eAAY,CACV,OAAQH,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACH,OAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,SAAAP,EAAU,eAAAG,CAAe,CACtD",
|
|
6
6
|
"names": ["shelfDisplay_exports", "__export", "formatVariantPrice", "__toCommonJS", "import_decimal", "import_helpers", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "customFormatPrice", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Be=Object.create;var ie=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Le=Object.getPrototypeOf,$e=Object.prototype.hasOwnProperty;var De=(e,t)=>{for(var u in t)ie(e,u,{get:t[u],enumerable:!0})},Te=(e,t,u,v)=>{if(t&&typeof t=="object"||typeof t=="function")for(let y of Pe(t))!$e.call(e,y)&&y!==u&&ie(e,y,{get:()=>t[y],enumerable:!(v=Ce(t,y))||v.enumerable});return e};var xe=(e,t,u)=>(u=e!=null?Be(Le(e)):{},Te(t||!e||!e.__esModule?ie(u,"default",{value:e,enumerable:!0}):u,e)),Ie=e=>Te(ie({},"__esModule",{value:!0}),e);var Me={};De(Me,{ShelfDisplayHorizontalItem:()=>Fe,ShelfDisplayWrapItem:()=>Ae,getProductImage:()=>Ne});module.exports=Ie(Me);var s=require("react/jsx-runtime"),ge=require("../AiuiProvider/index.js"),ve=require("./shelfDisplay.js"),ae=xe(require("../../components/picture.js")),ce=xe(require("../../components/badge.js")),g=require("../../helpers/utils.js"),be=require("../../components/text.js"),K=xe(require("../../components/button.js")),ke=require("../../shared/track.js"),we=require("../../shared/trackUrlRef.js"),_e=require("../../components/heading.js"),Se=require("../../hooks/useExposure.js"),m=require("react");const oe="image",ne="product_shelf",le=999999999e-2,Ne=e=>{const t=e?.sku,u=e?.variants,v=u?.find(L=>L?.sku===t),y=v?.image?.url||u?.[0]?.image?.url||"",W=v?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:y,altText:W}},Ae=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:v,metafields:y,isTopTag:W=!1,isShowTag:L,isShowOriginalPrice:Q,isShowShortTitle:me=!1,formatPrice:$,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:b}=t||{},{locale:T="es",copyWriting:pe,currencyDisplay:Y}=(0,ge.useAiuiContext)(),{discounts:Z,discountsCopy:z}=y||{},H=(0,m.useRef)(null),[E,ee]=(0,m.useState)([]),[R,de]=(0,m.useState)(""),[te,c]=(0,m.useState)(!1),[V,se]=(0,m.useState)(!1),D=(r,i,o,l)=>{const{primaryFun:d,onAddCart:f,onBuyNow:_,onLearnMore:J,event:he}=t||{};if(d){if(d==="AddCart"&&f)return f(r,i+1,o,l);if(d==="BuyNow"&&_)return _(r,i+1,o,l);if(d==="LearnMore"&&J)return J(r,i+1,o,l)}he?.primaryButton?.(r,i+1,o,l)},ue=(r,i,o,l)=>{const{secondaryFun:d,onAddCart:f,onBuyNow:_,onLearnMore:J,event:he}=t||{};if(d){if(d==="AddCart"&&f)return f(r,i+1,o,l);if(d==="BuyNow"&&_)return _(r,i+1,o,l);if(d==="LearnMore"&&J)return J(r,i+1,o,l)}he?.secondaryButton?.(r,i+1,o,l)},p=(0,m.useMemo)(()=>{const r=e?.variants||[];if(r.length)return e?.sku?r?.find?.(i=>i?.sku===e?.sku)||r[0]:r?.[0]},[e?.sku,e?.variants]),h=p?.id?.split?.("/")||[],q=h?.[h?.length-1],B=!p?.availableForSale||p?.price?.amount===le||p?.price===le,k=p?.coupons?.[0],C=!!(Q&&k),P=e?.price?.currencyCode||"USD",S=(0,m.useMemo)(()=>(0,ve.formatVariantPrice)({locale:T,amount:C?k?.variant_price4wscode:p?.price,baseAmount:C?p?.price:0,currencyCode:P,currencyDisplay:Y,customFormatPrice:$}),[P,T,C,k?.variant_price4wscode,p,$]),{price:w,basePrice:I,discount:N,discountAmount:x}=S,{imageUrl:A,altText:F}=Ne(e),M=e?.custom_name||e?.title,G=me&&p?.metafields?.infos?.page_short_title||M,j=e?.custom_description||e?.description,fe=()=>{if(k?.value_type==="fixed_amount"){const r=x||"",i=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(i){const[,o,l,d]=i;let f=l;return l.endsWith(".00")?f=l.replace(/\.00$/,""):l.endsWith(",00")&&(f=l.replace(/,00$/,"")),`${o}${f}${d}`}return r}return N||""};(0,m.useEffect)(()=>{let r=[];if(N||x){const o=`${fe()} ${Z?.off||z?.off||""}`;de(o),r.push(o)}const i=e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,N?1:2)||[];ee(r.concat(i))},[e?.tags,N,x,Z?.off,z?.off]),(0,Se.useExposure)(H,{componentType:oe,componentName:ne,componentTitle:M,componentDescription:j,position:t?.index+1});const ye=async()=>{if(!te&&!e?.custom_primary_link){c(!0);try{await D(e,t?.index,t,k)}finally{c(!1)}}},O=async()=>{if(!V&&!e?.custom_secondary_link){se(!0);try{await ue(e,t?.index,t,k)}finally{se(!1)}}},re=()=>(0,s.jsxs)(s.Fragment,{children:[L&&E?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:E?.map?.((r,i)=>(0,s.jsx)(ce.default,{className:"shelf-items-tag",variant:"fill",children:r},i))}):null,G?(0,s.jsx)(_e.Heading,{as:"h3",title:G||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary line-clamp-2 h-12",html:G||""}):null,(0,s.jsx)(be.Text,{size:2,className:"lg-desktop:text-lg desktop:h-[24px] lg-desktop:h-[28px] desktop:text-base shelf-display-product-description text-info-primary line-clamp-1 h-[20px] text-sm",html:j||""}),(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:b?b(e,{price:w,basePrice:I,discount:N,discountAmount:x,variant:p,coupon:k,isSoldOut:B}):B?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:pe?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:p?.availableForSale&&w||""}),U?U(e,{price:w,basePrice:I,discount:N,discountAmount:x}):I&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:p?.availableForSale&&I||""})]})}),!b&&X?.(e,p),(0,s.jsxs)("div",{className:(0,g.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(K.default,{disabled:B&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:O,loading:V,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(K.default,{disabled:B&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:ye,loading:te,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]}),n=e?.custom_bg_image,a=e?.custom_theme;return(0,s.jsx)("div",{ref:H,className:(0,g.cn)("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item",n?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":a==="dark"}),style:n?{backgroundImage:`url(${n})`}:void 0,children:u?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(ae.default,{source:A,alt:F,className:(0,g.cn)("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":n})}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[R&&W&&(0,s.jsx)(ce.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",variant:"fill",children:R||""}),(0,s.jsx)("div",{className:(0,g.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden",{"opacity-0":n}),children:(0,s.jsx)("a",{"aria-label":M,target:t?.target,href:(0,we.trackUrlRef)(`${T==="us"||!T?"":`/${T}`}/products/${e?.handle}?variant=${q}`,`${oe}_${ne}`),onClick:()=>{(0,ke.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||p?.sku,item_name:e?.name,item_variant:p?.name,price:p?.price,index:t?.index+1}]}})},children:(0,s.jsx)(ae.default,{source:A,alt:F,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},Fe=({data:e,configuration:t})=>{const{itemShape:u,itemLength:v,metafields:y,isShowShortTitle:W,formatPrice:L,renderOriginalPrice:Q,renderPriceLabel:me,renderPrice:$}=t||{},{discounts:U,discountsCopy:X}=y||{},{locale:b="us",copyWriting:T,currencyDisplay:pe}=(0,ge.useAiuiContext)(),[Y,Z]=(0,m.useState)([]),z=(0,m.useRef)(null),[H,E]=(0,m.useState)(!1),[ee,R]=(0,m.useState)(!1),de=(n,a,r,i)=>{const{primaryFun:o,onAddCart:l,onBuyNow:d,onLearnMore:f,event:_}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,r,i);if(o==="BuyNow"&&d)return d(n,a+1,r,i);if(o==="LearnMore"&&f)return f(n,a+1,r,i)}_?.primaryButton?.(n,a+1,r,i)},te=(n,a,r,i)=>{const{secondaryFun:o,onAddCart:l,onBuyNow:d,onLearnMore:f,event:_}=t||{};if(o){if(o==="AddCart"&&l)return l(n,a+1,r,i);if(o==="BuyNow"&&d)return d(n,a+1,r,i);if(o==="LearnMore"&&f)return f(n,a+1,r,i)}_?.secondaryButton?.(n,a+1,r,i)},c=(0,m.useMemo)(()=>{const n=e?.variants||[];if(n.length)return e?.sku&&n.find(a=>a?.sku===e?.sku)||n[0]},[e?.sku,e?.variants]),V=c?.id?.split?.("/")||[],se=V?.[V?.length-1],D=!c?.availableForSale||c?.price?.amount===le||c?.price===le,ue=t?.isShowTag,p=t?.isShowOriginalPrice,h=c?.coupons?.[0],q=!!(p&&h),B=e?.price?.currencyCode||"USD",k=(0,m.useMemo)(()=>(0,ve.formatVariantPrice)({locale:b,amount:q?h?.variant_price4wscode:c?.price,baseAmount:q?c?.price:0,currencyCode:B,currencyDisplay:pe,customFormatPrice:L}),[B,b,q,h?.variant_price4wscode,c,L]),{price:C,basePrice:P,discount:S,discountAmount:w}=k,{imageUrl:I,altText:N}=Ne(e),x=e?.custom_name||e?.title,A=W&&c?.metafields?.infos?.page_short_title||x,F=e?.custom_description||e?.description;(0,Se.useExposure)(z,{componentType:oe,componentName:ne,componentTitle:x,componentDescription:F,position:t?.index+1});const M=async()=>{if(!H&&!e?.custom_primary_link){E(!0);try{await de(e,t?.index,t,h)}finally{E(!1)}}},G=async()=>{if(!ee&&!e?.custom_secondary_link){R(!0);try{await te(e,t?.index,t,h)}finally{R(!1)}}},j=()=>v>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},fe=()=>v>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",ye=()=>{if(h?.value_type==="fixed_amount"){const n=w||"",a=n.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(a){const[,r,i,o]=a;let l=i;return i.endsWith(".00")?l=i.replace(/\.00$/,""):i.endsWith(",00")&&(l=i.replace(/,00$/,"")),`${r}${l}${o}`}return n}return S||""};(0,m.useEffect)(()=>{let n=[];if(S||w){const r=`${ye()} ${U?.off||X?.off||""}`;n.push(r)}const a=e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,S?1:2)||[];Z(n.concat(a))},[e?.tags,S,w,U?.off,X?.off]);const O=e?.custom_bg_image,re=e?.custom_theme;return(0,s.jsx)("div",{ref:z,className:(0,g.cn)(j().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",O?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":re==="dark"}),style:O?{backgroundImage:`url(${O})`}:void 0,children:(0,s.jsxs)("div",{className:(0,g.cn)(fe(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,g.cn)(j().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":O}),children:(0,s.jsx)("a",{"aria-label":x,target:t?.target,href:(0,we.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${se}`,`${oe}_${ne}`),onClick:()=>{(0,ke.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||c?.sku,item_name:e?.name,item_variant:c?.name,price:c?.price,index:t?.index+1}]}})},children:(0,s.jsx)(ae.default,{source:I,alt:N,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,g.cn)("flex flex-col items-start justify-center",j().boxItem),children:[ue&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:Y?.length>0&&Y?.map?.((n,a)=>(0,s.jsx)(ce.default,{className:"shelf-items-tag",variant:"fill",children:n},a))}),A?(0,s.jsx)(_e.Heading,{as:"h3",title:A||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:A||""}):null,F?(0,s.jsx)(be.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:F||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:$?$(e,{price:C,basePrice:P,discount:S,discountAmount:w,variant:c,coupon:h,isSoldOut:D}):D?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:T?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:c?.availableForSale&&C||""}),Q?Q(e,{price:C,basePrice:P,discount:S,discountAmount:w}):P&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:c?.availableForSale&&P||""})]})}),!$&&me?.(e,c),(0,s.jsxs)("div",{className:(0,g.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(K.default,{disabled:D&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:G,loading:ee,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(K.default,{disabled:D&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:M,loading:H,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
1
|
+
"use strict";var Ae=Object.create;var fe=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var Me=Object.getOwnPropertyNames;var je=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Oe=(e,t)=>{for(var p in t)fe(e,p,{get:t[p],enumerable:!0})},Ie=(e,t,p,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Me(t))!Ee.call(e,g)&&g!==p&&fe(e,g,{get:()=>t[g],enumerable:!(w=Fe(t,g))||w.enumerable});return e};var Te=(e,t,p)=>(p=e!=null?Ae(je(e)):{},Ie(t||!e||!e.__esModule?fe(p,"default",{value:e,enumerable:!0}):p,e)),We=e=>Ie(fe({},"__esModule",{value:!0}),e);var Ve={};Oe(Ve,{ShelfDisplayHorizontalItem:()=>Re,ShelfDisplayWrapItem:()=>He,getProductImage:()=>De});module.exports=We(Ve);var s=require("react/jsx-runtime"),Ne=require("../AiuiProvider/index.js"),Ce=require("./shelfDisplay.js"),xe=Te(require("../../components/picture.js")),ve=Te(require("../../components/badge.js")),v=require("../../helpers/utils.js"),be=require("../../components/text.js"),Z=Te(require("../../components/button.js")),Be=require("../../shared/track.js"),Pe=require("../../shared/trackUrlRef.js"),Le=require("../../components/heading.js"),$e=require("../../hooks/useExposure.js"),c=require("react");const ye="image",ge="product_shelf",he=999999999e-2,De=e=>{const t=e?.sku,p=e?.variants,w=p?.find(M=>M?.sku===t),g=w?.image?.url||p?.[0]?.image?.url||"",ee=w?.image?.altText||p?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:g,altText:ee}},Ue=({items:e})=>e?.length?(0,s.jsx)("div",{className:"shelf-display-social-endorsements desktop:gap-2 absolute right-0 top-0 z-10 flex flex-col items-center gap-1",children:e.map((t,p)=>typeof t.icon=="string"?(0,s.jsx)("img",{src:t.icon,alt:t.label||"",loading:"lazy",className:"desktop:size-10 lg-desktop:size-12 size-8 object-contain"},p):(0,s.jsx)(be.Text,{"aria-label":t.label,className:"desktop:size-10 lg-desktop:size-12 size-8 [&_img]:size-full [&_svg]:size-full",children:t.icon},p))}):null,He=({data:e,configuration:t})=>{const{isDisplayBackImage:p=!1,itemShape:w,metafields:g,isTopTag:ee=!1,isShowTag:M,isShowOriginalPrice:te,isShowShortTitle:ke=!1,isShowPricesTag:R=!1,pricesTagTextColor:j,pricesTagBgColor:E,itemsTagTextColor:_,itemsTagBgColor:V,formatPrice:se,renderOriginalPrice:q,renderPriceLabel:we,renderPrice:O}=t||{},{locale:P="es",copyWriting:re,currencyDisplay:oe}=(0,Ne.useAiuiContext)(),{discounts:G,discountsCopy:ie}=g||{},le=(0,c.useRef)(null),[n,ne]=(0,c.useState)([]),[ae,W]=(0,c.useState)(""),[ce,pe]=(0,c.useState)(!1),[b,U]=(0,c.useState)(!1),me=(o,m,u,f)=>{const{primaryFun:x,onAddCart:B,onBuyNow:X,onLearnMore:Y,event:Se}=t||{};if(x){if(x==="AddCart"&&B)return B(o,m+1,u,f);if(x==="BuyNow"&&X)return X(o,m+1,u,f);if(x==="LearnMore"&&Y)return Y(o,m+1,u,f)}Se?.primaryButton?.(o,m+1,u,f)},_e=(o,m,u,f)=>{const{secondaryFun:x,onAddCart:B,onBuyNow:X,onLearnMore:Y,event:Se}=t||{};if(x){if(x==="AddCart"&&B)return B(o,m+1,u,f);if(x==="BuyNow"&&X)return X(o,m+1,u,f);if(x==="LearnMore"&&Y)return Y(o,m+1,u,f)}Se?.secondaryButton?.(o,m+1,u,f)},i=(0,c.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku?o?.find?.(m=>m?.sku===e?.sku)||o[0]:o?.[0]},[e?.sku,e?.variants]),I=i?.id?.split?.("/")||[],L=I?.[I?.length-1],k=!i?.availableForSale||i?.price?.amount===he||i?.price===he,S=i?.coupons?.[0],J=!!(te&&S),z=e?.price?.currencyCode||"USD",K=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:P,amount:J?S?.variant_price4wscode:i?.price,baseAmount:J?i?.price:0,currencyCode:z,currencyDisplay:oe,customFormatPrice:se}),[z,P,J,S?.variant_price4wscode,i,se]),{price:A,basePrice:H,discount:$,discountAmount:T}=K,{imageUrl:de,altText:ue}=De(e),N=e?.custom_name||e?.title,Q=ke&&i?.metafields?.infos?.page_short_title||N,r=e?.custom_description||e?.description,l=()=>{if(S?.value_type==="fixed_amount"){const o=T||"",m=o.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(m){const[,u,f,x]=m;let B=f;return f.endsWith(".00")?B=f.replace(/\.00$/,""):f.endsWith(",00")&&(B=f.replace(/,00$/,"")),`${u}${B}${x}`}return o}return $||""};(0,c.useEffect)(()=>{let o=[];if($||T){const u=`${l()} ${G?.off||ie?.off||""}`;W(u)}const m=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,$?1:2)||[];ne(o.concat(m))},[e?.tags,$,T,G?.off,ie?.off]),(0,$e.useExposure)(le,{componentType:ye,componentName:ge,componentTitle:N,componentDescription:r,position:t?.index+1});const a=async()=>{if(!ce&&!e?.custom_primary_link){pe(!0);try{await me(e,t?.index,t,S)}finally{pe(!1)}}},d=async()=>{if(!b&&!e?.custom_secondary_link){U(!0);try{await _e(e,t?.index,t,S)}finally{U(!1)}}},y=()=>(0,s.jsxs)("div",{className:"shelf-display-product-content desktop:gap-6 lg-desktop:flex-[221] desktop:flex-[190] flex flex-[178] flex-col justify-between gap-4",children:[(0,s.jsxs)("div",{className:"shelf-display-product-content-title-desc",children:[Q?(0,s.jsx)(Le.Heading,{as:"h3",title:Q||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:Q||""}):null,(0,s.jsx)(be.Text,{size:2,className:(0,v.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:r||""})]}),(0,s.jsxs)("div",{className:"shelf-display-product-content-price-button",children:[(0,s.jsx)("div",{className:"mb-2 flex items-center",children:O?O(e,{price:A,basePrice:H,discount:$,discountAmount:T,variant:i,coupon:S,isSoldOut:k}):k?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:re?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price lg-desktop:text-2xl text-info-primary text-xl font-bold !leading-[1.2]",children:i?.availableForSale&&A||""}),q?q(e,{price:A,basePrice:H,discount:$,discountAmount:T}):H&&(0,s.jsx)("div",{className:"origin-price lg-desktop:text-2xl text-info-secondary ml-1 text-xl font-bold !leading-[1.2] line-through",children:i?.availableForSale&&H||""})]})}),!O&&we?.(e,i),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(Z.default,{disabled:k&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:d,loading:b,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(Z.default,{disabled:k&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:a,loading:ce,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),h={...j?{color:j}:{},...E?{backgroundColor:E,backgroundImage:"none"}:{},...j||E?{outline:"none"}:{}},F={..._?{color:_}:{},...V?{backgroundColor:V,backgroundImage:"none"}:{},..._||V?{outline:"none"}:{}},D=()=>(0,s.jsxs)("div",{className:"lg-desktop:h-[28px] lg-desktop:flex-[28] box-border flex h-6 flex-[24] flex-wrap gap-1 overflow-hidden",children:[R&&ae&&(0,s.jsx)(ve.default,{className:"shelf-prices-tag",variant:"fill",style:h,children:ae||""}),M&&n?.length>0&&n?.map?.((o,m)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"outline",style:F,children:o},m))]}),C=e?.custom_bg_image,ze=e?.custom_theme;return(0,s.jsx)("div",{ref:le,className:(0,v.cn)("box-border w-full cursor-pointer overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[545] desktop:aspect-w-[316] desktop:aspect-h-[450]","laptop:aspect-w-[288] laptop:aspect-h-[422] aspect-w-[296] aspect-h-[422] relative","md-tablet:h-[422px] shelf-display-item",C?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":ze==="dark"}),style:C?{backgroundImage:`url(${C})`}:void 0,children:p?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(D,{}),(0,s.jsx)(xe.default,{source:de,alt:ue,className:(0,v.cn)("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":C})}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:y()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 desktop:pt-4 desktop:gap-2 absolute inset-0 box-border flex flex-col justify-between gap-1 overflow-hidden p-4",children:[(0,s.jsx)(D,{}),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden",{"opacity-0":C}),children:[(0,s.jsx)("a",{"aria-label":N,target:t?.target,href:(0,Pe.trackUrlRef)(`${P==="us"||!P?"":`/${P}`}/products/${e?.handle}?variant=${L}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:(0,s.jsx)(xe.default,{source:de,alt:ue,className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,s.jsx)(Ue,{items:e?.socialEndorsements})]}),y()]})},e?.id||e?.handle)},Re=({data:e,configuration:t})=>{const{itemShape:p,itemLength:w,metafields:g,isShowShortTitle:ee,formatPrice:M,renderOriginalPrice:te,renderPriceLabel:ke,renderPrice:R}=t||{},{discounts:j,discountsCopy:E}=g||{},{locale:_="us",copyWriting:V,currencyDisplay:se}=(0,Ne.useAiuiContext)(),[q,we]=(0,c.useState)([]),O=(0,c.useRef)(null),[P,re]=(0,c.useState)(!1),[oe,G]=(0,c.useState)(!1),ie=(r,l,a,d)=>{const{primaryFun:y,onAddCart:h,onBuyNow:F,onLearnMore:D,event:C}=t||{};if(y){if(y==="AddCart"&&h)return h(r,l+1,a,d);if(y==="BuyNow"&&F)return F(r,l+1,a,d);if(y==="LearnMore"&&D)return D(r,l+1,a,d)}C?.primaryButton?.(r,l+1,a,d)},le=(r,l,a,d)=>{const{secondaryFun:y,onAddCart:h,onBuyNow:F,onLearnMore:D,event:C}=t||{};if(y){if(y==="AddCart"&&h)return h(r,l+1,a,d);if(y==="BuyNow"&&F)return F(r,l+1,a,d);if(y==="LearnMore"&&D)return D(r,l+1,a,d)}C?.secondaryButton?.(r,l+1,a,d)},n=(0,c.useMemo)(()=>{const r=e?.variants||[];if(r.length)return e?.sku&&r.find(l=>l?.sku===e?.sku)||r[0]},[e?.sku,e?.variants]),ne=n?.id?.split?.("/")||[],ae=ne?.[ne?.length-1],W=!n?.availableForSale||n?.price?.amount===he||n?.price===he,ce=t?.isShowTag,pe=t?.isShowOriginalPrice,b=n?.coupons?.[0],U=!!(pe&&b),me=e?.price?.currencyCode||"USD",_e=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:_,amount:U?b?.variant_price4wscode:n?.price,baseAmount:U?n?.price:0,currencyCode:me,currencyDisplay:se,customFormatPrice:M}),[me,_,U,b?.variant_price4wscode,n,M]),{price:i,basePrice:I,discount:L,discountAmount:k}=_e,{imageUrl:S,altText:J}=De(e),z=e?.custom_name||e?.title,K=ee&&n?.metafields?.infos?.page_short_title||z,A=e?.custom_description||e?.description;(0,$e.useExposure)(O,{componentType:ye,componentName:ge,componentTitle:z,componentDescription:A,position:t?.index+1});const H=async()=>{if(!P&&!e?.custom_primary_link){re(!0);try{await ie(e,t?.index,t,b)}finally{re(!1)}}},$=async()=>{if(!oe&&!e?.custom_secondary_link){G(!0);try{await le(e,t?.index,t,b)}finally{G(!1)}}},T=()=>w>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},de=()=>w>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col",ue=()=>{if(b?.value_type==="fixed_amount"){const r=k||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,d,y]=l;let h=d;return d.endsWith(".00")?h=d.replace(/\.00$/,""):d.endsWith(",00")&&(h=d.replace(/,00$/,"")),`${a}${h}${y}`}return r}return L||""};(0,c.useEffect)(()=>{let r=[];if(L||k){const a=`${ue()} ${j?.off||E?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,L?1:2)||[];we(r.concat(l))},[e?.tags,L,k,j?.off,E?.off]);const N=e?.custom_bg_image,Q=e?.custom_theme;return(0,s.jsx)("div",{ref:O,className:(0,v.cn)(T().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",N?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":Q==="dark"}),style:N?{backgroundImage:`url(${N})`}:void 0,children:(0,s.jsxs)("div",{className:(0,v.cn)(de(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,v.cn)(T().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":N}),children:(0,s.jsx)("a",{"aria-label":z,target:t?.target,href:(0,Pe.trackUrlRef)(`${_==="us"||!_?"":`/${_}`}/products/${e?.handle}?variant=${ae}`,`${ye}_${ge}`),onClick:()=>{(0,Be.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(xe.default,{source:S,alt:J,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,v.cn)("flex flex-col items-start justify-center",T().boxItem),children:[ce&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:q?.length>0&&q?.map?.((r,l)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"fill",children:r},l))}),K?(0,s.jsx)(Le.Heading,{as:"h3",title:K||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:K||""}):null,A?(0,s.jsx)(be.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description text-info-primary line-clamp-1 h-5 text-sm",html:A||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:R?R(e,{price:i,basePrice:I,discount:L,discountAmount:k,variant:n,coupon:b,isSoldOut:W}):W?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:V?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-xl text-info-primary text-xl font-bold",children:n?.availableForSale&&i||""}),te?te(e,{price:i,basePrice:I,discount:L,discountAmount:k}):I&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&I||""})]})}),!R&&ke?.(e,n),(0,s.jsxs)("div",{className:(0,v.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(Z.default,{disabled:W&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:$,loading:oe,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(Z.default,{disabled:W&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:H,loading:P,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
2
2
|
//# sourceMappingURL=shelfDisplayItem.js.map
|