@anker-in/headless-ui 1.3.58 → 1.3.59
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/components/button.js +1 -1
- package/dist/cjs/components/button.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/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/tokens/base.css +4 -0
- package/package.json +1 -1
- package/style.css +3 -3
|
@@ -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": "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,EAiFIG,EAAmBR,EAAM,WAC7B,CACE,CACE,iBAAAS,EACA,oBAAAC,EACA,cAAAC,EACA,YAAaC,EACb,eAAAC,EACA,eAAAC,EACA,cAAAC,EAAgB,GAEhB,SAAAC,EACA,SAAAC,EACA,MAAAC,EAEA,gBAAAC,EACA,cAAAC,EAEA,cAAAC,EACA,MAAAC,EAEA,WAAAC,EAEA,kBAAAC,EACA,gBAAAC,EACA,iBAAAC,EAEA,KAAAC,EACA,UAAAtB,EACA,WAAAuB,EAAa,CAAC,EACd,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAI,CAAE,GAAG,oBAAmB,GAAGJ,CAAK,EAEpCK,EACJtB,IAAwB,QAAaC,IAAkB,QAAcE,GAAkBA,EAAe,OAAS,EAE3G,CAACoB,EAAgBC,CAAiB,EAAIlC,EAAM,SAAS,EAAK,EAC1D,CAACmC,EAAaC,CAAc,EAAIpC,EAAM,SAAS,EAAE,EAEvDA,EAAM,UAAU,IAAM,CAChBY,GACFwB,EAAexB,CAAe,CAElC,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMyB,EAA2BC,GAA2C,CAC1EF,EAAe,EAAE,EACjB1B,IAAsB4B,EAAE,OAAO,KAAK,CACtC,EAEMC,EAAepB,IAAoB,QAAaC,IAAkB,OAExE,SACE,OAAC,OACC,IAAKU,EACL,aAAW,MACT,0BACA,sEACA,GACAzB,EACAuB,EAAW,IACb,EACC,GAAGC,EAEJ,oBAAC,OAAI,UAAU,mGAEZ,UAAAG,MACC,QAAC,UACC,KAAK,SACL,aAAW,MACT,mCACA,gEACAJ,EAAW,YACb,EACA,QAAS,IAAMM,EAAkBM,GAAQ,CAACA,CAAI,EAE9C,oBAAC,QAAK,UAAU,yFACb,SAAAT,EAAE,aAAe,wBACpB,KACA,QAAC,QACC,aAAW,MACT,iCACA,6HACAH,EAAW,UACb,EAEC,UAAAG,EAAE,YAAc,iBACjB,OAAC3B,EAAA,CACC,aAAW,MACT,4EACA6B,GAAkB,YACpB,EACF,GACF,GACF,EAIDA,MACC,QAAC,OAAI,UAAU,qDAEb,oBAAC,SACC,KAAK,KACL,KAAK,OACL,MAAOxB,EACP,SAAU4B,EACV,YAAaN,EAAE,mBAAqB,aACpC,aAAW,MACT,kCACA,sEACAI,GAAe,iBACfP,EAAW,WACb,EACA,eAAe,+DAEf,mBAAC,aACC,mBAAC,OAAI,UAAU,4DACb,mBAAC,UACC,QAAQ,QACR,KAAK,KACL,QAASb,EACT,UAAU,qKACV,QAAS,IAAMJ,IAAgBF,GAAoB,EAAE,EAEpD,SAAAsB,EAAE,aAAe,QACpB,EACF,EACF,EACF,EAECI,MACC,OAAC,KACC,aAAW,MACT,0CACA,kEACAP,EAAW,kBACb,EAEC,SAAAO,EACH,EAIDtB,GAAkBA,EAAe,OAAS,MACzC,OAAC,OACC,aAAW,MACT,iCACA,oCACAe,EAAW,UACb,EAEC,SAAAf,EAAe,IAAI4B,MAClB,QAAC,QAEC,aAAW,MACT,gCACA,kFACAb,EAAW,SACb,EAEA,oBAAC,QACC,aAAW,MACT,qCACA,4GACAA,EAAW,aACb,EAEC,SAAAa,EACH,KACA,OAAC,UACC,KAAK,SACL,aAAW,MACT,uCACA,4IACAb,EAAW,eACb,EACA,QAAS,IAAMd,IAAiB2B,CAAI,EAEpC,mBAACnC,EAAA,EAAU,EACb,IA1BKmC,CA2BP,CACD,EACH,GAEJ,KAIF,QAAC,OACC,aAAW,MACT,0CACA,CAACR,GAAkBD,GAAoB,oBACzC,EAGC,UAAAhB,IAAa,WACZ,QAAC,OACC,aAAW,MACT,+BACA,oJACAY,EAAW,QACb,EAEA,oBAAC,QAAK,UAAWA,EAAW,cAAgB,SAAAG,EAAE,eAAiB,YAAY,KAC3E,OAAC,QAAK,UAAWH,EAAW,cAAgB,SAAAZ,EAAS,GACvD,EAIDC,IAAa,WACZ,QAAC,OACC,aAAW,MACT,+BACA,oJACAW,EAAW,QACb,EAEA,oBAAC,QAAK,UAAWA,EAAW,cAAgB,SAAAG,EAAE,eAAiB,YAAY,KAC3E,OAAC,QAAK,UAAWH,EAAW,cAAgB,SAAAX,EAAS,GACvD,EAIDC,IAAU,WACT,QAAC,OACC,aAAW,MACT,+BACA,oJACAU,EAAW,QACb,EAEA,oBAAC,QAAK,UAAWA,EAAW,cAAgB,SAAAG,EAAE,YAAc,SAAS,KACrE,OAAC,QAAK,UAAWH,EAAW,cAAgB,SAAAV,EAAM,GACpD,EAIDqB,MACC,QAAC,OACC,aAAW,MACT,kCACA,qFACAX,EAAW,WACb,EAEC,UAAAT,IAAoB,WACnB,QAAC,OACC,aAAW,MACT,kCACA,mJACAS,EAAW,WACb,EAEA,oBAAC,QAAK,UAAWA,EAAW,cAAgB,SAAAG,EAAE,uBAAyB,qBAAqB,KAC5F,OAAC,QAAK,aAAW,MAAG,mBAAoBH,EAAW,gBAAgB,EAAI,SAAAT,EAAgB,GACzF,EAEDC,IAAkB,WACjB,QAAC,OACC,aAAW,MACT,kCACA,mJACAQ,EAAW,WACb,EAEA,oBAAC,QAAK,UAAWA,EAAW,cAAgB,SAAAG,EAAE,oBAAsB,kBAAkB,KACtF,OAAC,QAAK,aAAW,MAAG,mBAAoBH,EAAW,gBAAgB,EAAI,SAAAR,EAAc,GACvF,GAEJ,GAEJ,GAGEC,IAAkB,QAAaC,IAAU,YACzC,QAAC,OAAI,UAAU,6BACZ,UAAAD,IAAkB,WACjB,QAAC,OACC,aAAW,MACT,wCACA,6DACAO,EAAW,gBACb,EAEA,oBAAC,QAAK,UAAU,yFACb,SAAAG,EAAE,oBAAsB,kBAC3B,KACA,OAAC,QACC,aAAW,MACT,0CACA,kGACAH,EAAW,kBACb,EAEC,SAAAP,EACH,GACF,EAGDA,IAAkB,QAAaC,IAAU,WACxC,OAAC,OACC,aAAW,MACT,6BACA,uCACAM,EAAW,OACb,EACF,EAGDN,IAAU,WACT,QAAC,OACC,aAAW,MACT,+BACA,6DACAM,EAAW,QACb,EAEA,oBAAC,QAAK,UAAU,uFACb,SAAAG,EAAE,YAAc,SACnB,KACA,OAAC,QACC,aAAW,MACT,iCACA,kGACAH,EAAW,UACb,EAEC,SAAAN,EACH,GACF,GAEJ,EAGDE,GAAqBO,EAAE,sBACtB,QAAC,OACC,aAAW,MACT,2CACA,uCACAH,EAAW,aACb,EAEA,oBAAC,QAAK,UAAU,6GACb,SAAAG,EAAE,kBACL,KACA,OAACxB,EAAA,CAAS,UAAU,4CAA4C,GAClE,KAEF,QAAC,OACC,aAAW,MACT,wFACA,CAACkB,GAAmB,aACtB,EAGC,UAAAF,MACC,OAAC,UACC,QAAQ,UACR,KAAK,KACL,aAAW,MACT,sEACAK,EAAW,cACb,EACA,QAASL,EAER,SAAAQ,EAAE,UAAY,YACjB,EAIDP,GAAqBO,EAAE,sBACtB,QAAC,OACC,aAAW,MACT,oCACA,uCACAH,EAAW,aACb,EAEA,oBAAC,QAAK,UAAU,6GACb,SAAAG,EAAE,kBACL,KACA,OAACxB,EAAA,CAAS,UAAU,4CAA4C,GAClE,EAIDkB,GAAmBM,EAAE,oBACpB,QAAC,OACC,aAAW,MACT,iCACA,4DACAH,EAAW,WACb,EAEC,UAAAF,GAAoBA,EAAiB,OAAS,MAC7C,OAAC,QAAK,UAAU,6BACb,SAAAA,EAAiB,IAAI,CAACgB,EAAMC,OAC3B,OAAC,OAEC,IAAKD,EAAK,IACV,IAAKA,EAAK,KAAO,GACjB,UAAU,2CAHLC,CAIP,CACD,EACH,KAEF,QAAC,OAAI,UAAU,aACb,oBAAC,QAAK,UAAU,6GACb,SAAAZ,EAAE,gBACL,KACA,OAACxB,EAAA,CAAS,UAAU,4CAA4C,GAClE,GACF,GAEJ,GACF,EACF,CAEJ,CACF,EAEAC,EAAiB,YAAc,mBAE/B,IAAOX,EAAQW",
|
|
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 H=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var a in t)s(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,
|
|
1
|
+
"use strict";"use client";var H=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var a in t)s(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of A(t))!N.call(e,o)&&o!==a&&s(e,o,{get:()=>t[o],enumerable:!(n=M(t,o))||n.enumerable});return e};var g=(e,t,a)=>(a=e!=null?H(E(e)):{},u(t||!e||!e.__esModule?s(a,"default",{value:e,enumerable:!0}):a,e)),C=e=>u(s({},"__esModule",{value:!0}),e);var j={};z(j,{default:()=>S,sizeMap:()=>x});module.exports=C(j);var r=require("react/jsx-runtime"),R=g(require("react")),m=require("@radix-ui/react-visually-hidden"),p=require("class-variance-authority"),v=g(require("../icons/spinner.js")),h=require("../helpers/index.js");const x={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},T=({size:e="base",...t})=>{const{width:a,height:n}=x[e];return(0,r.jsx)("svg",{width:a,height:n,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:(0,r.jsx)("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},P=(0,p.cva)("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),I=(0,p.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-[var(--stroke-primary-color)]",ghost:"stroke-[var(--stroke-primary-color)]"}},defaultVariants:{variant:"primary"}}),y=R.forwardRef(({asChild:e=!1,as:t="button",href:a,target:n,rel:o,size:i="lg",children:d,variant:b,hoverEffect:k="none",className:w,disabled:f=!1,loading:l=!1,spinner:c,iconClassName:L,...B},V)=>(0,r.jsx)(t,{disabled:f||l,className:(0,h.cn)(P({variant:b,size:i,hoverEffect:k,state:l?"loading":f?"disabled":"default"}),w),ref:V,...t==="a"?{href:a,target:n,rel:o}:{},...B,children:l?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:d}),(0,r.jsx)("span",{className:"absolute",children:c||(0,r.jsx)(v.default,{className:I({variant:b})})}),(0,r.jsx)(m.VisuallyHidden,{children:d})]}):(0,r.jsxs)(r.Fragment,{children:[d,b==="link"&&i&&i!=="icon"&&(0,r.jsx)(T,{className:L,size:i})]})}));y.displayName="Button";var S=y;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GA0BM,IAAAK,EAAA,6BAxBNC,EAAuB,oBACvBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAEZ,MAAMP,EAAU,CACrB,GAAI,CACF,MAAO,KACP,OAAQ,IACV,EACA,KAAM,CACJ,MAAO,KACP,OAAQ,IACV,EACA,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACMQ,EAAuB,CAAC,CAAE,KAAAC,EAAO,OAAQ,GAAGC,CAAK,IAA0D,CAC/G,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIZ,EAAQS,CAAI,EACtC,SACE,OAAC,OAAI,MAAOE,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGF,EACxG,mBAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,CAEJ,EAMMG,KAAiB,OACrB,gMACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uJACF,UACE,2MACF,KAAM,8DACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,sCACJ,KAAM,qDACN,GAAI,sIACJ,KAAM,oCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,iLACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,KACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-[var(--stroke-primary-color)]',\n ghost: 'stroke-[var(--stroke-primary-color)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["button_exports", "__export", "button_default", "sizeMap", "__toCommonJS", "import_jsx_runtime", "React", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "target", "rel", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "Spinner"]
|
|
7
7
|
}
|
|
@@ -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 client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as C from"react";import{cn as a}from"../../../helpers/index.js";import{Button as L,Input as A,InputSlot as q}from"../../../components/index.js";import{DEFAULT_CART_COPY as D}from"../index.js";const M=({className:r})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",className:a("shrink-0",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("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"})}),O=({className:r})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",className:a("shrink-0",r),children:t("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"})}),x=({className:r})=>o("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a("shrink-0",r),children:[t("circle",{cx:"10",cy:"10",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),t("path",{d:"M10 9V14M10 6V6.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),N=C.forwardRef(({couponInputValue:r,onCouponInputChange:f,onCouponApply:g,appliedCoupons:s,onCouponRemove:T,couponLoading:z=!1,subtotal:w,shipping:b,taxes:y,productDiscount:c,orderDiscount:d,discountTotal:p,total:l,onCheckout:v,showCashReduction:h,showInstallment:k,installmentIcons:u,copy:V,className:j,classNames:e={},...P},S)=>{const n={...D,...V},R=f!==void 0||g!==void 0||s&&s.length>0,[m,B]=C.useState(!1),I=c!==void 0||d!==void 0;return t("div",{ref:S,className:a("cart-price-summary-root","laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ","",j,e.root),...P,children:o("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:[R&&o("button",{type:"button",className:a("cart-price-summary-coupon-toggle","group flex w-full cursor-pointer items-center justify-between",e.couponToggle),onClick:()=>B(i=>!i),children:[t("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?"}),o("span",{className:a("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",t(M,{className:a("text-brand-primary laptop:size-5 size-4 transition-transform duration-200",m&&"rotate-180")})]})]}),m&&o("div",{className:"laptop:max-w-[404px] flex flex-col items-end gap-2",children:[t(A,{size:"lg",type:"text",value:r,onChange:i=>f?.(i.target.value),placeholder:n.couponPlaceholder||"Enter Code",className:a("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:t(q,{children:t("div",{className:"border-lines-primary flex items-center border-l pl-2 pr-4",children:t(L,{variant:"ghost",size:"lg",loading:z,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:()=>g?.(r||""),children:n.couponApply||"Apply"})})})}),s&&s.length>0&&t("div",{className:a("cart-price-summary-coupon-tags","laptop:gap-2 flex flex-wrap gap-1",e.couponTags),children:s.map(i=>o("span",{className:a("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:[t("span",{className:a("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:i}),t("button",{type:"button",className:a("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:()=>T?.(i),children:t(O,{})})]},i))})]}),o("div",{className:a("laptop:gap-4 flex w-full flex-col gap-2",!m&&R&&"laptop:flex hidden"),children:[w!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.subtotalLabel||"Subtotal:"}),t("span",{className:e.priceRowValue,children:w})]}),b!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.shippingLabel||"Shipping:"}),t("span",{className:e.priceRowValue,children:b})]}),y!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.taxesLabel||"Taxes:"}),t("span",{className:e.priceRowValue,children:y})]}),I&&o("div",{className:a("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:[c!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.productDiscountsLabel||"Product discounts:"}),t("span",{className:a("text-marketing-1",e.discountRowValue),children:c})]}),d!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.orderDiscountLabel||"Order discount:"}),t("span",{className:a("text-marketing-1",e.discountRowValue),children:d})]})]})]}),(p!==void 0||l!==void 0)&&o("div",{className:"flex w-full flex-col gap-4",children:[p!==void 0&&o("div",{className:a("cart-price-summary-discount-total-row","flex w-full items-center justify-between whitespace-nowrap",e.discountTotalRow),children:[t("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.discountTotalLabel||"Discount total:"}),t("span",{className:a("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:p})]}),p!==void 0&&l!==void 0&&t("div",{className:a("cart-price-summary-divider","border-lines-primary w-full border-t",e.divider)}),l!==void 0&&o("div",{className:a("cart-price-summary-total-row","flex w-full items-center justify-between whitespace-nowrap",e.totalRow),children:[t("span",{className:"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:n.totalLabel||"Total:"}),t("span",{className:a("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:l})]})]}),h&&n.cashReductionText&&o("div",{className:a("cart-price-summary-cash-reduction-mobile","laptop:hidden flex items-start gap-1",e.cashReduction),children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),t(x,{className:"text-info-quaternary laptop:size-5 size-4"})]}),o("div",{className:a("laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4",!k&&"justify-end"),children:[v&&t(L,{variant:"primary",size:"lg",className:a("cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0",e.checkoutButton),onClick:v,children:n.checkOut||"Check Out"}),h&&n.cashReductionText&&o("div",{className:a("cart-price-summary-cash-reduction","laptop:flex hidden items-start gap-1",e.cashReduction),children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),t(x,{className:"text-info-quaternary laptop:size-5 size-4"})]}),k&&n.installmentText&&o("div",{className:a("cart-price-summary-installment","laptop:flex-row order-1 flex flex-col items-start gap-0.5",e.installment),children:[u&&u.length>0&&t("span",{className:"flex shrink-0 items-center",children:u.map((i,E)=>t("img",{src:i.src,alt:i.alt||"",className:"laptop:size-5 -mr-1 size-4 object-cover"},E))}),o("div",{className:"flex gap-1",children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.installmentText}),t(x,{className:"text-info-quaternary laptop:size-5 size-4"})]})]})]})]})})});N.displayName="CartPriceSummary";var _=N;export{_ as default};
|
|
1
|
+
"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as c from"react";import{cn as a}from"../../../helpers/index.js";import{Button as z,Input as O,InputSlot as H}from"../../../components/index.js";import{DEFAULT_CART_COPY as W}from"../index.js";const Z=({className:i})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",className:a("shrink-0",i),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("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"})}),_=({className:i})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",className:a("shrink-0",i),children:t("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"})}),w=({className:i})=>o("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a("shrink-0",i),children:[t("circle",{cx:"10",cy:"10",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),t("path",{d:"M10 9V14M10 6V6.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),E=c.forwardRef(({couponInputValue:i,onCouponInputChange:b,onCouponApply:y,couponError:u,appliedCoupons:s,onCouponRemove:S,couponLoading:V=!1,subtotal:v,shipping:h,taxes:k,productDiscount:d,orderDiscount:m,discountTotal:p,total:l,onCheckout:C,showCashReduction:R,showInstallment:L,installmentIcons:x,copy:j,className:I,classNames:e={},...B},P)=>{const n={...W,...j},N=b!==void 0||y!==void 0||s&&s.length>0,[f,M]=c.useState(!1),[g,T]=c.useState("");c.useEffect(()=>{u&&T(u)},[u]);const A=r=>{T(""),b?.(r.target.value)},q=d!==void 0||m!==void 0;return t("div",{ref:P,className:a("cart-price-summary-root","laptop:static rounded-t-box fixed inset-x-0 bottom-0 z-50 bg-white ","",I,e.root),...B,children:o("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:[N&&o("button",{type:"button",className:a("cart-price-summary-coupon-toggle","group flex w-full cursor-pointer items-center justify-between",e.couponToggle),onClick:()=>M(r=>!r),children:[t("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?"}),o("span",{className:a("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",t(Z,{className:a("text-brand-primary laptop:size-5 size-4 transition-transform duration-200",f&&"rotate-180")})]})]}),f&&o("div",{className:"laptop:max-w-[404px] flex flex-col items-end gap-2",children:[t(O,{size:"lg",type:"text",value:i,onChange:A,placeholder:n.couponPlaceholder||"Enter Code",className:a("cart-price-summary-coupon-input","border-lines-primary laptop:h-[54px] h-[44px] w-full bg-transparent",g&&"border-error-0",e.couponInput),inputClassName:"text-sm laptop:text-base font-bold bg-white w-[315px] flex-1",children:t(H,{children:t("div",{className:"border-lines-primary flex items-center border-l pl-2 pr-4",children:t(z,{variant:"ghost",size:"lg",loading:V,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:()=>y?.(i||""),children:n.couponApply||"Apply"})})})}),g&&t("p",{className:a("cart-price-summary-coupon-error-message","text-error-0 text-sm font-bold leading-[1.4] tracking-[-0.02em]",e.couponErrorMessage),children:g}),s&&s.length>0&&t("div",{className:a("cart-price-summary-coupon-tags","laptop:gap-2 flex flex-wrap gap-1",e.couponTags),children:s.map(r=>o("span",{className:a("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:[t("span",{className:a("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:r}),t("button",{type:"button",className:a("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:()=>S?.(r),children:t(_,{})})]},r))})]}),o("div",{className:a("laptop:gap-4 flex w-full flex-col gap-2",!f&&N&&"laptop:flex hidden"),children:[v!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.subtotalLabel||"Subtotal:"}),t("span",{className:e.priceRowValue,children:v})]}),h!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.shippingLabel||"Shipping:"}),t("span",{className:e.priceRowValue,children:h})]}),k!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.taxesLabel||"Taxes:"}),t("span",{className:e.priceRowValue,children:k})]}),q&&o("div",{className:a("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:[d!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.productDiscountsLabel||"Product discounts:"}),t("span",{className:a("text-marketing-1",e.discountRowValue),children:d})]}),m!==void 0&&o("div",{className:a("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:[t("span",{className:e.priceRowLabel,children:n.orderDiscountLabel||"Order discount:"}),t("span",{className:a("text-marketing-1",e.discountRowValue),children:m})]})]})]}),(p!==void 0||l!==void 0)&&o("div",{className:"flex w-full flex-col gap-4",children:[p!==void 0&&o("div",{className:a("cart-price-summary-discount-total-row","flex w-full items-center justify-between whitespace-nowrap",e.discountTotalRow),children:[t("span",{className:"text-info-tertiary laptop:text-base text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.discountTotalLabel||"Discount total:"}),t("span",{className:a("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:p})]}),p!==void 0&&l!==void 0&&t("div",{className:a("cart-price-summary-divider","border-lines-primary w-full border-t",e.divider)}),l!==void 0&&o("div",{className:a("cart-price-summary-total-row","flex w-full items-center justify-between whitespace-nowrap",e.totalRow),children:[t("span",{className:"text-info-primary laptop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:n.totalLabel||"Total:"}),t("span",{className:a("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:l})]})]}),R&&n.cashReductionText&&o("div",{className:a("cart-price-summary-cash-reduction-mobile","laptop:hidden flex items-start gap-1",e.cashReduction),children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),t(w,{className:"text-info-quaternary laptop:size-5 size-4"})]}),o("div",{className:a("laptop:flex-col laptop:gap-2 laptop:items-end flex items-center justify-between gap-4",!L&&"justify-end"),children:[C&&t(z,{variant:"primary",size:"lg",className:a("cart-price-summary-checkout-button laptop:-order-1 order-2 shrink-0",e.checkoutButton),onClick:C,children:n.checkOut||"Check Out"}),R&&n.cashReductionText&&o("div",{className:a("cart-price-summary-cash-reduction","laptop:flex hidden items-start gap-1",e.cashReduction),children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.cashReductionText}),t(w,{className:"text-info-quaternary laptop:size-5 size-4"})]}),L&&n.installmentText&&o("div",{className:a("cart-price-summary-installment","laptop:flex-row order-1 flex flex-col items-start gap-0.5",e.installment),children:[x&&x.length>0&&t("span",{className:"flex shrink-0 items-center",children:x.map((r,D)=>t("img",{src:r.src,alt:r.alt||"",className:"laptop:size-5 -mr-1 size-4 object-cover"},D))}),o("div",{className:"flex gap-1",children:[t("span",{className:"text-info-quaternary laptop:text-base whitespace-nowrap text-sm font-bold leading-[1.4] tracking-[-0.02em]",children:n.installmentText}),t(w,{className:"text-info-quaternary laptop:size-5 size-4"})]})]})]})]})})});E.displayName="CartPriceSummary";var G=E;export{G as default};
|
|
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": "aAkBI,cAAAA,EA0BF,QAAAC,MA1BE,oBAhBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,4BACnB,OAAS,UAAAC,EAAQ,SAAAC,EAAO,aAAAC,MAAiB,+BACzC,OAAS,qBAAAC,MAAyB,cAIlC,MAAMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BT,EAAC,OACC,MAAM,6BACN,UAAWG,EAAG,WAAYM,CAAS,EACnC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAT,EAAC,QACC,KAAK,eACL,EAAE,4TACJ,EACF,EAIIU,EAAY,CAAC,CAAE,UAAAD,CAAU,IAC7BT,EAAC,OACC,MAAM,6BACN,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,OACL,UAAWG,EAAG,WAAYM,CAAS,EAEnC,SAAAT,EAAC,QACC,EAAE,wjBACF,KAAK,UACP,EACF,EAIIW,EAAW,CAAC,CAAE,UAAAF,CAAU,IAC5BR,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAWE,EAAG,WAAYM,CAAS,EAEnC,UAAAT,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,MAAM,OAAO,eAAe,YAAY,MAAM,EACxEA,EAAC,QAAK,EAAE,oBAAoB,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,GAC5F,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Button", "Input", "InputSlot", "DEFAULT_CART_COPY", "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": ["jsx", "jsxs", "React", "cn", "Button", "Input", "InputSlot", "DEFAULT_CART_COPY", "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", "CartPriceSummary_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as c,jsx as e,jsxs as u}from"react/jsx-runtime";import*as k from"react";import{VisuallyHidden as w}from"@radix-ui/react-visually-hidden";import{cva as p}from"class-variance-authority";import L from"../icons/spinner.js";import{cn as B}from"../helpers/index.js";const V={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},H=({size:d="base",...t})=>{const{width:a,height:
|
|
1
|
+
"use client";import{Fragment as c,jsx as e,jsxs as u}from"react/jsx-runtime";import*as k from"react";import{VisuallyHidden as w}from"@radix-ui/react-visually-hidden";import{cva as p}from"class-variance-authority";import L from"../icons/spinner.js";import{cn as B}from"../helpers/index.js";const V={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},H=({size:d="base",...t})=>{const{width:a,height:o}=V[d];return e("svg",{width:a,height:o,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},M=p("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),A=p("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-[var(--stroke-primary-color)]",ghost:"stroke-[var(--stroke-primary-color)]"}},defaultVariants:{variant:"primary"}}),f=k.forwardRef(({asChild:d=!1,as:t="button",href:a,target:o,rel:g,size:r="lg",children:n,variant:i,hoverEffect:y="none",className:m,disabled:b=!1,loading:s=!1,spinner:l,iconClassName:v,...h},x)=>e(t,{disabled:b||s,className:B(M({variant:i,size:r,hoverEffect:y,state:s?"loading":b?"disabled":"default"}),m),ref:x,...t==="a"?{href:a,target:o,rel:g}:{},...h,children:s?u(c,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:n}),e("span",{className:"absolute",children:l||e(L,{className:A({variant:i})})}),e(w,{children:n})]}):u(c,{children:[n,i==="link"&&r&&r!=="icon"&&e(H,{className:v,size:r})]})}));f.displayName="Button";var I=f;export{I as default,V as sizeMap};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "aA0BM,OAyKI,YAAAA,EAzKJ,OAAAC,EAyKI,QAAAC,MAzKJ,oBAxBN,UAAYC,MAAW,QACvB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAEZ,MAAMC,EAAU,CACrB,GAAI,CACF,MAAO,KACP,OAAQ,IACV,EACA,KAAM,CACJ,MAAO,KACP,OAAQ,IACV,EACA,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACMC,EAAuB,CAAC,CAAE,KAAAC,EAAO,OAAQ,GAAGC,CAAK,IAA0D,CAC/G,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIL,EAAQE,CAAI,EACtC,OACET,EAAC,OAAI,MAAOW,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGF,EACxG,SAAAV,EAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,CAEJ,EAMMa,EAAiBT,EACrB,gMACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uJACF,UACE,2MACF,KAAM,8DACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,sCACJ,KAAM,qDACN,GAAI,sIACJ,KAAM,oCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,iLACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,KACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMU,EAAqBV,EAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nexport const sizeMap = {\n sm: {\n width: '16',\n height: '16',\n },\n base: {\n width: '18',\n height: '18',\n },\n lg: {\n width: '20',\n height: '20',\n },\n}\nconst LinkButtonAppendIcon = ({ size = 'base', ...rest }: { size: 'base' | 'lg' | 'sm'; className?: string }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...rest}>\n <path\n d=\"M7.5 5L12.5 10L7.5 15\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n secondary:\n 'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n link: 'text-info-primary hover:text-btn-primary-active border-none',\n ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class:\n 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border disabled:outline-btn-secondary-disabled-border',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'lg',\n hoverEffect: 'none',\n state: 'default',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-[var(--stroke-primary-color)]',\n ghost: 'stroke-[var(--stroke-primary-color)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n asChild?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n as?: 'button' | 'a'\n href?: string\n /** \u94FE\u63A5\u76EE\u6807\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548\uFF0C\u5982 \"_blank\" \u53EF\u5728\u65B0\u7A97\u53E3\u6253\u5F00 */\n target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']\n /** \u94FE\u63A5 rel \u5C5E\u6027\uFF0C\u4EC5\u5728 as=\"a\" \u65F6\u751F\u6548 */\n rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel']\n iconClassName?: string\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\n/**\n * Button - \u6309\u94AE\n *\n * @description \u53EF\u70B9\u51FB\u7684\u4EA4\u4E92\u5F0F\u6309\u94AE\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u6837\u5F0F\u3001\u5927\u5C0F\u3001\u72B6\u6001\u548C\u52A0\u8F7D\u6548\u679C\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n // eslint-disable-next-line\n asChild = false,\n as = 'button',\n href,\n target,\n rel,\n size = 'lg',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n iconClassName,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = as\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n ref={ref as any}\n {...(as === 'a' ? { href, target, rel } : {})}\n {...(props as any)}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n <>\n {children}\n {variant === 'link' && size && size !== 'icon' && (\n <LinkButtonAppendIcon className={iconClassName} size={size} />\n )}\n </>\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "VisuallyHidden", "cva", "Spinner", "cn", "sizeMap", "LinkButtonAppendIcon", "size", "rest", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "as", "href", "target", "rel", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "iconClassName", "props", "ref", "button_default"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
--info-quaternary-color: #767880;
|
|
30
30
|
--info-white-color: #FFFFFF;
|
|
31
31
|
|
|
32
|
+
--stroke-primary-color: var(--brand-color-0);
|
|
33
|
+
|
|
32
34
|
--container-primary-color: #EAEAEC;
|
|
33
35
|
--container-secondary-color-0: #F5F6F7;
|
|
34
36
|
--container-secondary-color-1: #ffffff;
|
|
@@ -90,6 +92,8 @@
|
|
|
90
92
|
--info-quaternary-color: #75787F;
|
|
91
93
|
--info-white-color: #1E2024;
|
|
92
94
|
|
|
95
|
+
--stroke-primary-color: var(--brand-color-0);
|
|
96
|
+
|
|
93
97
|
--container-primary-color: #1E2024;
|
|
94
98
|
--container-secondary-color-0: #373A40;
|
|
95
99
|
--container-secondary-color-1: #F5F6F7;
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -3299,15 +3299,15 @@ video {
|
|
|
3299
3299
|
.stroke-\[\#999999\] {
|
|
3300
3300
|
stroke: #999999;
|
|
3301
3301
|
}
|
|
3302
|
+
.stroke-\[var\(--stroke-primary-color\)\] {
|
|
3303
|
+
stroke: var(--stroke-primary-color);
|
|
3304
|
+
}
|
|
3302
3305
|
.stroke-btn-primary-foreground {
|
|
3303
3306
|
stroke: var(--info-white-color);
|
|
3304
3307
|
}
|
|
3305
3308
|
.stroke-btn-secondary-foreground {
|
|
3306
3309
|
stroke: var(--info-primary-color);
|
|
3307
3310
|
}
|
|
3308
|
-
.stroke-primary {
|
|
3309
|
-
stroke: var(--brand-color-0);
|
|
3310
|
-
}
|
|
3311
3311
|
.object-contain {
|
|
3312
3312
|
-o-object-fit: contain;
|
|
3313
3313
|
object-fit: contain;
|