wickes-css2 2.109.0-develop.2 → 2.109.0-gift-cards.1
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/Readme.md +1 -2
- package/build/css/category-main.css +1 -1
- package/build/css/components/checkout-payment-details-v2.css +1 -1
- package/build/css/homepage-main.css +1 -1
- package/build/css/kitchen-plp-main.css +1 -1
- package/build/css/main.css +1 -1
- package/build/css/my-account-main-v2.css +1 -1
- package/build/css/my-account-main.css +1 -1
- package/build/css/pages/checkout-new.css +1 -1
- package/build/css/pages/checkout.css +1 -1
- package/build/css/pdp-main-before-combine.css +1 -1
- package/build/css/pdp-main-non-critical.css +1 -1
- package/build/css/pdp-main.css +1 -1
- package/build/css/plp-main.css +1 -1
- package/build/css/store-locator-main.css +1 -1
- package/build/img/payment/checkout/giftcard.svg +28 -0
- package/build/img/payment/footer/giftcard.svg +28 -0
- package/build/js/gift-cards.min.js +1 -1
- package/build/js/page/checkout-payment-details.js +176 -79
- package/build/js/page/components/gift-cards.js +701 -357
- package/build/js/toggle-password-visibility.min.js +1 -0
- package/package.json +1 -1
- package/src/components/checkout_order-summary-new.hbs +6 -0
- package/src/components/checkout_payment-new.hbs +31 -8
- package/src/components/gift-cards.hbs +8 -15
- package/src/components/payments.hbs +6 -5
- package/src/data/data_checkout-giftcards.json +7 -0
- package/src/data/data_delivery-address-v2.json +4 -0
- package/src/data/data_payments-checkout.json +4 -0
- package/src/data/footer_menu.json +4 -0
- package/src/img/payment/checkout/giftcard.svg +28 -0
- package/src/img/payment/footer/giftcard.svg +28 -0
- package/src/js/page/checkout-payment-details.js +176 -79
- package/src/js/page/components/gift-cards.js +701 -357
- package/src/page_checkout_confirmation-gift-card.html +339 -0
- package/src/page_payment-details-with-gift-card.html +1 -1
- package/src/page_product-details-billie.html +2 -0
- package/src/page_product-details-clearpay.html +1 -0
- package/src/scss/components/_gift-cards.scss +32 -3
- package/src/scss/components/_payments-checkout.scss +2 -2
- package/src/scss/components/_payments-v2.scss +1 -1
- package/src/scss/helpers/_variables.scss +2 -0
- package/src/scss/pages/_checkout-confirmation-new.scss +86 -2
- package/src/sitemap.html +6 -0
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
{{#extend "checkout-new" pageClass="page_checkout page_checkout-confirmation-new" title="Checkout - Confirmation"
|
|
2
|
+
logout=true}}
|
|
3
|
+
{{#content "steps"}}
|
|
4
|
+
<div class="header-wrap">
|
|
5
|
+
<h1 class="header__title">Order Confirmation</h1>
|
|
6
|
+
<p class="header__order-block">Order number: <span class="header__order-number">143402004</span></p>
|
|
7
|
+
</div>
|
|
8
|
+
{{/content}}
|
|
9
|
+
{{#content "main"}}
|
|
10
|
+
|
|
11
|
+
<div class="confirmation-result-wrap">
|
|
12
|
+
<div class="confirmation-result__notif">
|
|
13
|
+
<span class="notif-check"><i class="fas fa-check"></i></span>
|
|
14
|
+
<span class="notif-info">Your Order Was Successful!</span>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<p class="confirmation-result__info">
|
|
18
|
+
We have emailed your order confirmation to <a href="mailto:petra.mendez@gmail.com">petra.mendez@gmail.com</a> with details of when your order will be delivered. This email will also contain our contact details should you wish to get in touch with us.
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
<div class="confirmation-result__action">
|
|
22
|
+
<a href="https://www.wickes.co.uk/track-my-order" class="btn btn-primary"><i class="fas fa-map-marked-alt"></i> Track My Order</a>
|
|
23
|
+
<a href="https://www.wickes.co.uk/my-account/orders" class="btn btn-primary">View My Order</a>
|
|
24
|
+
<a href="./" class="btn btn-secondary">Return Shopping</a>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
{{#with checkoutOrder.delivery.[0]}}
|
|
29
|
+
{{>checkout-order}}
|
|
30
|
+
{{/with}}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
{{#with checkoutOrder.clickCollect.[0]}}
|
|
34
|
+
{{>checkout-order}}
|
|
35
|
+
{{/with}}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
{{#with checkoutOrder.charity.[0]}}
|
|
39
|
+
{{>checkout-order charity="true"}}
|
|
40
|
+
{{/with}}
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
{{> checkout_payment-new giftcard=true giftcards=giftcards}}
|
|
44
|
+
{{> checkout_order-summary-new label="Subtotal:" confirmationSummary="true" giftCardDiscount="true"}}
|
|
45
|
+
|
|
46
|
+
<form class="checkout-tradepro form-bg">
|
|
47
|
+
<div class="checkout-tradepro__row">
|
|
48
|
+
<div class="checkout-tradepro__descr">
|
|
49
|
+
<div class="checkout-tradepro__info-wrap">
|
|
50
|
+
<div class="checkout-tradepro__info">
|
|
51
|
+
It looks like you're in the Trade?
|
|
52
|
+
You could be eligible to join TradePro and get
|
|
53
|
+
<strong>10% off future purchases whenever you shop in-store or online.</strong>
|
|
54
|
+
</div>
|
|
55
|
+
<a href="#" class="checkout-tradepro__learn-more">Learn more about TradePro</a>
|
|
56
|
+
</div>
|
|
57
|
+
<h3>TradePro Signup</h3>
|
|
58
|
+
<div class="warning-required">Required fields</div>
|
|
59
|
+
<h3 class="checkout-tradepro__title">Proof of Trade ID</h3>
|
|
60
|
+
<p class="checkout-tradepro__paragraph warning-required">
|
|
61
|
+
Please supply two forms of approved ID
|
|
62
|
+
</p>
|
|
63
|
+
|
|
64
|
+
<div class="signup-tradepro__attach checkout-tradepro__attach_id">
|
|
65
|
+
{{> attach-make make-attachment=true}}
|
|
66
|
+
{{> modal id="attac"}}
|
|
67
|
+
{{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type"}}
|
|
68
|
+
{{#content "sections"}}
|
|
69
|
+
|
|
70
|
+
{{#extend "modal-body-section" customSectionClass="id-type-signup"}}
|
|
71
|
+
{{#content "body"}}
|
|
72
|
+
{{> notifications notification-page.warning withCloseBtn="true"
|
|
73
|
+
text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
|
|
74
|
+
<div class="signup-tradepro__modal-info">
|
|
75
|
+
Select two forms of ID.
|
|
76
|
+
<div class="tradepro-id-counter_wrap">
|
|
77
|
+
<span>1</span>
|
|
78
|
+
of
|
|
79
|
+
<span>2</span>
|
|
80
|
+
</div>
|
|
81
|
+
ID's chosen
|
|
82
|
+
</div>
|
|
83
|
+
<div class="signup-tradepro__modal-fields">
|
|
84
|
+
<div class="tradepro-field">
|
|
85
|
+
<span class="icon icon__link inactive-el">
|
|
86
|
+
<i class="far fa-link"></i>
|
|
87
|
+
</span>
|
|
88
|
+
<a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
|
|
89
|
+
<div class="signup-tradepro__modal-action">
|
|
90
|
+
<div class="form-row" data-row-required="">
|
|
91
|
+
<label class="form-row__label"></label>
|
|
92
|
+
<div class="form-row__field">
|
|
93
|
+
{{> input need-pattern=true}}
|
|
94
|
+
<div class="form-row__error">{{error}}</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="signup-tradepro__modal-buttons">
|
|
98
|
+
<div class="row">
|
|
99
|
+
<div class="button-done">
|
|
100
|
+
<button class="btn btn-primary">
|
|
101
|
+
Done
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="button-cancel">
|
|
105
|
+
<button class="btn btn-secondary">
|
|
106
|
+
Cancel
|
|
107
|
+
</button>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="tradepro-field">
|
|
114
|
+
<span class="icon icon__link">
|
|
115
|
+
<i class="far fa-link"></i>
|
|
116
|
+
</span>
|
|
117
|
+
<span class="icon icon__pencil">
|
|
118
|
+
<i class="far fa-pencil"></i>
|
|
119
|
+
</span>
|
|
120
|
+
<a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
|
|
121
|
+
<div class="signup-tradepro__modal-action">
|
|
122
|
+
<div class="form-row" data-row-required="">
|
|
123
|
+
<label class="form-row__label"></label>
|
|
124
|
+
<div class="form-row__field">
|
|
125
|
+
{{> input need-pattern=true}}
|
|
126
|
+
<div class="form-row__error">{{error}}</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="signup-tradepro__modal-buttons">
|
|
130
|
+
<div class="row">
|
|
131
|
+
<div class="button-done">
|
|
132
|
+
<button class="btn btn-primary">
|
|
133
|
+
Done
|
|
134
|
+
</button>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="button-cancel">
|
|
137
|
+
<button class="btn btn-secondary">
|
|
138
|
+
Cancel
|
|
139
|
+
</button>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="tradepro-field">
|
|
146
|
+
<span class="icon icon__link">
|
|
147
|
+
<i class="far fa-link"></i>
|
|
148
|
+
</span>
|
|
149
|
+
<a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
|
|
150
|
+
<span class="icon icon__notification">
|
|
151
|
+
<span class="fas fa-check-circle"></span>
|
|
152
|
+
</span>
|
|
153
|
+
<div class="signup-tradepro__modal-action">
|
|
154
|
+
<div class="form-row" data-row-required="">
|
|
155
|
+
<label class="form-row__label"></label>
|
|
156
|
+
<div class="form-row__field">
|
|
157
|
+
{{> input need-pattern=true}}
|
|
158
|
+
<div class="form-row__error">{{error}}</div>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="signup-tradepro__modal-buttons">
|
|
162
|
+
<div class="row">
|
|
163
|
+
<div class="button-done">
|
|
164
|
+
<button class="btn btn-primary">
|
|
165
|
+
Done
|
|
166
|
+
</button>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="button-cancel">
|
|
169
|
+
<button class="btn btn-secondary">
|
|
170
|
+
Cancel
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="tradepro-field">
|
|
178
|
+
<span class="icon icon__link">
|
|
179
|
+
<i class="far fa-link"></i>
|
|
180
|
+
</span>
|
|
181
|
+
<a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
|
|
182
|
+
<div class="signup-tradepro__modal-action">
|
|
183
|
+
<div class="form-row" data-row-required="">
|
|
184
|
+
<label class="form-row__label"></label>
|
|
185
|
+
<div class="form-row__field">
|
|
186
|
+
{{> input need-pattern=true}}
|
|
187
|
+
<div class="form-row__error">{{error}}</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="signup-tradepro__modal-buttons">
|
|
191
|
+
<div class="row">
|
|
192
|
+
<div class="button-done">
|
|
193
|
+
<button class="btn btn-primary">
|
|
194
|
+
Done
|
|
195
|
+
</button>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="button-cancel">
|
|
198
|
+
<button class="btn btn-secondary">
|
|
199
|
+
Cancel
|
|
200
|
+
</button>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="tradepro-field">
|
|
207
|
+
<span class="icon icon__paperclip">
|
|
208
|
+
<i class="far fa-paperclip"></i>
|
|
209
|
+
</span>
|
|
210
|
+
{{> attach-make make-capture=true}}
|
|
211
|
+
<input class="tradepro-attachment" type="file" accept="image/*" capture>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="tradepro-field">
|
|
214
|
+
<img src="img/placeholders/thumbnail-sm.png"/>
|
|
215
|
+
<span class="icon icon__paperclip">
|
|
216
|
+
<i class="far fa-paperclip"></i>
|
|
217
|
+
</span>
|
|
218
|
+
<span class="icon icon__camera">
|
|
219
|
+
<i class="far fa-camera"></i>
|
|
220
|
+
</span>
|
|
221
|
+
<a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
|
|
222
|
+
<input class="tradepro-attachment" type="file" accept="image/*" capture>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="tradepro-field">
|
|
225
|
+
<span class="icon icon__paperclip">
|
|
226
|
+
<i class="far fa-paperclip"></i>
|
|
227
|
+
</span>
|
|
228
|
+
<span class="icon icon__camera">
|
|
229
|
+
<i class="far fa-camera"></i>
|
|
230
|
+
</span>
|
|
231
|
+
<a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
|
|
232
|
+
<input class="tradepro-attachment" type="file" accept="image/*" capture>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="tradepro-field">
|
|
235
|
+
<span class="icon icon__edit">
|
|
236
|
+
<i class="fas fa-edit"></i>
|
|
237
|
+
</span>
|
|
238
|
+
<a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
|
|
239
|
+
<div class="signup-tradepro__modal-action">
|
|
240
|
+
<div class="form-row" data-row-required="">
|
|
241
|
+
<label class="form-row__label"></label>
|
|
242
|
+
<div class="form-row__field">
|
|
243
|
+
{{> input need-pattern=true}}
|
|
244
|
+
<div class="form-row__error">{{error}}</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="signup-tradepro__modal-buttons">
|
|
248
|
+
<div class="row">
|
|
249
|
+
<div class="button-done">
|
|
250
|
+
<button class="btn btn-primary">
|
|
251
|
+
Done
|
|
252
|
+
</button>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="button-cancel">
|
|
255
|
+
<button class="btn btn-secondary">
|
|
256
|
+
Cancel
|
|
257
|
+
</button>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="tradepro-field">
|
|
264
|
+
<span class="icon icon__edit">
|
|
265
|
+
<i class="fas fa-edit"></i>
|
|
266
|
+
</span>
|
|
267
|
+
<a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
|
|
268
|
+
<div class="signup-tradepro__modal-action">
|
|
269
|
+
<div class="form-row" data-row-required="">
|
|
270
|
+
<label class="form-row__label"></label>
|
|
271
|
+
<div class="form-row__field">
|
|
272
|
+
{{> input need-pattern=true}}
|
|
273
|
+
<div class="form-row__error">{{error}}</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="signup-tradepro__modal-buttons">
|
|
277
|
+
<div class="row">
|
|
278
|
+
<div class="button-done">
|
|
279
|
+
<button class="btn btn-primary">
|
|
280
|
+
Done
|
|
281
|
+
</button>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="button-cancel">
|
|
284
|
+
<button class="btn btn-secondary">
|
|
285
|
+
Cancel
|
|
286
|
+
</button>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
{{/content}}
|
|
294
|
+
{{/extend}}
|
|
295
|
+
|
|
296
|
+
{{/content}}
|
|
297
|
+
{{/extend}}
|
|
298
|
+
</div>
|
|
299
|
+
<div class="chosen-form-container">
|
|
300
|
+
<div class="chosen-form-wrap">
|
|
301
|
+
<div class="chosen-form">
|
|
302
|
+
<div>
|
|
303
|
+
<img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
|
|
304
|
+
Trade business website
|
|
305
|
+
</div>
|
|
306
|
+
<span class="icon icon__notification">
|
|
307
|
+
<span class="fas fa-check-circle"></span>
|
|
308
|
+
</span>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="form-row__error">Error message here</div>
|
|
311
|
+
<div class="chosen-form">
|
|
312
|
+
<div>
|
|
313
|
+
<img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
|
|
314
|
+
Ltd company: Registration number
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
<span class="icon icon__notification">
|
|
318
|
+
<span class="fas fa-check-circle"></span>
|
|
319
|
+
</span>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="form-row__error">Error message here</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
{{> signup-form}}
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</form>
|
|
328
|
+
|
|
329
|
+
{{/content}}
|
|
330
|
+
|
|
331
|
+
{{#content "aside"}}
|
|
332
|
+
{{> checkout_information info-icon="true"}}
|
|
333
|
+
{{/content}}
|
|
334
|
+
|
|
335
|
+
{{#content "foot" mode="append"}}
|
|
336
|
+
<script defer src="./js/page/checkout-confirmation-new.js"></script>
|
|
337
|
+
{{/content}}
|
|
338
|
+
|
|
339
|
+
{{/extend}}
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
</div>
|
|
47
47
|
|
|
48
48
|
<div class="billing-payment-block">
|
|
49
|
-
<h3 class="billing-payment-block__heading">
|
|
49
|
+
<h3 class="billing-payment-block__heading">Payment</h3>
|
|
50
50
|
<div class="billing-payment-block__wrapper">
|
|
51
51
|
{{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
|
|
52
52
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.giftcard {
|
|
8
|
-
border: 1px solid $gray;
|
|
8
|
+
border: 1px solid $gray-light;
|
|
9
9
|
border-radius: 4px;
|
|
10
10
|
background: $white;
|
|
11
11
|
padding: 12px 16px;
|
|
@@ -18,6 +18,17 @@
|
|
|
18
18
|
margin-bottom: 0;
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
+
|
|
22
|
+
&--disabled {
|
|
23
|
+
.giftcard-inline__title {
|
|
24
|
+
color: $blue-disabled;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.giftcard-add,
|
|
28
|
+
.giftcard-add__text {
|
|
29
|
+
color: $blue-disabled;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
21
32
|
}
|
|
22
33
|
|
|
23
34
|
.giftcard-add {
|
|
@@ -28,9 +39,27 @@
|
|
|
28
39
|
text-decoration: none;
|
|
29
40
|
cursor: pointer;
|
|
30
41
|
|
|
42
|
+
&__icon-wrap {
|
|
43
|
+
width: 24px;
|
|
44
|
+
height: 24px;
|
|
45
|
+
flex: 0 0 24px;
|
|
46
|
+
|
|
47
|
+
display: inline-flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
31
52
|
&__icon {
|
|
32
|
-
|
|
33
|
-
height:
|
|
53
|
+
display: block;
|
|
54
|
+
line-height: 1;
|
|
55
|
+
font-size: 14px;
|
|
56
|
+
width: 14px;
|
|
57
|
+
height: 14px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__icon.svg-inline--fa {
|
|
61
|
+
width: 14px;
|
|
62
|
+
height: 14px;
|
|
34
63
|
}
|
|
35
64
|
|
|
36
65
|
&__text {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
&--small {
|
|
56
56
|
flex-wrap: wrap;
|
|
57
|
-
padding: 0
|
|
57
|
+
padding: 0 40px;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
.basket {
|
|
80
80
|
.summary__payment.footer-checkout {
|
|
81
81
|
.payments-checkout__list--small {
|
|
82
|
-
padding: 0
|
|
82
|
+
padding: 0 60px;
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
}
|
|
@@ -33,6 +33,8 @@ $error-bg: #fcf2f3; // Error notification background colour
|
|
|
33
33
|
$positive: #8dc63f; // Positive colour
|
|
34
34
|
$negative: #ed1c24; // Negative colour
|
|
35
35
|
$blue-badge: #019ee3;
|
|
36
|
+
$blue-disabled: mix(#fff, $blue, 60%); // Disabled overlay (white 60% over $blue)
|
|
37
|
+
$pacific-depths: #004587;
|
|
36
38
|
$usp-icon-color: #1a77bc; // Usp icon color
|
|
37
39
|
$pacific-depths: #004587;
|
|
38
40
|
$line-through: #242424;
|
|
@@ -192,6 +192,44 @@
|
|
|
192
192
|
background-color: initial;
|
|
193
193
|
padding: 0;
|
|
194
194
|
margin: 0;
|
|
195
|
+
|
|
196
|
+
.checkout-payment {
|
|
197
|
+
&__card {
|
|
198
|
+
&-label {
|
|
199
|
+
font-weight: 700;
|
|
200
|
+
font-size: 1rem;
|
|
201
|
+
line-height: 1.25rem;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&-value {
|
|
205
|
+
font-weight: 400;
|
|
206
|
+
font-size: 1rem;
|
|
207
|
+
line-height: 1.25rem;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&__giftcard {
|
|
212
|
+
margin-bottom: 32px;
|
|
213
|
+
|
|
214
|
+
&-header {
|
|
215
|
+
font-weight: 700;
|
|
216
|
+
font-size: 1rem;
|
|
217
|
+
line-height: 1.25rem;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&-label {
|
|
221
|
+
font-weight: 700;
|
|
222
|
+
font-size: 1rem;
|
|
223
|
+
line-height: 1.25rem;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&-value {
|
|
227
|
+
font-weight: 400;
|
|
228
|
+
font-size: 1rem;
|
|
229
|
+
line-height: 1.25rem;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
195
233
|
}
|
|
196
234
|
|
|
197
235
|
&_order-summary {
|
|
@@ -214,6 +252,13 @@
|
|
|
214
252
|
}
|
|
215
253
|
}
|
|
216
254
|
|
|
255
|
+
&__item.checkout-widget__gift-card {
|
|
256
|
+
font-weight: 700;
|
|
257
|
+
font-size: 0.875rem;
|
|
258
|
+
line-height: 1.375rem;
|
|
259
|
+
margin-top: 16px;
|
|
260
|
+
}
|
|
261
|
+
|
|
217
262
|
&__total {
|
|
218
263
|
display: flex;
|
|
219
264
|
justify-content: space-between;
|
|
@@ -230,7 +275,13 @@
|
|
|
230
275
|
&.checkout-payment {
|
|
231
276
|
.checkout-widget {
|
|
232
277
|
&__details {
|
|
233
|
-
margin-bottom:
|
|
278
|
+
margin-bottom: 32px;
|
|
279
|
+
|
|
280
|
+
&.checkout-payment__card-details {
|
|
281
|
+
display: flex;
|
|
282
|
+
flex-direction: column;
|
|
283
|
+
gap: 12px;
|
|
284
|
+
}
|
|
234
285
|
|
|
235
286
|
&__item {
|
|
236
287
|
display: flex;
|
|
@@ -332,6 +383,8 @@
|
|
|
332
383
|
&.checkout-payment {
|
|
333
384
|
.checkout-widget {
|
|
334
385
|
&__details {
|
|
386
|
+
margin-bottom: 40px;
|
|
387
|
+
|
|
335
388
|
&__item {
|
|
336
389
|
justify-content: space-between;
|
|
337
390
|
margin-bottom: 0;
|
|
@@ -359,7 +412,8 @@
|
|
|
359
412
|
&__apple,
|
|
360
413
|
&__google,
|
|
361
414
|
&__clearpay,
|
|
362
|
-
&__billie
|
|
415
|
+
&__billie,
|
|
416
|
+
&__giftcard {
|
|
363
417
|
flex-direction: row;
|
|
364
418
|
justify-content: space-between;
|
|
365
419
|
}
|
|
@@ -373,6 +427,36 @@
|
|
|
373
427
|
&__google {
|
|
374
428
|
margin-bottom: 30px;
|
|
375
429
|
}
|
|
430
|
+
|
|
431
|
+
&__giftcard {
|
|
432
|
+
margin-bottom: 40px;
|
|
433
|
+
|
|
434
|
+
&-list {
|
|
435
|
+
display: flex;
|
|
436
|
+
flex-direction: column;
|
|
437
|
+
gap: 12px;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
&-header {
|
|
441
|
+
align-items: center;
|
|
442
|
+
margin-bottom: 12px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
&-logo {
|
|
446
|
+
flex: 0 0 auto;
|
|
447
|
+
|
|
448
|
+
img {
|
|
449
|
+
height: 30px;
|
|
450
|
+
width: 48px;
|
|
451
|
+
display: block;
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
&-value {
|
|
456
|
+
text-align: right;
|
|
457
|
+
white-space: nowrap;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
376
460
|
}
|
|
377
461
|
}
|
|
378
462
|
}
|
package/src/sitemap.html
CHANGED
|
@@ -990,6 +990,12 @@
|
|
|
990
990
|
Page with Gift Cards
|
|
991
991
|
</a>
|
|
992
992
|
</li>
|
|
993
|
+
<li>
|
|
994
|
+
<span class="page-id">2</span>
|
|
995
|
+
<a href="page_checkout_confirmation-gift-card.html" target="_blank">
|
|
996
|
+
Gift Card Checkout - Confirmation new
|
|
997
|
+
</a>
|
|
998
|
+
</li>
|
|
993
999
|
</ul>
|
|
994
1000
|
</div>
|
|
995
1001
|
<div class="col">
|