@sezzle/sezzle-react-widget 2.0.3 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +657 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.es.js +270 -114
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +302 -141
- package/dist/index.js.map +1 -1
- package/package.json +46 -35
package/dist/index.js
CHANGED
|
@@ -3,11 +3,21 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var PropTypes = require('prop-types');
|
|
5
5
|
|
|
6
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
9
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
10
|
+
|
|
11
|
+
function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "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$3(o); }
|
|
12
|
+
function _regeneratorRuntime() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof$3(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof$3(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
13
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
14
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
6
15
|
/**
|
|
7
16
|
* This function will return the price string
|
|
8
17
|
* @param price - string value
|
|
9
18
|
* @return string
|
|
10
19
|
*/
|
|
20
|
+
|
|
11
21
|
function parsePriceString(price) {
|
|
12
22
|
var formattedPrice = '';
|
|
13
23
|
if (!price) return formattedPrice;
|
|
@@ -52,20 +62,53 @@ function isAlphabet(n) {
|
|
|
52
62
|
* This is a helper function for formatting the language
|
|
53
63
|
* @return string
|
|
54
64
|
*/
|
|
55
|
-
function getLanguage() {
|
|
56
|
-
var _document$querySelect;
|
|
57
|
-
return (_document$querySelect = document.querySelector('html').lang) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.substring(0, 2).toLowerCase();
|
|
58
|
-
}
|
|
59
65
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
* @return string
|
|
63
|
-
*/
|
|
64
|
-
function getSupportedLanguage() {
|
|
65
|
-
var supportedLanguages = ['en', 'fr'];
|
|
66
|
-
var lang = getLanguage();
|
|
66
|
+
function getLanguage(supportedLanguages) {
|
|
67
|
+
var lang = document.querySelector('html').lang.substring(0, 2).toLowerCase();
|
|
67
68
|
return supportedLanguages.indexOf(lang) > -1 ? lang : 'en';
|
|
68
69
|
}
|
|
70
|
+
function getAPModal(_x) {
|
|
71
|
+
return _getAPModal.apply(this, arguments);
|
|
72
|
+
}
|
|
73
|
+
function _getAPModal() {
|
|
74
|
+
_getAPModal = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(modalNode) {
|
|
75
|
+
var supportedLanguages, currentLang, url, response;
|
|
76
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
77
|
+
while (1) switch (_context.prev = _context.next) {
|
|
78
|
+
case 0:
|
|
79
|
+
supportedLanguages = ['en', 'es', 'fr'];
|
|
80
|
+
currentLang = getLanguage(supportedLanguages);
|
|
81
|
+
modalNode.className = 'sezzle-checkout-modal-lightbox close-sezzle-modal sezzle-ap-modal';
|
|
82
|
+
url = "https://media.sezzle.com/afterpay/modal/".concat(currentLang, ".html");
|
|
83
|
+
_context.prev = 4;
|
|
84
|
+
_context.next = 7;
|
|
85
|
+
return fetch(url);
|
|
86
|
+
case 7:
|
|
87
|
+
response = _context.sent;
|
|
88
|
+
if (response.ok) {
|
|
89
|
+
_context.next = 10;
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
throw new Error("Failed to fetch afterpay modal, status: ".concat(response.status));
|
|
93
|
+
case 10:
|
|
94
|
+
_context.next = 12;
|
|
95
|
+
return response.text();
|
|
96
|
+
case 12:
|
|
97
|
+
modalNode.innerHTML = _context.sent;
|
|
98
|
+
_context.next = 18;
|
|
99
|
+
break;
|
|
100
|
+
case 15:
|
|
101
|
+
_context.prev = 15;
|
|
102
|
+
_context.t0 = _context["catch"](4);
|
|
103
|
+
console.error(_context.t0);
|
|
104
|
+
case 18:
|
|
105
|
+
case "end":
|
|
106
|
+
return _context.stop();
|
|
107
|
+
}
|
|
108
|
+
}, _callee, null, [[4, 15]]);
|
|
109
|
+
}));
|
|
110
|
+
return _getAPModal.apply(this, arguments);
|
|
111
|
+
}
|
|
69
112
|
|
|
70
113
|
function getFormattedPrice(price, numberOfPayments) {
|
|
71
114
|
var priceString = parsePriceString(price);
|
|
@@ -76,13 +119,171 @@ function getFormattedPrice(price, numberOfPayments) {
|
|
|
76
119
|
return sezzleInstallmentFormattedPrice;
|
|
77
120
|
}
|
|
78
121
|
|
|
79
|
-
var modalEnglishHTML = "\n<style>\n@import url('https://fonts.cdnfonts.com/css/satoshi');\n@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 600;\n line-height: 28px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n padding: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin: 0px 0px 12px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 16px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments :first-child {\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item {\n padding: 16px 2px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n color: #8333D4;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: Satoshi, \"Open Sans\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 12px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"en\"\n aria-label=\"Sezzle Information\" aria-description=\"Learn more about Sezzle\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"Learn more about Sezzle\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal sezzle-modal-color\">\n <div><button role=\"button\" aria-label=\"Close Sezzle modal.\" class=\"close-sezzle-modal\"></button></div>\n <div class=\"sezzle-logo\" title=\"Sezzle\"></div>\n <div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <header class=\"sezzle-header\">Buy Now. Pay Later.\n </header>\n <p class=\"sezzle-row\">\n Pay in 4 by selecting Sezzle at checkout.\n </p>\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">\n Flexible payment plans for your budget\n </p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"pie at 25%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -7.62939e-05C22.6264 -7.64088e-05 25.2272 0.51724 27.6537 1.52233C30.0802 2.52743 32.285 4.00062 34.1421 5.85779C35.9993 7.71496 37.4725 9.91974 38.4776 12.3463C39.4827 14.7728 40 17.3735 40 19.9999L30 19.9999C30 18.6867 29.7413 17.3863 29.2388 16.1731C28.7362 14.9598 27.9997 13.8574 27.0711 12.9289C26.1425 12.0003 25.0401 11.2637 23.8268 10.7611C22.6136 10.2586 21.3132 9.99992 20 9.99992L20 -7.62939e-05Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M40 19.9999C40 22.7613 37.7614 24.9998 35 24.9998C32.2386 24.9998 30 22.7613 30 19.9999C30 17.2385 32.2386 14.9998 35 14.9998C37.7614 14.9998 40 17.2385 40 19.9999Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"35\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Today</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"pie at 50%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M40 20C40 31.0457 31.0457 40 20 40C17.2386 40 15 37.7614 15 35C15 32.2386 17.2386 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10V0C31.0457 0 40 8.9543 40 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Week 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 75%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -8.74228e-07C23.9556 -1.04713e-06 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 -7.48492e-07 23.9556 -8.74228e-07 20L10 20C10 21.9778 10.5865 23.9112 11.6853 25.5557C12.7841 27.2002 14.3459 28.4819 16.1732 29.2388C18.0004 29.9957 20.0111 30.1937 21.9509 29.8079C23.8907 29.422 25.6725 28.4696 27.0711 27.0711C28.4696 25.6725 29.422 23.8907 29.8079 21.9509C30.1937 20.0111 29.9957 18.0004 29.2388 16.1732C28.4819 14.3459 27.2002 12.7841 25.5557 11.6853C23.9112 10.5865 21.9778 10 20 10L20 -8.74228e-07Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M10 20C10 22.7614 7.76142 25 5 25C2.23858 25 -8.74228e-07 22.7614 -8.74228e-07 20C-8.74228e-07 17.2386 2.23858 15 5 15C7.76142 15 10 17.2386 10 20Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"5\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Week 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"pie at 100%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Week 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n No credit check required\n </p>\n <p class=\"single-feature\">\n Instant credit decision\n </p>\n <p class=\"single-feature\">\n Opt in to free credit reporting\n </p>\n </div>\n <p class=\"terms\">Signing up for Sezzle will not impact your credit score. You may opt-in to our free credit\n reporting program, Sezzle Up, to have your payments reported to credit bureaus. Learn more about spending\n power <a href=\"https://sezzle.com/how-it-works\" target=\"_blank\">here</a>.</p>\n <p class=\"terms\">Subject to approval. <a href=\"https://www.sezzle.com/legal\" target=\"_blank\">Click here for\n complete terms.</a> First payment date and amount may fluctuate based on eligibility and time of merchant\n order completion.</p>\n </div>\n </div>\n </div>\n</section>\n\n";
|
|
122
|
+
function styleInject(css, ref) {
|
|
123
|
+
if ( ref === void 0 ) ref = {};
|
|
124
|
+
var insertAt = ref.insertAt;
|
|
80
125
|
|
|
81
|
-
var modalFrenchHTML = "\n<style>\n@import url('https://fonts.cdnfonts.com/css/satoshi');\n@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 600;\n line-height: 28px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n padding: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin: 0px 0px 12px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 16px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #FFFFFF;\n border: 1px solid #8333D4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments :first-child {\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item {\n padding: 16px 2px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n color: #8333D4;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5E5E5E;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: Satoshi, \"Open Sans\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333D4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804A;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5E5E5E;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5E5E5E;\n margin: 10px auto 0;\n padding: 12px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n\n</style>\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"fr\"\n aria-label=\"Informations Sezzle\" aria-description=\"En savoir plus sur Sezzle\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"En savoir plus sur Sezzle\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal sezzle-modal-color\">\n <div><button role=\"button\" aria-label=\"Fermer Sezzle modal.\" class=\"close-sezzle-modal\"></button></div>\n <div class=\"sezzle-logo\" title=\"Sezzle\"></div>\n <div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <header class=\"sezzle-header\">Acheter maintenant. Payer plus tard.\n </header>\n <p class=\"sezzle-row\">\n Payez en 4 en s\xE9lectionnant Sezzle \xE0 la caisse.\n </p>\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">\n Plans de paiement flexibles pour votre budget\n </p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 25%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -7.62939e-05C22.6264 -7.64088e-05 25.2272 0.51724 27.6537 1.52233C30.0802 2.52743 32.285 4.00062 34.1421 5.85779C35.9993 7.71496 37.4725 9.91974 38.4776 12.3463C39.4827 14.7728 40 17.3735 40 19.9999L30 19.9999C30 18.6867 29.7413 17.3863 29.2388 16.1731C28.7362 14.9598 27.9997 13.8574 27.0711 12.9289C26.1425 12.0003 25.0401 11.2637 23.8268 10.7611C22.6136 10.2586 21.3132 9.99992 20 9.99992L20 -7.62939e-05Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M40 19.9999C40 22.7613 37.7614 24.9998 35 24.9998C32.2386 24.9998 30 22.7613 30 19.9999C30 17.2385 32.2386 14.9998 35 14.9998C37.7614 14.9998 40 17.2385 40 19.9999Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"35\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Aujourd'hui</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 50%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M40 20C40 31.0457 31.0457 40 20 40C17.2386 40 15 37.7614 15 35C15 32.2386 17.2386 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10V0C31.0457 0 40 8.9543 40 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Semaine 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 75%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -8.74228e-07C23.9556 -1.04713e-06 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 -7.48492e-07 23.9556 -8.74228e-07 20L10 20C10 21.9778 10.5865 23.9112 11.6853 25.5557C12.7841 27.2002 14.3459 28.4819 16.1732 29.2388C18.0004 29.9957 20.0111 30.1937 21.9509 29.8079C23.8907 29.422 25.6725 28.4696 27.0711 27.0711C28.4696 25.6725 29.422 23.8907 29.8079 21.9509C30.1937 20.0111 29.9957 18.0004 29.2388 16.1732C28.4819 14.3459 27.2002 12.7841 25.5557 11.6853C23.9112 10.5865 21.9778 10 20 10L20 -8.74228e-07Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M10 20C10 22.7614 7.76142 25 5 25C2.23858 25 -8.74228e-07 22.7614 -8.74228e-07 20C-8.74228e-07 17.2386 2.23858 15 5 15C7.76142 15 10 17.2386 10 20Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"5\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Semaine 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"graphique circulaire \xE0 100%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">Semaine 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n Aucune v\xE9rification de cr\xE9dit requise\n </p>\n <p class=\"single-feature\">\n D\xE9cision de cr\xE9dit instantan\xE9e\n </p>\n <p class=\"single-feature\">\n Optez pour le rapport de cr\xE9dit gratuite\n </p>\n </div>\n <p class=\"terms\">L'inscription \xE0 Sezzle n'aura aucune incidence sur votre pointage de cr\xE9dit. Vous pouvez\n accepter de participer \xE0 notre programme gratuit d'\xE9valuation du cr\xE9dit, Sezzle Up, afin que vos paiements\n soient signal\xE9s aux bureaux de cr\xE9dit. Pour en savoir plus sur le pouvoir d'achat, <a\n href=\"https://sezzle.com/how-it-works\" target=\"_blank\">cliquez ici.</a></p>\n <p class=\"terms\">Sous r\xE9serve d'approbation. <a href=\"https://www.sezzle.com/legal\" target=\"_blank\">Cliquez ici\n pour l'int\xE9gralit\xE9 des conditions.</a> La date et le montant du premier paiement peuvent varier en fonction\n de l'\xE9ligibilit\xE9 et de la date de finalisation de la commande aupr\xE8s du vendeu.</p>\n </div>\n </div>\n </div>\n</section>\n";
|
|
126
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
82
127
|
|
|
83
|
-
var apModalEnglishHTML = "<div id=\"afterpay-modal-component\">\n<style>\n .afterpay-modal-overlay {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n visibility: hidden;\n transform: scale(1.1);\n transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\n z-index: 999999999;\n }\n\n #afterpay-modal-component .visible {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\n }\n\n #afterpay-modal-component #afterpay-modal {\n background-color: #fff;\n color: #000;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 2px;\n width: 774px;\n max-width: 100vw;\n max-height: 100%;\n line-height: 1.1;\n display: block;\n overflow: auto;\n }\n\n #afterpay-modal-component #afterpay-modal.afterpay-modal-is-apr {\n border-radius: 0px;\n max-width: 100%;\n width: 476px;\n }\n\n @media (min-width:473px) and (min-height:686px) {\n #afterpay-modal-component #afterpay-modal.afterpay-modal-is-apr {\n border-radius: 12px;\n }\n }\n\n #afterpay-modal-component #afterpay-modal .afterpay-close-button {\n position: absolute;\n z-index: 3;\n background-color: transparent;\n min-width: 0;\n top: 18px;\n right: 18px;\n border: 0;\n cursor: pointer;\n }\n\n #afterpay-modal-component button {\n min-width: 80px;\n background-color: #848e97;\n border-color: #848e97;\n border-style: solid;\n border-radius: 2px;\n padding: 3px;\n color: white;\n cursor: pointer;\n display: none;\n }\n\n #afterpay-modal-component button:hover {\n background-color: #6c757d;\n border-color: #6c757d;\n }\n\n .afterpay-loading-indicator {\n display: block;\n background-color: transparent;\n width: 80px;\n position: absolute;\n left: 50%;\n top: 50%;\n }\n\n .afterpay-loading-indicator::after {\n content: \" \";\n display: block;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 5px solid #b2fce4;\n border-color: #b2fce4 transparent #b2fce4 transparent;\n animation: afterpay-loading-indicator 1.2s linear infinite;\n }\n\n @keyframes afterpay-loading-indicator {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .modal-content .error-container {\n padding: 25px;\n text-align: center;\n background-color: #b2fce4;\n opacity: 0;\n visibility: hidden;\n }\n\n .modal-content.error .error-container {\n opacity: 1;\n visibility: visible;\n font-family: 'Italian Plate No2 Expanded', sans-serif;\n }\n\n @media (-ms-high-contrast:none),\n (-ms-high-contrast:active) {\n #afterpay-modal-component #afterpay-modal {\n bottom: auto;\n }\n }\n</style>\n<div class=\"afterpay-modal-overlay visible\">\n <div class=\"afterpay-loading-indicator\" style=\"display: none;\"></div>\n <div id=\"afterpay-modal\" role=\"dialog\" tabindex=\"-1\" aria-modal=\"true\" aria-describedby=\"afterpay-modal-container\" aria-label=\"Afterpay\">\n <button class=\"afterpay-close-button\" id=\"afterpay-modal-close-button\" tabindex=\"1\" autofocus=\"false\" aria-label=\"Afterpay modal close button\" style=\"display: block;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 30 30\" aria-hidden=\"true\">\n <defs>\n <style>\n .a {\n fill: none;\n stroke: #808284;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n }\n </style>\n </defs>\n <title>Afterpay modal close button</title>\n <line class=\"a\" x1=\"1\" y1=\"1\" x2=\"29\" y2=\"29\"></line>\n <line class=\"a\" x1=\"1\" y1=\"29\" x2=\"29\" y2=\"1\"></line>\n </svg>\n </button>\n <div class=\"modal-content\">\n <div id=\"afterpay-modal-container\" class=\"afterpay-modal-wrapper\">\n <div class=\"grid-container\">\n <div class=\"row-0\">\n <div class=\"afterpay-modal-logo\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 1150 222\" class=\"afterpay-logo-black\" aria-label=\"Afterpay logo\">\n <path d=\"M1132 45.3l-34.6-19.8-35.1-20.1a34.9 34.9 0 00-52.2 30.2V40c0 2.5 1.3 4.8 3.5 6l16.3 9.3a6.8 6.8 0 0010.1-6V38.9c0-5.3 5.7-8.6 10.3-6l32 18.4 31.9 18.3a6.9 6.9 0 010 11.9l-31.9 18.3-32 18.4a6.9 6.9 0 01-10.3-6v-5.3c0-26.8-29-43.6-52.2-30.2l-35.1 20-34.6 19.9a35 35 0 000 60.5l34.6 19.8 35.1 20a34.9 34.9 0 0052.2-30.1v-4.5c0-2.5-1.3-4.8-3.5-6l-16.3-9.3a6.8 6.8 0 00-10.1 5.9v10.7c0 5.3-5.7 8.6-10.3 6l-32-18.4-31.9-18.3a6.9 6.9 0 010-12l31.9-18.2 32-18.4a6.9 6.9 0 0110.3 6v5.3c0 26.8 29 43.6 52.2 30.2l35.1-20.1 34.6-19.8a35 35 0 000-60.5zm-227 6.6l-81 167.3h-33.6l30.3-62.5L773 51.9h34.5l30.6 70.2 33.4-70.2H905zM95.1 111.3c0-20-14.5-34-32.3-34s-32.3 14.3-32.3 34c0 19.5 14.5 34 32.3 34s32.3-14 32.3-34m.3 59.4v-15.4a47.6 47.6 0 01-37.5 17.3C25.3 172.6.6 146.5.6 111.3c0-35 25.7-61.5 58-61.5 15.2 0 28 6.7 36.8 17v-15h29.2v118.9H95.4zm171.2-26.4c-10.2 0-13.1-3.8-13.1-13.8V77.8h18.8v-26h-18.8v-29h-29.9v29H185V40.2c0-10 3.8-13.8 14.3-13.8h6.6v-23h-14.4c-24.7 0-36.4 8-36.4 32.8V52h-16.6v25.8h16.6v92.9H185v-93h38.6V136c0 24.2 9.3 34.7 33.5 34.7h15.4v-26.4h-5.9zM374 100.6c-2.1-15.4-14.7-24.7-29.5-24.7-14.7 0-26.9 9-29.9 24.7H374zM314.3 119a29.6 29.6 0 0030.7 27.6c12.6 0 22.3-6 28-15.4h30.7c-7.1 25.2-29.7 41.3-59.4 41.3a58.5 58.5 0 01-61.1-61.1A60 60 0 01345 49.7a59.5 59.5 0 0160.4 69.4h-91.1zm282.2-7.8a33 33 0 00-32.3-34c-17.8 0-32.3 14.3-32.3 34 0 19.5 14.5 34 32.3 34a32.9 32.9 0 0032.3-34m-94.1 107.9V51.9h29.2v15.4a47.2 47.2 0 0137.5-17.6c32.1 0 57.3 26.4 57.3 61.3s-25.7 61.5-58 61.5a46 46 0 01-35.9-16v62.6h-30.1zm229.3-108c0-20-14.5-34-32.3-34-17.8 0-32.3 14.4-32.3 34s14.5 34 32.3 34c17.8 0 32.3-14 32.3-34m.3 59.5v-15.4a47.6 47.6 0 01-37.5 17.3c-32.6 0-57.3-26.1-57.3-61.3 0-35 25.7-61.5 58-61.5 15.2 0 28 6.7 36.8 17v-15h29.2v118.9H732zM449.7 63.5s7.4-13.8 25.7-13.8c7.8 0 12.8 2.7 12.8 2.7v30.3s-11-6.8-21.1-5.4c-10.1 1.4-16.5 10.6-16.5 23v70.3h-30.2V51.9h29.2v11.6h.1z\"></path>\n </svg>\n </div>\n </div>\n <div class=\"row-1\">\n <h3 class=\"afterpay-modal-headline\">Shop now. <span>Pay later.</span>\n <div>Always interest-free.</div>\n </h3>\n </div>\n <div class=\"process-step-1 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 72\" class=\"process-icon shopping-cart\" aria-label=\"Step 1\">\n <path class=\"c1\" d=\"M26 55.47a27.28 27.28 0 01-4-3c-2.13-1.87-4.52-4.49-4.44-7.36a5 5 0 01.37-1.75 4.27 4.27 0 018.13.25 4.27 4.27 0 018.13-.25 5 5 0 01.37 1.75c.08 2.87-2.31 5.49-4.44 7.36a27.28 27.28 0 01-4 3\"></path>\n <path class=\"c1\" fill=\"#000\" d=\"M10.5 35V17a15.5 15.5 0 0131 0v18\"></path>\n <path class=\"c1\" transform=\"rotate(90 85.5 -4.5)\" d=\"M110.5 30.5h45.79a4.21 4.21 0 014.21 4.21v40.58a4.21 4.21 0 01-4.21 4.21H110.5v-49z\"></path>\n </svg>\n </div>\n <div class=\"process-step-1 process-subheading\">Add your favourites to cart</div>\n <div class=\"process-step-2 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 82 56\" class=\"process-icon afterpay-desktop\" aria-label=\"Step 2\">\n <path class=\"c1\" d=\"M36.5 52.49h9\"></path>\n <path class=\"c1\" d=\"M10.43 1.5h61.14a3.93 3.93 0 013.93 3.93V50.5h-69V5.43a3.93 3.93 0 013.93-3.93z\"></path>\n <path d=\"M54.75 17.52L50.3 15l-4.51-2.59a4.48 4.48 0 00-6.71 3.89v.58a.89.89 0 00.44.77l2.1 1.2a.86.86 0 001.3-.75v-1.41a.89.89 0 011.33-.77l4.12 2.37 4.11 2.36a.88.88 0 010 1.53l-4.11 2.36-4.12 2.36a.88.88 0 01-1.33-.76v-.69a4.48 4.48 0 00-6.71-3.89l-4.51 2.59-4.45 2.55a4.49 4.49 0 000 7.78L31.7 37l4.51 2.59a4.48 4.48 0 006.71-3.89v-.58a.88.88 0 00-.44-.77l-2.1-1.2a.86.86 0 00-1.3.75v1.38a.89.89 0 01-1.33.77l-4.12-2.37-4.11-2.36a.88.88 0 010-1.53l4.11-2.36 4.12-2.36a.88.88 0 011.33.76v.69a4.48 4.48 0 006.71 3.89l4.51-2.59 4.45-2.55a4.49 4.49 0 000-7.75z\"></path>\n <rect class=\"c1\" width=\"79\" height=\"4\" x=\"1.5\" y=\"50.49\" rx=\"2\"></rect>\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 82\" class=\"process-icon afterpay-mobile\" aria-label=\"Step 2\">\n <rect class=\"c1\" width=\"79\" height=\"49\" x=\"86.5\" y=\"16.5\" rx=\"4.21\" transform=\"rotate(90 76 -9)\"></rect>\n <path class=\"c1\" d=\"M1.49 10.5h49\"></path>\n <path class=\"c1\" d=\"M1.49 75.5h49\"></path>\n <path class=\"c1\" d=\"M21.49 6.5h9\"></path>\n <path d=\"M39.75 32.52L35.3 30l-4.51-2.59a4.48 4.48 0 00-6.71 3.89v.58a.89.89 0 00.44.77l2.1 1.2a.86.86 0 001.3-.75v-1.41a.89.89 0 011.33-.77l4.12 2.37 4.11 2.36a.88.88 0 010 1.53l-4.11 2.36-4.12 2.36a.88.88 0 01-1.33-.76v-.69a4.48 4.48 0 00-6.71-3.89l-4.51 2.59-4.45 2.55a4.49 4.49 0 000 7.78L16.7 52l4.51 2.59a4.48 4.48 0 006.71-3.89v-.58a.88.88 0 00-.44-.77l-2.1-1.2a.86.86 0 00-1.3.75v1.38a.89.89 0 01-1.33.77l-4.12-2.37-4.11-2.36a.88.88 0 010-1.53l4.11-2.36 4.12-2.36a.88.88 0 011.33.76v.69a4.48 4.48 0 006.71 3.89l4.51-2.59 4.45-2.55a4.49 4.49 0 000-7.75z\"></path>\n </svg>\n </div>\n <div class=\"process-step-2 process-subheading\">Select Afterpay at checkout</div>\n <div class=\"process-step-3 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 82 56\" class=\"process-icon sign-up-desktop\" aria-label=\"Step 3\">\n <path class=\"c1\" d=\"M52.51 28.12l4.43 4.45L65.5 24\"></path>\n <circle class=\"c1\" cx=\"31\" cy=\"26\" r=\"14.5\"></circle>\n <circle class=\"c1\" cx=\"31\" cy=\"21.8\" r=\"6.09\"></circle>\n <path class=\"c1\" d=\"M20.92 36.42a8.43 8.43 0 018-5.8h4.2a8.45 8.45 0 018 5.8M36.5 52.49h9\"></path>\n <path class=\"c1\" d=\"M10.43 1.5h61.14a3.93 3.93 0 013.93 3.94V50.5h-69V5.45a3.93 3.93 0 013.93-3.93z\"></path>\n <rect class=\"c1\" width=\"79\" height=\"4\" x=\"1.5\" y=\"50.49\" rx=\"2\"></rect>\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 82\" class=\"process-icon sign-up-mobile\" aria-label=\"Step 3\">\n <rect class=\"c1\" width=\"79\" height=\"49\" x=\"86.5\" y=\"16.5\" rx=\"4.21\" transform=\"rotate(90 76 -9)\"></rect>\n <path class=\"c1\" d=\"M21.46 58.06l4.43 4.45 8.55-8.58M1.5 10.5h48.99M1.5 75.5h48.99M21.5 6.5h9\"></path>\n <circle class=\"c1\" cx=\"26\" cy=\"34\" r=\"14.5\"></circle>\n <circle class=\"c1\" cx=\"26\" cy=\"29.8\" r=\"6.09\"></circle>\n <path class=\"c1\" d=\"M15.93 44.42a8.43 8.43 0 018-5.8h4.2a8.45 8.45 0 018 5.79\"></path>\n </svg>\n </div>\n <div class=\"process-step-3 process-subheading\">Log into or create your Afterpay account, instant approval decision</div>\n <div class=\"process-step-4 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"14 7 79 79\" class=\"process-icon four-payments\" aria-label=\"Step 4\">\n <path class=\"c1\" d=\"M50,15.5A34.5,34.5,0,0,0,15.5,50H50Z\"></path>\n <path class=\"c1\" d=\"M15.5,50A34.5,34.5,0,0,0,50,84.5V50Z\"></path>\n <path class=\"c1\" d=\"M50,84.5h0A34.5,34.5,0,0,0,84.5,50H50Z\"></path>\n <path class=\"c1\" d=\"M57,8.5h0V43h34.5A34.5,34.5,0,0,0,57,8.5Z\"></path>\n </svg>\n </div>\n <div class=\"process-step-4 process-subheading\">Your purchase will be split into 4 payments, payable every 2 weeks</div>\n <div class=\"row-3\">\n <div class=\"disclaimer\">You must be of the age of majority in your province or territory, a resident of Canada, and meet additional eligibility criteria to qualify. Estimated payment amounts shown on product pages exclude taxes and shipping charges, which are added at checkout. Click <a href=\"https://www.afterpay.com/en-CA/instalment-agreement\" aria-label=\"Afterpay Terms (New Window)\" target=\"_blank\" rel=\"noopener\" class=\"disclaimer-link\" tabindex=\"1\">here</a> for complete terms. <br>\n <br>\n <span>\xA9 2020 Afterpay Canada</span>\n </div>\n </div>\n </div>\n </div>\n <style type=\"text/css\">\n body.afterpay-modal-body,\n html.afterpay-modal-html {\n height: 100%\n }\n\n body.afterpay-modal-body {\n margin: 0;\n background-color: #b2fce4\n }\n\n body.afterpay-modal-body.theme-white {\n background: #fff\n }\n\n :-moz-ui-invalid:not(output) {\n box-shadow: none\n }\n\n .afterpay-modal-wrapper {\n min-height: 100%;\n padding: 0 24px;\n background: #b2fce4\n }\n\n .afterpay-modal-wrapper.theme-white {\n background: #fff\n }\n\n .afterpay-modal-wrapper * {\n box-sizing: border-box;\n text-decoration: none;\n font-family: 'Italian Plate No2 Expanded', sans-serif;\n color: #000\n }\n\n .grid-container {\n display: grid;\n margin: 0 auto;\n max-width: 800px;\n text-align: center;\n font-size: 16px;\n grid-template-rows: auto;\n grid-template-columns: repeat(4, 25%);\n grid-template-areas: \"logo logo logo logo\"\"headline headline headline headline\"\"body-a body-b body-c body-d\"\"body-e body-f body-g body-h\"\"cbt-block cbt-block cbt-block cbt-block\"\"footer footer footer footer\"\n }\n\n .row-0 {\n grid-area: logo;\n padding-top: 45px\n }\n\n .row-1 {\n grid-area: headline;\n padding: 3% 0 8% 0\n }\n\n .process-step-1.process-icon-container {\n grid-area: body-a\n }\n\n .process-step-2.process-icon-container {\n grid-area: body-b\n }\n\n .process-step-3.process-icon-container {\n grid-area: body-c\n }\n\n .process-step-4.process-icon-container {\n grid-area: body-d\n }\n\n .process-step-1.process-subheading {\n grid-area: body-e\n }\n\n .process-step-2.process-subheading {\n grid-area: body-f\n }\n\n .process-step-3.process-subheading {\n grid-area: body-g\n }\n\n .process-step-4.process-subheading {\n grid-area: body-h\n }\n\n .row-3 {\n grid-area: footer\n }\n\n .grid-container>div {\n align-content: stretch\n }\n\n .afterpay-modal-logo svg {\n width: 100%;\n max-width: 275px;\n height: auto\n }\n\n h3.afterpay-modal-headline {\n margin: 0;\n font-size: 44px;\n font-weight: 600;\n line-height: 1.1\n }\n\n .process-icon-container {\n align-self: end\n }\n\n .process-icon-container svg {\n width: auto;\n height: auto;\n max-width: 110px;\n max-height: 95px\n }\n\n .process-icon-container svg .c1 {\n fill: none;\n stroke: #000;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px\n }\n\n .process-subheading {\n padding: 10% 3% 0 3%;\n font-weight: 600;\n line-height: 1.25\n }\n\n svg.afterpay-mobile,\n svg.sign-up-mobile {\n display: none\n }\n\n .row-3 {\n padding: 8% 0 40px 0\n }\n\n .disclaimer {\n font-size: 12px\n }\n\n .disclaimer-link {\n color: #000;\n text-decoration: underline\n }\n\n .disclaimer-link:active {\n color: #000\n }\n\n .afterpay-footer-example {\n margin-top: 1.875em;\n font-size: x-small;\n font-weight: 600\n }\n\n .afterpay-underline {\n text-decoration: underline\n }\n\n .afterpay-bold {\n font-weight: 700\n }\n\n .afterpay-reference-symbol {\n font-weight: 400;\n font-size: .5em;\n vertical-align: text-top\n }\n\n @media (max-width:768px) {\n .grid-container {\n max-width: 500px;\n grid-template-columns: auto;\n grid-template-areas: \"logo logo\"\"headline headline\"\"body-a body-b\"\"body-e body-f\"\"body-c body-d\"\"body-g body-h\"\"cbt-block cbt-block\"\"footer footer\"\n }\n\n .row-1 {\n padding: 3% 0 20px 0\n }\n\n .process-icon-container {\n padding: 24px 0 0 0\n }\n }\n\n @media (max-width:600px) {\n .afterpay-modal-wrapper {\n padding: 0\n }\n\n .grid-container {\n padding: 30px;\n text-align: left;\n grid-template-columns: auto;\n grid-template-areas: \"logo logo\"\"headline headline\"\"body-a body-e\"\"body-b body-f\"\"body-c body-g\"\"body-d body-h\"\"cbt-block cbt-block\"\"footer footer\"\n }\n\n .row-0 {\n padding-top: 0\n }\n\n .row-1 {\n padding: 20px 0 8% 0\n }\n\n h3.afterpay-modal-headline {\n font-size: 40px\n }\n\n svg.afterpay-desktop,\n svg.sign-up-desktop {\n display: none\n }\n\n svg.afterpay-mobile,\n svg.sign-up-mobile {\n display: block\n }\n\n .process-icon-container {\n align-self: start;\n padding: 12px 0\n }\n\n .process-icon-container svg {\n min-width: 30px;\n max-height: 65px\n }\n\n .process-subheading {\n padding: 6px 0 6px 12px;\n align-self: center\n }\n\n .row-3 {\n padding: 8% 0 20px 0\n }\n }\n\n @media (max-width:420px) {\n .afterpay-modal-logo svg {\n max-width: 200px\n }\n\n h3.afterpay-modal-headline {\n font-size: 36px\n }\n }\n\n @media (max-width:335px) {\n h3.afterpay-modal-headline {\n font-size: 32px\n }\n }\n\n @media (max-width:260px) {\n .grid-container {\n font-size: 14px\n }\n\n h3.afterpay-modal-headline {\n font-size: 28px\n }\n }\n </style>\n <style type=\"text/css\">\n @media (-ms-high-contrast:none),\n (-ms-high-contrast:active) {\n .afterpay-modal-wrapper .grid-container {\n display: -ms-grid;\n -ms-grid-rows: auto;\n -ms-grid-columns: (25%)[4];\n font-size: 14px\n }\n\n .afterpay-modal-wrapper .grid-container .row-0 {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding-top: 0\n }\n\n .afterpay-modal-wrapper .grid-container .row-0 .afterpay-modal-logo svg {\n height: 15vh\n }\n\n .afterpay-modal-wrapper .grid-container .row-1 {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding: 20px 0 45px 0\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-1.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 1\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-2.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 2\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-3.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 3\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-4.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 4;\n grid-area: body-d\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-1.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 1;\n grid-area: body-e\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-2.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 2;\n grid-area: body-f\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-3.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 3\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-4.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 4\n }\n\n .afterpay-modal-wrapper .grid-container .row-3 {\n -ms-grid-row: 5;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding: 80px 0 40px 0\n }\n }\n </style>\n <script id=\"post-events-to-parent\">\n ! function() {\n try {\n var t = window && window.parent;\n t && t !== window.self && \"function\" == typeof t.postMessage && (t.postMessage(\"Afterpay.ready\", \"*\"), document.addEventListener(\"keyup\", function(e) {\n e = e.key || e.keyCode;\n \"Escape\" !== e && \"Esc\" !== e && 27 !== e || t.postMessage(\"Afterpay.keyup.esc\", \"*\")\n }))\n } catch (e) {}\n }()\n </script>\n </div>\n </div>\n</div>\n</div>";
|
|
128
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
129
|
+
var style = document.createElement('style');
|
|
130
|
+
style.type = 'text/css';
|
|
84
131
|
|
|
85
|
-
var apModalFrenchHTML = "<div id=\"afterpay-modal-component\">\n<style>\n .afterpay-modal-overlay {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n visibility: hidden;\n transform: scale(1.1);\n transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\n z-index: 999999999;\n }\n\n #afterpay-modal-component .visible {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\n }\n\n #afterpay-modal-component #afterpay-modal {\n background-color: #fff;\n color: #000;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 2px;\n width: 774px;\n max-width: 100vw;\n max-height: 100%;\n line-height: 1.1;\n display: block;\n overflow: auto;\n }\n\n #afterpay-modal-component #afterpay-modal.afterpay-modal-is-apr {\n border-radius: 0px;\n max-width: 100%;\n width: 476px;\n }\n\n @media (min-width:473px) and (min-height:686px) {\n #afterpay-modal-component #afterpay-modal.afterpay-modal-is-apr {\n border-radius: 12px;\n }\n }\n\n #afterpay-modal-component #afterpay-modal .afterpay-close-button {\n position: absolute;\n z-index: 3;\n background-color: transparent;\n min-width: 0;\n top: 18px;\n right: 18px;\n border: 0;\n cursor: pointer;\n }\n\n #afterpay-modal-component button {\n min-width: 80px;\n background-color: #848e97;\n border-color: #848e97;\n border-style: solid;\n border-radius: 2px;\n padding: 3px;\n color: white;\n cursor: pointer;\n display: none;\n }\n\n #afterpay-modal-component button:hover {\n background-color: #6c757d;\n border-color: #6c757d;\n }\n\n .afterpay-loading-indicator {\n display: block;\n background-color: transparent;\n width: 80px;\n position: absolute;\n left: 50%;\n top: 50%;\n }\n\n .afterpay-loading-indicator::after {\n content: \" \";\n display: block;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 5px solid #b2fce4;\n border-color: #b2fce4 transparent #b2fce4 transparent;\n animation: afterpay-loading-indicator 1.2s linear infinite;\n }\n\n @keyframes afterpay-loading-indicator {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .modal-content .error-container {\n padding: 25px;\n text-align: center;\n background-color: #b2fce4;\n opacity: 0;\n visibility: hidden;\n }\n\n .modal-content.error .error-container {\n opacity: 1;\n visibility: visible;\n font-family: 'Italian Plate No2 Expanded', sans-serif;\n }\n\n @media (-ms-high-contrast:none),\n (-ms-high-contrast:active) {\n #afterpay-modal-component #afterpay-modal {\n bottom: auto;\n }\n }\n</style>\n<div class=\"afterpay-modal-overlay visible\">\n <div class=\"afterpay-loading-indicator\" style=\"display: none;\"></div>\n <div id=\"afterpay-modal\" role=\"dialog\" tabindex=\"-1\" aria-modal=\"true\" aria-describedby=\"afterpay-modal-container\" aria-label=\"Afterpay\">\n <button class=\"afterpay-close-button\" id=\"afterpay-modal-close-button\" tabindex=\"1\" autofocus=\"false\" aria-label=\"Bouton de fermeture modal Afterpay\" style=\"display: block;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" width=\"20\" height=\"20\" viewBox=\"0 0 30 30\" aria-hidden=\"true\">\n <defs>\n <style>\n .a {\n fill: none;\n stroke: #808284;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n }\n </style>\n </defs>\n <title>Bouton de fermeture modal Afterpay</title>\n <line class=\"a\" x1=\"1\" y1=\"1\" x2=\"29\" y2=\"29\"></line>\n <line class=\"a\" x1=\"1\" y1=\"29\" x2=\"29\" y2=\"1\"></line>\n </svg>\n </button>\n <div class=\"modal-content\">\n <div id=\"afterpay-modal-container\" class=\"afterpay-modal-wrapper\">\n <div class=\"grid-container\">\n <div class=\"row-0\">\n <div class=\"afterpay-modal-logo\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 1150 222\" class=\"afterpay-logo-black\" aria-label=\"Afterpay logo\">\n <path d=\"M1132 45.3l-34.6-19.8-35.1-20.1a34.9 34.9 0 00-52.2 30.2V40c0 2.5 1.3 4.8 3.5 6l16.3 9.3a6.8 6.8 0 0010.1-6V38.9c0-5.3 5.7-8.6 10.3-6l32 18.4 31.9 18.3a6.9 6.9 0 010 11.9l-31.9 18.3-32 18.4a6.9 6.9 0 01-10.3-6v-5.3c0-26.8-29-43.6-52.2-30.2l-35.1 20-34.6 19.9a35 35 0 000 60.5l34.6 19.8 35.1 20a34.9 34.9 0 0052.2-30.1v-4.5c0-2.5-1.3-4.8-3.5-6l-16.3-9.3a6.8 6.8 0 00-10.1 5.9v10.7c0 5.3-5.7 8.6-10.3 6l-32-18.4-31.9-18.3a6.9 6.9 0 010-12l31.9-18.2 32-18.4a6.9 6.9 0 0110.3 6v5.3c0 26.8 29 43.6 52.2 30.2l35.1-20.1 34.6-19.8a35 35 0 000-60.5zm-227 6.6l-81 167.3h-33.6l30.3-62.5L773 51.9h34.5l30.6 70.2 33.4-70.2H905zM95.1 111.3c0-20-14.5-34-32.3-34s-32.3 14.3-32.3 34c0 19.5 14.5 34 32.3 34s32.3-14 32.3-34m.3 59.4v-15.4a47.6 47.6 0 01-37.5 17.3C25.3 172.6.6 146.5.6 111.3c0-35 25.7-61.5 58-61.5 15.2 0 28 6.7 36.8 17v-15h29.2v118.9H95.4zm171.2-26.4c-10.2 0-13.1-3.8-13.1-13.8V77.8h18.8v-26h-18.8v-29h-29.9v29H185V40.2c0-10 3.8-13.8 14.3-13.8h6.6v-23h-14.4c-24.7 0-36.4 8-36.4 32.8V52h-16.6v25.8h16.6v92.9H185v-93h38.6V136c0 24.2 9.3 34.7 33.5 34.7h15.4v-26.4h-5.9zM374 100.6c-2.1-15.4-14.7-24.7-29.5-24.7-14.7 0-26.9 9-29.9 24.7H374zM314.3 119a29.6 29.6 0 0030.7 27.6c12.6 0 22.3-6 28-15.4h30.7c-7.1 25.2-29.7 41.3-59.4 41.3a58.5 58.5 0 01-61.1-61.1A60 60 0 01345 49.7a59.5 59.5 0 0160.4 69.4h-91.1zm282.2-7.8a33 33 0 00-32.3-34c-17.8 0-32.3 14.3-32.3 34 0 19.5 14.5 34 32.3 34a32.9 32.9 0 0032.3-34m-94.1 107.9V51.9h29.2v15.4a47.2 47.2 0 0137.5-17.6c32.1 0 57.3 26.4 57.3 61.3s-25.7 61.5-58 61.5a46 46 0 01-35.9-16v62.6h-30.1zm229.3-108c0-20-14.5-34-32.3-34-17.8 0-32.3 14.4-32.3 34s14.5 34 32.3 34c17.8 0 32.3-14 32.3-34m.3 59.5v-15.4a47.6 47.6 0 01-37.5 17.3c-32.6 0-57.3-26.1-57.3-61.3 0-35 25.7-61.5 58-61.5 15.2 0 28 6.7 36.8 17v-15h29.2v118.9H732zM449.7 63.5s7.4-13.8 25.7-13.8c7.8 0 12.8 2.7 12.8 2.7v30.3s-11-6.8-21.1-5.4c-10.1 1.4-16.5 10.6-16.5 23v70.3h-30.2V51.9h29.2v11.6h.1z\"></path>\n </svg>\n </div>\n </div>\n <div class=\"row-1\">\n <h3 class=\"afterpay-modal-headline\">Magasinez maintenant. <span>Payez plus tard.</span>\n <div>Toujours sans int\xE9r\xEAts.</div>\n </h3>\n </div>\n <div class=\"process-step-1 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 72\" class=\"process-icon shopping-cart\" aria-label=\"Step 1\">\n <path class=\"c1\" d=\"M26 55.47a27.28 27.28 0 01-4-3c-2.13-1.87-4.52-4.49-4.44-7.36a5 5 0 01.37-1.75 4.27 4.27 0 018.13.25 4.27 4.27 0 018.13-.25 5 5 0 01.37 1.75c.08 2.87-2.31 5.49-4.44 7.36a27.28 27.28 0 01-4 3\"></path>\n <path class=\"c1\" fill=\"#000\" d=\"M10.5 35V17a15.5 15.5 0 0131 0v18\"></path>\n <path class=\"c1\" transform=\"rotate(90 85.5 -4.5)\" d=\"M110.5 30.5h45.79a4.21 4.21 0 014.21 4.21v40.58a4.21 4.21 0 01-4.21 4.21H110.5v-49z\"></path>\n </svg>\n </div>\n <div class=\"process-step-1 process-subheading\">Ajoutez votre liste de souhaits au panier.</div>\n <div class=\"process-step-2 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 82 56\" class=\"process-icon afterpay-desktop\" aria-label=\"Step 2\">\n <path class=\"c1\" d=\"M36.5 52.49h9\"></path>\n <path class=\"c1\" d=\"M10.43 1.5h61.14a3.93 3.93 0 013.93 3.93V50.5h-69V5.43a3.93 3.93 0 013.93-3.93z\"></path>\n <path d=\"M54.75 17.52L50.3 15l-4.51-2.59a4.48 4.48 0 00-6.71 3.89v.58a.89.89 0 00.44.77l2.1 1.2a.86.86 0 001.3-.75v-1.41a.89.89 0 011.33-.77l4.12 2.37 4.11 2.36a.88.88 0 010 1.53l-4.11 2.36-4.12 2.36a.88.88 0 01-1.33-.76v-.69a4.48 4.48 0 00-6.71-3.89l-4.51 2.59-4.45 2.55a4.49 4.49 0 000 7.78L31.7 37l4.51 2.59a4.48 4.48 0 006.71-3.89v-.58a.88.88 0 00-.44-.77l-2.1-1.2a.86.86 0 00-1.3.75v1.38a.89.89 0 01-1.33.77l-4.12-2.37-4.11-2.36a.88.88 0 010-1.53l4.11-2.36 4.12-2.36a.88.88 0 011.33.76v.69a4.48 4.48 0 006.71 3.89l4.51-2.59 4.45-2.55a4.49 4.49 0 000-7.75z\"></path>\n <rect class=\"c1\" width=\"79\" height=\"4\" x=\"1.5\" y=\"50.49\" rx=\"2\"></rect>\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 82\" class=\"process-icon afterpay-mobile\" aria-label=\"Step 2\">\n <rect class=\"c1\" width=\"79\" height=\"49\" x=\"86.5\" y=\"16.5\" rx=\"4.21\" transform=\"rotate(90 76 -9)\"></rect>\n <path class=\"c1\" d=\"M1.49 10.5h49\"></path>\n <path class=\"c1\" d=\"M1.49 75.5h49\"></path>\n <path class=\"c1\" d=\"M21.49 6.5h9\"></path>\n <path d=\"M39.75 32.52L35.3 30l-4.51-2.59a4.48 4.48 0 00-6.71 3.89v.58a.89.89 0 00.44.77l2.1 1.2a.86.86 0 001.3-.75v-1.41a.89.89 0 011.33-.77l4.12 2.37 4.11 2.36a.88.88 0 010 1.53l-4.11 2.36-4.12 2.36a.88.88 0 01-1.33-.76v-.69a4.48 4.48 0 00-6.71-3.89l-4.51 2.59-4.45 2.55a4.49 4.49 0 000 7.78L16.7 52l4.51 2.59a4.48 4.48 0 006.71-3.89v-.58a.88.88 0 00-.44-.77l-2.1-1.2a.86.86 0 00-1.3.75v1.38a.89.89 0 01-1.33.77l-4.12-2.37-4.11-2.36a.88.88 0 010-1.53l4.11-2.36 4.12-2.36a.88.88 0 011.33.76v.69a4.48 4.48 0 006.71 3.89l4.51-2.59 4.45-2.55a4.49 4.49 0 000-7.75z\"></path>\n </svg>\n </div>\n <div class=\"process-step-2 process-subheading\">S\xE9lectionnez Afterpay lors de l'achat.</div>\n <div class=\"process-step-3 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 82 56\" class=\"process-icon sign-up-desktop\" aria-label=\"Step 3\">\n <path class=\"c1\" d=\"M52.51 28.12l4.43 4.45L65.5 24\"></path>\n <circle class=\"c1\" cx=\"31\" cy=\"26\" r=\"14.5\"></circle>\n <circle class=\"c1\" cx=\"31\" cy=\"21.8\" r=\"6.09\"></circle>\n <path class=\"c1\" d=\"M20.92 36.42a8.43 8.43 0 018-5.8h4.2a8.45 8.45 0 018 5.8M36.5 52.49h9\"></path>\n <path class=\"c1\" d=\"M10.43 1.5h61.14a3.93 3.93 0 013.93 3.94V50.5h-69V5.45a3.93 3.93 0 013.93-3.93z\"></path>\n <rect class=\"c1\" width=\"79\" height=\"4\" x=\"1.5\" y=\"50.49\" rx=\"2\"></rect>\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"0 0 52 82\" class=\"process-icon sign-up-mobile\" aria-label=\"Step 3\">\n <rect class=\"c1\" width=\"79\" height=\"49\" x=\"86.5\" y=\"16.5\" rx=\"4.21\" transform=\"rotate(90 76 -9)\"></rect>\n <path class=\"c1\" d=\"M21.46 58.06l4.43 4.45 8.55-8.58M1.5 10.5h48.99M1.5 75.5h48.99M21.5 6.5h9\"></path>\n <circle class=\"c1\" cx=\"26\" cy=\"34\" r=\"14.5\"></circle>\n <circle class=\"c1\" cx=\"26\" cy=\"29.8\" r=\"6.09\"></circle>\n <path class=\"c1\" d=\"M15.93 44.42a8.43 8.43 0 018-5.8h4.2a8.45 8.45 0 018 5.79\"></path>\n </svg>\n </div>\n <div class=\"process-step-3 process-subheading\">Connectez-vous ou cr\xE9er votre compte Afterpay, r\xE9ponse instantan\xE9e.</div>\n <div class=\"process-step-4 process-icon-container\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"14 7 79 79\" class=\"process-icon four-payments\" aria-label=\"Step 4\">\n <path class=\"c1\" d=\"M50,15.5A34.5,34.5,0,0,0,15.5,50H50Z\"></path>\n <path class=\"c1\" d=\"M15.5,50A34.5,34.5,0,0,0,50,84.5V50Z\"></path>\n <path class=\"c1\" d=\"M50,84.5h0A34.5,34.5,0,0,0,84.5,50H50Z\"></path>\n <path class=\"c1\" d=\"M57,8.5h0V43h34.5A34.5,34.5,0,0,0,57,8.5Z\"></path>\n </svg>\n </div>\n <div class=\"process-step-4 process-subheading\">4 paiements \xE9chelonn\xE9s, toutes les 2 semaines.</div>\n <div class=\"row-3\">\n <div class=\"disclaimer\">Vous devez avoir l'\xE2ge de la majorit\xE9 \xE9tablie dans votre province ou territoire et \xEAtre un r\xE9sident du Canada. Des crit\xE8res d'\xE9ligibilit\xE9 suppl\xE9mentaires sont applicables. <br>\n <br>Les montants estim\xE9s figurant sur les pages de produits ne comprennent pas les taxes et les frais d'exp\xE9dition, qui sont ajout\xE9s lors du passage en caisse. Cliquez <a href=\"https://www.afterpay.com/fr-CA/instalment-agreement\" aria-label=\"Lire les mentions l\xE9gales de Afterpay (Nouvelle fen\xEAtre)\" target=\"_blank\" rel=\"noopener\" class=\"disclaimer-link\" tabindex=\"1\">ici</a> pour consulter les mentions l\xE9gales. <span>\xA9 2020 Afterpay Canada</span>\n </div>\n </div>\n </div>\n </div>\n <style type=\"text/css\">\n body.afterpay-modal-body,\n html.afterpay-modal-html {\n height: 100%\n }\n\n body.afterpay-modal-body {\n margin: 0;\n background-color: #b2fce4\n }\n\n body.afterpay-modal-body.theme-white {\n background: #fff\n }\n\n :-moz-ui-invalid:not(output) {\n box-shadow: none\n }\n\n .afterpay-modal-wrapper {\n min-height: 100%;\n padding: 0 24px;\n background: #b2fce4\n }\n\n .afterpay-modal-wrapper.theme-white {\n background: #fff\n }\n\n .afterpay-modal-wrapper * {\n box-sizing: border-box;\n text-decoration: none;\n font-family: 'Italian Plate No2 Expanded', sans-serif;\n color: #000\n }\n\n .grid-container {\n display: grid;\n margin: 0 auto;\n max-width: 800px;\n text-align: center;\n font-size: 16px;\n grid-template-rows: auto;\n grid-template-columns: repeat(4, 25%);\n grid-template-areas: \"logo logo logo logo\"\"headline headline headline headline\"\"body-a body-b body-c body-d\"\"body-e body-f body-g body-h\"\"cbt-block cbt-block cbt-block cbt-block\"\"footer footer footer footer\"\n }\n\n .row-0 {\n grid-area: logo;\n padding-top: 45px\n }\n\n .row-1 {\n grid-area: headline;\n padding: 3% 0 8% 0\n }\n\n .process-step-1.process-icon-container {\n grid-area: body-a\n }\n\n .process-step-2.process-icon-container {\n grid-area: body-b\n }\n\n .process-step-3.process-icon-container {\n grid-area: body-c\n }\n\n .process-step-4.process-icon-container {\n grid-area: body-d\n }\n\n .process-step-1.process-subheading {\n grid-area: body-e\n }\n\n .process-step-2.process-subheading {\n grid-area: body-f\n }\n\n .process-step-3.process-subheading {\n grid-area: body-g\n }\n\n .process-step-4.process-subheading {\n grid-area: body-h\n }\n\n .row-3 {\n grid-area: footer\n }\n\n .grid-container>div {\n align-content: stretch\n }\n\n .afterpay-modal-logo svg {\n width: 100%;\n max-width: 275px;\n height: auto\n }\n\n h3.afterpay-modal-headline {\n margin: 0;\n font-size: 44px;\n font-weight: 600;\n line-height: 1.1\n }\n\n .process-icon-container {\n align-self: end\n }\n\n .process-icon-container svg {\n width: auto;\n height: auto;\n max-width: 110px;\n max-height: 95px\n }\n\n .process-icon-container svg .c1 {\n fill: none;\n stroke: #000;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px\n }\n\n .process-subheading {\n padding: 10% 3% 0 3%;\n font-weight: 600;\n line-height: 1.25\n }\n\n svg.afterpay-mobile,\n svg.sign-up-mobile {\n display: none\n }\n\n .row-3 {\n padding: 8% 0 40px 0\n }\n\n .disclaimer {\n font-size: 12px\n }\n\n .disclaimer-link {\n color: #000;\n text-decoration: underline\n }\n\n .disclaimer-link:active {\n color: #000\n }\n\n .afterpay-footer-example {\n margin-top: 1.875em;\n font-size: x-small;\n font-weight: 600\n }\n\n .afterpay-underline {\n text-decoration: underline\n }\n\n .afterpay-bold {\n font-weight: 700\n }\n\n .afterpay-reference-symbol {\n font-weight: 400;\n font-size: .5em;\n vertical-align: text-top\n }\n\n .footer-terms {\n margin: 1.875em auto 0;\n font-size: x-small;\n color: #888d8d\n }\n\n .afterpay-footer-example {\n margin: inherit\n }\n\n @media (min-width:700px) {\n .process-step-4 .process-subheading {\n max-width: 170px\n }\n }\n\n @media (max-width:768px) {\n .grid-container {\n max-width: 500px;\n grid-template-columns: auto;\n grid-template-areas: \"logo logo\"\"headline headline\"\"body-a body-b\"\"body-e body-f\"\"body-c body-d\"\"body-g body-h\"\"cbt-block cbt-block\"\"footer footer\"\n }\n\n .row-1 {\n padding: 3% 0 20px 0\n }\n\n .process-icon-container {\n padding: 24px 0 0 0\n }\n }\n\n @media (max-width:600px) {\n .afterpay-modal-wrapper {\n padding: 0\n }\n\n .grid-container {\n padding: 30px;\n text-align: left;\n grid-template-columns: auto;\n grid-template-areas: \"logo logo\"\"headline headline\"\"body-a body-e\"\"body-b body-f\"\"body-c body-g\"\"body-d body-h\"\"cbt-block cbt-block\"\"footer footer\"\n }\n\n .row-0 {\n padding-top: 0\n }\n\n .row-1 {\n padding: 20px 0 8% 0\n }\n\n h3.afterpay-modal-headline {\n font-size: 40px\n }\n\n svg.afterpay-desktop,\n svg.sign-up-desktop {\n display: none\n }\n\n svg.afterpay-mobile,\n svg.sign-up-mobile {\n display: block\n }\n\n .process-icon-container {\n align-self: start;\n padding: 12px 0\n }\n\n h3.afterpay-modal-headline>p>span {\n padding: 2px 2px;\n display: table;\n text-align: center\n }\n\n .process-icon-container svg {\n max-height: 65px\n }\n\n .process-icon-container svg.four-payments {\n max-height: 55px\n }\n\n .process-subheading {\n padding: 6px 0 6px 5px;\n align-self: center\n }\n\n .row-3 {\n padding: 8% 0 20px 0\n }\n }\n\n @media (max-width:420px) {\n .afterpay-modal-logo svg {\n max-width: 200px\n }\n\n h3.afterpay-modal-headline {\n font-size: 36px\n }\n }\n\n @media (max-width:335px) {\n h3.afterpay-modal-headline {\n font-size: 32px\n }\n }\n\n @media (max-width:260px) {\n .grid-container {\n font-size: 14px\n }\n\n h3.afterpay-modal-headline {\n font-size: 28px\n }\n }\n </style>\n <style type=\"text/css\">\n @media (-ms-high-contrast:none),\n (-ms-high-contrast:active) {\n .afterpay-modal-wrapper .grid-container {\n display: -ms-grid;\n -ms-grid-rows: auto;\n -ms-grid-columns: (25%)[4];\n font-size: 14px\n }\n\n .afterpay-modal-wrapper .grid-container .row-0 {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding-top: 0\n }\n\n .afterpay-modal-wrapper .grid-container .row-0 .afterpay-modal-logo svg {\n height: 15vh\n }\n\n .afterpay-modal-wrapper .grid-container .row-1 {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding: 20px 0 45px 0\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-1.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 1\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-2.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 2\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-3.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 3\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-4.process-icon-container {\n -ms-grid-row: 3;\n -ms-grid-column: 4;\n grid-area: body-d\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-1.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 1;\n grid-area: body-e\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-2.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 2;\n grid-area: body-f\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-3.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 3\n }\n\n .afterpay-modal-wrapper .grid-container .process-step-4.process-subheading {\n -ms-grid-row: 4;\n -ms-grid-column: 4\n }\n\n .afterpay-modal-wrapper .grid-container .row-3 {\n -ms-grid-row: 5;\n -ms-grid-column: 1;\n -ms-grid-column-span: 4;\n padding: 80px 0 40px 0\n }\n }\n </style>\n <script id=\"post-events-to-parent\">\n ! function() {\n try {\n var t = window && window.parent;\n t && t !== window.self && \"function\" == typeof t.postMessage && (t.postMessage(\"Afterpay.ready\", \"*\"), document.addEventListener(\"keyup\", function(e) {\n e = e.key || e.keyCode;\n \"Escape\" !== e && \"Esc\" !== e && 27 !== e || t.postMessage(\"Afterpay.keyup.esc\", \"*\")\n }))\n } catch (e) {}\n }()\n </script>\n </div>\n </div>\n</div>\n</div>";
|
|
132
|
+
if (insertAt === 'top') {
|
|
133
|
+
if (head.firstChild) {
|
|
134
|
+
head.insertBefore(style, head.firstChild);
|
|
135
|
+
} else {
|
|
136
|
+
head.appendChild(style);
|
|
137
|
+
}
|
|
138
|
+
} else {
|
|
139
|
+
head.appendChild(style);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
if (style.styleSheet) {
|
|
143
|
+
style.styleSheet.cssText = css;
|
|
144
|
+
} else {
|
|
145
|
+
style.appendChild(document.createTextNode(css));
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
var css_248z$1 = ".sezzle-shopify-info-button {\n display: block;\n overflow: hidden;\n margin: 0;\n border: none;\n padding: 0;\n background: none;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper {\n display: block;\n box-sizing: border-box;\n width: 100%;\n border: none;\n padding: 0;\n background: none;\n color: inherit;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper:focus {\n outline: 5px auto;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-left {\n text-align: left;\n float: left;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-center {\n text-align: center;\n float: none;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-right {\n text-align: right;\n float: right;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text {\n width: unset;\n margin: auto;\n border: 0;\n padding: 0;\n background: none;\n vertical-align: baseline;\n word-wrap: normal;\n line-height: 18px;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n color: inherit;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-left {\n text-align: left;\n margin: 0;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-center {\n text-align: center;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-right {\n float: right;\n text-align: right;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-payment-amount {\n zoom: 1;\n float: none;\n margin: 0;\n border: 0;\n padding: 0;\n background: none;\n vertical-align: baseline;\n font-weight: 900;\n font-size: 1.2em;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-logo {\n display: inline-block;\n box-sizing: border-box;\n height: 18px;\n width: auto;\n opacity: 1;\n float: none;\n margin: 0;\n margin-bottom: -3px;\n border: 0;\n padding: 0;\n background: none;\n vertical-align: baseline;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-info-icon {\n display: contents;\n width: auto;\n position: absolute;\n margin: 0;\n box-shadow: none;\n border: none;\n padding: 0px 0px 0px 3px;\n background: none;\n vertical-align: baseline;\n line-height: initial;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-info-link {\n text-decoration: underline;\n cursor: pointer;\n background: none;\n border: none;\n padding: 0px;\n display: inline;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-ap-logo {\n height: 45px;\n margin: 0;\n border: 0;\n padding: 0;\n vertical-align: middle;\n}\n.sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text button.ap-modal-info-link {\n display: inline;\n width: auto;\n margin: 0;\n box-shadow: none;\n border: none;\n padding: 0;\n background: none;\n vertical-align: middle;\n line-height: inherit;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n.sezzle-hidden {\n display: none;\n visibility: hidden;\n}";
|
|
150
|
+
styleInject(css_248z$1);
|
|
151
|
+
|
|
152
|
+
var clickHere$2 = "Click here to learn more about Sezzle";
|
|
153
|
+
var closeModal$2 = "Close Sezzle Modal";
|
|
154
|
+
var learnMore$2 = "Learn more about Sezzle";
|
|
155
|
+
var locale$2 = "en-us";
|
|
156
|
+
var or$2 = " or ";
|
|
157
|
+
var ordersOver$2 = "for orders over";
|
|
158
|
+
var pieAlt$2 = "pie at";
|
|
159
|
+
var sezzleHeader$2 = "Buy Now. Pay Later.";
|
|
160
|
+
var sezzleHeaderChild$2 = "Pay in 4 by selecting Sezzle at checkout.";
|
|
161
|
+
var sezzleInfo$2 = "Sezzle Information";
|
|
162
|
+
var sezzleRowChild$2 = "Flexible payment plans for your budget";
|
|
163
|
+
var singleFeatureCredit$2 = "No credit check required";
|
|
164
|
+
var singleFeatureCreditBuilding$2 = "Opt in to free credit reporting";
|
|
165
|
+
var singleFeatureOptions$2 = "Instant credit decision";
|
|
166
|
+
var template$2 = "or %%numberOfPayments%% interest-free payments of %%price%% with %%logo%%%%afterpay%%%%min-price%% %%info%%";
|
|
167
|
+
var terms1$2 = "Signing up for Sezzle will not impact your credit score. You may opt-in to our free credit reporting program, Sezzle Up, to have your payments reported to credit bureaus. Learn more about spending power <a href='https://sezzle.com/how-it-works' target='_blank'>here</a>.";
|
|
168
|
+
var terms2$2 = "Subject to approval. <a href='https://legal.sezzle.com/' target='_blank'>Click here for complete terms.</a> First payment date and amount may fluctuate based on eligibility and time of merchant order completion.";
|
|
169
|
+
var today$2 = "Today";
|
|
170
|
+
var week$2 = "Week";
|
|
171
|
+
var enTranslations = {
|
|
172
|
+
clickHere: clickHere$2,
|
|
173
|
+
closeModal: closeModal$2,
|
|
174
|
+
learnMore: learnMore$2,
|
|
175
|
+
locale: locale$2,
|
|
176
|
+
or: or$2,
|
|
177
|
+
ordersOver: ordersOver$2,
|
|
178
|
+
pieAlt: pieAlt$2,
|
|
179
|
+
sezzleHeader: sezzleHeader$2,
|
|
180
|
+
sezzleHeaderChild: sezzleHeaderChild$2,
|
|
181
|
+
sezzleInfo: sezzleInfo$2,
|
|
182
|
+
sezzleRowChild: sezzleRowChild$2,
|
|
183
|
+
singleFeatureCredit: singleFeatureCredit$2,
|
|
184
|
+
singleFeatureCreditBuilding: singleFeatureCreditBuilding$2,
|
|
185
|
+
singleFeatureOptions: singleFeatureOptions$2,
|
|
186
|
+
template: template$2,
|
|
187
|
+
terms1: terms1$2,
|
|
188
|
+
terms2: terms2$2,
|
|
189
|
+
today: today$2,
|
|
190
|
+
week: week$2
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
var clickHere$1 = "Cliquez ici pour en savoir plus sur Sezzle";
|
|
194
|
+
var closeModal$1 = "Fermer le modal Sezzle";
|
|
195
|
+
var learnMore$1 = "En savoir plus sur Sezzle";
|
|
196
|
+
var locale$1 = "fr-ca";
|
|
197
|
+
var or$1 = " ou ";
|
|
198
|
+
var ordersOver$1 = "pour les achats de plus de";
|
|
199
|
+
var pieAlt$1 = "tarte à";
|
|
200
|
+
var sezzleHeader$1 = "Acheter maintenant. Payer plus tard.";
|
|
201
|
+
var sezzleHeaderChild$1 = "Payez en 4 en sélectionnant Sezzle à la caisse.";
|
|
202
|
+
var sezzleInfo$1 = "Informations sur Sezzle";
|
|
203
|
+
var sezzleRowChild$1 = "Des plans de paiement flexibles pour votre budget";
|
|
204
|
+
var singleFeatureCredit$1 = "Aucune vérification de crédit requise";
|
|
205
|
+
var singleFeatureCreditBuilding$1 = "Inscrivez-vous aux rapports de solvabilité gratuits";
|
|
206
|
+
var singleFeatureOptions$1 = "Décision de crédit instantanée";
|
|
207
|
+
var template$1 = "ou %%numberOfPayments%% paiements de %%price%% sans intérêts avec %%logo%%%%afterpay%%%%min-price%% %%info%%";
|
|
208
|
+
var terms1$1 = "L'inscription à Sezzle n'aura pas d'impact sur votre pointage de crédit. Vous pouvez adhérer à notre programme gratuit d'évaluation du crédit, Sezzle Up, pour que vos paiements soient signalés aux agences d'évaluation du crédit. Apprenez-en davantage sur le pouvoir d'achat <a href='https://sezzle.com/fr-ca/how-it-works/' target='_blank'> ici </a> .";
|
|
209
|
+
var terms2$1 = "Soumis à l'approbation. <a href='https://legal.sezzle.com/fr-ca/' target='_blank'> Cliquez ici pour connaître les conditions complètes. </a> La date et le montant du premier paiement peuvent fluctuer en fonction de l'éligibilité et de l'heure de finalisation de la commande du commerçant.";
|
|
210
|
+
var today$1 = "Aujourd'hui";
|
|
211
|
+
var week$1 = "Semaine";
|
|
212
|
+
var frTranslations = {
|
|
213
|
+
clickHere: clickHere$1,
|
|
214
|
+
closeModal: closeModal$1,
|
|
215
|
+
learnMore: learnMore$1,
|
|
216
|
+
locale: locale$1,
|
|
217
|
+
or: or$1,
|
|
218
|
+
ordersOver: ordersOver$1,
|
|
219
|
+
pieAlt: pieAlt$1,
|
|
220
|
+
sezzleHeader: sezzleHeader$1,
|
|
221
|
+
sezzleHeaderChild: sezzleHeaderChild$1,
|
|
222
|
+
sezzleInfo: sezzleInfo$1,
|
|
223
|
+
sezzleRowChild: sezzleRowChild$1,
|
|
224
|
+
singleFeatureCredit: singleFeatureCredit$1,
|
|
225
|
+
singleFeatureCreditBuilding: singleFeatureCreditBuilding$1,
|
|
226
|
+
singleFeatureOptions: singleFeatureOptions$1,
|
|
227
|
+
template: template$1,
|
|
228
|
+
terms1: terms1$1,
|
|
229
|
+
terms2: terms2$1,
|
|
230
|
+
today: today$1,
|
|
231
|
+
week: week$1
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
var clickHere = "Haga clic aquí para obtener más información sobre Sezzle";
|
|
235
|
+
var closeModal = "Cerrar Sezzle Modal";
|
|
236
|
+
var learnMore = "Más información sobre Sezzle";
|
|
237
|
+
var locale = "es-mx";
|
|
238
|
+
var or = " o ";
|
|
239
|
+
var ordersOver = "por compras superiores a";
|
|
240
|
+
var pieAlt = "pastel en";
|
|
241
|
+
var sezzleHeader = "Comprar ahora. Paga después.";
|
|
242
|
+
var sezzleHeaderChild = "Pague en 4 seleccionando Sezzle al finalizar la compra.";
|
|
243
|
+
var sezzleInfo = "Información sobre el tema";
|
|
244
|
+
var sezzleRowChild = "Planes de pago flexibles para su presupuesto";
|
|
245
|
+
var singleFeatureCredit = "No se requiere verificación de crédito";
|
|
246
|
+
var singleFeatureCreditBuilding = "Suscríbase a informes de crédito gratuitos";
|
|
247
|
+
var singleFeatureOptions = "Decisión de crédito instantánea";
|
|
248
|
+
var template = "o %%numberOfPayments%% pagos sin intereses de %%price%% con %%logo%%%%afterpay%%%%min-price%% %%info%%";
|
|
249
|
+
var terms1 = "Registrarse en Sezzle no afectará su puntaje crediticio. Puede inscribirse en nuestro programa gratuito de informes crediticios, Sezzle Up, para que sus pagos se informen a las agencias de crédito. Obtenga más información sobre el poder adquisitivo <a href='https://sezzle.com/how-it-works' target='_blank'> aquí </a> .";
|
|
250
|
+
var terms2 = "Sujeto a aprobación. <a href='https://legal.sezzle.com/' target='_blank'> Haga clic aquí para conocer los términos completos. </a> La fecha y el monto del primer pago pueden variar según la elegibilidad y el momento de finalización del pedido del comerciante.";
|
|
251
|
+
var today = "Hoy";
|
|
252
|
+
var week = "Semana";
|
|
253
|
+
var esTranslations = {
|
|
254
|
+
clickHere: clickHere,
|
|
255
|
+
closeModal: closeModal,
|
|
256
|
+
learnMore: learnMore,
|
|
257
|
+
locale: locale,
|
|
258
|
+
or: or,
|
|
259
|
+
ordersOver: ordersOver,
|
|
260
|
+
pieAlt: pieAlt,
|
|
261
|
+
sezzleHeader: sezzleHeader,
|
|
262
|
+
sezzleHeaderChild: sezzleHeaderChild,
|
|
263
|
+
sezzleInfo: sezzleInfo,
|
|
264
|
+
sezzleRowChild: sezzleRowChild,
|
|
265
|
+
singleFeatureCredit: singleFeatureCredit,
|
|
266
|
+
singleFeatureCreditBuilding: singleFeatureCreditBuilding,
|
|
267
|
+
singleFeatureOptions: singleFeatureOptions,
|
|
268
|
+
template: template,
|
|
269
|
+
terms1: terms1,
|
|
270
|
+
terms2: terms2,
|
|
271
|
+
today: today,
|
|
272
|
+
week: week
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
var css_248z = "@import url(\"https://fonts.cdnfonts.com/css/satoshi\");\n@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap\");\n.sezzle-modal-open {\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n}\n\n.sezzle-checkout-modal-lightbox * {\n vertical-align: baseline;\n box-sizing: border-box;\n line-height: normal;\n}\n\n.sezzle-checkout-modal-lightbox {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 99999998;\n background-color: rgba(5, 31, 52, 0.57);\n width: 100vw;\n height: 100vh;\n overflow-y: auto;\n overflow-x: hidden;\n color: unset;\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal-hidden {\n transition: all 0.4s ease;\n margin-top: 0;\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n margin-top: -384px;\n margin-left: -325px;\n z-index: 99999998;\n background-color: #fff;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n border-radius: 20px;\n color: #000;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n transition: all 0.4s ease;\n width: 650px;\n}\n@media (max-width: 650px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n position: relative;\n top: 0px;\n left: 0px;\n padding: 50px 20px;\n margin: 0;\n border-radius: 0;\n height: 100%;\n font-size: 15px;\n max-width: 100%;\n min-width: 320px;\n overflow: auto;\n }\n}\n@media (max-height: 767px) and (min-width: 651px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n position: relative;\n top: 0px;\n left: 0px;\n margin: 20px auto;\n }\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 {\n font-size: 18px;\n text-align: center;\n margin: 0 auto;\n}\n@media (max-width: 450px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 .sezzle-checkout-modal h1 {\n font-size: 16px;\n }\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n display: block;\n text-align: center;\n text-transform: none;\n font-size: 12pt;\n line-height: 25px;\n font-weight: 300;\n box-sizing: border-box;\n color: #7d8588;\n margin: 5px 0 !important;\n letter-spacing: 0.25px;\n}\n@media (max-width: 768px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n text-align: center;\n }\n}\n@media (max-width: 450px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n font-size: 11pt;\n text-align: center;\n letter-spacing: 0.5px;\n line-height: 18px;\n }\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n display: block;\n box-sizing: border-box;\n font-size: 11pt;\n opacity: 0.8;\n}\n@media (max-width: 450px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n font-size: 7.5pt;\n }\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal a {\n display: block;\n margin: 4px auto 0;\n color: #17ce6a;\n font-size: 8pt;\n font-weight: 500;\n text-transform: lowercase;\n text-align: left;\n letter-spacing: 0.25px;\n text-decoration: none;\n transition: 0.15s;\n opacity: 0.65;\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal a:hover {\n transition: 0.1s;\n opacity: 1;\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n font-size: 18px;\n text-align: center;\n margin: 0 auto;\n color: unset;\n}\n@media (max-width: 768px) {\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n text-align: center;\n }\n}\n.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 img {\n margin: 0 4px;\n display: inline-block;\n height: 30px !important;\n width: auto;\n position: relative;\n top: 6px;\n vertical-align: initial;\n}\n\n.sezzle-checkout-modal-hidden {\n width: 100%;\n height: 100%;\n -webkit-font-smoothing: antialiased;\n transition: all 0.4s ease;\n margin-top: 0;\n}\n@media screen and (min-width: 0px) and (max-width: 280px) {\n .sezzle-checkout-modal-hidden {\n display: none;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal {\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n height: auto;\n max-height: 90%;\n width: 343px;\n color: #000000;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n background-color: #fff;\n overflow: auto;\n padding: 20px 0;\n border-radius: 10px;\n box-sizing: border-box;\n}\n@media screen and (max-width: 374px) {\n .sezzle-checkout-modal-hidden .sezzle-modal {\n transform: scale(0.9) translate(-55%, -55%);\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n position: absolute;\n right: 16px;\n top: 16px;\n width: 24px;\n height: 24px;\n opacity: 0.2;\n cursor: pointer;\n padding: 0;\n outline: 0;\n background: 0 0;\n border: none;\n box-shadow: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:hover {\n opacity: 1;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 0.5;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal {\n opacity: 0.8;\n }\n .sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal:focus {\n opacity: 1;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::before {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal div button.close-sezzle-modal::after {\n position: absolute;\n left: 10px;\n content: \" \";\n top: 0;\n transform: rotate(-45deg);\n background-color: #595959;\n width: 2px;\n height: 15px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-logo {\n display: block;\n height: 24px;\n width: 98px;\n margin: 10px auto 0;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content {\n height: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-header {\n display: block;\n text-align: center;\n font-style: normal;\n font-size: 24px;\n font-weight: 600;\n line-height: 28px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin-top: 24px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: rgba(131, 51, 212, 0.05);\n border-radius: 16px;\n padding: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-row {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n color: #000000;\n margin: 0px 0px 12px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: #ffffff;\n border: 1px solid #8333d4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 16px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .due-today :first-child {\n padding: 0px 6px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments {\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #ffffff;\n border: 1px solid #8333d4;\n border-radius: 8px;\n margin: 0px 4px;\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .future-payments :first-child {\n padding: 0px 4px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item {\n padding: 16px 2px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item div:first-child svg {\n width: 40px;\n height: 40px;\n stroke: none;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0px;\n padding: 8px 0px 0px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .percentage {\n text-align: center;\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 20px;\n color: #8333d4;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n align-items: center;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-four-pay .sezzle-pie-area .payment-item .breakdown-row .due {\n text-align: center;\n font-style: normal;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n color: #5e5e5e;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 16px;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .sezzle-features .single-feature {\n text-align: center;\n font-style: normal;\n font-size: 17px;\n font-weight: 600;\n line-height: 22px;\n color: #000000;\n letter-spacing: -0.3px;\n margin: 8px auto;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 14px;\n color: #000000;\n}\n@media screen and (max-width: 600px) {\n .sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo {\n font-size: 12px;\n }\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo::first-letter {\n text-transform: capitalize;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a {\n color: #000000;\n text-decoration: underline;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:visited {\n color: #037269;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .promo a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms {\n text-align: center;\n font-style: normal;\n font-size: 11px;\n font-weight: 400;\n line-height: 13px;\n color: #5e5e5e;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms a {\n color: #8333d4;\n}\n.sezzle-checkout-modal-hidden .sezzle-modal .sezzle-modal-content .terms a:hover {\n color: #af0fda;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal {\n background-image: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-logo {\n width: 98px;\n background-image: url(https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg);\n background-repeat: no-repeat;\n background-position: 50%;\n height: 24px;\n margin: 10px auto 20px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content {\n height: auto;\n width: auto;\n text-align: center;\n padding: 0px 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-header {\n font-size: 24px;\n line-height: 30px;\n margin: 10px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-row {\n font-size: 15px;\n line-height: 20px;\n margin: 8px auto;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments {\n height: fit-content;\n margin: 20px auto;\n padding: 20px 0 0;\n border: 1px solid #e5e5e5;\n border-radius: 5px;\n max-width: 502px;\n display: block;\n flex-direction: column;\n align-items: center;\n padding: 0px;\n gap: 24px;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header {\n font-family: Satoshi, \"Open Sans\", sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 15px;\n line-height: 20px;\n display: block;\n align-items: center;\n text-align: center;\n padding: 15px;\n letter-spacing: -0.3px;\n border-bottom: 1px solid #e5e5e5;\n color: #000000;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-header span {\n font-size: 17px;\n line-height: 22px;\n font-weight: 700;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options {\n font-size: 12px;\n line-height: 14px;\n margin: 0px 20px 0;\n padding: 20px 0px;\n border-bottom: 1px solid #e5e5e5;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan {\n display: flex;\n justify-content: space-between;\n padding-bottom: 10px;\n font-size: 12px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount span {\n font-size: 17px;\n line-height: 22px;\n color: #8333d4;\n font-weight: 600;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .monthly-amount .per-month {\n font-size: 13px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan .term-length {\n border-radius: 100px;\n background: rgba(41, 211, 162, 0.1);\n color: #00804a;\n padding: 2px 8px;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details {\n display: flex;\n justify-content: space-between;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total {\n color: #5e5e5e;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .adjusted-total span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount {\n color: #5e5e5e;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .interest-amount span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr {\n color: #5e5e5e;\n font-size: 12px;\n width: fit-content;\n text-align: left;\n font-weight: 400;\n line-height: 16px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments .sezzle-lt-payment-options .plan-details .sample-apr span {\n display: block;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .sezzle-lt-payments:last-child {\n border: none;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .details {\n font-size: 17px;\n line-height: 22px;\n margin: 16px auto;\n font-weight: 600;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n letter-spacing: -0.3px;\n}\n.sezzle-checkout-modal-hidden.long-term .sezzle-modal .sezzle-modal-content .terms {\n font-size: 11px;\n line-height: 13px;\n color: #5e5e5e;\n margin: 10px auto 0;\n padding: 12px 0 0;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n font-family: Satoshi, \"Open Sans\", sans-serif;\n}";
|
|
276
|
+
styleInject(css_248z);
|
|
277
|
+
|
|
278
|
+
var translationsMap$1 = {
|
|
279
|
+
en: enTranslations,
|
|
280
|
+
fr: frTranslations,
|
|
281
|
+
es: esTranslations
|
|
282
|
+
};
|
|
283
|
+
var supportedLanguages = Object.keys(translationsMap$1);
|
|
284
|
+
var currentLang = getLanguage(supportedLanguages);
|
|
285
|
+
var translations = translationsMap$1[currentLang];
|
|
286
|
+
var modalHTML = "\n<section class=\"sezzle-checkout-modal-lightbox close-sezzle-modal\" role=\"dialog\" lang=\"".concat(translations.locale, "\"\n aria-label=\"").concat(translations.sezzleInfo, "\" aria-description=\"").concat(translations.learnMore, "\" style=\"display: block;\">\n <div id=\"sezzle-modal-container\" role=\"dialog\" aria-label=\"Sezzle Modal\" aria-description=\"").concat(translations.learnMore, "\"\n class=\"sezzle-checkout-modal-hidden\">\n <div class=\"sezzle-modal sezzle-modal-color\">\n <div><button role=\"button\" aria-label=\"").concat(translations.closeModal, "\" class=\"close-sezzle-modal\"></button></div>\n <div class=\"sezzle-logo\" title=\"Sezzle\"></div>\n <div id=\"sezzle-modal-core-content\" class=\"sezzle-modal-content\">\n <header class=\"sezzle-header\">").concat(translations.sezzleHeader, "\n </header>\n <p class=\"sezzle-row\">\n ").concat(translations.sezzleHeaderChild, "\n </p>\n <div class=\"sezzle-four-pay\">\n <p class=\"sezzle-row\">\n ").concat(translations.sezzleRowChild, "\n </p>\n <div class=\"sezzle-pie-area\">\n <div class=\"due-today\">\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 25%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -7.62939e-05C22.6264 -7.64088e-05 25.2272 0.51724 27.6537 1.52233C30.0802 2.52743 32.285 4.00062 34.1421 5.85779C35.9993 7.71496 37.4725 9.91974 38.4776 12.3463C39.4827 14.7728 40 17.3735 40 19.9999L30 19.9999C30 18.6867 29.7413 17.3863 29.2388 16.1731C28.7362 14.9598 27.9997 13.8574 27.0711 12.9289C26.1425 12.0003 25.0401 11.2637 23.8268 10.7611C22.6136 10.2586 21.3132 9.99992 20 9.99992L20 -7.62939e-05Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M40 19.9999C40 22.7613 37.7614 24.9998 35 24.9998C32.2386 24.9998 30 22.7613 30 19.9999C30 17.2385 32.2386 14.9998 35 14.9998C37.7614 14.9998 40 17.2385 40 19.9999Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"35\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.today, "</span>\n </p>\n </div>\n </div>\n <div class=\"future-payments\">\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 50%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M40 20C40 31.0457 31.0457 40 20 40C17.2386 40 15 37.7614 15 35C15 32.2386 17.2386 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10V0C31.0457 0 40 8.9543 40 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 2</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 75%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\" fill-opacity=\"0.05\"></path>\n <path\n d=\"M20 -8.74228e-07C23.9556 -1.04713e-06 27.8224 1.17298 31.1114 3.37061C34.4004 5.56824 36.9638 8.69181 38.4776 12.3463C39.9913 16.0009 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0009 39.9913 12.3463 38.4776C8.69181 36.9638 5.56824 34.4004 3.37061 31.1114C1.17298 27.8224 -7.48492e-07 23.9556 -8.74228e-07 20L10 20C10 21.9778 10.5865 23.9112 11.6853 25.5557C12.7841 27.2002 14.3459 28.4819 16.1732 29.2388C18.0004 29.9957 20.0111 30.1937 21.9509 29.8079C23.8907 29.422 25.6725 28.4696 27.0711 27.0711C28.4696 25.6725 29.422 23.8907 29.8079 21.9509C30.1937 20.0111 29.9957 18.0004 29.2388 16.1732C28.4819 14.3459 27.2002 12.7841 25.5557 11.6853C23.9112 10.5865 21.9778 10 20 10L20 -8.74228e-07Z\"\n fill=\"#8333D4\"></path>\n <path\n d=\"M10 20C10 22.7614 7.76142 25 5 25C2.23858 25 -8.74228e-07 22.7614 -8.74228e-07 20C-8.74228e-07 17.2386 2.23858 15 5 15C7.76142 15 10 17.2386 10 20Z\"\n fill=\"#8333D4\"></path>\n <circle cx=\"5\" cy=\"20\" r=\"5\" fill=\"#8333D4\"></circle>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 4</span>\n </p>\n </div>\n <div class=\"payment-item\">\n <div title=\"").concat(translations.pieAlt, " 100%\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM10 20C10 25.5228 14.4772 30 20 30C25.5228 30 30 25.5228 30 20C30 14.4772 25.5228 10 20 10C14.4772 10 10 14.4772 10 20Z\"\n fill=\"#8333D4\"></path>\n </svg>\n </div>\n <p class=\"breakdown-row\">\n <span class=\"percentage\">25%</span>\n <span class=\"due\">").concat(translations.week, " 6</span>\n </p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"sezzle-features\">\n <p class=\"single-feature\">\n ").concat(translations.singleFeatureCredit, "\n </p>\n <p class=\"single-feature\">\n ").concat(translations.singleFeatureOptions, "\n </p>\n <p class=\"single-feature\">\n ").concat(translations.singleFeatureCreditBuilding, "\n </p>\n </div>\n <p class=\"terms\">").concat(translations.terms1, "</p>\n <p class=\"terms\">").concat(translations.terms2, "</p>\n </div>\n </div>\n </div>\n</section>\n\n");
|
|
86
287
|
|
|
87
288
|
function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "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$2(o); }
|
|
88
289
|
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -90,31 +291,29 @@ function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t
|
|
|
90
291
|
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
91
292
|
function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey$2(descriptor.key), descriptor); } }
|
|
92
293
|
function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
93
|
-
function
|
|
94
|
-
function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
|
|
95
|
-
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf$2(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$2(this, result); }; }
|
|
294
|
+
function _callSuper$2(t, o, e) { return o = _getPrototypeOf$2(o), _possibleConstructorReturn$2(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf$2(t).constructor) : o.apply(t, e)); }
|
|
96
295
|
function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized$2(self); }
|
|
97
296
|
function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
98
|
-
function _isNativeReflectConstruct$2() {
|
|
297
|
+
function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
99
298
|
function _getPrototypeOf$2(o) { _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$2(o); }
|
|
299
|
+
function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf$2(subClass, superClass); }
|
|
300
|
+
function _setPrototypeOf$2(o, p) { _setPrototypeOf$2 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$2(o, p); }
|
|
100
301
|
function _defineProperty$2(obj, key, value) { key = _toPropertyKey$2(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
101
|
-
function _toPropertyKey$2(
|
|
102
|
-
function _toPrimitive$2(
|
|
302
|
+
function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
|
|
303
|
+
function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
103
304
|
var Modal = /*#__PURE__*/function (_React$Component) {
|
|
104
|
-
_inherits$2(Modal, _React$Component);
|
|
105
|
-
var _super = _createSuper$2(Modal);
|
|
106
305
|
function Modal(props) {
|
|
107
306
|
var _this;
|
|
108
307
|
_classCallCheck$2(this, Modal);
|
|
109
|
-
_this =
|
|
110
|
-
_defineProperty$2(
|
|
308
|
+
_this = _callSuper$2(this, Modal, [props]);
|
|
309
|
+
_defineProperty$2(_this, "toggleModalVisibility", function (isModalVisible) {
|
|
111
310
|
if (isModalVisible !== _this.state.isModalVisible) {
|
|
112
311
|
_this.setState(_objectSpread$2(_objectSpread$2({}, _this.state), {}, {
|
|
113
312
|
isModalVisible: isModalVisible
|
|
114
313
|
}));
|
|
115
314
|
}
|
|
116
315
|
});
|
|
117
|
-
_defineProperty$2(
|
|
316
|
+
_defineProperty$2(_this, "modalCloseHandler", function (event) {
|
|
118
317
|
_this.props.callbackModalClose(_this.props.modalType);
|
|
119
318
|
});
|
|
120
319
|
_this.state = {
|
|
@@ -123,22 +322,23 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
123
322
|
};
|
|
124
323
|
return _this;
|
|
125
324
|
}
|
|
126
|
-
|
|
325
|
+
_inherits$2(Modal, _React$Component);
|
|
326
|
+
return _createClass$2(Modal, [{
|
|
127
327
|
key: "componentDidMount",
|
|
128
328
|
value: function componentDidMount() {
|
|
129
329
|
var _this2 = this;
|
|
130
|
-
document.querySelector(
|
|
330
|
+
document.querySelector("html").appendChild(this.state.modalElement);
|
|
131
331
|
var sezzleModal;
|
|
132
|
-
if (this.props.modalType ===
|
|
133
|
-
sezzleModal = document.querySelector(
|
|
332
|
+
if (this.props.modalType === "afterpay") {
|
|
333
|
+
sezzleModal = document.querySelector(".sezzle-ap-modal");
|
|
134
334
|
} else {
|
|
135
|
-
sezzleModal = document.querySelector(
|
|
335
|
+
sezzleModal = document.querySelector(".sezzle-modal");
|
|
136
336
|
}
|
|
137
|
-
sezzleModal.addEventListener(
|
|
337
|
+
sezzleModal.addEventListener("click", function (event) {
|
|
138
338
|
return event.stopPropagation();
|
|
139
339
|
});
|
|
140
|
-
document.querySelectorAll(
|
|
141
|
-
return modal.addEventListener(
|
|
340
|
+
document.querySelectorAll(".close-sezzle-modal").length && document.querySelectorAll(".close-sezzle-modal").forEach(function (modal) {
|
|
341
|
+
return modal.addEventListener("click", function (event) {
|
|
142
342
|
return _this2.modalCloseHandler(event);
|
|
143
343
|
});
|
|
144
344
|
});
|
|
@@ -151,9 +351,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
151
351
|
}, {
|
|
152
352
|
key: "componentWillUnmount",
|
|
153
353
|
value: function componentWillUnmount() {
|
|
154
|
-
var modals = document.querySelector(
|
|
354
|
+
var modals = document.querySelector("html").getElementsByClassName("sezzle-checkout-modal-lightbox");
|
|
155
355
|
for (var i = 0; i < modals.length; i++) {
|
|
156
|
-
document.querySelector(
|
|
356
|
+
document.querySelector("html").removeChild(modals[i]);
|
|
157
357
|
}
|
|
158
358
|
}
|
|
159
359
|
}, {
|
|
@@ -165,63 +365,30 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
165
365
|
key: "getDerivedStateFromProps",
|
|
166
366
|
value: function getDerivedStateFromProps(props, state) {
|
|
167
367
|
if (!state.modalElement) {
|
|
168
|
-
var modalElement = document.createElement(
|
|
169
|
-
var currentLang = getSupportedLanguage();
|
|
368
|
+
var modalElement = document.createElement("div");
|
|
170
369
|
switch (props.modalType) {
|
|
171
|
-
case
|
|
172
|
-
modalElement
|
|
173
|
-
modalElement.innerHTML = currentLang === 'fr' ? apModalFrenchHTML : apModalEnglishHTML;
|
|
370
|
+
case "afterpay":
|
|
371
|
+
getAPModal(modalElement);
|
|
174
372
|
break;
|
|
175
373
|
default:
|
|
176
|
-
modalElement.className =
|
|
177
|
-
modalElement.innerHTML =
|
|
374
|
+
modalElement.className = "sezzle-checkout-modal-lightbox close-sezzle-modal";
|
|
375
|
+
modalElement.innerHTML = modalHTML;
|
|
178
376
|
}
|
|
179
377
|
state = _objectSpread$2(_objectSpread$2({}, state), {}, {
|
|
180
378
|
modalElement: modalElement
|
|
181
379
|
});
|
|
182
380
|
}
|
|
183
|
-
state.modalElement.style.display = state.isModalVisible ?
|
|
381
|
+
state.modalElement.style.display = state.isModalVisible ? "block" : "none";
|
|
184
382
|
return state;
|
|
185
383
|
}
|
|
186
384
|
}]);
|
|
187
|
-
|
|
188
|
-
}(React.Component);
|
|
385
|
+
}(React__default["default"].Component);
|
|
189
386
|
Modal.propTypes = {
|
|
190
|
-
toggleModalVisibility:
|
|
191
|
-
modalType:
|
|
192
|
-
callbackModalClose:
|
|
387
|
+
toggleModalVisibility: PropTypes__default["default"].bool,
|
|
388
|
+
modalType: PropTypes__default["default"].string,
|
|
389
|
+
callbackModalClose: PropTypes__default["default"].func
|
|
193
390
|
};
|
|
194
391
|
|
|
195
|
-
function styleInject(css, ref) {
|
|
196
|
-
if ( ref === void 0 ) ref = {};
|
|
197
|
-
var insertAt = ref.insertAt;
|
|
198
|
-
|
|
199
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
200
|
-
|
|
201
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
202
|
-
var style = document.createElement('style');
|
|
203
|
-
style.type = 'text/css';
|
|
204
|
-
|
|
205
|
-
if (insertAt === 'top') {
|
|
206
|
-
if (head.firstChild) {
|
|
207
|
-
head.insertBefore(style, head.firstChild);
|
|
208
|
-
} else {
|
|
209
|
-
head.appendChild(style);
|
|
210
|
-
}
|
|
211
|
-
} else {
|
|
212
|
-
head.appendChild(style);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
if (style.styleSheet) {
|
|
216
|
-
style.styleSheet.cssText = css;
|
|
217
|
-
} else {
|
|
218
|
-
style.appendChild(document.createTextNode(css));
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
var css = ".sezzle-checkout-modal-lightbox * {\n\tvertical-align: baseline;\n\tbox-sizing: border-box;\n\tline-height: normal;\n }\n\n .sezzle-checkout-modal-lightbox {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 99999998;\n\tbackground-color: rgba(5, 31, 52, 0.57);\n\twidth: 100vw;\n\theight: 100vh;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tcolor: unset;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal-hidden {\n\ttransition: all 0.4s ease;\n\tmargin-top: 0;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\tposition: fixed;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -384px;\n\tmargin-left: -325px;\n\tz-index: 99999998;\n\tbackground-color: #fff;\n\tbox-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);\n\tborder-radius: 20px;\n\tcolor: #000;\n\tfont-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n\ttransition: all 0.4s ease;\n\twidth: 650px;\n }\n @media (max-width: 650px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t padding: 50px 20px;\n\t margin: 0;\n\t border-radius: 0;\n\t height: 100%;\n\t font-size: 15px;\n\t max-width: 100%;\n\t min-width: 320px;\n\t overflow: auto;\n\t}\n }\n @media (max-height: 767px) and (min-width: 651px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal {\n\t position: relative;\n\t top: 0px;\n\t left: 0px;\n\t margin: 20px auto;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h1 .sezzle-checkout-modal h1 {\n\t font-size: 16px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\tdisplay: block;\n\ttext-align: center;\n\ttext-transform: none;\n\tfont-size: 12pt;\n\tline-height: 25px;\n\tfont-weight: 300;\n\tbox-sizing: border-box;\n\tcolor: #7d8588;\n\tmargin: 5px 0 !important;\n\tletter-spacing: 0.25px;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t text-align: center;\n\t}\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p {\n\t font-size: 11pt;\n\t text-align: center;\n\t letter-spacing: 0.5px;\n\t line-height: 18px;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\tfont-size: 11pt;\n\topacity: 0.8;\n }\n @media (max-width: 450px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal p small {\n\t font-size: 7.5pt;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a {\n\tdisplay: block;\n\tmargin: 4px auto 0;\n\tcolor: #17ce6a;\n\tfont-size: 8pt;\n\tfont-weight: 500;\n\ttext-transform: lowercase;\n\ttext-align: left;\n\tletter-spacing: 0.25px;\n\ttext-decoration: none;\n\ttransition: 0.15s;\n\topacity: 0.65;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal a:hover {\n\ttransition: 0.1s;\n\topacity: 1;\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\tfont-size: 18px;\n\ttext-align: center;\n\tmargin: 0 auto;\n\tcolor: unset;\n }\n @media (max-width: 768px) {\n\t.sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 {\n\t text-align: center;\n\t}\n }\n .sezzle-checkout-modal-lightbox .sezzle-checkout-modal h2 img {\n\tmargin: 0 4px;\n\tdisplay: inline-block;\n\theight: 30px !important;\n\twidth: auto;\n\tposition: relative;\n\ttop: 6px;\n\tvertical-align: initial;\n }\n\n .sezzle-shopify-info-button {\n\tdisplay: block;\n\toverflow: hidden;\n\tmargin: 0;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper:focus {\n\toutline: 5px auto;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-left {\n\ttext-align: left;\n\tfloat: left;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-center {\n\ttext-align: center;\n\tfloat: none;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper.sezzle-right {\n\ttext-align: right;\n\tfloat: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text {\n\twidth: unset;\n\tmargin: auto;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tword-wrap: normal;\n\tline-height: 18px;\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tfont-family: inherit;\n\tcolor: inherit;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-left {\n\ttext-align: left;\n\tmargin: 0;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-center {\n\ttext-align: center;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text.sezzle-right {\n\tfloat: right;\n\ttext-align: right;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-payment-amount {\n\tzoom: 1;\n\tfloat: none;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n\tfont-weight: 900;\n\tfont-size: 1.2em;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-logo {\n\tdisplay: inline-block;\n\tbox-sizing: border-box;\n\theight: 18px;\n\twidth: auto;\n\topacity: 1;\n\tfloat: none;\n\tmargin: 0;\n\tmargin-bottom: -3px;\n\tborder: 0;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: baseline;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-info-icon {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0px 0px 0px 3px;\n\tbackground: none;\n\tvertical-align: baseline;\n\tline-height: initial;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text .sezzle-ap-logo {\n\theight: 45px;\n\tmargin: 0;\n\tborder: 0;\n\tpadding: 0;\n\tvertical-align: middle;\n }\n .sezzle-shopify-info-button .sezzle-checkout-button-wrapper .sezzle-button-text button.ap-modal-info-link {\n\tdisplay: inline;\n\twidth: auto;\n\tmargin: 0;\n\tbox-shadow: none;\n\tborder: none;\n\tpadding: 0;\n\tbackground: none;\n\tvertical-align: middle;\n\tline-height: inherit;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tcursor: pointer;\n }\n\n .sezzle-hidden {\n\tdisplay: none;\n\tvisibility: hidden;\n }\n";
|
|
223
|
-
styleInject(css);
|
|
224
|
-
|
|
225
392
|
function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "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$1(o); }
|
|
226
393
|
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
227
394
|
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -229,22 +396,25 @@ function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (k
|
|
|
229
396
|
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
230
397
|
function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey$1(descriptor.key), descriptor); } }
|
|
231
398
|
function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
232
|
-
function _toPropertyKey$1(
|
|
233
|
-
function _toPrimitive$1(
|
|
234
|
-
function
|
|
235
|
-
function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
|
|
236
|
-
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn$1(this, result); }; }
|
|
399
|
+
function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
|
|
400
|
+
function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
401
|
+
function _callSuper$1(t, o, e) { return o = _getPrototypeOf$1(o), _possibleConstructorReturn$1(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf$1(t).constructor) : o.apply(t, e)); }
|
|
237
402
|
function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized$1(self); }
|
|
238
403
|
function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
239
|
-
function _isNativeReflectConstruct$1() {
|
|
404
|
+
function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
240
405
|
function _getPrototypeOf$1(o) { _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$1(o); }
|
|
406
|
+
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
|
|
407
|
+
function _setPrototypeOf$1(o, p) { _setPrototypeOf$1 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf$1(o, p); }
|
|
408
|
+
var translationsMap = {
|
|
409
|
+
en: enTranslations,
|
|
410
|
+
fr: frTranslations,
|
|
411
|
+
es: esTranslations
|
|
412
|
+
};
|
|
241
413
|
var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
242
|
-
_inherits$1(SezzleWidgetText, _React$Component);
|
|
243
|
-
var _super = _createSuper$1(SezzleWidgetText);
|
|
244
414
|
function SezzleWidgetText(props) {
|
|
245
415
|
var _this;
|
|
246
416
|
_classCallCheck$1(this, SezzleWidgetText);
|
|
247
|
-
_this =
|
|
417
|
+
_this = _callSuper$1(this, SezzleWidgetText, [props]);
|
|
248
418
|
_this.state = {
|
|
249
419
|
config: _this.props.config,
|
|
250
420
|
sezzle: false,
|
|
@@ -253,7 +423,8 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
253
423
|
};
|
|
254
424
|
return _this;
|
|
255
425
|
}
|
|
256
|
-
|
|
426
|
+
_inherits$1(SezzleWidgetText, _React$Component);
|
|
427
|
+
return _createClass$1(SezzleWidgetText, [{
|
|
257
428
|
key: "renderSezzleWidgetText",
|
|
258
429
|
value: function renderSezzleWidgetText() {
|
|
259
430
|
var _this2 = this;
|
|
@@ -264,25 +435,18 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
264
435
|
'black-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_BlackAlt.svg',
|
|
265
436
|
'white-flat': 'https://media.sezzle.com/branding/2.0/Sezzle_Logo_WhiteAlt.svg'
|
|
266
437
|
};
|
|
267
|
-
var
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
};
|
|
271
|
-
var clickHere = {
|
|
272
|
-
en: 'Click here to learn more about Sezzle',
|
|
273
|
-
fr: 'Cliquez ici pour en savoir plus sur Sezzle'
|
|
274
|
-
};
|
|
275
|
-
var ordersOver = {
|
|
276
|
-
en: ' for orders over',
|
|
277
|
-
fr: ' pour les achats de plus de'
|
|
278
|
-
};
|
|
279
|
-
var language = getSupportedLanguage();
|
|
438
|
+
var supportedLanguages = Object.keys(translationsMap);
|
|
439
|
+
var language = getLanguage(supportedLanguages);
|
|
440
|
+
var translations = translationsMap[language];
|
|
280
441
|
var subtemplates = [];
|
|
281
|
-
template
|
|
442
|
+
translations.template.split('%%').forEach(function (subTemplate, index) {
|
|
282
443
|
switch (subTemplate) {
|
|
444
|
+
case 'numberOfPayments':
|
|
445
|
+
subtemplates.push(numberOfPayments);
|
|
446
|
+
break;
|
|
283
447
|
case 'price':
|
|
284
448
|
// eslint-disable-next-line no-case-declarations
|
|
285
|
-
var priceElement = /*#__PURE__*/
|
|
449
|
+
var priceElement = /*#__PURE__*/React__default["default"].createElement("span", {
|
|
286
450
|
className: "sezzle-payment-amount sezzle-button-text",
|
|
287
451
|
key: index
|
|
288
452
|
}, getFormattedPrice(_this2.state.config.price, numberOfPayments));
|
|
@@ -290,7 +454,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
290
454
|
break;
|
|
291
455
|
case 'logo':
|
|
292
456
|
// eslint-disable-next-line no-case-declarations
|
|
293
|
-
var logoElement = /*#__PURE__*/
|
|
457
|
+
var logoElement = /*#__PURE__*/React__default["default"].createElement("img", {
|
|
294
458
|
alt: "Sezzle",
|
|
295
459
|
className: "sezzle-logo szl-".concat(_this2.state.config.theme === 'dark' || _this2.state.config.theme === 'white-flat' ? 'dark' : 'light', "-image"),
|
|
296
460
|
src: logoURLs[_this2.state.config.theme] || logoURLs.light,
|
|
@@ -310,8 +474,8 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
310
474
|
break;
|
|
311
475
|
case 'info':
|
|
312
476
|
// eslint-disable-next-line no-case-declarations
|
|
313
|
-
var infoElement = /*#__PURE__*/
|
|
314
|
-
"aria-label": "".concat(clickHere
|
|
477
|
+
var infoElement = /*#__PURE__*/React__default["default"].createElement("div", {
|
|
478
|
+
"aria-label": "".concat(translations.clickHere),
|
|
315
479
|
className: "sezzle-info-icon",
|
|
316
480
|
key: index,
|
|
317
481
|
onClick: function onClick() {
|
|
@@ -322,8 +486,8 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
322
486
|
break;
|
|
323
487
|
case 'afterpay':
|
|
324
488
|
if (_this2.state.config.includeAPModal) {
|
|
325
|
-
subtemplates.push(
|
|
326
|
-
var apLogo = /*#__PURE__*/
|
|
489
|
+
subtemplates.push("".concat(translations.or));
|
|
490
|
+
var apLogo = /*#__PURE__*/React__default["default"].createElement("img", {
|
|
327
491
|
className: "sezzle-ap-logo ap-modal-info-link no-sezzle-info",
|
|
328
492
|
src: 'https://media.sezzle.com/sezzle-credit-website-assets/ap-badge-black-on-mint.svg',
|
|
329
493
|
onClick: function onClick() {
|
|
@@ -337,7 +501,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
337
501
|
break;
|
|
338
502
|
case 'min-price':
|
|
339
503
|
if (_this2.state.config.minPrice && !_this2.state.config.includeAPModal) {
|
|
340
|
-
subtemplates.push("".concat(ordersOver
|
|
504
|
+
subtemplates.push(" ".concat(translations.ordersOver, " $").concat(_this2.state.config.minPrice));
|
|
341
505
|
}
|
|
342
506
|
break;
|
|
343
507
|
default:
|
|
@@ -368,9 +532,9 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
368
532
|
key: "render",
|
|
369
533
|
value: function render() {
|
|
370
534
|
var _this3 = this;
|
|
371
|
-
return /*#__PURE__*/
|
|
535
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
372
536
|
className: "sezzle-shopify-info-button sezzle-".concat(this.state.config.merchantId || '')
|
|
373
|
-
}, /*#__PURE__*/
|
|
537
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
374
538
|
"aria-haspopup": "dialog",
|
|
375
539
|
role: "button",
|
|
376
540
|
tabIndex: "0",
|
|
@@ -378,7 +542,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
378
542
|
style: {
|
|
379
543
|
cursor: 'pointer'
|
|
380
544
|
}
|
|
381
|
-
}, /*#__PURE__*/
|
|
545
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
382
546
|
className: "sezzle-button-text sezzle-".concat(this.state.config.alignment || 'auto', " szl-").concat(this.state.config.theme === 'dark' || this.state.config.theme === 'white-flat' ? 'dark' : 'light'),
|
|
383
547
|
style: {
|
|
384
548
|
fontWeight: this.state.config.fontWeight || 500,
|
|
@@ -387,7 +551,7 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
387
551
|
color: this.state.config.textColor || 'inherit'
|
|
388
552
|
}
|
|
389
553
|
}, this.renderSezzleWidgetText())), this.state.modalsToShow.map(function (modal, index) {
|
|
390
|
-
return /*#__PURE__*/
|
|
554
|
+
return /*#__PURE__*/React__default["default"].createElement(Modal, {
|
|
391
555
|
modalType: modal,
|
|
392
556
|
key: index,
|
|
393
557
|
toggleModalVisibility: _this3.state[modal],
|
|
@@ -407,10 +571,9 @@ var SezzleWidgetText = /*#__PURE__*/function (_React$Component) {
|
|
|
407
571
|
return state;
|
|
408
572
|
}
|
|
409
573
|
}]);
|
|
410
|
-
|
|
411
|
-
}(React.Component);
|
|
574
|
+
}(React__default["default"].Component);
|
|
412
575
|
SezzleWidgetText.propTypes = {
|
|
413
|
-
config:
|
|
576
|
+
config: PropTypes__default["default"].object
|
|
414
577
|
};
|
|
415
578
|
|
|
416
579
|
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); }
|
|
@@ -420,22 +583,20 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
|
|
|
420
583
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
421
584
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
422
585
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
423
|
-
function _toPropertyKey(
|
|
424
|
-
function _toPrimitive(
|
|
425
|
-
function
|
|
426
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
427
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
586
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
587
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
588
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
428
589
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
429
590
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
430
|
-
function _isNativeReflectConstruct() {
|
|
591
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
431
592
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
593
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
594
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
432
595
|
var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
|
|
433
|
-
_inherits(SezzleWidgetWrapper, _React$Component);
|
|
434
|
-
var _super = _createSuper(SezzleWidgetWrapper);
|
|
435
596
|
function SezzleWidgetWrapper(props) {
|
|
436
597
|
var _this;
|
|
437
598
|
_classCallCheck(this, SezzleWidgetWrapper);
|
|
438
|
-
_this =
|
|
599
|
+
_this = _callSuper(this, SezzleWidgetWrapper, [props]);
|
|
439
600
|
_this.state = {
|
|
440
601
|
sezzleConfig: {
|
|
441
602
|
price: _this.props.price || 0,
|
|
@@ -454,10 +615,11 @@ var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
|
|
|
454
615
|
};
|
|
455
616
|
return _this;
|
|
456
617
|
}
|
|
457
|
-
|
|
618
|
+
_inherits(SezzleWidgetWrapper, _React$Component);
|
|
619
|
+
return _createClass(SezzleWidgetWrapper, [{
|
|
458
620
|
key: "render",
|
|
459
621
|
value: function render() {
|
|
460
|
-
return /*#__PURE__*/
|
|
622
|
+
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SezzleWidgetText, {
|
|
461
623
|
config: this.state.sezzleConfig
|
|
462
624
|
}));
|
|
463
625
|
}
|
|
@@ -476,20 +638,19 @@ var SezzleWidgetWrapper = /*#__PURE__*/function (_React$Component) {
|
|
|
476
638
|
return state;
|
|
477
639
|
}
|
|
478
640
|
}]);
|
|
479
|
-
|
|
480
|
-
}(React.Component);
|
|
641
|
+
}(React__default["default"].Component);
|
|
481
642
|
SezzleWidgetWrapper.propTypes = {
|
|
482
|
-
price:
|
|
483
|
-
merchantId:
|
|
484
|
-
theme:
|
|
485
|
-
alignment:
|
|
486
|
-
fontWeight:
|
|
487
|
-
fontFamily:
|
|
488
|
-
fontSize:
|
|
489
|
-
textColor:
|
|
490
|
-
logoSize:
|
|
491
|
-
minPrice:
|
|
492
|
-
includeAPModal:
|
|
643
|
+
price: PropTypes__default["default"].string.isRequired,
|
|
644
|
+
merchantId: PropTypes__default["default"].string.isRequired,
|
|
645
|
+
theme: PropTypes__default["default"].string,
|
|
646
|
+
alignment: PropTypes__default["default"].string,
|
|
647
|
+
fontWeight: PropTypes__default["default"].number,
|
|
648
|
+
fontFamily: PropTypes__default["default"].string,
|
|
649
|
+
fontSize: PropTypes__default["default"].number,
|
|
650
|
+
textColor: PropTypes__default["default"].string,
|
|
651
|
+
logoSize: PropTypes__default["default"].number,
|
|
652
|
+
minPrice: PropTypes__default["default"].number,
|
|
653
|
+
includeAPModal: PropTypes__default["default"].bool
|
|
493
654
|
};
|
|
494
655
|
|
|
495
656
|
module.exports = SezzleWidgetWrapper;
|