@pradip1995/segment-cart-summary 0.2.3 → 0.2.5
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/package.json +5 -3
- package/src/beauty-cart-summary.css +184 -0
- package/src/beauty-cart-summary.tsx +101 -0
- package/src/default-cart-summary.tsx +64 -0
- package/src/segment.tsx +16 -55
package/package.json
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pradip1995/segment-cart-summary",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
|
-
"sideEffects":
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"./src/beauty-cart-summary.css"
|
|
10
|
+
],
|
|
9
11
|
"files": [
|
|
10
12
|
"src"
|
|
11
13
|
],
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
},
|
|
22
24
|
"dependencies": {
|
|
23
25
|
"@pradip1995/segment-primitives": "0.3.0",
|
|
24
|
-
"@pradip1995/segment-tokens": "0.3.
|
|
26
|
+
"@pradip1995/segment-tokens": "0.3.2"
|
|
25
27
|
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"@pradip1995/plugin-sdk": "^0.2.0",
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
.beauty-cart-summary {
|
|
2
|
+
position: sticky;
|
|
3
|
+
top: calc(var(--header-height, 4rem) + var(--promo-bar-height, 0px) + 1.5rem);
|
|
4
|
+
padding: 1.5rem;
|
|
5
|
+
border: 1px solid #ebebeb;
|
|
6
|
+
background: #ffffff;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.beauty-cart-summary__title {
|
|
10
|
+
margin: 0 0 1.25rem;
|
|
11
|
+
font-family: var(--font-heading, Georgia, serif);
|
|
12
|
+
font-size: 1.375rem;
|
|
13
|
+
font-weight: 500;
|
|
14
|
+
letter-spacing: 0.02em;
|
|
15
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.beauty-cart-summary__shipping {
|
|
19
|
+
margin-bottom: 1.25rem;
|
|
20
|
+
padding-bottom: 1.25rem;
|
|
21
|
+
border-bottom: 1px solid #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.beauty-cart-summary__shipping-row {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
gap: 0.75rem;
|
|
29
|
+
margin-bottom: 0.625rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.beauty-cart-summary__shipping-label {
|
|
33
|
+
font-size: 0.6875rem;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
letter-spacing: 0.12em;
|
|
36
|
+
text-transform: uppercase;
|
|
37
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.beauty-cart-summary__shipping-amount {
|
|
41
|
+
font-size: 0.75rem;
|
|
42
|
+
color: var(--color-brand-accent, #8b3a62);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.beauty-cart-summary__shipping-bar {
|
|
46
|
+
height: 3px;
|
|
47
|
+
background: #f0f0f0;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.beauty-cart-summary__shipping-fill {
|
|
52
|
+
display: block;
|
|
53
|
+
height: 100%;
|
|
54
|
+
background: linear-gradient(90deg, #8b3a62 0%, #c94b7a 100%);
|
|
55
|
+
transition: width 0.35s ease;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.beauty-cart-summary__coupon {
|
|
59
|
+
margin-bottom: 1.25rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.beauty-cart-summary__rows {
|
|
63
|
+
margin: 0 0 1.25rem;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 0.625rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.beauty-cart-summary__row {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: baseline;
|
|
72
|
+
justify-content: space-between;
|
|
73
|
+
gap: 1rem;
|
|
74
|
+
font-size: 0.875rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.beauty-cart-summary__row dt {
|
|
78
|
+
color: var(--color-text-muted, #737373);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.beauty-cart-summary__row dd {
|
|
82
|
+
margin: 0;
|
|
83
|
+
font-weight: 500;
|
|
84
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.beauty-cart-summary__row--discount dd {
|
|
88
|
+
color: #1a7f4b;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.beauty-cart-summary__row--total {
|
|
92
|
+
margin-top: 0.5rem;
|
|
93
|
+
padding-top: 1rem;
|
|
94
|
+
border-top: 1px solid #ebebeb;
|
|
95
|
+
font-size: 1rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.beauty-cart-summary__row--total dt {
|
|
99
|
+
font-weight: 500;
|
|
100
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.beauty-cart-summary__row--total dd {
|
|
104
|
+
font-family: var(--font-heading, Georgia, serif);
|
|
105
|
+
font-size: 1.25rem;
|
|
106
|
+
font-weight: 500;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.beauty-cart-summary__empty {
|
|
110
|
+
margin: 0 0 1rem;
|
|
111
|
+
font-size: 0.875rem;
|
|
112
|
+
color: var(--color-text-muted, #737373);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.beauty-cart-summary__actions {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
gap: 0.75rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.beauty-cart-summary__checkout {
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
justify-content: center;
|
|
125
|
+
width: 100%;
|
|
126
|
+
min-height: 3.25rem;
|
|
127
|
+
text-decoration: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.beauty-cart-summary__continue {
|
|
131
|
+
display: block;
|
|
132
|
+
text-align: center;
|
|
133
|
+
font-size: 0.75rem;
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
letter-spacing: 0.12em;
|
|
136
|
+
text-transform: uppercase;
|
|
137
|
+
text-decoration: underline;
|
|
138
|
+
text-underline-offset: 0.25rem;
|
|
139
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.beauty-cart-summary__continue:hover {
|
|
143
|
+
color: var(--color-brand-accent, #8b3a62);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.beauty-cart-summary__note {
|
|
147
|
+
margin: 1rem 0 0;
|
|
148
|
+
font-size: 0.75rem;
|
|
149
|
+
letter-spacing: 0.04em;
|
|
150
|
+
text-align: center;
|
|
151
|
+
color: var(--color-text-muted, #737373);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Coupon on cart page */
|
|
155
|
+
.beauty-cart-summary .coupon-apply__toggle {
|
|
156
|
+
border: 1px solid #e8e8e8;
|
|
157
|
+
border-radius: 0;
|
|
158
|
+
background: var(--color-surface-muted, #faf7f5);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.beauty-cart-summary .coupon-apply__toggle-title {
|
|
162
|
+
font-size: 0.75rem;
|
|
163
|
+
font-weight: 600;
|
|
164
|
+
letter-spacing: 0.08em;
|
|
165
|
+
text-transform: uppercase;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.beauty-cart-summary .coupon-apply__input,
|
|
169
|
+
.beauty-cart-summary .coupon-apply__submit {
|
|
170
|
+
border-radius: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.beauty-cart-summary .coupon-apply__submit {
|
|
174
|
+
background: #000000;
|
|
175
|
+
border-color: #000000;
|
|
176
|
+
letter-spacing: 0.1em;
|
|
177
|
+
text-transform: uppercase;
|
|
178
|
+
font-size: 0.6875rem;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.beauty-cart-summary .coupon-apply__submit:hover:not(:disabled) {
|
|
182
|
+
background: var(--color-brand-accent, #8b3a62);
|
|
183
|
+
border-color: var(--color-brand-accent, #8b3a62);
|
|
184
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
|
|
2
|
+
import CouponApply from "@pradip1995/segment-primitives/coupon-apply"
|
|
3
|
+
import { formatPrice } from "@pradip1995/segment-primitives/format-price"
|
|
4
|
+
import type { HttpTypes } from "@medusajs/types"
|
|
5
|
+
import "./beauty-cart-summary.css"
|
|
6
|
+
|
|
7
|
+
const FREE_SHIPPING_THRESHOLD = 59900
|
|
8
|
+
|
|
9
|
+
export default function BeautyCartSummary({
|
|
10
|
+
cart,
|
|
11
|
+
summaryTitle = "Bag summary",
|
|
12
|
+
checkoutLabel = "Checkout",
|
|
13
|
+
}: {
|
|
14
|
+
cart?: HttpTypes.StoreCart | null
|
|
15
|
+
summaryTitle?: string
|
|
16
|
+
checkoutLabel?: string
|
|
17
|
+
}) {
|
|
18
|
+
const currency = cart?.currency_code || "inr"
|
|
19
|
+
const items = cart?.items || []
|
|
20
|
+
const subtotal = cart?.subtotal ?? 0
|
|
21
|
+
const freeShippingUnlocked = subtotal >= FREE_SHIPPING_THRESHOLD
|
|
22
|
+
const amountToFreeShipping = Math.max(0, FREE_SHIPPING_THRESHOLD - subtotal)
|
|
23
|
+
const shippingProgress = Math.min(100, (subtotal / FREE_SHIPPING_THRESHOLD) * 100)
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<aside className="beauty-cart-summary">
|
|
27
|
+
<h2 className="beauty-cart-summary__title">{summaryTitle}</h2>
|
|
28
|
+
|
|
29
|
+
{items.length > 0 && cart ? (
|
|
30
|
+
<>
|
|
31
|
+
<div className="beauty-cart-summary__shipping">
|
|
32
|
+
<div className="beauty-cart-summary__shipping-row">
|
|
33
|
+
<span className="beauty-cart-summary__shipping-label">
|
|
34
|
+
{freeShippingUnlocked ? "Complimentary shipping" : "Free shipping progress"}
|
|
35
|
+
</span>
|
|
36
|
+
{!freeShippingUnlocked ? (
|
|
37
|
+
<span className="beauty-cart-summary__shipping-amount">
|
|
38
|
+
{formatPrice(amountToFreeShipping, currency)} to go
|
|
39
|
+
</span>
|
|
40
|
+
) : null}
|
|
41
|
+
</div>
|
|
42
|
+
<div className="beauty-cart-summary__shipping-bar" aria-hidden>
|
|
43
|
+
<span
|
|
44
|
+
className="beauty-cart-summary__shipping-fill"
|
|
45
|
+
style={{ width: `${shippingProgress}%` }}
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<CouponApply cart={cart} className="beauty-cart-summary__coupon" />
|
|
51
|
+
</>
|
|
52
|
+
) : null}
|
|
53
|
+
|
|
54
|
+
{items.length > 0 ? (
|
|
55
|
+
<dl className="beauty-cart-summary__rows">
|
|
56
|
+
<div className="beauty-cart-summary__row">
|
|
57
|
+
<dt>Subtotal</dt>
|
|
58
|
+
<dd>{formatPrice(cart?.subtotal, currency)}</dd>
|
|
59
|
+
</div>
|
|
60
|
+
{(cart?.discount_total ?? 0) > 0 ? (
|
|
61
|
+
<div className="beauty-cart-summary__row beauty-cart-summary__row--discount">
|
|
62
|
+
<dt>Promo savings</dt>
|
|
63
|
+
<dd>-{formatPrice(cart?.discount_total, currency)}</dd>
|
|
64
|
+
</div>
|
|
65
|
+
) : null}
|
|
66
|
+
{cart?.shipping_total != null && cart.shipping_total > 0 ? (
|
|
67
|
+
<div className="beauty-cart-summary__row">
|
|
68
|
+
<dt>Shipping</dt>
|
|
69
|
+
<dd>{formatPrice(cart.shipping_total, currency)}</dd>
|
|
70
|
+
</div>
|
|
71
|
+
) : null}
|
|
72
|
+
{cart?.tax_total != null && cart.tax_total > 0 ? (
|
|
73
|
+
<div className="beauty-cart-summary__row">
|
|
74
|
+
<dt>Tax</dt>
|
|
75
|
+
<dd>{formatPrice(cart.tax_total, currency)}</dd>
|
|
76
|
+
</div>
|
|
77
|
+
) : null}
|
|
78
|
+
<div className="beauty-cart-summary__row beauty-cart-summary__row--total">
|
|
79
|
+
<dt>Estimated total</dt>
|
|
80
|
+
<dd>{formatPrice(cart?.total, currency)}</dd>
|
|
81
|
+
</div>
|
|
82
|
+
</dl>
|
|
83
|
+
) : (
|
|
84
|
+
<p className="beauty-cart-summary__empty">No items in your bag</p>
|
|
85
|
+
)}
|
|
86
|
+
|
|
87
|
+
{items.length > 0 ? (
|
|
88
|
+
<div className="beauty-cart-summary__actions">
|
|
89
|
+
<LocalizedLink href="/checkout" className="beauty-cart-summary__checkout btn-primary">
|
|
90
|
+
{checkoutLabel}
|
|
91
|
+
</LocalizedLink>
|
|
92
|
+
<LocalizedLink href="/store" className="beauty-cart-summary__continue">
|
|
93
|
+
Continue shopping
|
|
94
|
+
</LocalizedLink>
|
|
95
|
+
</div>
|
|
96
|
+
) : null}
|
|
97
|
+
|
|
98
|
+
<p className="beauty-cart-summary__note">Taxes included · Secure checkout</p>
|
|
99
|
+
</aside>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
|
|
2
|
+
import CouponApply from "@pradip1995/segment-primitives/coupon-apply"
|
|
3
|
+
import { formatPrice } from "@pradip1995/segment-primitives/format-price"
|
|
4
|
+
import type { HttpTypes } from "@medusajs/types"
|
|
5
|
+
|
|
6
|
+
export default function DefaultCartSummary({
|
|
7
|
+
cart,
|
|
8
|
+
summaryTitle = "Order Summary",
|
|
9
|
+
checkoutLabel = "Proceed to checkout",
|
|
10
|
+
}: {
|
|
11
|
+
cart?: HttpTypes.StoreCart | null
|
|
12
|
+
summaryTitle?: string
|
|
13
|
+
checkoutLabel?: string
|
|
14
|
+
}) {
|
|
15
|
+
const currency = cart?.currency_code || "inr"
|
|
16
|
+
const items = cart?.items || []
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<aside className="card-surface rounded-lg p-6 h-fit sticky top-24 lg:col-span-1">
|
|
20
|
+
<h2 className="section-heading text-lg mb-4">{summaryTitle}</h2>
|
|
21
|
+
|
|
22
|
+
{items.length > 0 && cart ? <CouponApply cart={cart} className="mb-6" /> : null}
|
|
23
|
+
|
|
24
|
+
{items.length > 0 ? (
|
|
25
|
+
<dl className="space-y-2 text-sm mb-6">
|
|
26
|
+
<div className="flex justify-between">
|
|
27
|
+
<dt className="text-muted">Subtotal</dt>
|
|
28
|
+
<dd className="text-heading">{formatPrice(cart?.subtotal, currency)}</dd>
|
|
29
|
+
</div>
|
|
30
|
+
{(cart?.discount_total ?? 0) > 0 && (
|
|
31
|
+
<div className="flex justify-between text-green-700">
|
|
32
|
+
<dt>Discount</dt>
|
|
33
|
+
<dd>-{formatPrice(cart?.discount_total, currency)}</dd>
|
|
34
|
+
</div>
|
|
35
|
+
)}
|
|
36
|
+
{cart?.shipping_total != null && cart.shipping_total > 0 && (
|
|
37
|
+
<div className="flex justify-between">
|
|
38
|
+
<dt className="text-muted">Shipping</dt>
|
|
39
|
+
<dd className="text-heading">{formatPrice(cart.shipping_total, currency)}</dd>
|
|
40
|
+
</div>
|
|
41
|
+
)}
|
|
42
|
+
{cart?.tax_total != null && cart.tax_total > 0 && (
|
|
43
|
+
<div className="flex justify-between">
|
|
44
|
+
<dt className="text-muted">Tax</dt>
|
|
45
|
+
<dd className="text-heading">{formatPrice(cart.tax_total, currency)}</dd>
|
|
46
|
+
</div>
|
|
47
|
+
)}
|
|
48
|
+
<div className="flex justify-between pt-3 border-t border-cart-border font-semibold">
|
|
49
|
+
<dt className="text-heading">Total</dt>
|
|
50
|
+
<dd className="text-brand-accent">{formatPrice(cart?.total, currency)}</dd>
|
|
51
|
+
</div>
|
|
52
|
+
</dl>
|
|
53
|
+
) : (
|
|
54
|
+
<p className="text-muted text-sm mb-6">No items in cart</p>
|
|
55
|
+
)}
|
|
56
|
+
|
|
57
|
+
{items.length > 0 && (
|
|
58
|
+
<LocalizedLink href="/checkout" className="btn-primary block text-center w-full">
|
|
59
|
+
{checkoutLabel}
|
|
60
|
+
</LocalizedLink>
|
|
61
|
+
)}
|
|
62
|
+
</aside>
|
|
63
|
+
)
|
|
64
|
+
}
|
package/src/segment.tsx
CHANGED
|
@@ -1,62 +1,23 @@
|
|
|
1
|
-
import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
|
|
2
|
-
import CouponApply from "@pradip1995/segment-primitives/coupon-apply"
|
|
3
|
-
import { formatPrice } from "@pradip1995/segment-primitives/format-price"
|
|
4
1
|
import type { HttpTypes } from "@medusajs/types"
|
|
2
|
+
import BeautyCartSummary from "./beauty-cart-summary"
|
|
3
|
+
import DefaultCartSummary from "./default-cart-summary"
|
|
5
4
|
|
|
6
|
-
export default
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}: {
|
|
5
|
+
export type CartSummaryVariant = "default" | "beauty"
|
|
6
|
+
|
|
7
|
+
type Props = {
|
|
10
8
|
cart?: HttpTypes.StoreCart | null
|
|
11
9
|
summaryTitle?: string
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<aside className="card-surface rounded-lg p-6 h-fit sticky top-24 lg:col-span-1">
|
|
18
|
-
<h2 className="section-heading text-lg mb-4">{summaryTitle}</h2>
|
|
19
|
-
|
|
20
|
-
{items.length > 0 && cart ? <CouponApply cart={cart} className="mb-6" /> : null}
|
|
10
|
+
checkoutLabel?: string
|
|
11
|
+
variant?: CartSummaryVariant
|
|
12
|
+
}
|
|
21
13
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<dd className="text-heading">{formatPrice(cart?.subtotal, currency)}</dd>
|
|
27
|
-
</div>
|
|
28
|
-
{(cart?.discount_total ?? 0) > 0 && (
|
|
29
|
-
<div className="flex justify-between text-green-700">
|
|
30
|
-
<dt>Discount</dt>
|
|
31
|
-
<dd>-{formatPrice(cart?.discount_total, currency)}</dd>
|
|
32
|
-
</div>
|
|
33
|
-
)}
|
|
34
|
-
{cart?.shipping_total != null && cart.shipping_total > 0 && (
|
|
35
|
-
<div className="flex justify-between">
|
|
36
|
-
<dt className="text-muted">Shipping</dt>
|
|
37
|
-
<dd className="text-heading">{formatPrice(cart.shipping_total, currency)}</dd>
|
|
38
|
-
</div>
|
|
39
|
-
)}
|
|
40
|
-
{cart?.tax_total != null && cart.tax_total > 0 && (
|
|
41
|
-
<div className="flex justify-between">
|
|
42
|
-
<dt className="text-muted">Tax</dt>
|
|
43
|
-
<dd className="text-heading">{formatPrice(cart.tax_total, currency)}</dd>
|
|
44
|
-
</div>
|
|
45
|
-
)}
|
|
46
|
-
<div className="flex justify-between pt-3 border-t border-cart-border font-semibold">
|
|
47
|
-
<dt className="text-heading">Total</dt>
|
|
48
|
-
<dd className="text-brand-accent">{formatPrice(cart?.total, currency)}</dd>
|
|
49
|
-
</div>
|
|
50
|
-
</dl>
|
|
51
|
-
) : (
|
|
52
|
-
<p className="text-muted text-sm mb-6">No items in cart</p>
|
|
53
|
-
)}
|
|
14
|
+
function resolveCartSummaryVariant(variant?: CartSummaryVariant): CartSummaryVariant {
|
|
15
|
+
if (variant === "beauty" || variant === "default") return variant
|
|
16
|
+
return "beauty"
|
|
17
|
+
}
|
|
54
18
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
)}
|
|
60
|
-
</aside>
|
|
61
|
-
)
|
|
19
|
+
export default function CartSummary({ variant, ...props }: Props) {
|
|
20
|
+
const layout = resolveCartSummaryVariant(variant)
|
|
21
|
+
if (layout === "beauty") return <BeautyCartSummary {...props} />
|
|
22
|
+
return <DefaultCartSummary {...props} />
|
|
62
23
|
}
|