@pradip1995/segment-jewelry-checkout-form 0.1.8 → 0.1.9
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 +1 -1
- package/src/checkout-bag-items.tsx +17 -3
- package/src/checkout-line.test.ts +55 -0
- package/src/checkout-line.ts +49 -1
- package/src/jewelry-checkout-form.css +105 -61
package/package.json
CHANGED
|
@@ -40,8 +40,8 @@ export default function CheckoutBagItems({
|
|
|
40
40
|
src={thumbnail}
|
|
41
41
|
alt={line.title}
|
|
42
42
|
fill
|
|
43
|
-
className="
|
|
44
|
-
sizes="
|
|
43
|
+
className="jewelry-checkout-bag__img"
|
|
44
|
+
sizes="120px"
|
|
45
45
|
unoptimized
|
|
46
46
|
/>
|
|
47
47
|
) : (
|
|
@@ -50,7 +50,21 @@ export default function CheckoutBagItems({
|
|
|
50
50
|
</div>
|
|
51
51
|
<div className="jewelry-checkout-bag__meta">
|
|
52
52
|
<p className="jewelry-checkout-bag__name">{line.title}</p>
|
|
53
|
-
{line.
|
|
53
|
+
{line.variantOptions.length > 0 ? (
|
|
54
|
+
<ul className="jewelry-checkout-bag__variants">
|
|
55
|
+
{line.variantOptions.map((option) => (
|
|
56
|
+
<li
|
|
57
|
+
key={`${item.id}-${option.label ?? "option"}-${option.value}`}
|
|
58
|
+
className="jewelry-checkout-bag__variant-chip"
|
|
59
|
+
>
|
|
60
|
+
{option.label ? (
|
|
61
|
+
<span className="jewelry-checkout-bag__variant-label">{option.label}</span>
|
|
62
|
+
) : null}
|
|
63
|
+
<span>{option.value}</span>
|
|
64
|
+
</li>
|
|
65
|
+
))}
|
|
66
|
+
</ul>
|
|
67
|
+
) : line.variantLabel ? (
|
|
54
68
|
<p className="jewelry-checkout-bag__variant">{line.variantLabel}</p>
|
|
55
69
|
) : null}
|
|
56
70
|
<p className="jewelry-checkout-bag__qty">
|
|
@@ -3,9 +3,11 @@ import { describe, it } from "node:test"
|
|
|
3
3
|
import {
|
|
4
4
|
checkoutItemCount,
|
|
5
5
|
checkoutLineView,
|
|
6
|
+
checkoutVariantOptions,
|
|
6
7
|
isPlaceholderVariant,
|
|
7
8
|
type CheckoutLineItemInput,
|
|
8
9
|
type CheckoutLineView,
|
|
10
|
+
type CheckoutVariantOption,
|
|
9
11
|
} from "./checkout-line.ts"
|
|
10
12
|
|
|
11
13
|
const LINE_CASES: Array<{
|
|
@@ -26,6 +28,7 @@ const LINE_CASES: Array<{
|
|
|
26
28
|
id: "li_1",
|
|
27
29
|
title: "Pendants demo 3",
|
|
28
30
|
variantLabel: null,
|
|
31
|
+
variantOptions: [],
|
|
29
32
|
quantity: 1,
|
|
30
33
|
quantityLabel: "Qty 1",
|
|
31
34
|
unitPrice: 869,
|
|
@@ -44,6 +47,7 @@ const LINE_CASES: Array<{
|
|
|
44
47
|
id: "li_2",
|
|
45
48
|
title: "Gold hoop",
|
|
46
49
|
variantLabel: null,
|
|
50
|
+
variantOptions: [],
|
|
47
51
|
quantity: 3,
|
|
48
52
|
quantityLabel: "Qty 3",
|
|
49
53
|
unitPrice: 500,
|
|
@@ -65,6 +69,10 @@ const LINE_CASES: Array<{
|
|
|
65
69
|
id: "li_3",
|
|
66
70
|
title: "Emerald ring",
|
|
67
71
|
variantLabel: "18K Gold / 6",
|
|
72
|
+
variantOptions: [
|
|
73
|
+
{ label: null, value: "18K Gold" },
|
|
74
|
+
{ label: null, value: "6" },
|
|
75
|
+
],
|
|
68
76
|
quantity: 2,
|
|
69
77
|
quantityLabel: "Qty 2",
|
|
70
78
|
unitPrice: 1200,
|
|
@@ -85,6 +93,7 @@ const LINE_CASES: Array<{
|
|
|
85
93
|
id: "li_4",
|
|
86
94
|
title: "Pendants demo 2",
|
|
87
95
|
variantLabel: null,
|
|
96
|
+
variantOptions: [],
|
|
88
97
|
quantity: 1,
|
|
89
98
|
quantityLabel: "Qty 1",
|
|
90
99
|
unitPrice: 846,
|
|
@@ -98,6 +107,7 @@ const LINE_CASES: Array<{
|
|
|
98
107
|
id: "",
|
|
99
108
|
title: "Product",
|
|
100
109
|
variantLabel: null,
|
|
110
|
+
variantOptions: [],
|
|
101
111
|
quantity: 1,
|
|
102
112
|
quantityLabel: "Qty 1",
|
|
103
113
|
unitPrice: 0,
|
|
@@ -138,6 +148,51 @@ describe("checkoutItemCount", () => {
|
|
|
138
148
|
}
|
|
139
149
|
})
|
|
140
150
|
|
|
151
|
+
const VARIANT_OPTION_CASES: Array<{
|
|
152
|
+
name: string
|
|
153
|
+
item: CheckoutLineItemInput
|
|
154
|
+
want: CheckoutVariantOption[]
|
|
155
|
+
}> = [
|
|
156
|
+
{
|
|
157
|
+
name: "returns every structured option and drops placeholder values",
|
|
158
|
+
item: {
|
|
159
|
+
variant: {
|
|
160
|
+
title: "22K Yellow Gold / 16 inch",
|
|
161
|
+
options: [
|
|
162
|
+
{ value: "22K Yellow Gold", option: { title: "Metal" } },
|
|
163
|
+
{ value: "16 inch", option: { title: "Length" } },
|
|
164
|
+
{ value: "Default", option: { title: "Default Option" } },
|
|
165
|
+
],
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
want: [
|
|
169
|
+
{ label: "Metal", value: "22K Yellow Gold" },
|
|
170
|
+
{ label: "Length", value: "16 inch" },
|
|
171
|
+
],
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
name: "splits a combined variant title when options are missing",
|
|
175
|
+
item: { variant: { title: "18K Gold / 6" } },
|
|
176
|
+
want: [
|
|
177
|
+
{ label: null, value: "18K Gold" },
|
|
178
|
+
{ label: null, value: "6" },
|
|
179
|
+
],
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
name: "returns no chips for a default variant",
|
|
183
|
+
item: { variant: { title: "Default variant" } },
|
|
184
|
+
want: [],
|
|
185
|
+
},
|
|
186
|
+
]
|
|
187
|
+
|
|
188
|
+
describe("checkoutVariantOptions", () => {
|
|
189
|
+
for (const row of VARIANT_OPTION_CASES) {
|
|
190
|
+
it(row.name, () => {
|
|
191
|
+
assert.deepEqual(checkoutVariantOptions(row.item), row.want)
|
|
192
|
+
})
|
|
193
|
+
}
|
|
194
|
+
})
|
|
195
|
+
|
|
141
196
|
describe("isPlaceholderVariant", () => {
|
|
142
197
|
for (const row of VARIANT_CASES) {
|
|
143
198
|
it(row.name, () => {
|
package/src/checkout-line.ts
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
export type CheckoutVariantOption = {
|
|
2
|
+
label: string | null
|
|
3
|
+
value: string
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
type CheckoutVariantOptionInput = {
|
|
7
|
+
value?: string | null
|
|
8
|
+
option?: { title?: string | null } | null
|
|
9
|
+
}
|
|
10
|
+
|
|
1
11
|
export type CheckoutLineItemInput = {
|
|
2
12
|
id?: string | null
|
|
3
13
|
title?: string | null
|
|
@@ -5,13 +15,17 @@ export type CheckoutLineItemInput = {
|
|
|
5
15
|
quantity?: number | null
|
|
6
16
|
unit_price?: number | null
|
|
7
17
|
total?: number | null
|
|
8
|
-
variant?: {
|
|
18
|
+
variant?: {
|
|
19
|
+
title?: string | null
|
|
20
|
+
options?: CheckoutVariantOptionInput[] | null
|
|
21
|
+
} | null
|
|
9
22
|
}
|
|
10
23
|
|
|
11
24
|
export type CheckoutLineView = {
|
|
12
25
|
id: string
|
|
13
26
|
title: string
|
|
14
27
|
variantLabel: string | null
|
|
28
|
+
variantOptions: CheckoutVariantOption[]
|
|
15
29
|
quantity: number
|
|
16
30
|
quantityLabel: string
|
|
17
31
|
unitPrice: number
|
|
@@ -28,12 +42,45 @@ export function isPlaceholderVariant(title?: string | null): boolean {
|
|
|
28
42
|
)
|
|
29
43
|
}
|
|
30
44
|
|
|
45
|
+
function cleanOptionLabel(title?: string | null): string | null {
|
|
46
|
+
const trimmed = title?.trim()
|
|
47
|
+
if (!trimmed || isPlaceholderVariant(trimmed)) return null
|
|
48
|
+
return trimmed
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function optionFromParts(
|
|
52
|
+
value?: string | null,
|
|
53
|
+
label?: string | null
|
|
54
|
+
): CheckoutVariantOption | null {
|
|
55
|
+
const trimmed = value?.trim()
|
|
56
|
+
if (!trimmed || isPlaceholderVariant(trimmed)) return null
|
|
57
|
+
return { label: cleanOptionLabel(label), value: trimmed }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/** Every real variant option on the line, including values split from a combined title. */
|
|
61
|
+
export function checkoutVariantOptions(item: CheckoutLineItemInput): CheckoutVariantOption[] {
|
|
62
|
+
const structured = (item.variant?.options || [])
|
|
63
|
+
.map((option) => optionFromParts(option.value, option.option?.title))
|
|
64
|
+
.filter((option): option is CheckoutVariantOption => Boolean(option))
|
|
65
|
+
|
|
66
|
+
if (structured.length > 0) return structured
|
|
67
|
+
|
|
68
|
+
const title = item.variant?.title
|
|
69
|
+
if (!title || isPlaceholderVariant(title)) return []
|
|
70
|
+
|
|
71
|
+
return title
|
|
72
|
+
.split("/")
|
|
73
|
+
.map((part) => optionFromParts(part))
|
|
74
|
+
.filter((option): option is CheckoutVariantOption => Boolean(option))
|
|
75
|
+
}
|
|
76
|
+
|
|
31
77
|
export function checkoutLineView(item: CheckoutLineItemInput): CheckoutLineView {
|
|
32
78
|
const quantity = Math.max(1, Number(item.quantity) || 1)
|
|
33
79
|
const unitPrice = Number(item.unit_price) || 0
|
|
34
80
|
const lineTotal =
|
|
35
81
|
typeof item.total === "number" ? item.total : unitPrice * quantity
|
|
36
82
|
const variantTitle = item.variant?.title
|
|
83
|
+
const variantOptions = checkoutVariantOptions(item)
|
|
37
84
|
const variantLabel =
|
|
38
85
|
variantTitle && !isPlaceholderVariant(variantTitle) ? variantTitle : null
|
|
39
86
|
|
|
@@ -41,6 +88,7 @@ export function checkoutLineView(item: CheckoutLineItemInput): CheckoutLineView
|
|
|
41
88
|
id: item.id || "",
|
|
42
89
|
title: (item.product_title || item.title || "Product").trim() || "Product",
|
|
43
90
|
variantLabel,
|
|
91
|
+
variantOptions,
|
|
44
92
|
quantity,
|
|
45
93
|
quantityLabel: `Qty ${quantity}`,
|
|
46
94
|
unitPrice,
|
|
@@ -18,20 +18,20 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.jewelry-checkout-payment__btn--cod:hover:not(:disabled) {
|
|
21
|
-
border-color: #
|
|
22
|
-
color: #
|
|
21
|
+
border-color: var(--color-brand-accent, #13264d) !important;
|
|
22
|
+
color: var(--color-brand-accent, #13264d) !important;
|
|
23
23
|
background: #ffffff !important;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.jewelry-checkout-payment__btn--online {
|
|
27
|
-
background: #
|
|
28
|
-
border: 1px solid #
|
|
27
|
+
background: var(--color-brand-accent, #13264d) !important;
|
|
28
|
+
border: 1px solid var(--color-brand-accent, #13264d) !important;
|
|
29
29
|
color: #ffffff !important;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.jewelry-checkout-payment__btn--online:hover:not(:disabled) {
|
|
33
|
-
background: #
|
|
34
|
-
border-color: #
|
|
33
|
+
background: var(--color-brand-accent-hover, #1c3a70) !important;
|
|
34
|
+
border-color: var(--color-brand-accent-hover, #1c3a70) !important;
|
|
35
35
|
color: #ffffff !important;
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
top: 0.45rem;
|
|
84
84
|
transform: translateY(0);
|
|
85
85
|
font-size: 0.6875rem;
|
|
86
|
-
color: var(--checkout-ink, #
|
|
86
|
+
color: var(--checkout-ink, var(--color-brand-accent, #13264d));
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
.jewelry-checkout-address__check {
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
.jewelry-checkout-address__check input {
|
|
100
100
|
width: 1rem;
|
|
101
101
|
height: 1rem;
|
|
102
|
-
accent-color: #
|
|
102
|
+
accent-color: var(--color-brand-accent, #13264d);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.jewelry-checkout-address__head {
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
width: 3px;
|
|
129
129
|
height: 0.95em;
|
|
130
130
|
border-radius: 1px;
|
|
131
|
-
background: #
|
|
131
|
+
background: var(--color-brand-accent, #13264d);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.jewelry-checkout-address__actions {
|
|
@@ -156,14 +156,14 @@
|
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
.jewelry-checkout-address__btn--primary {
|
|
159
|
-
background: #
|
|
160
|
-
border: 1px solid #
|
|
159
|
+
background: var(--color-brand-accent, #13264d);
|
|
160
|
+
border: 1px solid var(--color-brand-accent, #13264d);
|
|
161
161
|
color: #ffffff;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.jewelry-checkout-address__btn--primary:hover:not(:disabled) {
|
|
165
|
-
background: #
|
|
166
|
-
border-color: #
|
|
165
|
+
background: var(--color-brand-accent-hover, #1c3a70);
|
|
166
|
+
border-color: var(--color-brand-accent-hover, #1c3a70);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
.jewelry-checkout-address__btn--outline {
|
|
@@ -174,8 +174,8 @@
|
|
|
174
174
|
|
|
175
175
|
.jewelry-checkout-address__btn--outline:hover:not(:disabled) {
|
|
176
176
|
background: #f7f3fa;
|
|
177
|
-
border-color: #
|
|
178
|
-
color: #
|
|
177
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
178
|
+
color: var(--color-brand-accent, #13264d);
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
.jewelry-checkout-address__btn--block {
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
.jewelry-checkout-address-card__body--selected {
|
|
221
221
|
background: #faf6f1;
|
|
222
222
|
border-color: #e4dcd3;
|
|
223
|
-
box-shadow: inset 4px 0 0 #
|
|
223
|
+
box-shadow: inset 4px 0 0 var(--color-brand-accent, #13264d);
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
.jewelry-checkout-address-card__body--pickable {
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
.jewelry-checkout-address-card__body--pickable:hover {
|
|
232
|
-
border-color: #
|
|
232
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
.jewelry-checkout-address-card__radio {
|
|
@@ -240,9 +240,9 @@
|
|
|
240
240
|
height: 1.125rem;
|
|
241
241
|
margin-top: 0.2rem;
|
|
242
242
|
flex-shrink: 0;
|
|
243
|
-
border: 1.5px solid #
|
|
243
|
+
border: 1.5px solid var(--color-brand-accent, #13264d);
|
|
244
244
|
border-radius: 999px;
|
|
245
|
-
background: #
|
|
245
|
+
background: var(--color-brand-accent, #13264d);
|
|
246
246
|
box-sizing: border-box;
|
|
247
247
|
}
|
|
248
248
|
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
font-family: var(--font-sans, inherit);
|
|
284
284
|
font-size: 0.9375rem;
|
|
285
285
|
font-weight: 700;
|
|
286
|
-
color: #
|
|
286
|
+
color: var(--color-brand-accent, #13264d);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
.jewelry-checkout-address-card__tag {
|
|
@@ -300,8 +300,8 @@
|
|
|
300
300
|
}
|
|
301
301
|
|
|
302
302
|
.jewelry-checkout-address-card__tag--default {
|
|
303
|
-
background: #
|
|
304
|
-
border-color: #
|
|
303
|
+
background: var(--color-brand-accent, #13264d);
|
|
304
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
305
305
|
color: #ffffff;
|
|
306
306
|
}
|
|
307
307
|
|
|
@@ -365,8 +365,8 @@
|
|
|
365
365
|
|
|
366
366
|
.jewelry-checkout-address-card__edit:hover {
|
|
367
367
|
background: #f7f3fa;
|
|
368
|
-
border-color: #
|
|
369
|
-
color: #
|
|
368
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
369
|
+
color: var(--color-brand-accent, #13264d);
|
|
370
370
|
}
|
|
371
371
|
|
|
372
372
|
.jewelry-checkout-address-empty {
|
|
@@ -489,7 +489,7 @@
|
|
|
489
489
|
}
|
|
490
490
|
|
|
491
491
|
.jewelry-checkout-modal__option:hover:not(:disabled) .jewelry-checkout-address-card__body {
|
|
492
|
-
border-color: #
|
|
492
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
493
493
|
}
|
|
494
494
|
|
|
495
495
|
.jewelry-checkout-modal__option:disabled {
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
|
|
583
583
|
.jewelry-checkout-modal__input:focus {
|
|
584
584
|
outline: none;
|
|
585
|
-
border-color: #
|
|
585
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
586
586
|
box-shadow: 0 0 0 3px rgba(59, 31, 78, 0.1);
|
|
587
587
|
}
|
|
588
588
|
|
|
@@ -598,7 +598,7 @@
|
|
|
598
598
|
.jewelry-checkout-modal__check input {
|
|
599
599
|
width: 1rem;
|
|
600
600
|
height: 1rem;
|
|
601
|
-
accent-color: #
|
|
601
|
+
accent-color: var(--color-brand-accent, #13264d);
|
|
602
602
|
}
|
|
603
603
|
|
|
604
604
|
.jewelry-checkout-modal__type {
|
|
@@ -645,8 +645,8 @@
|
|
|
645
645
|
}
|
|
646
646
|
|
|
647
647
|
.jewelry-checkout-modal__type-option input:checked + span {
|
|
648
|
-
background: #
|
|
649
|
-
border-color: #
|
|
648
|
+
background: var(--color-brand-accent, #13264d);
|
|
649
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
650
650
|
color: #ffffff;
|
|
651
651
|
}
|
|
652
652
|
|
|
@@ -684,8 +684,8 @@
|
|
|
684
684
|
}
|
|
685
685
|
|
|
686
686
|
.jewelry-checkout-modal__save {
|
|
687
|
-
background: #
|
|
688
|
-
border: 1px solid #
|
|
687
|
+
background: var(--color-brand-accent, #13264d);
|
|
688
|
+
border: 1px solid var(--color-brand-accent, #13264d);
|
|
689
689
|
color: #ffffff;
|
|
690
690
|
}
|
|
691
691
|
|
|
@@ -706,8 +706,8 @@
|
|
|
706
706
|
}
|
|
707
707
|
|
|
708
708
|
.jewelry-checkout-modal__cancel:hover {
|
|
709
|
-
border-color: #
|
|
710
|
-
color: #
|
|
709
|
+
border-color: var(--color-brand-accent, #13264d);
|
|
710
|
+
color: var(--color-brand-accent, #13264d);
|
|
711
711
|
}
|
|
712
712
|
|
|
713
713
|
@media (max-width: 640px) {
|
|
@@ -781,7 +781,7 @@
|
|
|
781
781
|
border-radius: 999px;
|
|
782
782
|
background: #ffffff;
|
|
783
783
|
border: 1px solid rgba(59, 31, 78, 0.14);
|
|
784
|
-
color: #
|
|
784
|
+
color: var(--color-brand-accent, #13264d);
|
|
785
785
|
box-shadow: 0 6px 16px rgba(59, 31, 78, 0.08);
|
|
786
786
|
}
|
|
787
787
|
|
|
@@ -792,7 +792,7 @@
|
|
|
792
792
|
font-weight: 500;
|
|
793
793
|
letter-spacing: 0.1em;
|
|
794
794
|
text-transform: uppercase;
|
|
795
|
-
color: #
|
|
795
|
+
color: var(--color-brand-accent, #13264d);
|
|
796
796
|
}
|
|
797
797
|
|
|
798
798
|
.jewelry-leave-checkout__body {
|
|
@@ -832,8 +832,8 @@
|
|
|
832
832
|
|
|
833
833
|
.jewelry-leave-checkout__btn--stay {
|
|
834
834
|
background: #ffffff;
|
|
835
|
-
border: 1px solid #
|
|
836
|
-
color: #
|
|
835
|
+
border: 1px solid var(--color-brand-accent, #13264d);
|
|
836
|
+
color: var(--color-brand-accent, #13264d);
|
|
837
837
|
}
|
|
838
838
|
|
|
839
839
|
.jewelry-leave-checkout__btn--stay:hover {
|
|
@@ -841,18 +841,18 @@
|
|
|
841
841
|
}
|
|
842
842
|
|
|
843
843
|
.jewelry-leave-checkout__btn--leave {
|
|
844
|
-
background: #
|
|
845
|
-
border: 1px solid #
|
|
844
|
+
background: var(--color-brand-accent, #13264d);
|
|
845
|
+
border: 1px solid var(--color-brand-accent, #13264d);
|
|
846
846
|
color: #ffffff;
|
|
847
847
|
}
|
|
848
848
|
|
|
849
849
|
.jewelry-leave-checkout__btn--leave:hover {
|
|
850
|
-
background: #
|
|
851
|
-
border-color: #
|
|
850
|
+
background: var(--color-brand-accent-hover, #1c3a70);
|
|
851
|
+
border-color: var(--color-brand-accent-hover, #1c3a70);
|
|
852
852
|
}
|
|
853
853
|
|
|
854
854
|
.jewelry-leave-checkout__btn:focus-visible {
|
|
855
|
-
outline: 2px solid #
|
|
855
|
+
outline: 2px solid var(--color-brand-accent, #13264d);
|
|
856
856
|
outline-offset: 2px;
|
|
857
857
|
}
|
|
858
858
|
|
|
@@ -894,7 +894,7 @@
|
|
|
894
894
|
width: 3px;
|
|
895
895
|
height: 0.95em;
|
|
896
896
|
border-radius: 1px;
|
|
897
|
-
background: #
|
|
897
|
+
background: var(--color-brand-accent, #13264d);
|
|
898
898
|
}
|
|
899
899
|
|
|
900
900
|
.jewelry-checkout-bag__count {
|
|
@@ -915,29 +915,42 @@
|
|
|
915
915
|
|
|
916
916
|
.jewelry-checkout-bag__item {
|
|
917
917
|
display: grid;
|
|
918
|
-
grid-template-columns:
|
|
918
|
+
grid-template-columns: 7.25rem minmax(0, 1fr) auto;
|
|
919
919
|
gap: 1rem;
|
|
920
920
|
align-items: center;
|
|
921
921
|
padding: 0.85rem;
|
|
922
|
-
border: 1px solid rgba(
|
|
923
|
-
border-radius:
|
|
922
|
+
border: 1px solid rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.12);
|
|
923
|
+
border-radius: 1.15rem;
|
|
924
924
|
background: #ffffff;
|
|
925
925
|
}
|
|
926
926
|
|
|
927
927
|
.jewelry-checkout-bag__thumb {
|
|
928
928
|
position: relative;
|
|
929
|
-
width:
|
|
930
|
-
height:
|
|
929
|
+
width: 7.25rem;
|
|
930
|
+
height: 7.25rem;
|
|
931
931
|
overflow: hidden;
|
|
932
|
-
border-radius:
|
|
933
|
-
background:
|
|
934
|
-
|
|
932
|
+
border-radius: 1rem;
|
|
933
|
+
background: linear-gradient(
|
|
934
|
+
180deg,
|
|
935
|
+
var(--color-surface-muted, #faf7f5) 0%,
|
|
936
|
+
var(--color-brand-accent-muted, #ebf3f6) 100%
|
|
937
|
+
);
|
|
938
|
+
box-shadow: 0 16px 32px -22px rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.45);
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
.jewelry-checkout-bag__img {
|
|
942
|
+
object-fit: contain;
|
|
943
|
+
padding: 0.45rem;
|
|
935
944
|
}
|
|
936
945
|
|
|
937
946
|
.jewelry-checkout-bag__thumb-empty {
|
|
938
947
|
width: 100%;
|
|
939
948
|
height: 100%;
|
|
940
|
-
background: linear-gradient(
|
|
949
|
+
background: linear-gradient(
|
|
950
|
+
180deg,
|
|
951
|
+
var(--color-surface-muted, #faf7f5) 0%,
|
|
952
|
+
var(--color-brand-accent-muted, #ebf3f6) 100%
|
|
953
|
+
);
|
|
941
954
|
}
|
|
942
955
|
|
|
943
956
|
.jewelry-checkout-bag__meta {
|
|
@@ -956,6 +969,37 @@
|
|
|
956
969
|
color: #1a1224;
|
|
957
970
|
}
|
|
958
971
|
|
|
972
|
+
.jewelry-checkout-bag__variants {
|
|
973
|
+
display: flex;
|
|
974
|
+
flex-wrap: wrap;
|
|
975
|
+
gap: 0.4rem;
|
|
976
|
+
margin: 0.15rem 0 0;
|
|
977
|
+
padding: 0;
|
|
978
|
+
list-style: none;
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
.jewelry-checkout-bag__variant-chip {
|
|
982
|
+
display: inline-flex;
|
|
983
|
+
align-items: center;
|
|
984
|
+
gap: 0.35rem;
|
|
985
|
+
min-height: 1.7rem;
|
|
986
|
+
padding: 0.15rem 0.65rem;
|
|
987
|
+
border: 1px solid rgba(var(--color-brand-accent-rgb, 19, 38, 77), 0.16);
|
|
988
|
+
border-radius: 999px;
|
|
989
|
+
background: var(--color-brand-accent-muted, #ebf3f6);
|
|
990
|
+
font-size: 0.75rem;
|
|
991
|
+
font-weight: 600;
|
|
992
|
+
color: var(--color-text-heading, #0a0a0a);
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
.jewelry-checkout-bag__variant-label {
|
|
996
|
+
font-size: 0.625rem;
|
|
997
|
+
font-weight: 700;
|
|
998
|
+
letter-spacing: 0.08em;
|
|
999
|
+
text-transform: uppercase;
|
|
1000
|
+
color: var(--color-brand-accent, #13264d);
|
|
1001
|
+
}
|
|
1002
|
+
|
|
959
1003
|
.jewelry-checkout-bag__variant {
|
|
960
1004
|
margin: 0;
|
|
961
1005
|
font-size: 0.6875rem;
|
|
@@ -975,18 +1019,18 @@
|
|
|
975
1019
|
margin: 0;
|
|
976
1020
|
font-size: 0.9375rem;
|
|
977
1021
|
font-weight: 700;
|
|
978
|
-
color: #
|
|
1022
|
+
color: var(--color-brand-accent, #13264d);
|
|
979
1023
|
white-space: nowrap;
|
|
980
1024
|
}
|
|
981
1025
|
|
|
982
1026
|
@media (max-width: 520px) {
|
|
983
1027
|
.jewelry-checkout-bag__item {
|
|
984
|
-
grid-template-columns:
|
|
1028
|
+
grid-template-columns: 5.5rem minmax(0, 1fr);
|
|
985
1029
|
}
|
|
986
1030
|
|
|
987
1031
|
.jewelry-checkout-bag__thumb {
|
|
988
|
-
width:
|
|
989
|
-
height:
|
|
1032
|
+
width: 5.5rem;
|
|
1033
|
+
height: 5.5rem;
|
|
990
1034
|
}
|
|
991
1035
|
|
|
992
1036
|
.jewelry-checkout-bag__total {
|
|
@@ -996,14 +1040,14 @@
|
|
|
996
1040
|
}
|
|
997
1041
|
|
|
998
1042
|
.jewelry-checkout-payment__btn--upi {
|
|
999
|
-
background: #
|
|
1000
|
-
border: 1px solid #
|
|
1043
|
+
background: var(--color-brand-accent, #13264d) !important;
|
|
1044
|
+
border: 1px solid var(--color-brand-accent, #13264d) !important;
|
|
1001
1045
|
color: #ffffff !important;
|
|
1002
1046
|
}
|
|
1003
1047
|
|
|
1004
1048
|
.jewelry-checkout-payment__btn--upi:hover:not(:disabled) {
|
|
1005
|
-
background: #
|
|
1006
|
-
border-color: #
|
|
1049
|
+
background: var(--color-brand-accent-hover, #1c3a70) !important;
|
|
1050
|
+
border-color: var(--color-brand-accent-hover, #1c3a70) !important;
|
|
1007
1051
|
color: #ffffff !important;
|
|
1008
1052
|
}
|
|
1009
1053
|
|
|
@@ -1048,6 +1092,6 @@
|
|
|
1048
1092
|
.jewelry-checkout-upi__open-link {
|
|
1049
1093
|
font-size: 0.8125rem;
|
|
1050
1094
|
font-weight: 600;
|
|
1051
|
-
color: #
|
|
1095
|
+
color: var(--color-brand-accent, #13264d);
|
|
1052
1096
|
text-decoration: underline;
|
|
1053
1097
|
}
|