merchi_cart 1.3.10 → 1.3.12
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/esm/components/CustomerCheckoutMethodTabs.js +96 -0
- package/esm/components/index.js +2 -1
- package/esm/forms/index.js +2 -1
- package/esm/panels/PanelClientCheckout.js +8 -30
- package/esm/styles/globals.css +102 -2
- package/esm/styles/globals.css.map +1 -1
- package/lib/components/CustomerCheckoutMethodTabs.js +104 -0
- package/lib/components/index.js +7 -0
- package/lib/forms/index.js +7 -0
- package/lib/panels/PanelClientCheckout.js +6 -28
- package/lib/styles/globals.css +102 -2
- package/lib/styles/globals.css.map +1 -1
- package/package.json +2 -2
- package/src/components/CustomerCheckoutMethodTabs.tsx +106 -0
- package/src/components/index.ts +2 -0
- package/src/forms/index.ts +2 -0
- package/src/panels/PanelClientCheckout.tsx +7 -35
- package/src/styles/globals.scss +131 -5
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { useState } from 'react';
|
|
9
|
+
import { BiCheck, BiUser } from 'react-icons/bi';
|
|
10
|
+
import { FaWhatsapp } from 'react-icons/fa';
|
|
11
|
+
import FormNewCustomer from '../forms/FormNewCustomer';
|
|
12
|
+
import FormReturningCustomer from '../forms/FormReturningCustomer';
|
|
13
|
+
import FormWhatsappCustomer from '../forms/FormWhatsappCustomer';
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
17
|
+
function renderSectionIcon(iconType) {
|
|
18
|
+
if (iconType === 'whatsapp') {
|
|
19
|
+
return /*#__PURE__*/_jsx(FaWhatsapp, {
|
|
20
|
+
className: "merchi-customer-checkout-option__icon-svg merchi-customer-checkout-option__icon-svg--whatsapp"
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return /*#__PURE__*/_jsx(BiUser, {
|
|
24
|
+
className: "merchi-customer-checkout-option__icon-svg"
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
export default function CustomerCheckoutMethodTabs(_ref) {
|
|
28
|
+
var _ref$whatsappEnabled = _ref.whatsappEnabled,
|
|
29
|
+
whatsappEnabled = _ref$whatsappEnabled === void 0 ? false : _ref$whatsappEnabled;
|
|
30
|
+
var _useState = useState(null),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
activeMethod = _useState2[0],
|
|
33
|
+
setActiveMethod = _useState2[1];
|
|
34
|
+
var sections = [{
|
|
35
|
+
id: 'returning',
|
|
36
|
+
label: 'Returning customer',
|
|
37
|
+
iconType: 'user',
|
|
38
|
+
form: /*#__PURE__*/_jsx(FormReturningCustomer, {})
|
|
39
|
+
}, {
|
|
40
|
+
id: 'new',
|
|
41
|
+
label: 'New customer',
|
|
42
|
+
iconType: 'user',
|
|
43
|
+
form: /*#__PURE__*/_jsx(FormNewCustomer, {})
|
|
44
|
+
}];
|
|
45
|
+
if (whatsappEnabled) {
|
|
46
|
+
sections.push({
|
|
47
|
+
id: 'whatsapp',
|
|
48
|
+
label: 'WhatsApp checkout',
|
|
49
|
+
iconType: 'whatsapp',
|
|
50
|
+
form: /*#__PURE__*/_jsx(FormWhatsappCustomer, {})
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
54
|
+
children: [/*#__PURE__*/_jsx("p", {
|
|
55
|
+
className: "merchi-customer-checkout__heading",
|
|
56
|
+
children: "Choose a checkout option"
|
|
57
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
58
|
+
className: "merchi-customer-checkout-options",
|
|
59
|
+
role: "radiogroup",
|
|
60
|
+
"aria-label": "Choose a checkout option",
|
|
61
|
+
children: sections.map(function (section) {
|
|
62
|
+
var isSelected = activeMethod === section.id;
|
|
63
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
64
|
+
className: "merchi-customer-checkout-option".concat(isSelected ? ' is-selected' : ''),
|
|
65
|
+
children: [/*#__PURE__*/_jsxs("button", {
|
|
66
|
+
type: "button",
|
|
67
|
+
role: "radio",
|
|
68
|
+
"aria-checked": isSelected,
|
|
69
|
+
"aria-expanded": isSelected,
|
|
70
|
+
className: "merchi-customer-checkout-option__header",
|
|
71
|
+
onClick: function onClick() {
|
|
72
|
+
return setActiveMethod(section.id);
|
|
73
|
+
},
|
|
74
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
75
|
+
className: "merchi-customer-checkout-option__title",
|
|
76
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
77
|
+
className: "merchi-customer-checkout-option__icon",
|
|
78
|
+
children: renderSectionIcon(section.iconType)
|
|
79
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
80
|
+
className: "merchi-customer-checkout-option__label",
|
|
81
|
+
children: section.label
|
|
82
|
+
})]
|
|
83
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
84
|
+
className: "merchi-customer-checkout-option__checkbox",
|
|
85
|
+
"aria-hidden": true,
|
|
86
|
+
children: isSelected && /*#__PURE__*/_jsx(BiCheck, {})
|
|
87
|
+
})]
|
|
88
|
+
}), isSelected && /*#__PURE__*/_jsx("div", {
|
|
89
|
+
className: "merchi-customer-checkout-option__body",
|
|
90
|
+
children: section.form
|
|
91
|
+
})]
|
|
92
|
+
}, section.id);
|
|
93
|
+
})
|
|
94
|
+
})]
|
|
95
|
+
});
|
|
96
|
+
}
|
package/esm/components/index.js
CHANGED
|
@@ -8,10 +8,11 @@ import CartTabContent from './CartTabContent';
|
|
|
8
8
|
import CartTableContainer from './CartTableContainer';
|
|
9
9
|
import CartTabPanel from './CartTabPanel';
|
|
10
10
|
import Collapse from './Collapse';
|
|
11
|
+
import CustomerCheckoutMethodTabs from './CustomerCheckoutMethodTabs';
|
|
11
12
|
import DiscountInputGroup from './DiscountInputGroup';
|
|
12
13
|
import LoadingTemplate, { LoadingTemplateSm } from './LoadingTemplate';
|
|
13
14
|
import NoCartItems from './NoCartItems';
|
|
14
15
|
import ShipmentGroupCard from './ShipmentGroupCard';
|
|
15
16
|
import Table from './Table';
|
|
16
17
|
import Title from './CartTitle';
|
|
17
|
-
export { Alert, CartBody, CartClient, CartFooter, CartPaymentSettingsInvalid, CartShipment, CartTabContent, CartTableContainer, CartTabPanel, Collapse, DiscountInputGroup, LoadingTemplate, LoadingTemplateSm, NoCartItems, ShipmentGroupCard, Table, Title };
|
|
18
|
+
export { Alert, CartBody, CartClient, CartFooter, CartPaymentSettingsInvalid, CartShipment, CartTabContent, CartTableContainer, CartTabPanel, Collapse, CustomerCheckoutMethodTabs, DiscountInputGroup, LoadingTemplate, LoadingTemplateSm, NoCartItems, ShipmentGroupCard, Table, Title };
|
package/esm/forms/index.js
CHANGED
|
@@ -4,4 +4,5 @@ import FormShipmentAddressAndNotes, { ActiveFormShipmentAddressAndNotes } from "
|
|
|
4
4
|
import FormSquarePayment from "./FormSquarePayment";
|
|
5
5
|
import FormStripePayment from "./FormStripePayment";
|
|
6
6
|
import FormWhatsappCustomer from "./FormWhatsappCustomer";
|
|
7
|
-
|
|
7
|
+
import CustomerCheckoutMethodTabs from "../components/CustomerCheckoutMethodTabs";
|
|
8
|
+
export { ActiveFormShipmentAddressAndNotes, CustomerCheckoutMethodTabs, FormCustomerNew, FormReturningCustomer, FormShipmentAddressAndNotes, FormSquarePayment, FormStripePayment, FormWhatsappCustomer };
|
|
@@ -2,13 +2,10 @@ import { tabIdCheckout } from '../utilities/tabs';
|
|
|
2
2
|
import { CheckoutContainer, InnerContainer } from '../components/containers';
|
|
3
3
|
import CartClient from '../components/CartClient';
|
|
4
4
|
import CartShipment from '../components/CartShipment';
|
|
5
|
-
import { CartBody, CartTabPanel, Title } from '../components';
|
|
6
|
-
import FormNewCustomer from '../forms/FormNewCustomer';
|
|
7
|
-
import FormReturningCustomer from '../forms/FormReturningCustomer';
|
|
8
|
-
import FormWhatsappCustomer from '../forms/FormWhatsappCustomer';
|
|
5
|
+
import { CartBody, CartTabPanel, CustomerCheckoutMethodTabs, Title } from '../components';
|
|
9
6
|
import FormSquarePayment from '../forms/FormSquarePayment';
|
|
10
7
|
import FormStripePayment from '../forms/FormStripePayment';
|
|
11
|
-
import { faCoins, faCreditCard
|
|
8
|
+
import { faCoins, faCreditCard } from '@fortawesome/free-solid-svg-icons';
|
|
12
9
|
import { useCartContext } from '../CartProvider';
|
|
13
10
|
import DiscountInputGroup from '../components/DiscountInputGroup';
|
|
14
11
|
import CartTotalsListGroup from '../components/CartTotalsListGroup';
|
|
@@ -72,32 +69,13 @@ function PanelClientCheckout() {
|
|
|
72
69
|
}), /*#__PURE__*/_jsx(FormStripePayment, {})]
|
|
73
70
|
})
|
|
74
71
|
})]
|
|
75
|
-
}) : /*#__PURE__*/
|
|
76
|
-
children:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
icon: faUserPlus,
|
|
81
|
-
title: "Checkout as new customer"
|
|
82
|
-
}), /*#__PURE__*/_jsx(FormNewCustomer, {})]
|
|
72
|
+
}) : /*#__PURE__*/_jsx(CheckoutContainer, {
|
|
73
|
+
children: /*#__PURE__*/_jsx(InnerContainer, {
|
|
74
|
+
paddingBottom: "0px",
|
|
75
|
+
children: /*#__PURE__*/_jsx(CustomerCheckoutMethodTabs, {
|
|
76
|
+
whatsappEnabled: whatsappEnabled
|
|
83
77
|
})
|
|
84
|
-
})
|
|
85
|
-
children: /*#__PURE__*/_jsxs(InnerContainer, {
|
|
86
|
-
paddingBottom: "0px",
|
|
87
|
-
children: [/*#__PURE__*/_jsx(Title, {
|
|
88
|
-
icon: faUserTag,
|
|
89
|
-
title: "Checkout as returning customer"
|
|
90
|
-
}), /*#__PURE__*/_jsx(FormReturningCustomer, {})]
|
|
91
|
-
})
|
|
92
|
-
}), whatsappEnabled && /*#__PURE__*/_jsx(CheckoutContainer, {
|
|
93
|
-
children: /*#__PURE__*/_jsxs(InnerContainer, {
|
|
94
|
-
paddingBottom: "0px",
|
|
95
|
-
children: [/*#__PURE__*/_jsx(Title, {
|
|
96
|
-
icon: faPhone,
|
|
97
|
-
title: "Checkout with WhatsApp"
|
|
98
|
-
}), /*#__PURE__*/_jsx(FormWhatsappCustomer, {})]
|
|
99
|
-
})
|
|
100
|
-
})]
|
|
78
|
+
})
|
|
101
79
|
})
|
|
102
80
|
})
|
|
103
81
|
});
|
package/esm/styles/globals.css
CHANGED
|
@@ -165,7 +165,8 @@
|
|
|
165
165
|
padding-left: 0px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
.merchi-nav-link:hover,
|
|
168
|
+
.merchi-nav-link:hover,
|
|
169
|
+
.merchi-nav-link:focus {
|
|
169
170
|
text-decoration: none;
|
|
170
171
|
}
|
|
171
172
|
|
|
@@ -188,7 +189,8 @@ button.merchi-nav-link {
|
|
|
188
189
|
border-top-right-radius: 0.25rem;
|
|
189
190
|
}
|
|
190
191
|
|
|
191
|
-
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
192
|
+
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
193
|
+
.merchi-nav-tabs .merchi-nav-link:focus {
|
|
192
194
|
border-color: #e9ecef #e9ecef #dee2e6;
|
|
193
195
|
}
|
|
194
196
|
|
|
@@ -323,4 +325,102 @@ button.merchi-nav-link {
|
|
|
323
325
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
324
326
|
}
|
|
325
327
|
|
|
328
|
+
.merchi-customer-checkout__heading {
|
|
329
|
+
margin: 0 0 1rem;
|
|
330
|
+
color: #52525b;
|
|
331
|
+
font-size: 0.8125rem;
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
text-transform: uppercase;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.merchi-customer-checkout-options {
|
|
337
|
+
display: flex;
|
|
338
|
+
flex-direction: column;
|
|
339
|
+
overflow: hidden;
|
|
340
|
+
border: 1.5px solid #b8bec8;
|
|
341
|
+
border-radius: 0.5rem;
|
|
342
|
+
background: #fff;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.merchi-customer-checkout-option {
|
|
346
|
+
border-bottom: 1px solid #e4e4e7;
|
|
347
|
+
background: #fff;
|
|
348
|
+
}
|
|
349
|
+
.merchi-customer-checkout-option:last-child {
|
|
350
|
+
border-bottom: none;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.merchi-customer-checkout-option__header {
|
|
354
|
+
display: flex;
|
|
355
|
+
align-items: center;
|
|
356
|
+
justify-content: space-between;
|
|
357
|
+
gap: 0.75rem;
|
|
358
|
+
width: 100%;
|
|
359
|
+
min-height: 3rem;
|
|
360
|
+
padding: 0.75rem 1rem;
|
|
361
|
+
border: none;
|
|
362
|
+
background: #fff;
|
|
363
|
+
color: #3f3f46;
|
|
364
|
+
font-size: 0.9375rem;
|
|
365
|
+
text-align: left;
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
}
|
|
368
|
+
.merchi-customer-checkout-option__header:hover, .merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__header {
|
|
369
|
+
background: color-mix(in srgb, var(--color-brand, #303dbf) 8%, #fff);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.merchi-customer-checkout-option__title {
|
|
373
|
+
display: flex;
|
|
374
|
+
align-items: center;
|
|
375
|
+
gap: 0.75rem;
|
|
376
|
+
flex: 1;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.merchi-customer-checkout-option__label {
|
|
380
|
+
font-weight: 600;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.merchi-customer-checkout-option__icon {
|
|
384
|
+
display: inline-flex;
|
|
385
|
+
align-items: center;
|
|
386
|
+
justify-content: center;
|
|
387
|
+
width: 2rem;
|
|
388
|
+
height: 2rem;
|
|
389
|
+
border-radius: 0.375rem;
|
|
390
|
+
background: #f4f4f5;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.merchi-customer-checkout-option__icon-svg {
|
|
394
|
+
width: 1.125rem;
|
|
395
|
+
height: 1.125rem;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.merchi-customer-checkout-option__icon-svg--whatsapp {
|
|
399
|
+
color: #25d366;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.merchi-customer-checkout-option__checkbox {
|
|
403
|
+
display: inline-flex;
|
|
404
|
+
flex-shrink: 0;
|
|
405
|
+
align-items: center;
|
|
406
|
+
justify-content: center;
|
|
407
|
+
width: 1.25rem;
|
|
408
|
+
height: 1.25rem;
|
|
409
|
+
border: 2px solid #a1a1aa;
|
|
410
|
+
border-radius: 0.25rem;
|
|
411
|
+
background: #fff;
|
|
412
|
+
font-size: 1rem;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__checkbox {
|
|
416
|
+
border-color: var(--color-brand, #303dbf);
|
|
417
|
+
background: var(--color-brand, #303dbf);
|
|
418
|
+
color: #fff;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.merchi-customer-checkout-option__body {
|
|
422
|
+
padding: 0.75rem 1rem 1rem;
|
|
423
|
+
background: #fff;
|
|
424
|
+
}
|
|
425
|
+
|
|
326
426
|
/*# sourceMappingURL=globals.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA","file":"globals.css"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = CustomerCheckoutMethodTabs;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var React = _react;
|
|
10
|
+
var _bi = require("react-icons/bi");
|
|
11
|
+
var _fa = require("react-icons/fa");
|
|
12
|
+
var _FormNewCustomer = _interopRequireDefault(require("../forms/FormNewCustomer"));
|
|
13
|
+
var _FormReturningCustomer = _interopRequireDefault(require("../forms/FormReturningCustomer"));
|
|
14
|
+
var _FormWhatsappCustomer = _interopRequireDefault(require("../forms/FormWhatsappCustomer"));
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
19
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
23
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
+
function renderSectionIcon(iconType) {
|
|
26
|
+
if (iconType === 'whatsapp') {
|
|
27
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaWhatsapp, {
|
|
28
|
+
className: "merchi-customer-checkout-option__icon-svg merchi-customer-checkout-option__icon-svg--whatsapp"
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiUser, {
|
|
32
|
+
className: "merchi-customer-checkout-option__icon-svg"
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function CustomerCheckoutMethodTabs(_ref) {
|
|
36
|
+
var _ref$whatsappEnabled = _ref.whatsappEnabled,
|
|
37
|
+
whatsappEnabled = _ref$whatsappEnabled === void 0 ? false : _ref$whatsappEnabled;
|
|
38
|
+
var _useState = (0, _react.useState)(null),
|
|
39
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
40
|
+
activeMethod = _useState2[0],
|
|
41
|
+
setActiveMethod = _useState2[1];
|
|
42
|
+
var sections = [{
|
|
43
|
+
id: 'returning',
|
|
44
|
+
label: 'Returning customer',
|
|
45
|
+
iconType: 'user',
|
|
46
|
+
form: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormReturningCustomer["default"], {})
|
|
47
|
+
}, {
|
|
48
|
+
id: 'new',
|
|
49
|
+
label: 'New customer',
|
|
50
|
+
iconType: 'user',
|
|
51
|
+
form: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormNewCustomer["default"], {})
|
|
52
|
+
}];
|
|
53
|
+
if (whatsappEnabled) {
|
|
54
|
+
sections.push({
|
|
55
|
+
id: 'whatsapp',
|
|
56
|
+
label: 'WhatsApp checkout',
|
|
57
|
+
iconType: 'whatsapp',
|
|
58
|
+
form: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormWhatsappCustomer["default"], {})
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
62
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
63
|
+
className: "merchi-customer-checkout__heading",
|
|
64
|
+
children: "Choose a checkout option"
|
|
65
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
66
|
+
className: "merchi-customer-checkout-options",
|
|
67
|
+
role: "radiogroup",
|
|
68
|
+
"aria-label": "Choose a checkout option",
|
|
69
|
+
children: sections.map(function (section) {
|
|
70
|
+
var isSelected = activeMethod === section.id;
|
|
71
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
72
|
+
className: "merchi-customer-checkout-option".concat(isSelected ? ' is-selected' : ''),
|
|
73
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
74
|
+
type: "button",
|
|
75
|
+
role: "radio",
|
|
76
|
+
"aria-checked": isSelected,
|
|
77
|
+
"aria-expanded": isSelected,
|
|
78
|
+
className: "merchi-customer-checkout-option__header",
|
|
79
|
+
onClick: function onClick() {
|
|
80
|
+
return setActiveMethod(section.id);
|
|
81
|
+
},
|
|
82
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
83
|
+
className: "merchi-customer-checkout-option__title",
|
|
84
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
85
|
+
className: "merchi-customer-checkout-option__icon",
|
|
86
|
+
children: renderSectionIcon(section.iconType)
|
|
87
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
88
|
+
className: "merchi-customer-checkout-option__label",
|
|
89
|
+
children: section.label
|
|
90
|
+
})]
|
|
91
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
92
|
+
className: "merchi-customer-checkout-option__checkbox",
|
|
93
|
+
"aria-hidden": true,
|
|
94
|
+
children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiCheck, {})
|
|
95
|
+
})]
|
|
96
|
+
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
97
|
+
className: "merchi-customer-checkout-option__body",
|
|
98
|
+
children: section.form
|
|
99
|
+
})]
|
|
100
|
+
}, section.id);
|
|
101
|
+
})
|
|
102
|
+
})]
|
|
103
|
+
});
|
|
104
|
+
}
|
package/lib/components/index.js
CHANGED
|
@@ -64,6 +64,12 @@ Object.defineProperty(exports, "Collapse", {
|
|
|
64
64
|
return _Collapse["default"];
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
|
+
Object.defineProperty(exports, "CustomerCheckoutMethodTabs", {
|
|
68
|
+
enumerable: true,
|
|
69
|
+
get: function get() {
|
|
70
|
+
return _CustomerCheckoutMethodTabs["default"];
|
|
71
|
+
}
|
|
72
|
+
});
|
|
67
73
|
Object.defineProperty(exports, "DiscountInputGroup", {
|
|
68
74
|
enumerable: true,
|
|
69
75
|
get: function get() {
|
|
@@ -116,6 +122,7 @@ var _CartTabContent = _interopRequireDefault(require("./CartTabContent"));
|
|
|
116
122
|
var _CartTableContainer = _interopRequireDefault(require("./CartTableContainer"));
|
|
117
123
|
var _CartTabPanel = _interopRequireDefault(require("./CartTabPanel"));
|
|
118
124
|
var _Collapse = _interopRequireDefault(require("./Collapse"));
|
|
125
|
+
var _CustomerCheckoutMethodTabs = _interopRequireDefault(require("./CustomerCheckoutMethodTabs"));
|
|
119
126
|
var _DiscountInputGroup = _interopRequireDefault(require("./DiscountInputGroup"));
|
|
120
127
|
var _LoadingTemplate = _interopRequireWildcard(require("./LoadingTemplate"));
|
|
121
128
|
var _NoCartItems = _interopRequireDefault(require("./NoCartItems"));
|
package/lib/forms/index.js
CHANGED
|
@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ActiveFormShipmentAddressAndNotes", {
|
|
|
10
10
|
return _FormShipmentAddressAndNotes.ActiveFormShipmentAddressAndNotes;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
+
Object.defineProperty(exports, "CustomerCheckoutMethodTabs", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function get() {
|
|
16
|
+
return _CustomerCheckoutMethodTabs["default"];
|
|
17
|
+
}
|
|
18
|
+
});
|
|
13
19
|
Object.defineProperty(exports, "FormCustomerNew", {
|
|
14
20
|
enumerable: true,
|
|
15
21
|
get: function get() {
|
|
@@ -52,6 +58,7 @@ var _FormShipmentAddressAndNotes = _interopRequireWildcard(require("./FormShipme
|
|
|
52
58
|
var _FormSquarePayment = _interopRequireDefault(require("./FormSquarePayment"));
|
|
53
59
|
var _FormStripePayment = _interopRequireDefault(require("./FormStripePayment"));
|
|
54
60
|
var _FormWhatsappCustomer = _interopRequireDefault(require("./FormWhatsappCustomer"));
|
|
61
|
+
var _CustomerCheckoutMethodTabs = _interopRequireDefault(require("../components/CustomerCheckoutMethodTabs"));
|
|
55
62
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
56
63
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
57
64
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -9,9 +9,6 @@ var _containers = require("../components/containers");
|
|
|
9
9
|
var _CartClient = _interopRequireDefault(require("../components/CartClient"));
|
|
10
10
|
var _CartShipment = _interopRequireDefault(require("../components/CartShipment"));
|
|
11
11
|
var _components = require("../components");
|
|
12
|
-
var _FormNewCustomer = _interopRequireDefault(require("../forms/FormNewCustomer"));
|
|
13
|
-
var _FormReturningCustomer = _interopRequireDefault(require("../forms/FormReturningCustomer"));
|
|
14
|
-
var _FormWhatsappCustomer = _interopRequireDefault(require("../forms/FormWhatsappCustomer"));
|
|
15
12
|
var _FormSquarePayment = _interopRequireDefault(require("../forms/FormSquarePayment"));
|
|
16
13
|
var _FormStripePayment = _interopRequireDefault(require("../forms/FormStripePayment"));
|
|
17
14
|
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
@@ -77,32 +74,13 @@ function PanelClientCheckout() {
|
|
|
77
74
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormStripePayment["default"], {})]
|
|
78
75
|
})
|
|
79
76
|
})]
|
|
80
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.
|
|
81
|
-
children:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
icon: _freeSolidSvgIcons.faUserPlus,
|
|
86
|
-
title: "Checkout as new customer"
|
|
87
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormNewCustomer["default"], {})]
|
|
77
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_containers.CheckoutContainer, {
|
|
78
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_containers.InnerContainer, {
|
|
79
|
+
paddingBottom: "0px",
|
|
80
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomerCheckoutMethodTabs, {
|
|
81
|
+
whatsappEnabled: whatsappEnabled
|
|
88
82
|
})
|
|
89
|
-
})
|
|
90
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_containers.InnerContainer, {
|
|
91
|
-
paddingBottom: "0px",
|
|
92
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Title, {
|
|
93
|
-
icon: _freeSolidSvgIcons.faUserTag,
|
|
94
|
-
title: "Checkout as returning customer"
|
|
95
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormReturningCustomer["default"], {})]
|
|
96
|
-
})
|
|
97
|
-
}), whatsappEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_containers.CheckoutContainer, {
|
|
98
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_containers.InnerContainer, {
|
|
99
|
-
paddingBottom: "0px",
|
|
100
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Title, {
|
|
101
|
-
icon: _freeSolidSvgIcons.faPhone,
|
|
102
|
-
title: "Checkout with WhatsApp"
|
|
103
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormWhatsappCustomer["default"], {})]
|
|
104
|
-
})
|
|
105
|
-
})]
|
|
83
|
+
})
|
|
106
84
|
})
|
|
107
85
|
})
|
|
108
86
|
});
|
package/lib/styles/globals.css
CHANGED
|
@@ -165,7 +165,8 @@
|
|
|
165
165
|
padding-left: 0px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
.merchi-nav-link:hover,
|
|
168
|
+
.merchi-nav-link:hover,
|
|
169
|
+
.merchi-nav-link:focus {
|
|
169
170
|
text-decoration: none;
|
|
170
171
|
}
|
|
171
172
|
|
|
@@ -188,7 +189,8 @@ button.merchi-nav-link {
|
|
|
188
189
|
border-top-right-radius: 0.25rem;
|
|
189
190
|
}
|
|
190
191
|
|
|
191
|
-
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
192
|
+
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
193
|
+
.merchi-nav-tabs .merchi-nav-link:focus {
|
|
192
194
|
border-color: #e9ecef #e9ecef #dee2e6;
|
|
193
195
|
}
|
|
194
196
|
|
|
@@ -323,4 +325,102 @@ button.merchi-nav-link {
|
|
|
323
325
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
324
326
|
}
|
|
325
327
|
|
|
328
|
+
.merchi-customer-checkout__heading {
|
|
329
|
+
margin: 0 0 1rem;
|
|
330
|
+
color: #52525b;
|
|
331
|
+
font-size: 0.8125rem;
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
text-transform: uppercase;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.merchi-customer-checkout-options {
|
|
337
|
+
display: flex;
|
|
338
|
+
flex-direction: column;
|
|
339
|
+
overflow: hidden;
|
|
340
|
+
border: 1.5px solid #b8bec8;
|
|
341
|
+
border-radius: 0.5rem;
|
|
342
|
+
background: #fff;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.merchi-customer-checkout-option {
|
|
346
|
+
border-bottom: 1px solid #e4e4e7;
|
|
347
|
+
background: #fff;
|
|
348
|
+
}
|
|
349
|
+
.merchi-customer-checkout-option:last-child {
|
|
350
|
+
border-bottom: none;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.merchi-customer-checkout-option__header {
|
|
354
|
+
display: flex;
|
|
355
|
+
align-items: center;
|
|
356
|
+
justify-content: space-between;
|
|
357
|
+
gap: 0.75rem;
|
|
358
|
+
width: 100%;
|
|
359
|
+
min-height: 3rem;
|
|
360
|
+
padding: 0.75rem 1rem;
|
|
361
|
+
border: none;
|
|
362
|
+
background: #fff;
|
|
363
|
+
color: #3f3f46;
|
|
364
|
+
font-size: 0.9375rem;
|
|
365
|
+
text-align: left;
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
}
|
|
368
|
+
.merchi-customer-checkout-option__header:hover, .merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__header {
|
|
369
|
+
background: color-mix(in srgb, var(--color-brand, #303dbf) 8%, #fff);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.merchi-customer-checkout-option__title {
|
|
373
|
+
display: flex;
|
|
374
|
+
align-items: center;
|
|
375
|
+
gap: 0.75rem;
|
|
376
|
+
flex: 1;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.merchi-customer-checkout-option__label {
|
|
380
|
+
font-weight: 600;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.merchi-customer-checkout-option__icon {
|
|
384
|
+
display: inline-flex;
|
|
385
|
+
align-items: center;
|
|
386
|
+
justify-content: center;
|
|
387
|
+
width: 2rem;
|
|
388
|
+
height: 2rem;
|
|
389
|
+
border-radius: 0.375rem;
|
|
390
|
+
background: #f4f4f5;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.merchi-customer-checkout-option__icon-svg {
|
|
394
|
+
width: 1.125rem;
|
|
395
|
+
height: 1.125rem;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.merchi-customer-checkout-option__icon-svg--whatsapp {
|
|
399
|
+
color: #25d366;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.merchi-customer-checkout-option__checkbox {
|
|
403
|
+
display: inline-flex;
|
|
404
|
+
flex-shrink: 0;
|
|
405
|
+
align-items: center;
|
|
406
|
+
justify-content: center;
|
|
407
|
+
width: 1.25rem;
|
|
408
|
+
height: 1.25rem;
|
|
409
|
+
border: 2px solid #a1a1aa;
|
|
410
|
+
border-radius: 0.25rem;
|
|
411
|
+
background: #fff;
|
|
412
|
+
font-size: 1rem;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__checkbox {
|
|
416
|
+
border-color: var(--color-brand, #303dbf);
|
|
417
|
+
background: var(--color-brand, #303dbf);
|
|
418
|
+
color: #fff;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.merchi-customer-checkout-option__body {
|
|
422
|
+
padding: 0.75rem 1rem 1rem;
|
|
423
|
+
background: #fff;
|
|
424
|
+
}
|
|
425
|
+
|
|
326
426
|
/*# sourceMappingURL=globals.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA","file":"globals.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "merchi_cart",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.12",
|
|
4
4
|
"description": "Merchi's cart",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"browser-or-node": "^3.0.0-pre.0",
|
|
91
91
|
"js-cookie": "^3.0.5",
|
|
92
92
|
"lodash": "^4.17.21",
|
|
93
|
-
"merchi_product_form": "^1.19.
|
|
93
|
+
"merchi_product_form": "^1.19.4",
|
|
94
94
|
"merchi_sdk_product_form": "^1.0.9",
|
|
95
95
|
"merchi_sdk_ts": "^1.32.1",
|
|
96
96
|
"react-country-region-selector": "^3.6.1",
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { BiCheck, BiUser } from 'react-icons/bi';
|
|
4
|
+
import { FaWhatsapp } from 'react-icons/fa';
|
|
5
|
+
import FormNewCustomer from '../forms/FormNewCustomer';
|
|
6
|
+
import FormReturningCustomer from '../forms/FormReturningCustomer';
|
|
7
|
+
import FormWhatsappCustomer from '../forms/FormWhatsappCustomer';
|
|
8
|
+
|
|
9
|
+
type CheckoutMethod = 'new' | 'returning' | 'whatsapp';
|
|
10
|
+
type SectionIconType = 'user' | 'whatsapp';
|
|
11
|
+
|
|
12
|
+
interface CustomerCheckoutMethodTabsProps {
|
|
13
|
+
whatsappEnabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function renderSectionIcon(iconType: SectionIconType) {
|
|
17
|
+
if (iconType === 'whatsapp') {
|
|
18
|
+
return (
|
|
19
|
+
<FaWhatsapp className="merchi-customer-checkout-option__icon-svg merchi-customer-checkout-option__icon-svg--whatsapp" />
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return <BiUser className="merchi-customer-checkout-option__icon-svg" />;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default function CustomerCheckoutMethodTabs({
|
|
27
|
+
whatsappEnabled = false,
|
|
28
|
+
}: CustomerCheckoutMethodTabsProps) {
|
|
29
|
+
const [activeMethod, setActiveMethod] = useState<CheckoutMethod | null>(null);
|
|
30
|
+
|
|
31
|
+
const sections: Array<{
|
|
32
|
+
id: CheckoutMethod;
|
|
33
|
+
label: string;
|
|
34
|
+
iconType: SectionIconType;
|
|
35
|
+
form: React.ReactNode;
|
|
36
|
+
}> = [
|
|
37
|
+
{
|
|
38
|
+
id: 'returning',
|
|
39
|
+
label: 'Returning customer',
|
|
40
|
+
iconType: 'user',
|
|
41
|
+
form: <FormReturningCustomer />,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
id: 'new',
|
|
45
|
+
label: 'New customer',
|
|
46
|
+
iconType: 'user',
|
|
47
|
+
form: <FormNewCustomer />,
|
|
48
|
+
},
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
if (whatsappEnabled) {
|
|
52
|
+
sections.push({
|
|
53
|
+
id: 'whatsapp',
|
|
54
|
+
label: 'WhatsApp checkout',
|
|
55
|
+
iconType: 'whatsapp',
|
|
56
|
+
form: <FormWhatsappCustomer />,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<>
|
|
62
|
+
<p className="merchi-customer-checkout__heading">Choose a checkout option</p>
|
|
63
|
+
<div
|
|
64
|
+
className="merchi-customer-checkout-options"
|
|
65
|
+
role="radiogroup"
|
|
66
|
+
aria-label="Choose a checkout option"
|
|
67
|
+
>
|
|
68
|
+
{sections.map((section) => {
|
|
69
|
+
const isSelected = activeMethod === section.id;
|
|
70
|
+
return (
|
|
71
|
+
<div
|
|
72
|
+
key={section.id}
|
|
73
|
+
className={`merchi-customer-checkout-option${isSelected ? ' is-selected' : ''}`}
|
|
74
|
+
>
|
|
75
|
+
<button
|
|
76
|
+
type="button"
|
|
77
|
+
role="radio"
|
|
78
|
+
aria-checked={isSelected}
|
|
79
|
+
aria-expanded={isSelected}
|
|
80
|
+
className="merchi-customer-checkout-option__header"
|
|
81
|
+
onClick={() => setActiveMethod(section.id)}
|
|
82
|
+
>
|
|
83
|
+
<span className="merchi-customer-checkout-option__title">
|
|
84
|
+
<span className="merchi-customer-checkout-option__icon">
|
|
85
|
+
{renderSectionIcon(section.iconType)}
|
|
86
|
+
</span>
|
|
87
|
+
<span className="merchi-customer-checkout-option__label">
|
|
88
|
+
{section.label}
|
|
89
|
+
</span>
|
|
90
|
+
</span>
|
|
91
|
+
<span className="merchi-customer-checkout-option__checkbox" aria-hidden>
|
|
92
|
+
{isSelected && <BiCheck />}
|
|
93
|
+
</span>
|
|
94
|
+
</button>
|
|
95
|
+
{isSelected && (
|
|
96
|
+
<div className="merchi-customer-checkout-option__body">
|
|
97
|
+
{section.form}
|
|
98
|
+
</div>
|
|
99
|
+
)}
|
|
100
|
+
</div>
|
|
101
|
+
);
|
|
102
|
+
})}
|
|
103
|
+
</div>
|
|
104
|
+
</>
|
|
105
|
+
);
|
|
106
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ import CartTabContent from './CartTabContent';
|
|
|
8
8
|
import CartTableContainer from './CartTableContainer';
|
|
9
9
|
import CartTabPanel from './CartTabPanel';
|
|
10
10
|
import Collapse from './Collapse';
|
|
11
|
+
import CustomerCheckoutMethodTabs from './CustomerCheckoutMethodTabs';
|
|
11
12
|
import DiscountInputGroup from './DiscountInputGroup';
|
|
12
13
|
import LoadingTemplate, { LoadingTemplateSm } from './LoadingTemplate';
|
|
13
14
|
import NoCartItems from './NoCartItems';
|
|
@@ -26,6 +27,7 @@ export {
|
|
|
26
27
|
CartTableContainer,
|
|
27
28
|
CartTabPanel,
|
|
28
29
|
Collapse,
|
|
30
|
+
CustomerCheckoutMethodTabs,
|
|
29
31
|
DiscountInputGroup,
|
|
30
32
|
LoadingTemplate,
|
|
31
33
|
LoadingTemplateSm,
|
package/src/forms/index.ts
CHANGED
|
@@ -4,9 +4,11 @@ import FormShipmentAddressAndNotes, { ActiveFormShipmentAddressAndNotes } from "
|
|
|
4
4
|
import FormSquarePayment from "./FormSquarePayment";
|
|
5
5
|
import FormStripePayment from "./FormStripePayment";
|
|
6
6
|
import FormWhatsappCustomer from "./FormWhatsappCustomer";
|
|
7
|
+
import CustomerCheckoutMethodTabs from "../components/CustomerCheckoutMethodTabs";
|
|
7
8
|
|
|
8
9
|
export {
|
|
9
10
|
ActiveFormShipmentAddressAndNotes,
|
|
11
|
+
CustomerCheckoutMethodTabs,
|
|
10
12
|
FormCustomerNew,
|
|
11
13
|
FormReturningCustomer,
|
|
12
14
|
FormShipmentAddressAndNotes,
|
|
@@ -8,14 +8,12 @@ import CartShipment from '../components/CartShipment';
|
|
|
8
8
|
import {
|
|
9
9
|
CartBody,
|
|
10
10
|
CartTabPanel,
|
|
11
|
+
CustomerCheckoutMethodTabs,
|
|
11
12
|
Title,
|
|
12
13
|
} from '../components';
|
|
13
|
-
import FormNewCustomer from '../forms/FormNewCustomer';
|
|
14
|
-
import FormReturningCustomer from '../forms/FormReturningCustomer';
|
|
15
|
-
import FormWhatsappCustomer from '../forms/FormWhatsappCustomer';
|
|
16
14
|
import FormSquarePayment from '../forms/FormSquarePayment';
|
|
17
15
|
import FormStripePayment from '../forms/FormStripePayment';
|
|
18
|
-
import { faCoins, faCreditCard
|
|
16
|
+
import { faCoins, faCreditCard } from '@fortawesome/free-solid-svg-icons';
|
|
19
17
|
import { useCartContext } from '../CartProvider';
|
|
20
18
|
import DiscountInputGroup from '../components/DiscountInputGroup';
|
|
21
19
|
import CartTotalsListGroup from '../components/CartTotalsListGroup';
|
|
@@ -90,37 +88,11 @@ function PanelClientCheckout() {
|
|
|
90
88
|
|
|
91
89
|
</>
|
|
92
90
|
:
|
|
93
|
-
|
|
94
|
-
<
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
title='Checkout as new customer'
|
|
99
|
-
/>
|
|
100
|
-
<FormNewCustomer />
|
|
101
|
-
</InnerContainer>
|
|
102
|
-
</CheckoutContainer>
|
|
103
|
-
<CheckoutContainer>
|
|
104
|
-
<InnerContainer paddingBottom='0px'>
|
|
105
|
-
<Title
|
|
106
|
-
icon={faUserTag}
|
|
107
|
-
title='Checkout as returning customer'
|
|
108
|
-
/>
|
|
109
|
-
<FormReturningCustomer />
|
|
110
|
-
</InnerContainer>
|
|
111
|
-
</CheckoutContainer>
|
|
112
|
-
{whatsappEnabled && (
|
|
113
|
-
<CheckoutContainer>
|
|
114
|
-
<InnerContainer paddingBottom='0px'>
|
|
115
|
-
<Title
|
|
116
|
-
icon={faPhone}
|
|
117
|
-
title='Checkout with WhatsApp'
|
|
118
|
-
/>
|
|
119
|
-
<FormWhatsappCustomer />
|
|
120
|
-
</InnerContainer>
|
|
121
|
-
</CheckoutContainer>
|
|
122
|
-
)}
|
|
123
|
-
</>
|
|
91
|
+
<CheckoutContainer>
|
|
92
|
+
<InnerContainer paddingBottom='0px'>
|
|
93
|
+
<CustomerCheckoutMethodTabs whatsappEnabled={whatsappEnabled} />
|
|
94
|
+
</InnerContainer>
|
|
95
|
+
</CheckoutContainer>
|
|
124
96
|
}
|
|
125
97
|
</CartBody>
|
|
126
98
|
</CartTabPanel>
|
package/src/styles/globals.scss
CHANGED
|
@@ -3,23 +3,28 @@
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
padding: 1.5rem;
|
|
5
5
|
}
|
|
6
|
+
|
|
6
7
|
.merchi-cart-header h5 {
|
|
7
8
|
margin-bottom: 0;
|
|
8
9
|
line-height: 1.5;
|
|
9
10
|
font-size: 20px;
|
|
10
11
|
margin-top: 0px;
|
|
11
12
|
}
|
|
13
|
+
|
|
12
14
|
.merchi-cart-footer {
|
|
13
15
|
display: flex;
|
|
14
16
|
padding: 1rem;
|
|
15
17
|
}
|
|
18
|
+
|
|
16
19
|
.merchi-cart-body {
|
|
17
20
|
display: block;
|
|
18
21
|
min-height: 450px;
|
|
19
22
|
}
|
|
23
|
+
|
|
20
24
|
.merchi-cart-title {
|
|
21
25
|
margin-bottom: 2rem;
|
|
22
26
|
}
|
|
27
|
+
|
|
23
28
|
.merchi-loading-container {
|
|
24
29
|
display: flex;
|
|
25
30
|
flex-direction: column;
|
|
@@ -27,11 +32,13 @@
|
|
|
27
32
|
justify-content: center;
|
|
28
33
|
height: var(--bs-height-md, 500px);
|
|
29
34
|
}
|
|
35
|
+
|
|
30
36
|
.merchi-loading-container-text {
|
|
31
37
|
font-size: 1.2rem;
|
|
32
38
|
font-weight: bold;
|
|
33
39
|
text-align: center;
|
|
34
40
|
}
|
|
41
|
+
|
|
35
42
|
.merchi-payment-gateway-inactive {
|
|
36
43
|
height: 300px;
|
|
37
44
|
background: url('../assets/merchi-swipe-outline.png');
|
|
@@ -40,18 +47,23 @@
|
|
|
40
47
|
background-size: 276px 215px;
|
|
41
48
|
margin-top: 100px;
|
|
42
49
|
}
|
|
50
|
+
|
|
43
51
|
.merchi-tab-panel {
|
|
44
52
|
display: none;
|
|
45
53
|
}
|
|
54
|
+
|
|
46
55
|
.merchi-cart-tab-content {
|
|
47
56
|
padding: 15px;
|
|
48
57
|
}
|
|
49
|
-
|
|
58
|
+
|
|
59
|
+
.merchi-cart-tab-content>.merchi-cart-tab-panel {
|
|
50
60
|
display: none;
|
|
51
61
|
}
|
|
52
|
-
|
|
62
|
+
|
|
63
|
+
.merchi-cart-tab-content>.active {
|
|
53
64
|
display: block;
|
|
54
65
|
}
|
|
66
|
+
|
|
55
67
|
.merchi-cart-total-container {
|
|
56
68
|
display: flex;
|
|
57
69
|
align-items: center;
|
|
@@ -59,21 +71,25 @@
|
|
|
59
71
|
border-bottom-right-radius: calc(0.3rem - 1px);
|
|
60
72
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
61
73
|
}
|
|
74
|
+
|
|
62
75
|
.merchi-cart-total-table {
|
|
63
76
|
width: 100%;
|
|
64
77
|
margin-bottom: 20px;
|
|
65
78
|
max-width: 400px;
|
|
66
79
|
margin-bottom: 0px;
|
|
67
80
|
}
|
|
81
|
+
|
|
68
82
|
.merchi-cart-clear-container {
|
|
69
83
|
display: block;
|
|
70
84
|
text-align: center;
|
|
71
85
|
}
|
|
86
|
+
|
|
72
87
|
.merchi-cart-clear-text {
|
|
73
88
|
font-size: 16px;
|
|
74
89
|
margin-top: 3rem;
|
|
75
90
|
margin-bottom: 3rem;
|
|
76
91
|
}
|
|
92
|
+
|
|
77
93
|
.merchi-cart-item-table-head {
|
|
78
94
|
border: none;
|
|
79
95
|
padding: 0.5rem;
|
|
@@ -82,6 +98,7 @@
|
|
|
82
98
|
text-transform: uppercase;
|
|
83
99
|
border-bottom: 0px !important;
|
|
84
100
|
}
|
|
101
|
+
|
|
85
102
|
.merchi-cart-item-table-head-right {
|
|
86
103
|
border: none;
|
|
87
104
|
padding: 0.5rem;
|
|
@@ -91,6 +108,7 @@
|
|
|
91
108
|
text-align: right;
|
|
92
109
|
border-bottom: 0px !important;
|
|
93
110
|
}
|
|
111
|
+
|
|
94
112
|
.merchi-cart-success-message {
|
|
95
113
|
font-size: 16px;
|
|
96
114
|
padding-bottom: 4rem;
|
|
@@ -150,7 +168,8 @@
|
|
|
150
168
|
padding-left: 0px;
|
|
151
169
|
}
|
|
152
170
|
|
|
153
|
-
.merchi-nav-link:hover,
|
|
171
|
+
.merchi-nav-link:hover,
|
|
172
|
+
.merchi-nav-link:focus {
|
|
154
173
|
text-decoration: none;
|
|
155
174
|
}
|
|
156
175
|
|
|
@@ -165,6 +184,7 @@
|
|
|
165
184
|
.merchi-nav-tabs .merchi-nav-item {
|
|
166
185
|
margin-bottom: -1px;
|
|
167
186
|
}
|
|
187
|
+
|
|
168
188
|
button.merchi-nav-link {
|
|
169
189
|
background: #fff;
|
|
170
190
|
}
|
|
@@ -174,7 +194,8 @@ button.merchi-nav-link {
|
|
|
174
194
|
border-top-right-radius: 0.25rem;
|
|
175
195
|
}
|
|
176
196
|
|
|
177
|
-
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
197
|
+
.merchi-nav-tabs .merchi-nav-link:hover,
|
|
198
|
+
.merchi-nav-tabs .merchi-nav-link:focus {
|
|
178
199
|
border-color: #e9ecef #e9ecef #dee2e6;
|
|
179
200
|
}
|
|
180
201
|
|
|
@@ -196,7 +217,7 @@ button.merchi-nav-link {
|
|
|
196
217
|
}
|
|
197
218
|
|
|
198
219
|
.merchi-nav-pills .merchi-nav-link.active,
|
|
199
|
-
.merchi-nav-pills .show
|
|
220
|
+
.merchi-nav-pills .show>.merchi-nav-link {
|
|
200
221
|
color: #fff;
|
|
201
222
|
background-color: #303dbf;
|
|
202
223
|
}
|
|
@@ -205,6 +226,7 @@ button.merchi-nav-link {
|
|
|
205
226
|
flex: 1 1 auto;
|
|
206
227
|
text-align: center;
|
|
207
228
|
}
|
|
229
|
+
|
|
208
230
|
.merchi-no-cart-items {
|
|
209
231
|
display: flex;
|
|
210
232
|
flex-direction: column;
|
|
@@ -242,6 +264,7 @@ button.merchi-nav-link {
|
|
|
242
264
|
vertical-align: baseline;
|
|
243
265
|
border-radius: .25rem;
|
|
244
266
|
}
|
|
267
|
+
|
|
245
268
|
.merchi-cart-modal-alert {
|
|
246
269
|
align-items: center;
|
|
247
270
|
display: flex;
|
|
@@ -257,9 +280,11 @@ button.merchi-nav-link {
|
|
|
257
280
|
margin-left: auto;
|
|
258
281
|
margin-right: auto;
|
|
259
282
|
}
|
|
283
|
+
|
|
260
284
|
.merchi-form-group {
|
|
261
285
|
text-align: left;
|
|
262
286
|
}
|
|
287
|
+
|
|
263
288
|
.merchi-form-group-button {
|
|
264
289
|
text-align: center;
|
|
265
290
|
margin-bottom: 15px;
|
|
@@ -305,3 +330,104 @@ button.merchi-nav-link {
|
|
|
305
330
|
border-bottom-right-radius: calc(0.3rem - 1px);
|
|
306
331
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
307
332
|
}
|
|
333
|
+
|
|
334
|
+
.merchi-customer-checkout__heading {
|
|
335
|
+
margin: 0 0 1rem;
|
|
336
|
+
color: #52525b;
|
|
337
|
+
font-size: 0.8125rem;
|
|
338
|
+
font-weight: 600;
|
|
339
|
+
text-transform: uppercase;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.merchi-customer-checkout-options {
|
|
343
|
+
display: flex;
|
|
344
|
+
flex-direction: column;
|
|
345
|
+
overflow: hidden;
|
|
346
|
+
border: 1.5px solid #b8bec8;
|
|
347
|
+
border-radius: 0.5rem;
|
|
348
|
+
background: #fff;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.merchi-customer-checkout-option {
|
|
352
|
+
border-bottom: 1px solid #e4e4e7;
|
|
353
|
+
background: #fff;
|
|
354
|
+
|
|
355
|
+
&:last-child {
|
|
356
|
+
border-bottom: none;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.merchi-customer-checkout-option__header {
|
|
361
|
+
display: flex;
|
|
362
|
+
align-items: center;
|
|
363
|
+
justify-content: space-between;
|
|
364
|
+
gap: 0.75rem;
|
|
365
|
+
width: 100%;
|
|
366
|
+
min-height: 3rem;
|
|
367
|
+
padding: 0.75rem 1rem;
|
|
368
|
+
border: none;
|
|
369
|
+
background: #fff;
|
|
370
|
+
color: #3f3f46;
|
|
371
|
+
font-size: 0.9375rem;
|
|
372
|
+
text-align: left;
|
|
373
|
+
cursor: pointer;
|
|
374
|
+
|
|
375
|
+
&:hover,
|
|
376
|
+
.merchi-customer-checkout-option.is-selected & {
|
|
377
|
+
background: color-mix(in srgb, var(--color-brand, #303dbf) 8%, #fff);
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.merchi-customer-checkout-option__title {
|
|
382
|
+
display: flex;
|
|
383
|
+
align-items: center;
|
|
384
|
+
gap: 0.75rem;
|
|
385
|
+
flex: 1;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.merchi-customer-checkout-option__label {
|
|
389
|
+
font-weight: 600;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.merchi-customer-checkout-option__icon {
|
|
393
|
+
display: inline-flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
justify-content: center;
|
|
396
|
+
width: 2rem;
|
|
397
|
+
height: 2rem;
|
|
398
|
+
border-radius: 0.375rem;
|
|
399
|
+
background: #f4f4f5;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.merchi-customer-checkout-option__icon-svg {
|
|
403
|
+
width: 1.125rem;
|
|
404
|
+
height: 1.125rem;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.merchi-customer-checkout-option__icon-svg--whatsapp {
|
|
408
|
+
color: #25d366;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.merchi-customer-checkout-option__checkbox {
|
|
412
|
+
display: inline-flex;
|
|
413
|
+
flex-shrink: 0;
|
|
414
|
+
align-items: center;
|
|
415
|
+
justify-content: center;
|
|
416
|
+
width: 1.25rem;
|
|
417
|
+
height: 1.25rem;
|
|
418
|
+
border: 2px solid #a1a1aa;
|
|
419
|
+
border-radius: 0.25rem;
|
|
420
|
+
background: #fff;
|
|
421
|
+
font-size: 1rem;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__checkbox {
|
|
425
|
+
border-color: var(--color-brand, #303dbf);
|
|
426
|
+
background: var(--color-brand, #303dbf);
|
|
427
|
+
color: #fff;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.merchi-customer-checkout-option__body {
|
|
431
|
+
padding: 0.75rem 1rem 1rem;
|
|
432
|
+
background: #fff;
|
|
433
|
+
}
|