@anker-in/headless-ui 1.3.58 → 1.3.59-alpha.1787035365286
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 +25 -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 +25 -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 Te=Object.create;var _=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,De=Object.prototype.hasOwnProperty;var Le=(s,o)=>{for(var r in o)_(s,r,{get:o[r],enumerable:!0})},$=(s,o,r,g)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of Ce(o))!De.call(s,m)&&m!==r&&_(s,m,{get:()=>o[m],enumerable:!(g=ke(o,m))||g.enumerable});return s};var k=(s,o,r)=>(r=s!=null?Te(Ie(s)):{},$(o||!s||!s.__esModule?_(r,"default",{value:s,enumerable:!0}):r,s)),Me=s=>$(_({},"__esModule",{value:!0}),s);var Ne={};Le(Ne,{default:()=>Ee});module.exports=Me(Ne);var n=require("react/jsx-runtime"),a=k(require("react")),y=require("../../helpers/utils.js"),p=require("../../components/tabs.js"),j=k(require("../Title/index.js")),Q=k(require("../SwiperBox/index.js")),W=require("../../shared/Styles.js"),C=require("../../shared/track.js"),v=require("react-responsive"),F=require("../../hooks/useRollout.js"),h=require("./shelfDisplayItem.js");const Re="image",Pe="product_shelf",O=s=>s==null?"default":String(s).replace(/[^a-zA-Z0-9_-]/g,"")||"default",Z=a.default.forwardRef(({data:s,event:o,buildData:r,breakpoints:g,className:m="",recommendedData:w,target:G="_self",metafields:J,isDisplayGudgments:I=!1,isDisplayBackImage:K=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},oe)=>{const{productsTab:d=[],productsCard:ie=[],title:D,isShowTab:b=!0,tabShape:re="square",isShowTag:le=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:pe=!1,isTile:me=!1,tileMaxRows:S,tileExpandText:de="Show more",tileCollapseText:fe="Show less",...ue}=s,L=(0,a.useRef)(!1),M=(0,a.useRef)(null),he=(0,a.useId)(),[ge,we]=(0,a.useState)(!1);(0,a.useEffect)(()=>{we(!0)},[]);const _e=(0,v.useMediaQuery)({query:"(max-width: 768px)"}),ye=(0,v.useMediaQuery)({query:"(min-width: 1025px)"}),ve=(0,v.useMediaQuery)({query:"(min-width: 1440px)"}),[x,be]=(0,a.useState)(!1),[Se,R]=(0,F.useRollout)({threshold:0});(0,a.useImperativeHandle)(oe,()=>M.current);const P=()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:w?.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)(()=>{R&&w?.length&&!L.current&&(L.current=!0,P())},[R,w]);const E=(e,l)=>{if(l){const t=w?.map?.(i=>({...i,isShowRecommended:!0}));return t?.length?t:[]}if(!Array.isArray(e))return[];const c=e?.map?.(t=>{const i=r?.products?.find(f=>f?.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:[]},N=O(he),V=(e,l)=>{const c={...ue,event:o,isShowTag:le,isShowOriginalPrice:ce,target:G,metafields:J,itemLength:e.length,isDisplayBackImage:K,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne};if(me&&ge&&ye){const T=ve?4:3,H=typeof S=="number"&&S>0,z=H?S*T:e.length,q=H&&e.length>z,xe=q&&!x?e.slice(0,z):e;return(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:(0,y.cn)("shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4",b?"mt-6":""),children:xe.map((u,A)=>(0,n.jsx)(h.ShelfDisplayWrapItem,{data:u,configuration:{...c,index:A}},u?.id||u?.handle||A))}),q&&(0,n.jsxs)("div",{className:"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center",children:[(0,n.jsx)("button",{className:"laptop:text-base text-sm font-bold",onClick:()=>be(u=>!u),children:x?fe:de}),(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,y.cn)("laptop:size-5 size-4",x&&"rotate-180"),width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",children:(0,n.jsx)("path",{d:"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z",fill:"currentColor"})})]})]})}const t=e.length<=1&&I,i=!_e&&e.length<=2&&I,f=T=>{switch(T){case 1440:return i?e.length:4;case 1024:return i?e.length:3;default:return i?e.length:2.3}},B=l?`${N}-${O(l)}`:N;return(0,n.jsx)(Q.default,{data:{list:e,configuration:c},id:B,className:`${b?"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:f()},1024:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:t?0:16,freeMode:!1,slidesPerView:f(1440)}}},B)};return(0,n.jsxs)("div",{ref:M,...ae,className:(0,y.cn)("shelf-display-wrap text-info-primary w-full",m,{"aiui-dark":s?.theme==="dark"}),children:[D&&(0,n.jsx)(j.default,{data:{title:D}}),(0,n.jsx)("div",{ref:Se,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:b&&d?.length>0?(0,n.jsxs)(p.Tabs,{defaultValue:d?.[0]?.tab,onValueChange:e=>{const l=d?.find(c=>c?.tab===e);if(l){if(!l.isShowRecommendedTab){(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Re,component_name:Pe,component_title:s?.title,component_position:1,navigation:e}});return}P()}},shape:re==="rounded"?"rounded":"square",children:[(0,n.jsx)(p.TabsList,{children:d.map(e=>(0,n.jsx)(p.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))}),d.map(e=>(0,n.jsx)(p.TabsContent,{value:e?.tab,children:V(E(e?.data||[],e?.isShowRecommendedTab),e?.tab)},e?.id||e?.tab))]}):V(E(ie,pe))})]})});Z.displayName="ShelfDisplay";var Ee=(0,W.withLayout)(Z);
|
|
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={{\n list: items,\n 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 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": "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 tileMaxRows,\n tileExpandText = 'Show more',\n tileCollapseText = 'Show less',\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 isDesktop = useMediaQuery({ query: '(min-width: 1440px)' })\n const [tileExpanded, setTileExpanded] = useState(false)\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 // \u5E73\u94FA\u5E03\u5C40\uFF1AtileMaxRows \u8BBE\u7F6E\u540E\uFF0C\u8D85\u8FC7\u884C\u6570\u6298\u53E0\u6536\u8D77\n const colsPerRow = isDesktop ? 4 : 3\n const hasRowLimit = typeof tileMaxRows === 'number' && tileMaxRows > 0\n const maxVisibleItems = hasRowLimit ? tileMaxRows * colsPerRow : items.length\n const shouldCollapse = hasRowLimit && items.length > maxVisibleItems\n const visibleItems = shouldCollapse && !tileExpanded ? items.slice(0, maxVisibleItems) : items\n\n return (\n <div>\n <div\n className={cn('shelf-display-tile desktop:grid-cols-4 grid grid-cols-3 gap-4', isShowTab ? 'mt-6' : '')}\n >\n {visibleItems.map((item, index) => (\n <ShelfDisplayWrapItem\n key={item?.id || item?.handle || index}\n data={item}\n configuration={{ ...configuration, index }}\n />\n ))}\n </div>\n {shouldCollapse && (\n <div className=\"hover:text-brand-0 text-info-primary mt-6 flex items-center justify-center\">\n <button className=\"laptop:text-base text-sm font-bold\" onClick={() => setTileExpanded(prev => !prev)}>\n {tileExpanded ? tileCollapseText : tileExpandText}\n </button>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('laptop:size-5 size-4', tileExpanded && 'rotate-180')}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M17.2929 8.29302C17.6834 7.90249 18.3164 7.90249 18.707 8.29302C19.0975 8.68354 19.0975 9.31655 18.707 9.70708L12.707 15.7071C12.3164 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70708C4.90237 9.31655 4.90237 8.68354 5.29289 8.29302C5.68342 7.90249 6.31643 7.90249 6.70696 8.29302L11.9999 13.586L17.2929 8.29302Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\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", "tileMaxRows", "tileExpandText", "tileCollapseText", "other", "isView", "innerRef", "instanceId", "mounted", "setMounted", "isMobile", "isLaptop", "isDesktop", "tileExpanded", "setTileExpanded", "viewRef", "inView", "gackViewEvent", "item", "index", "variant", "v", "getItems", "currentData", "flag", "newCurrentData", "findData", "params", "safeInstanceId", "renderSwiperBox", "items", "tabValue", "configuration", "colsPerRow", "hasRowLimit", "maxVisibleItems", "shouldCollapse", "visibleItems", "prev", "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,24 @@ 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
|
+
/** 平铺布局下最多展示的行数，超过该行数时折叠收起，需点击「展开」查看更多。未设置则不折叠 */
|
|
93
|
+
tileMaxRows?: number;
|
|
94
|
+
/** 平铺布局折叠时「展开」按钮文案，默认 'Show more' */
|
|
95
|
+
tileExpandText?: string;
|
|
96
|
+
/** 平铺布局展开后「收起」按钮文案，默认 'Show less' */
|
|
97
|
+
tileCollapseText?: string;
|
|
98
|
+
/** shelf-prices-tag（折扣价格标签）是否显示，默认 false。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
99
|
+
isShowPricesTag?: boolean;
|
|
100
|
+
/** shelf-prices-tag 文案颜色，建议使用 Design Token CSS 变量，如 var(--info-primary-color)。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
101
|
+
pricesTagTextColor?: string;
|
|
102
|
+
/** shelf-prices-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
103
|
+
pricesTagBgColor?: string;
|
|
104
|
+
/** shelf-items-tag（自定义标签）文案颜色。设置后会隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
105
|
+
itemsTagTextColor?: string;
|
|
106
|
+
/** shelf-items-tag 背景颜色，设置后会覆盖默认的品牌渐变背景并隐藏默认品牌色描边。仅作用于纵向卡片 ShelfDisplayWrapItem */
|
|
107
|
+
itemsTagBgColor?: string;
|
|
84
108
|
};
|
|
85
109
|
export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
86
110
|
data: ShelfDisplayType;
|
|
@@ -103,6 +127,7 @@ export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
103
127
|
slidesPerView: number;
|
|
104
128
|
};
|
|
105
129
|
};
|
|
130
|
+
/** 元数据：折扣文案（discounts.off / discountsCopy.off）及社媒背书图标（socialEndorsements: SocialEndorsementItem[]） */
|
|
106
131
|
metafields?: any;
|
|
107
132
|
isDisplayGudgments?: boolean;
|
|
108
133
|
isDisplayBackImage?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var S=Object.create;var
|
|
1
|
+
"use strict";var S=Object.create;var l=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var v=(e,n)=>{for(var i in n)l(e,i,{get:n[i],enumerable:!0})},g=(e,n,i,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of x(n))!I.call(e,t)&&t!==i&&l(e,t,{get:()=>n[t],enumerable:!(a=T(n,t))||a.enumerable});return e};var C=(e,n,i)=>(i=e!=null?S(P(e)):{},g(n||!e||!e.__esModule?l(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>g(l({},"__esModule",{value:!0}),e);var B={};v(B,{formatVariantPrice:()=>_});module.exports=w(B);var y=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 p=n>e;let c=null;const u=(0,r.languageTerritory)(t);if(u){const s=new Intl.NumberFormat(u,{style:"percent"});c=p?s.format((n-e)/n):null}let m;if(p){const s=new y.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=p?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:c,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 /** \u5E73\u94FA\u5E03\u5C40\u4E0B\u6700\u591A\u5C55\u793A\u7684\u884C\u6570\uFF0C\u8D85\u8FC7\u8BE5\u884C\u6570\u65F6\u6298\u53E0\u6536\u8D77\uFF0C\u9700\u70B9\u51FB\u300C\u5C55\u5F00\u300D\u67E5\u770B\u66F4\u591A\u3002\u672A\u8BBE\u7F6E\u5219\u4E0D\u6298\u53E0 */\n tileMaxRows?: number\n /** \u5E73\u94FA\u5E03\u5C40\u6298\u53E0\u65F6\u300C\u5C55\u5F00\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show more' */\n tileExpandText?: string\n /** \u5E73\u94FA\u5E03\u5C40\u5C55\u5F00\u540E\u300C\u6536\u8D77\u300D\u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'Show less' */\n tileCollapseText?: string\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 ze=Object.create;var fe=Object.defineProperty;var Ae=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var Ee=(e,t)=>{for(var p in t)fe(e,p,{get:t[p],enumerable:!0})},Ie=(e,t,p,S)=>{if(t&&typeof t=="object"||typeof t=="function")for(let g of Fe(t))!je.call(e,g)&&g!==p&&fe(e,g,{get:()=>t[g],enumerable:!(S=Ae(t,g))||S.enumerable});return e};var Te=(e,t,p)=>(p=e!=null?ze(Me(e)):{},Ie(t||!e||!e.__esModule?fe(p,"default",{value:e,enumerable:!0}):p,e)),Oe=e=>Ie(fe({},"__esModule",{value:!0}),e);var Re={};Ee(Re,{ShelfDisplayHorizontalItem:()=>Ue,ShelfDisplayWrapItem:()=>He,getProductImage:()=>De});module.exports=Oe(Re);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")),b=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,S=p?.find(F=>F?.sku===t),g=S?.image?.url||p?.[0]?.image?.url||"",ee=S?.image?.altText||p?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:g,altText:ee}},We=({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:S,metafields:g,isTopTag:ee=!1,isShowTag:F,isShowOriginalPrice:te,isShowShortTitle:ke=!1,isShowPricesTag:V=!1,pricesTagTextColor:M,pricesTagBgColor:j,itemsTagTextColor:T,itemsTagBgColor:q,formatPrice:se,renderOriginalPrice:G,renderPriceLabel:we,renderPrice:E}=t||{},{locale:C="es",copyWriting:re,currencyDisplay:J}=(0,Ne.useAiuiContext)(),{discounts:K,discountsCopy:oe}=g||{},ie=(0,c.useRef)(null),[n,le]=(0,c.useState)([]),[ne,O]=(0,c.useState)(""),[ae,ce]=(0,c.useState)(!1),[k,W]=(0,c.useState)(!1),pe=(o,d,u,f)=>{const{primaryFun:v,onAddCart:N,onBuyNow:X,onLearnMore:Y,event:Se}=t||{};if(v){if(v==="AddCart"&&N)return N(o,d+1,u,f);if(v==="BuyNow"&&X)return X(o,d+1,u,f);if(v==="LearnMore"&&Y)return Y(o,d+1,u,f)}Se?.primaryButton?.(o,d+1,u,f)},_e=(o,d,u,f)=>{const{secondaryFun:v,onAddCart:N,onBuyNow:X,onLearnMore:Y,event:Se}=t||{};if(v){if(v==="AddCart"&&N)return N(o,d+1,u,f);if(v==="BuyNow"&&X)return X(o,d+1,u,f);if(v==="LearnMore"&&Y)return Y(o,d+1,u,f)}Se?.secondaryButton?.(o,d+1,u,f)},i=(0,c.useMemo)(()=>{const o=e?.variants||[];if(o.length)return e?.sku?o?.find?.(d=>d?.sku===e?.sku)||o[0]:o?.[0]},[e?.sku,e?.variants]),D=i?.id?.split?.("/")||[],B=D?.[D?.length-1],w=!i?.availableForSale||i?.price?.amount===he||i?.price===he,_=i?.coupons?.[0],me=e?.price?.currencyCode||"USD",H=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:C,amount:_?_?.variant_price4wscode:i?.price,baseAmount:_?i?.price:0,currencyCode:me,currencyDisplay:J,customFormatPrice:se}),[me,C,_,J,i,se]),{price:I,basePrice:P,discount:z,discountAmount:A}=H,{imageUrl:U,altText:de}=De(e),R=e?.custom_name||e?.title,L=ke&&i?.metafields?.infos?.page_short_title||R,ue=e?.custom_description||e?.description,r=()=>{if(_?.value_type==="fixed_amount"){const o=A||"",d=o.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(d){const[,u,f,v]=d;let N=f;return f.endsWith(".00")?N=f.replace(/\.00$/,""):f.endsWith(",00")&&(N=f.replace(/,00$/,"")),`${u}${N}${v}`}return o}return z||""};(0,c.useEffect)(()=>{let o=[];if(z||A){const u=`${r()} ${K?.off||oe?.off||""}`;O(u)}const d=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,2)||[];le(o.concat(d))},[e?.tags,z,A,K?.off,oe?.off]),(0,$e.useExposure)(ie,{componentType:ye,componentName:ge,componentTitle:R,componentDescription:ue,position:t?.index+1});const l=async()=>{if(!ae&&!e?.custom_primary_link){ce(!0);try{await pe(e,t?.index,t,_)}finally{ce(!1)}}},a=async()=>{if(!k&&!e?.custom_secondary_link){W(!0);try{await _e(e,t?.index,t,_)}finally{W(!1)}}},m=()=>(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:[L?(0,s.jsx)(Le.Heading,{as:"h3",title:L||"",size:2,className:"shelf-display-product-title text-info-primary mb-1 line-clamp-2",html:L||""}):null,(0,s.jsx)(be.Text,{size:2,className:(0,b.cn)("lg-desktop:text-lg desktop:text-base shelf-display-product-description text-info-primary line-clamp-2 text-sm !leading-[1.4]"),html:ue||""})]}),(0,s.jsxs)("div",{className:"shelf-display-product-content-price-button",children:[(0,s.jsx)("div",{className:"mb-2 flex items-center",children:E?E(e,{price:I,basePrice:P,discount:z,discountAmount:A,variant:i,coupon:_,isSoldOut:w}):w?(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&&I||""}),G?G(e,{price:I,basePrice:P,discount:z,discountAmount:A}):P&&te&&(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&&P||""})]})}),!E&&we?.(e,i),(0,s.jsxs)("div",{className:(0,b.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:a,loading:k,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:l,loading:ae,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]}),y={...M?{color:M}:{},...j?{backgroundColor:j,backgroundImage:"none"}:{},...M||j?{outline:"none"}:{}},h={...T?{color:T}:{},...q?{backgroundColor:q,backgroundImage:"none"}:{},...T||q?{outline:"none"}:{}},$=()=>(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:[V&&ne&&(0,s.jsx)(ve.default,{className:"shelf-prices-tag",variant:"fill",style:y,children:ne||""}),F&&n?.length>0&&n?.map?.((o,d)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"outline",style:h,children:o},d))]}),x=e?.custom_bg_image,Q=e?.custom_theme;return(0,s.jsx)("div",{ref:ie,className:(0,b.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",x?"bg-cover bg-center bg-no-repeat":"bg-background tablet:hover:bg-info-white",{"aiui-dark":Q==="dark"}),style:x?{backgroundImage:`url(${x})`}: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)($,{}),(0,s.jsx)(xe.default,{source:U,alt:de,className:(0,b.cn)("flex h-full justify-center object-cover [&_img]:w-auto",{"opacity-0":x})}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:m()})]})}):(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)($,{}),(0,s.jsxs)("div",{className:(0,b.cn)("shelf-display-item-image lg-desktop:flex-[240] relative inline-block w-full flex-[180] overflow-hidden",{"opacity-0":x}),children:[(0,s.jsx)("a",{"aria-label":R,target:t?.target,href:(0,Pe.trackUrlRef)(`${C==="us"||!C?"":`/${C}`}/products/${e?.handle}?variant=${B}`,`${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:U,alt:de,className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,s.jsx)(We,{items:e?.socialEndorsements})]}),m()]})},e?.id||e?.handle)},Ue=({data:e,configuration:t})=>{const{itemShape:p,itemLength:S,metafields:g,isShowShortTitle:ee,formatPrice:F,renderOriginalPrice:te,renderPriceLabel:ke,renderPrice:V}=t||{},{discounts:M,discountsCopy:j}=g||{},{locale:T="us",copyWriting:q,currencyDisplay:se}=(0,Ne.useAiuiContext)(),[G,we]=(0,c.useState)([]),E=(0,c.useRef)(null),[C,re]=(0,c.useState)(!1),[J,K]=(0,c.useState)(!1),oe=(r,l,a,m)=>{const{primaryFun:y,onAddCart:h,onBuyNow:$,onLearnMore:x,event:Q}=t||{};if(y){if(y==="AddCart"&&h)return h(r,l+1,a,m);if(y==="BuyNow"&&$)return $(r,l+1,a,m);if(y==="LearnMore"&&x)return x(r,l+1,a,m)}Q?.primaryButton?.(r,l+1,a,m)},ie=(r,l,a,m)=>{const{secondaryFun:y,onAddCart:h,onBuyNow:$,onLearnMore:x,event:Q}=t||{};if(y){if(y==="AddCart"&&h)return h(r,l+1,a,m);if(y==="BuyNow"&&$)return $(r,l+1,a,m);if(y==="LearnMore"&&x)return x(r,l+1,a,m)}Q?.secondaryButton?.(r,l+1,a,m)},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]),le=n?.id?.split?.("/")||[],ne=le?.[le?.length-1],O=!n?.availableForSale||n?.price?.amount===he||n?.price===he,ae=t?.isShowTag,ce=t?.isShowOriginalPrice,k=n?.coupons?.[0],W=!!(ce&&k),pe=e?.price?.currencyCode||"USD",_e=(0,c.useMemo)(()=>(0,Ce.formatVariantPrice)({locale:T,amount:W?k?.variant_price4wscode:n?.price,baseAmount:W?n?.price:0,currencyCode:pe,currencyDisplay:se,customFormatPrice:F}),[pe,T,W,k?.variant_price4wscode,n,F]),{price:i,basePrice:D,discount:B,discountAmount:w}=_e,{imageUrl:_,altText:me}=De(e),H=e?.custom_name||e?.title,I=ee&&n?.metafields?.infos?.page_short_title||H,P=e?.custom_description||e?.description;(0,$e.useExposure)(E,{componentType:ye,componentName:ge,componentTitle:H,componentDescription:P,position:t?.index+1});const z=async()=>{if(!C&&!e?.custom_primary_link){re(!0);try{await oe(e,t?.index,t,k)}finally{re(!1)}}},A=async()=>{if(!J&&!e?.custom_secondary_link){K(!0);try{await ie(e,t?.index,t,k)}finally{K(!1)}}},U=()=>S>=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=()=>S>=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",R=()=>{if(k?.value_type==="fixed_amount"){const r=w||"",l=r.match(/^(.*?)(\d[\d.,]*)(.*)$/);if(l){const[,a,m,y]=l;let h=m;return m.endsWith(".00")?h=m.replace(/\.00$/,""):m.endsWith(",00")&&(h=m.replace(/,00$/,"")),`${a}${h}${y}`}return r}return B||""};(0,c.useEffect)(()=>{let r=[];if(B||w){const a=`${R()} ${M?.off||j?.off||""}`;r.push(a)}const l=e?.tags?.filter?.(a=>a?.startsWith?.("CLtag"))?.map?.(a=>a?.replace?.("CLtag:",""))?.slice?.(0,B?1:2)||[];we(r.concat(l))},[e?.tags,B,w,M?.off,j?.off]);const L=e?.custom_bg_image,ue=e?.custom_theme;return(0,s.jsx)("div",{ref:E,className:(0,b.cn)(U().wrap,"rounded-box","shelf-display-item","duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden",L?"bg-cover bg-center bg-no-repeat":"bg-container-secondary-1 tablet:hover:bg-info-white",{"aiui-dark":ue==="dark"}),style:L?{backgroundImage:`url(${L})`}:void 0,children:(0,s.jsxs)("div",{className:(0,b.cn)(de(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,b.cn)(U().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden",{"opacity-0":L}),children:(0,s.jsx)("a",{"aria-label":H,target:t?.target,href:(0,Pe.trackUrlRef)(`${T==="us"||!T?"":`/${T}`}/products/${e?.handle}?variant=${ne}`,`${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:_,alt:me,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,b.cn)("flex flex-col items-start justify-center",U().boxItem),children:[ae&&(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:G?.length>0&&G?.map?.((r,l)=>(0,s.jsx)(ve.default,{className:"shelf-items-tag",variant:"fill",children:r},l))}),I?(0,s.jsx)(Le.Heading,{as:"h3",title:I||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] text-info-primary mb-1 line-clamp-2 h-[48px]",html:I||""}):null,P?(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:P||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:V?V(e,{price:i,basePrice:D,discount:B,discountAmount:w,variant:n,coupon:k,isSoldOut:O}):O?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:q?.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:D,discount:B,discountAmount:w}):D&&(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&D||""})]})}),!V&&ke?.(e,n),(0,s.jsxs)("div",{className:(0,b.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:O&&t?.secondaryFun!=="LearnMore",variant:"secondary",href:e?.custom_secondary_link,as:e?.custom_secondary_link?"a":"button",onClick:A,loading:J,className:t.direction==="vertical"?"w-full":"",children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(Z.default,{disabled:O&&t?.primaryFun!=="LearnMore",variant:"primary",href:e?.custom_primary_link,as:e?.custom_primary_link?"a":"button",onClick:z,loading:C,className:t.direction==="vertical"?"w-full":"",children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
2
2
|
//# sourceMappingURL=shelfDisplayItem.js.map
|