straumur-web-component 0.2.0 → 0.2.2
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 +265 -94
- package/dist/index.d.cts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.mjs +257 -83
- package/package.json +11 -3
package/dist/index.cjs
CHANGED
|
@@ -25,7 +25,7 @@ __export(index_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(index_exports);
|
|
26
26
|
|
|
27
27
|
// src/straumur-checkout.tsx
|
|
28
|
-
var
|
|
28
|
+
var import_preact32 = require("preact");
|
|
29
29
|
var import_adyen = require("@adyen/adyen-web/styles/adyen.css");
|
|
30
30
|
|
|
31
31
|
// #style-inject:#style-inject
|
|
@@ -57,7 +57,7 @@ styleInject(':root {\n --straumur__color-primary: #002649;\n --straumur__color
|
|
|
57
57
|
var getEnv = () => {
|
|
58
58
|
return {
|
|
59
59
|
STAGING_BASE_URL: "https://checkout-api.staging.straumur.is/api/v1/embeddedcheckout",
|
|
60
|
-
PRODUCTION_BASE_URL: "",
|
|
60
|
+
PRODUCTION_BASE_URL: "https://greidslugatt.straumur.is/api/v1/embeddedcheckout",
|
|
61
61
|
GET_PAYMENT_METHODS_URL: "payment-methods",
|
|
62
62
|
POST_PAYMENT_URL: "payment",
|
|
63
63
|
POST_DETAILS_URL: "details",
|
|
@@ -145,7 +145,7 @@ async function setupPaymentMethods(environment, sessionId) {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
// src/features/straumur-checkout-container.tsx
|
|
148
|
-
var
|
|
148
|
+
var import_preact31 = require("preact");
|
|
149
149
|
|
|
150
150
|
// src/features/card/card-component.tsx
|
|
151
151
|
var import_preact17 = require("preact");
|
|
@@ -245,7 +245,8 @@ var translations = {
|
|
|
245
245
|
"cards.securityCode3DigitsInfo": "3-digit on the back of the card",
|
|
246
246
|
"cards.securityCode4DigitsInfo": "4-digit on the back of the card",
|
|
247
247
|
"cards.storePaymentMethod": "Store payment information",
|
|
248
|
-
"
|
|
248
|
+
"googlePay.title": "Google Pay",
|
|
249
|
+
"applePay.title": "Apple Pay",
|
|
249
250
|
"stored-cards.expiryDate": "Expiry date",
|
|
250
251
|
"stored-cards.securityCode3Digits": "Security code",
|
|
251
252
|
"stored-cards.securityCode3DigitsOptional": "Security code (optional)",
|
|
@@ -265,6 +266,7 @@ var translations = {
|
|
|
265
266
|
"error.failedToSubmitPaymentDetails": "Failed to submit payment details",
|
|
266
267
|
"error.paymentDetailsFailed": "Payment details failed",
|
|
267
268
|
"error.googlePayNotAvailable": "Google Pay not available",
|
|
269
|
+
"error.applePayNotAvailable": "Apple Pay not available",
|
|
268
270
|
"error.failedToSubmitRemoveStoredPaymentCard": "Failed to remove stored payment card",
|
|
269
271
|
"error.failedToRemoveStoredPaymentCard": "Stored payment card was not removed"
|
|
270
272
|
},
|
|
@@ -277,7 +279,8 @@ var translations = {
|
|
|
277
279
|
"cards.securityCode3DigitsInfo": "3 t\xF6lustafir aftan \xE1 kortinu",
|
|
278
280
|
"cards.securityCode4DigitsInfo": "4 t\xF6lustafir aftan \xE1 kortinu",
|
|
279
281
|
"cards.storePaymentMethod": "Vista grei\xF0sluuppl\xFDsingar",
|
|
280
|
-
"
|
|
282
|
+
"googlePay.title": "Google Pay",
|
|
283
|
+
"applePay.title": "Apple Pay",
|
|
281
284
|
"stored-cards.expiryDate": "Gildisdagur",
|
|
282
285
|
"stored-cards.securityCode3Digits": "\xD6ryggisk\xF3\xF0i",
|
|
283
286
|
"stored-cards.securityCode3DigitsOptional": "\xD6ryggisk\xF3\xF0i (valkv\xE6tt)",
|
|
@@ -297,6 +300,7 @@ var translations = {
|
|
|
297
300
|
"error.failedToSubmitPaymentDetails": "Mist\xF3kst a\xF0 senda grei\xF0sluuppl\xFDsingar",
|
|
298
301
|
"error.paymentDetailsFailed": "Mist\xF3kst a\xF0 s\xE6kja grei\xF0sluuppl\xFDsingar",
|
|
299
302
|
"error.googlePayNotAvailable": "Google Pay ekki \xED bo\xF0i",
|
|
303
|
+
"error.applePayNotAvailable": "Apple Pay ekki \xED bo\xF0i",
|
|
300
304
|
"error.failedToSubmitRemoveStoredPaymentCard": "Mist\xF3kst a\xF0 fjarl\xE6gja geymdan grei\xF0slum\xE1ta",
|
|
301
305
|
"error.failedToRemoveStoredPaymentCard": "Geymdur grei\xF0slum\xE1ti var ekki fjarl\xE6g\xF0ur"
|
|
302
306
|
}
|
|
@@ -986,7 +990,6 @@ var checkmark_default = CheckmarkIcon;
|
|
|
986
990
|
|
|
987
991
|
// src/features/card/card-component.tsx
|
|
988
992
|
function CardComponent({ configuration, paymentMethods }) {
|
|
989
|
-
var _a, _b, _c;
|
|
990
993
|
const cardElementRef = (0, import_hooks4.useRef)(null);
|
|
991
994
|
const adyenCardRef = (0, import_hooks4.useRef)();
|
|
992
995
|
const customCardRef = (0, import_hooks4.useRef)();
|
|
@@ -1000,7 +1003,7 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1000
1003
|
encryptedExpiryDate: { visible: false },
|
|
1001
1004
|
encryptedSecurityCode: { visible: false }
|
|
1002
1005
|
});
|
|
1003
|
-
if (!
|
|
1006
|
+
if (!paymentMethods.paymentMethods.paymentMethods?.some((x) => x.type === "scheme")) {
|
|
1004
1007
|
return null;
|
|
1005
1008
|
}
|
|
1006
1009
|
const {
|
|
@@ -1087,7 +1090,7 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1087
1090
|
const handleBoxChange = () => {
|
|
1088
1091
|
setActivePaymentMethod("card");
|
|
1089
1092
|
};
|
|
1090
|
-
if (
|
|
1093
|
+
if (paymentMethods.paymentMethods?.paymentMethods?.length === 0) {
|
|
1091
1094
|
return null;
|
|
1092
1095
|
}
|
|
1093
1096
|
const brands = schemeBrands.map((x) => {
|
|
@@ -1124,7 +1127,7 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1124
1127
|
const { resultCode, action } = response;
|
|
1125
1128
|
if (resultCode === "RedirectShopper" || resultCode === "IdentifyShopper") {
|
|
1126
1129
|
setThreeDSecureActive(true);
|
|
1127
|
-
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef
|
|
1130
|
+
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef?.current);
|
|
1128
1131
|
return;
|
|
1129
1132
|
}
|
|
1130
1133
|
actions.resolve({ resultCode, action });
|
|
@@ -1197,7 +1200,7 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1197
1200
|
/* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__form--field-wrapper" }, /* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__form--wrapper" }, /* @__PURE__ */ (0, import_preact17.h)(
|
|
1198
1201
|
"label",
|
|
1199
1202
|
{
|
|
1200
|
-
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "
|
|
1203
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1201
1204
|
},
|
|
1202
1205
|
i18n(configuration.locale, "cards.expiryDate")
|
|
1203
1206
|
), /* @__PURE__ */ (0, import_preact17.h)(
|
|
@@ -1258,7 +1261,7 @@ var import_preact19 = require("preact");
|
|
|
1258
1261
|
var import_hooks5 = require("preact/hooks");
|
|
1259
1262
|
|
|
1260
1263
|
// src/features/google-pay/google-pay-component.css
|
|
1261
|
-
styleInject('.straumur__google-pay-component {\n position: relative;\n cursor: pointer;\n background: white;\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__google-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__google-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__google-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__google-pay-component__content:hover .straumur__google-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__google-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__google-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__google-pay-component__expandable {\n background: white;\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__google-pay-component__radio-selector:checked ~ .straumur__google-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__google-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1264
|
+
styleInject('.straumur__google-pay-component {\n position: relative;\n cursor: pointer;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__google-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__google-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__google-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__google-pay-component__content:hover .straumur__google-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__google-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__google-pay-component__radio-selector:checked + .straumur__google-pay-component__content .straumur__google-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__google-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__google-pay-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__google-pay-component__radio-selector:checked ~ .straumur__google-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__google-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1262
1265
|
|
|
1263
1266
|
// src/features/google-pay/google-pay-component.tsx
|
|
1264
1267
|
var import_adyen_web2 = require("@adyen/adyen-web");
|
|
@@ -1328,7 +1331,6 @@ var googlepay_default = GooglePayIcon;
|
|
|
1328
1331
|
|
|
1329
1332
|
// src/features/google-pay/google-pay-component.tsx
|
|
1330
1333
|
function GooglePayComponent({ configuration, paymentMethods }) {
|
|
1331
|
-
var _a;
|
|
1332
1334
|
const googlePayElementRef = (0, import_hooks5.useRef)(null);
|
|
1333
1335
|
const adyenCardRef = (0, import_hooks5.useRef)();
|
|
1334
1336
|
const googlePayRef = (0, import_hooks5.useRef)();
|
|
@@ -1412,7 +1414,7 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1412
1414
|
const { resultCode, action } = response;
|
|
1413
1415
|
if (resultCode === "RedirectShopper" || resultCode === "IdentifyShopper") {
|
|
1414
1416
|
setThreeDSecureActive(true);
|
|
1415
|
-
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef
|
|
1417
|
+
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef?.current);
|
|
1416
1418
|
return;
|
|
1417
1419
|
}
|
|
1418
1420
|
actions.resolve({ resultCode, action });
|
|
@@ -1447,7 +1449,7 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1447
1449
|
handleError("error.paymentUnsuccessful");
|
|
1448
1450
|
}
|
|
1449
1451
|
}
|
|
1450
|
-
const hasGooglePay =
|
|
1452
|
+
const hasGooglePay = paymentMethods.paymentMethods.paymentMethods?.some((x) => x.type === "googlepay");
|
|
1451
1453
|
if (!hasGooglePay) {
|
|
1452
1454
|
return null;
|
|
1453
1455
|
}
|
|
@@ -1459,39 +1461,208 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1459
1461
|
checked: activePaymentMethod === "googlepay",
|
|
1460
1462
|
onChange: handleBoxChange
|
|
1461
1463
|
}
|
|
1462
|
-
), /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component__content" }, /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component--circle" }), /* @__PURE__ */ (0, import_preact19.h)(googlepay_default, null), /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component--text" }, i18n(configuration.locale, "
|
|
1464
|
+
), /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component__content" }, /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component--circle" }), /* @__PURE__ */ (0, import_preact19.h)(googlepay_default, null), /* @__PURE__ */ (0, import_preact19.h)("span", { className: "straumur__google-pay-component--text" }, i18n(configuration.locale, "googlePay.title"))), /* @__PURE__ */ (0, import_preact19.h)("div", { className: "straumur__google-pay-component__expandable" }, /* @__PURE__ */ (0, import_preact19.h)("div", { ref: googlePayElementRef })));
|
|
1463
1465
|
}
|
|
1464
1466
|
var google_pay_component_default = GooglePayComponent;
|
|
1465
1467
|
|
|
1468
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1469
|
+
var import_preact21 = require("preact");
|
|
1470
|
+
var import_hooks6 = require("preact/hooks");
|
|
1471
|
+
|
|
1472
|
+
// src/features/apple-pay/apple-pay-component.css
|
|
1473
|
+
styleInject('.straumur__apple-pay-component {\n position: relative;\n cursor: pointer;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n}\n.straumur__apple-pay-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__apple-pay-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__apple-pay-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__apple-pay-component__content:hover .straumur__apple-pay-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__apple-pay-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content .straumur__apple-pay-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__apple-pay-component__radio-selector:checked + .straumur__apple-pay-component__content .straumur__apple-pay-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__apple-pay-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__apple-pay-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__apple-pay-component__radio-selector:checked ~ .straumur__apple-pay-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__apple-pay-component__expandable p {\n margin: 0;\n color: #213547;\n font-size: 0.9rem;\n}\n');
|
|
1474
|
+
|
|
1475
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1476
|
+
var import_adyen_web3 = require("@adyen/adyen-web");
|
|
1477
|
+
|
|
1478
|
+
// src/assets/icons/applepay.tsx
|
|
1479
|
+
var import_preact20 = require("preact");
|
|
1480
|
+
var ApplePayIcon = () => /* @__PURE__ */ (0, import_preact20.h)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "26", fill: "none", viewBox: "0 0 40 26" }, /* @__PURE__ */ (0, import_preact20.h)(
|
|
1481
|
+
"path",
|
|
1482
|
+
{
|
|
1483
|
+
fill: "#000",
|
|
1484
|
+
d: "M36.42 0H3.58a69.25 69.25 0 0 0-.75 0c-.25.01-.5.03-.76.07a2.51 2.51 0 0 0-1.32.7A2.43 2.43 0 0 0 .07 2.1 5.14 5.14 0 0 0 0 3.22v19.91c.01.25.03.51.07.76a2.6 2.6 0 0 0 .68 1.35 2.39 2.39 0 0 0 1.32.69 4.98 4.98 0 0 0 1.1.07h34a5 5 0 0 0 .76-.07 2.5 2.5 0 0 0 1.32-.7 2.44 2.44 0 0 0 .68-1.34 5.13 5.13 0 0 0 .07-1.11V2.87a6.5 6.5 0 0 0-.07-.76 2.58 2.58 0 0 0-.68-1.35 2.4 2.4 0 0 0-1.32-.69 4.96 4.96 0 0 0-1.1-.07h-.41Z"
|
|
1485
|
+
}
|
|
1486
|
+
), /* @__PURE__ */ (0, import_preact20.h)(
|
|
1487
|
+
"path",
|
|
1488
|
+
{
|
|
1489
|
+
fill: "#fff",
|
|
1490
|
+
d: "M36.42.87h.73c.2 0 .42.02.62.06a1.67 1.67 0 0 1 .88.44 1.58 1.58 0 0 1 .44.89 4.38 4.38 0 0 1 .06.97v19.55a14.67 14.67 0 0 1-.06.96 1.7 1.7 0 0 1-.44.89 1.54 1.54 0 0 1-.87.44 4.27 4.27 0 0 1-.96.06H2.85a3.7 3.7 0 0 1-.63-.06 1.66 1.66 0 0 1-.87-.45 1.56 1.56 0 0 1-.44-.88 4.35 4.35 0 0 1-.06-.97V2.9c.01-.2.02-.42.06-.63.03-.18.08-.34.16-.49A1.56 1.56 0 0 1 2.22.93a4.2 4.2 0 0 1 .96-.06h33.24"
|
|
1491
|
+
}
|
|
1492
|
+
), /* @__PURE__ */ (0, import_preact20.h)(
|
|
1493
|
+
"path",
|
|
1494
|
+
{
|
|
1495
|
+
fill: "#000",
|
|
1496
|
+
d: "M10.92 8.61c.34-.43.57-1 .51-1.59a2.21 2.21 0 0 0-1.99 2.3c.56.04 1.12-.3 1.48-.7Zm.51.81c-.82-.05-1.52.46-1.9.46-.4 0-1-.43-1.64-.42-.84 0-1.62.48-2.05 1.24-.88 1.52-.23 3.76.62 5 .42.6.92 1.27 1.58 1.25.62-.02.86-.4 1.62-.4.75 0 .97.4 1.63.39.69-.01 1.11-.61 1.53-1.22.47-.7.67-1.37.68-1.4-.01-.02-1.32-.52-1.33-2.02-.01-1.26 1.03-1.85 1.07-1.9a2.34 2.34 0 0 0-1.81-.98Zm7.11-1.7a2.87 2.87 0 0 1 3.02 3c0 1.8-1.27 3.03-3.06 3.03h-1.97v3.12h-1.42V7.72h3.43Zm-2 4.83h1.62c1.24 0 1.94-.66 1.94-1.82 0-1.15-.7-1.81-1.93-1.81h-1.64v3.63Zm5.39 2.43c0-1.17.9-1.89 2.48-1.98l1.83-.1v-.52c0-.74-.5-1.18-1.34-1.18-.8 0-1.3.38-1.41.97h-1.3c.08-1.2 1.1-2.09 2.76-2.09 1.62 0 2.65.86 2.65 2.2v4.6h-1.31v-1.1h-.04a2.38 2.38 0 0 1-2.1 1.2c-1.3 0-2.22-.8-2.22-2Zm4.3-.6v-.53l-1.64.1c-.82.06-1.28.42-1.28.99 0 .58.48.96 1.22.96.96 0 1.7-.66 1.7-1.52Zm2.61 4.95v-1.11c.1.03.33.03.44.03.64 0 .98-.27 1.19-.96l.12-.4-2.41-6.69h1.48l1.7 5.43h.02l1.69-5.43h1.44l-2.5 7.02c-.57 1.62-1.23 2.14-2.61 2.14a5.3 5.3 0 0 1-.56-.03Z"
|
|
1497
|
+
}
|
|
1498
|
+
));
|
|
1499
|
+
var applepay_default = ApplePayIcon;
|
|
1500
|
+
|
|
1501
|
+
// src/features/apple-pay/apple-pay-component.tsx
|
|
1502
|
+
function ApplePayComponent({ configuration, paymentMethods }) {
|
|
1503
|
+
const applePayElementRef = (0, import_hooks6.useRef)(null);
|
|
1504
|
+
const adyenCardRef = (0, import_hooks6.useRef)();
|
|
1505
|
+
const applePayRef = (0, import_hooks6.useRef)();
|
|
1506
|
+
const {
|
|
1507
|
+
activePaymentMethod,
|
|
1508
|
+
setActivePaymentMethod,
|
|
1509
|
+
isPaymentMethodInitialized,
|
|
1510
|
+
updatePaymentMethodInitialization,
|
|
1511
|
+
threeDSecureRef,
|
|
1512
|
+
handleSuccess,
|
|
1513
|
+
handleError,
|
|
1514
|
+
setThreeDSecureActive
|
|
1515
|
+
} = usePaymentMethodGroup();
|
|
1516
|
+
const initializeAdyenComponent = async () => {
|
|
1517
|
+
adyenCardRef.current = await (0, import_adyen_web3.AdyenCheckout)({
|
|
1518
|
+
clientKey: paymentMethods.clientKey,
|
|
1519
|
+
locale: paymentMethods.locale,
|
|
1520
|
+
environment: configuration.environment,
|
|
1521
|
+
countryCode: "IS",
|
|
1522
|
+
onError: handleOnError,
|
|
1523
|
+
onSubmit: handleOnSubmit,
|
|
1524
|
+
onAdditionalDetails: handleOnSubmitAdditionalData,
|
|
1525
|
+
onPaymentCompleted: configuration.onPaymentCompleted,
|
|
1526
|
+
onPaymentFailed: configuration.onPaymentFailed
|
|
1527
|
+
});
|
|
1528
|
+
const gpayConfig = paymentMethods.paymentMethods.paymentMethods.find((x) => x.type === "applepay").configuration;
|
|
1529
|
+
const applePayConfiguration = {
|
|
1530
|
+
amount: {
|
|
1531
|
+
value: paymentMethods.minorUnitsAmount,
|
|
1532
|
+
currency: paymentMethods.currency
|
|
1533
|
+
},
|
|
1534
|
+
environment: configuration.environment,
|
|
1535
|
+
configuration: {
|
|
1536
|
+
...gpayConfig,
|
|
1537
|
+
merchantName: paymentMethods.merchantName
|
|
1538
|
+
}
|
|
1539
|
+
};
|
|
1540
|
+
applePayRef.current = new import_adyen_web3.ApplePay(adyenCardRef.current, applePayConfiguration);
|
|
1541
|
+
applePayRef.current.isAvailable().then(() => {
|
|
1542
|
+
applePayRef.current.mount(applePayElementRef.current);
|
|
1543
|
+
updatePaymentMethodInitialization("applepay", true);
|
|
1544
|
+
}).catch((e) => {
|
|
1545
|
+
console.log(e);
|
|
1546
|
+
handleError("error.applePayNotAvailable");
|
|
1547
|
+
});
|
|
1548
|
+
};
|
|
1549
|
+
(0, import_hooks6.useEffect)(() => {
|
|
1550
|
+
if (activePaymentMethod === "applepay" && !isPaymentMethodInitialized.applepay) {
|
|
1551
|
+
initializeAdyenComponent();
|
|
1552
|
+
}
|
|
1553
|
+
}, [configuration, activePaymentMethod]);
|
|
1554
|
+
(0, import_hooks6.useEffect)(() => {
|
|
1555
|
+
if (applePayRef.current && isPaymentMethodInitialized.applepay) {
|
|
1556
|
+
initializeAdyenComponent();
|
|
1557
|
+
}
|
|
1558
|
+
}, [configuration]);
|
|
1559
|
+
const handleBoxChange = () => {
|
|
1560
|
+
setActivePaymentMethod("applepay");
|
|
1561
|
+
};
|
|
1562
|
+
function handleOnError(_, __) {
|
|
1563
|
+
handleError("error.unknownError");
|
|
1564
|
+
}
|
|
1565
|
+
async function handleOnSubmit(state, _, actions) {
|
|
1566
|
+
const data = {
|
|
1567
|
+
...state.data,
|
|
1568
|
+
origin: window.location.origin,
|
|
1569
|
+
sessionId: configuration.sessionId
|
|
1570
|
+
};
|
|
1571
|
+
const fetchResponse = await createPaymentRequest(configuration.environment, data);
|
|
1572
|
+
if (!fetchResponse.ok) {
|
|
1573
|
+
actions.reject();
|
|
1574
|
+
handleError("error.failedToSubmitPayment");
|
|
1575
|
+
return;
|
|
1576
|
+
}
|
|
1577
|
+
const response = await fetchResponse.json();
|
|
1578
|
+
if (!response.resultCode) {
|
|
1579
|
+
actions.reject();
|
|
1580
|
+
handleError("error.paymentFailed");
|
|
1581
|
+
return;
|
|
1582
|
+
}
|
|
1583
|
+
const { resultCode, action } = response;
|
|
1584
|
+
if (resultCode === "RedirectShopper" || resultCode === "IdentifyShopper") {
|
|
1585
|
+
setThreeDSecureActive(true);
|
|
1586
|
+
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef?.current);
|
|
1587
|
+
return;
|
|
1588
|
+
}
|
|
1589
|
+
actions.resolve({ resultCode, action });
|
|
1590
|
+
if (resultCode === "Authorised") {
|
|
1591
|
+
handleSuccess("success.paymentAuthorized");
|
|
1592
|
+
} else {
|
|
1593
|
+
handleError("error.paymentUnsuccessful");
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
async function handleOnSubmitAdditionalData(state, _, actions) {
|
|
1597
|
+
const data = {
|
|
1598
|
+
...state.data,
|
|
1599
|
+
sessionId: configuration.sessionId
|
|
1600
|
+
};
|
|
1601
|
+
const fetchResponse = await createDetailsRequest(configuration.environment, data);
|
|
1602
|
+
if (!fetchResponse.ok) {
|
|
1603
|
+
actions.reject();
|
|
1604
|
+
handleError("error.failedToSubmitPaymentDetails");
|
|
1605
|
+
return;
|
|
1606
|
+
}
|
|
1607
|
+
const response = await fetchResponse.json();
|
|
1608
|
+
if (!response.resultCode) {
|
|
1609
|
+
actions.reject();
|
|
1610
|
+
handleError("error.paymentDetailsFailed");
|
|
1611
|
+
return;
|
|
1612
|
+
}
|
|
1613
|
+
const { resultCode, action } = response;
|
|
1614
|
+
actions.resolve({ resultCode, action });
|
|
1615
|
+
if (resultCode === "Authorised") {
|
|
1616
|
+
handleSuccess("success.paymentAuthorized");
|
|
1617
|
+
} else {
|
|
1618
|
+
handleError("error.paymentUnsuccessful");
|
|
1619
|
+
}
|
|
1620
|
+
}
|
|
1621
|
+
const hasApplePay = paymentMethods.paymentMethods.paymentMethods?.some((x) => x.type === "applepay");
|
|
1622
|
+
if (!hasApplePay) {
|
|
1623
|
+
return null;
|
|
1624
|
+
}
|
|
1625
|
+
return /* @__PURE__ */ (0, import_preact21.h)("label", { className: "straumur__apple-pay-component" }, /* @__PURE__ */ (0, import_preact21.h)(
|
|
1626
|
+
"input",
|
|
1627
|
+
{
|
|
1628
|
+
type: "radio",
|
|
1629
|
+
className: "straumur__apple-pay-component__radio-selector",
|
|
1630
|
+
checked: activePaymentMethod === "applepay",
|
|
1631
|
+
onChange: handleBoxChange
|
|
1632
|
+
}
|
|
1633
|
+
), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__apple-pay-component__content" }, /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__apple-pay-component--circle" }), /* @__PURE__ */ (0, import_preact21.h)(applepay_default, null), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__apple-pay-component--text" }, i18n(configuration.locale, "applePay.title"))), /* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__apple-pay-component__expandable" }, /* @__PURE__ */ (0, import_preact21.h)("div", { ref: applePayElementRef })));
|
|
1634
|
+
}
|
|
1635
|
+
var apple_pay_component_default = ApplePayComponent;
|
|
1636
|
+
|
|
1466
1637
|
// src/features/stored-card/stored-card-container-component.tsx
|
|
1467
|
-
var
|
|
1638
|
+
var import_preact24 = require("preact");
|
|
1468
1639
|
|
|
1469
1640
|
// src/features/stored-card/stored-card-component.tsx
|
|
1470
|
-
var
|
|
1471
|
-
var
|
|
1641
|
+
var import_preact23 = require("preact");
|
|
1642
|
+
var import_hooks7 = require("preact/hooks");
|
|
1472
1643
|
|
|
1473
1644
|
// src/features/stored-card/stored-card-component.css
|
|
1474
|
-
styleInject('.straumur__stored-card-component {\n position: relative;\n background: white;\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n cursor: pointer;\n}\n.straumur__stored-card-component:has(.straumur__stored-card-component__radio-selector:checked) {\n cursor: default;\n}\n.straumur__stored-card-component__radio-selector {\n position: absolute;\n opacity: 0;\n}\n.straumur__stored-card-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n cursor: default;\n}\n.straumur__stored-card-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__stored-card-component__content:hover .straumur__stored-card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__stored-card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__stored-card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__stored-card-component--brands > svg {\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button {\n margin-left: auto;\n}\n.straumur__stored-card-component__remove-stored-card-button--text {\n color: #d03e00;\n text-decoration: none;\n background: none;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button--text:disabled {\n cursor: not-allowed;\n color: #72889d;\n}\n.straumur__stored-card-component__confirm-remove-stored-card {\n background-color: #fff7db;\n border-radius: var(--straumur__border-radius-s);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--expanded {\n padding: var(--
|
|
1645
|
+
styleInject('.straumur__stored-card-component {\n position: relative;\n background: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-lg);\n transition: all 0.3s ease;\n padding: var(--straumur__space-xxlg) var(--straumur__space-5xlg);\n cursor: pointer;\n}\n.straumur__stored-card-component:has(.straumur__stored-card-component__radio-selector:checked) {\n cursor: default;\n}\n.straumur__stored-card-component__radio-selector {\n position: absolute;\n opacity: 0;\n}\n.straumur__stored-card-component__content {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n cursor: default;\n}\n.straumur__stored-card-component--circle {\n width: var(--straumur__space-5xlg);\n height: var(--straumur__space-5xlg);\n border: 1px solid var(--straumur__color-cosmos-blue-gamma);\n background: var(--straumur__color-secondary-gamma);\n border-radius: 50%;\n position: relative;\n transition: all 0.3s ease;\n}\n.straumur__stored-card-component__content:hover .straumur__stored-card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component--circle::after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.2s ease;\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__radio-selector:checked + .straumur__stored-card-component__content .straumur__stored-card-component--circle::after {\n transform: translate(-50%, -50%) scale(1);\n background: var(--straumur__color-primary);\n height: var(--straumur__space-md);\n width: var(--straumur__space-md);\n}\n.straumur__stored-card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__stored-card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__stored-card-component--brands > svg {\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button {\n margin-left: auto;\n}\n.straumur__stored-card-component__remove-stored-card-button--text {\n color: #d03e00;\n text-decoration: none;\n background: none;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.straumur__stored-card-component__remove-stored-card-button--text:disabled {\n cursor: not-allowed;\n color: #72889d;\n}\n.straumur__stored-card-component__confirm-remove-stored-card {\n background-color: #fff7db;\n border-radius: var(--straumur__border-radius-s);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--expanded {\n padding: var(--straumur__space-xxlg);\n max-height: 400px;\n opacity: 1;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--header {\n display: flex;\n align-items: center;\n gap: var(--straumur__space-lg);\n color: #262b31;\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__stored-card-component__confirm-remove-stored-card--actions {\n display: flex;\n gap: var(--straumur__space-lg);\n justify-content: end;\n}\n.straumur__stored-card-component__confirm-remove-stored-card--actions--button {\n color: #775d00;\n background: none;\n border: none;\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n}\n.straumur__stored-card-component__expandable {\n background: var(--straumur__color-white);\n max-height: 0;\n overflow: hidden;\n transition: all 0.3s ease;\n opacity: 0;\n}\n.straumur__stored-card-component__loading-text {\n display: flex;\n justify-content: center;\n}\n.straumur__stored-card-component__radio-selector:checked ~ .straumur__stored-card-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__stored-card-component__form {\n display: flex;\n padding-top: var(--straumur__space-xxlg);\n flex-direction: column;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__stored-card-component__form--wrapper {\n display: flex;\n flex-direction: column;\n justify-items: start;\n position: relative;\n width: 100%;\n}\n.straumur__stored-card-component__form--wrapper--error {\n color: var(--straumur__color-red-beta);\n font-size: 12px;\n}\n.straumur__stored-card-component__form--wrapper--label {\n transform: translateX(10px) translateY(-50%);\n z-index: 1;\n background:\n linear-gradient(\n to top,\n var(--straumur__color-secondary-gamma) 53%,\n var(--straumur__color-transparent) 50%);\n position: absolute;\n font-weight: 500;\n font-size: 14px;\n padding: 0 var(--straumur__space-xxs);\n}\n.straumur__stored-card-component__form--wrapper--label--readonly {\n background:\n linear-gradient(\n to top,\n var(--straumur__color-gray-epsilon) 53%,\n var(--straumur__color-transparent) 50%);\n}\n.straumur__stored-card-component__form--wrapper--label--error {\n color: var(--straumur__color-red-beta);\n background:\n linear-gradient(\n to top,\n var(--straumur__color-red-gamma) 53%,\n var(--straumur__color-transparent) 50%);\n font-size: 13px;\n font-weight: 500;\n}\n.straumur__stored-card-component__form--wrapper--label--info {\n position: absolute;\n top: 33%;\n right: var(--straumur__space-md);\n}\n.straumur__stored-card-component__form--wrapper--input {\n background: var(--straumur__color-secondary-gamma);\n color: #00112c;\n display: flex;\n align-items: center;\n border: 1px solid var(--straumur__color-transparent);\n border-radius: var(--straumur__border-radius-s);\n font-size: 1rem;\n height: 48px;\n outline: none;\n padding-left: var(--straumur__space-lg);\n transition: border 0.2s ease-out, box-shadow 0.2s ease-out;\n position: relative;\n}\n.straumur__stored-card-component__form--wrapper--input--readonly {\n background-color: var(--straumur__color-gray-epsilon);\n}\n.straumur__stored-card-component__form--wrapper--input:hover {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__stored-card-component__form--wrapper--input--readonly:hover {\n border: 1px solid var(--straumur__color-transparent);\n}\n.straumur__stored-card-component__form--wrapper--input--error {\n background: var(--straumur__color-red-gamma);\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__stored-card-component__form--wrapper--input--error:hover {\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__stored-card-component__form--field-wrapper {\n display: flex;\n width: 100%;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__stored-card-component__submit-button {\n background: var(--straumur__color-primary);\n border: none;\n border-radius: var(--straumur__border-radius-s);\n color: var(--straumur__color-white);\n cursor: pointer;\n font-size: 1rem;\n height: 40px;\n outline: none;\n padding: 0 var(--straumur__space-xxlg);\n transition: background 0.2s ease-out;\n width: 100%;\n}\n.straumur__stored-card-component__submit-button:hover {\n background: var(--straumur__color-primary);\n border: 1px solid #dbdee2;\n}\n.straumur__stored-card-component__submit-button:disabled {\n background: #72889d;\n border: 1px solid #dbdee2;\n cursor: not-allowed;\n}\n');
|
|
1475
1646
|
|
|
1476
1647
|
// src/features/stored-card/stored-card-component.tsx
|
|
1477
|
-
var
|
|
1648
|
+
var import_adyen_web4 = require("@adyen/adyen-web");
|
|
1478
1649
|
|
|
1479
1650
|
// src/assets/icons/warning.tsx
|
|
1480
|
-
var
|
|
1481
|
-
var WarningIcon = () => /* @__PURE__ */ (0,
|
|
1651
|
+
var import_preact22 = require("preact");
|
|
1652
|
+
var WarningIcon = () => /* @__PURE__ */ (0, import_preact22.h)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ (0, import_preact22.h)("g", { "clip-path": "url(#clip0_10650_34968)" }, /* @__PURE__ */ (0, import_preact22.h)(
|
|
1482
1653
|
"path",
|
|
1483
1654
|
{
|
|
1484
1655
|
d: "M12.0011 15C12.6245 15 13.1261 14.4984 13.1261 13.875V7.875C13.1261 7.25391 12.6222 6.75 12.0433 6.75C11.4644 6.75 10.8761 7.25625 10.8761 7.875V13.875C10.8761 14.4984 11.3823 15 12.0011 15ZM12.0011 16.5516C11.1873 16.5516 10.5273 17.2116 10.5273 18.0253C10.5292 18.8391 11.1855 19.5 12.0011 19.5C12.8167 19.5 13.4748 18.84 13.4748 18.0262C13.473 17.2125 12.8167 16.5516 12.0011 16.5516Z",
|
|
1485
1656
|
fill: "#DFAE00"
|
|
1486
1657
|
}
|
|
1487
|
-
), /* @__PURE__ */ (0,
|
|
1658
|
+
), /* @__PURE__ */ (0, import_preact22.h)(
|
|
1488
1659
|
"path",
|
|
1489
1660
|
{
|
|
1490
1661
|
opacity: "0.4",
|
|
1491
1662
|
d: "M23.7312 19.5469L13.7328 2.48438C12.9673 1.17188 11.0356 1.17188 10.2649 2.48438L0.271188 19.5469C-0.49803 20.8547 0.460048 22.5 2.00181 22.5H21.9987C23.5343 22.5 24.4953 20.8594 23.7312 19.5469ZM10.8734 7.875C10.8734 7.25391 11.3773 6.75 11.9984 6.75C12.6195 6.75 13.1234 7.25625 13.1234 7.875V13.875C13.1234 14.4961 12.6195 15 12.0406 15C11.4617 15 10.8734 14.4984 10.8734 13.875V7.875ZM11.9984 19.5C11.1846 19.5 10.5246 18.84 10.5246 18.0262C10.5246 17.2125 11.1842 16.5525 11.9984 16.5525C12.8126 16.5525 13.4721 17.2125 13.4721 18.0262C13.4703 18.8391 12.814 19.5 11.9984 19.5Z",
|
|
1492
1663
|
fill: "#DFAE00"
|
|
1493
1664
|
}
|
|
1494
|
-
)), /* @__PURE__ */ (0,
|
|
1665
|
+
)), /* @__PURE__ */ (0, import_preact22.h)("defs", null, /* @__PURE__ */ (0, import_preact22.h)("clipPath", { id: "clip0_10650_34968" }, /* @__PURE__ */ (0, import_preact22.h)("rect", { width: "24", height: "24", fill: "white" }))));
|
|
1495
1666
|
var warning_default = WarningIcon;
|
|
1496
1667
|
|
|
1497
1668
|
// src/features/stored-card/stored-card-component.tsx
|
|
@@ -1501,13 +1672,13 @@ function StoredCardComponent({
|
|
|
1501
1672
|
storedPaymentMethod,
|
|
1502
1673
|
onStoredCardRemoved
|
|
1503
1674
|
}) {
|
|
1504
|
-
const storedCardElementRef = (0,
|
|
1505
|
-
const adyenCardRef = (0,
|
|
1506
|
-
const customCardRef = (0,
|
|
1507
|
-
const [payButtonDisabled, setPayButtonDisabled] = (0,
|
|
1508
|
-
const [securityCodePolicy, setSecurityCodePolicy] = (0,
|
|
1509
|
-
const [askConfirmRemoveStoredCard, setAskConfirmRemoveStoredCard] = (0,
|
|
1510
|
-
const [formErrors, setFormErrors] = (0,
|
|
1675
|
+
const storedCardElementRef = (0, import_hooks7.useRef)(null);
|
|
1676
|
+
const adyenCardRef = (0, import_hooks7.useRef)();
|
|
1677
|
+
const customCardRef = (0, import_hooks7.useRef)();
|
|
1678
|
+
const [payButtonDisabled, setPayButtonDisabled] = (0, import_hooks7.useState)(true);
|
|
1679
|
+
const [securityCodePolicy, setSecurityCodePolicy] = (0, import_hooks7.useState)("required");
|
|
1680
|
+
const [askConfirmRemoveStoredCard, setAskConfirmRemoveStoredCard] = (0, import_hooks7.useState)(false);
|
|
1681
|
+
const [formErrors, setFormErrors] = (0, import_hooks7.useState)({
|
|
1511
1682
|
encryptedSecurityCode: { visible: false }
|
|
1512
1683
|
});
|
|
1513
1684
|
const {
|
|
@@ -1523,7 +1694,7 @@ function StoredCardComponent({
|
|
|
1523
1694
|
setThreeDSecureActive
|
|
1524
1695
|
} = usePaymentMethodGroup();
|
|
1525
1696
|
const initializeAdyenComponent = async () => {
|
|
1526
|
-
adyenCardRef.current = await (0,
|
|
1697
|
+
adyenCardRef.current = await (0, import_adyen_web4.AdyenCheckout)({
|
|
1527
1698
|
clientKey: paymentMethods.clientKey,
|
|
1528
1699
|
locale: configuration.locale,
|
|
1529
1700
|
environment: configuration.environment,
|
|
@@ -1535,7 +1706,7 @@ function StoredCardComponent({
|
|
|
1535
1706
|
onPaymentCompleted: configuration.onPaymentCompleted,
|
|
1536
1707
|
onPaymentFailed: configuration.onPaymentFailed
|
|
1537
1708
|
});
|
|
1538
|
-
customCardRef.current = new
|
|
1709
|
+
customCardRef.current = new import_adyen_web4.CustomCard(adyenCardRef.current, {
|
|
1539
1710
|
brands: [storedPaymentMethod.brand],
|
|
1540
1711
|
onConfigSuccess() {
|
|
1541
1712
|
updateStoredCardInitialization(storedPaymentMethod.id, true);
|
|
@@ -1564,18 +1735,18 @@ function StoredCardComponent({
|
|
|
1564
1735
|
customCardRef.current.mount(storedCardElementRef.current);
|
|
1565
1736
|
}
|
|
1566
1737
|
};
|
|
1567
|
-
(0,
|
|
1738
|
+
(0, import_hooks7.useEffect)(() => {
|
|
1568
1739
|
if (activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id && !isStoredCardInitialized[activeStoredPaymentMethodId]) {
|
|
1569
1740
|
initializeAdyenComponent();
|
|
1570
1741
|
}
|
|
1571
1742
|
}, [configuration, activePaymentMethod, activeStoredPaymentMethodId]);
|
|
1572
|
-
(0,
|
|
1743
|
+
(0, import_hooks7.useEffect)(() => {
|
|
1573
1744
|
if (customCardRef.current && isStoredCardInitialized[activeStoredPaymentMethodId]) {
|
|
1574
1745
|
initializeAdyenComponent();
|
|
1575
1746
|
setFormErrors({ encryptedSecurityCode: { visible: false, message: void 0 } });
|
|
1576
1747
|
}
|
|
1577
1748
|
}, [configuration]);
|
|
1578
|
-
(0,
|
|
1749
|
+
(0, import_hooks7.useEffect)(() => {
|
|
1579
1750
|
setAskConfirmRemoveStoredCard(false);
|
|
1580
1751
|
}, [activePaymentMethod, activeStoredPaymentMethodId]);
|
|
1581
1752
|
function handleBoxChange() {
|
|
@@ -1633,7 +1804,7 @@ function StoredCardComponent({
|
|
|
1633
1804
|
const { resultCode, action } = response;
|
|
1634
1805
|
if (resultCode === "RedirectShopper" || resultCode === "IdentifyShopper") {
|
|
1635
1806
|
setThreeDSecureActive(true);
|
|
1636
|
-
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef
|
|
1807
|
+
adyenCardRef.current.createFromAction(action).mount(threeDSecureRef?.current);
|
|
1637
1808
|
return;
|
|
1638
1809
|
}
|
|
1639
1810
|
actions.resolve({ resultCode, action });
|
|
@@ -1672,7 +1843,7 @@ function StoredCardComponent({
|
|
|
1672
1843
|
if (!customCardRef.current) return;
|
|
1673
1844
|
customCardRef.current.submit();
|
|
1674
1845
|
}
|
|
1675
|
-
return /* @__PURE__ */ (0,
|
|
1846
|
+
return /* @__PURE__ */ (0, import_preact23.h)("label", { className: "straumur__stored-card-component" }, /* @__PURE__ */ (0, import_preact23.h)(
|
|
1676
1847
|
"input",
|
|
1677
1848
|
{
|
|
1678
1849
|
type: "radio",
|
|
@@ -1680,7 +1851,7 @@ function StoredCardComponent({
|
|
|
1680
1851
|
checked: activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id,
|
|
1681
1852
|
onChange: handleBoxChange
|
|
1682
1853
|
}
|
|
1683
|
-
), /* @__PURE__ */ (0,
|
|
1854
|
+
), /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component__content" }, /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component--circle" }), /* @__PURE__ */ (0, import_preact23.h)(
|
|
1684
1855
|
RenderBrandIcons,
|
|
1685
1856
|
{
|
|
1686
1857
|
brands: [
|
|
@@ -1690,7 +1861,7 @@ function StoredCardComponent({
|
|
|
1690
1861
|
}
|
|
1691
1862
|
]
|
|
1692
1863
|
}
|
|
1693
|
-
), /* @__PURE__ */ (0,
|
|
1864
|
+
), /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component--text" }, "\u2022\u2022\u2022\u2022 ", storedPaymentMethod.lastFour), activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id && isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__remove-stored-card-button" }, /* @__PURE__ */ (0, import_preact23.h)(
|
|
1694
1865
|
"button",
|
|
1695
1866
|
{
|
|
1696
1867
|
onClick: handleAskToConfirmRemoveCard,
|
|
@@ -1698,20 +1869,20 @@ function StoredCardComponent({
|
|
|
1698
1869
|
disabled: askConfirmRemoveStoredCard
|
|
1699
1870
|
},
|
|
1700
1871
|
i18n(configuration.locale, "stored-cards.removeStoredCard")
|
|
1701
|
-
))), /* @__PURE__ */ (0,
|
|
1872
|
+
))), /* @__PURE__ */ (0, import_preact23.h)(
|
|
1702
1873
|
"div",
|
|
1703
1874
|
{
|
|
1704
1875
|
className: `${"straumur__stored-card-component__confirm-remove-stored-card"} ${askConfirmRemoveStoredCard ? "straumur__stored-card-component__confirm-remove-stored-card--expanded" : ""}`
|
|
1705
1876
|
},
|
|
1706
|
-
/* @__PURE__ */ (0,
|
|
1707
|
-
/* @__PURE__ */ (0,
|
|
1877
|
+
/* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--header" }, /* @__PURE__ */ (0, import_preact23.h)(warning_default, null), /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component__confirm-remove-stored-card--header--title" }, i18n(configuration.locale, "stored-cards.removeStoredCardQuestion"))),
|
|
1878
|
+
/* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--actions" }, /* @__PURE__ */ (0, import_preact23.h)(
|
|
1708
1879
|
"button",
|
|
1709
1880
|
{
|
|
1710
1881
|
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1711
1882
|
onClick: handleConfirmRemoveStoredCard
|
|
1712
1883
|
},
|
|
1713
1884
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionYesRemove")
|
|
1714
|
-
), /* @__PURE__ */ (0,
|
|
1885
|
+
), /* @__PURE__ */ (0, import_preact23.h)(
|
|
1715
1886
|
"button",
|
|
1716
1887
|
{
|
|
1717
1888
|
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
@@ -1719,7 +1890,7 @@ function StoredCardComponent({
|
|
|
1719
1890
|
},
|
|
1720
1891
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionCancel")
|
|
1721
1892
|
))
|
|
1722
|
-
), /* @__PURE__ */ (0,
|
|
1893
|
+
), /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__expandable", ref: storedCardElementRef }, !isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__loading-text" }, /* @__PURE__ */ (0, import_preact23.h)(loader_default, null)), /* @__PURE__ */ (0, import_preact23.h)(
|
|
1723
1894
|
"div",
|
|
1724
1895
|
{
|
|
1725
1896
|
className: "straumur__stored-card-component__form",
|
|
@@ -1729,21 +1900,21 @@ function StoredCardComponent({
|
|
|
1729
1900
|
transition: "opacity 0.3s ease-in-out"
|
|
1730
1901
|
}
|
|
1731
1902
|
},
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1903
|
+
/* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__form--field-wrapper" }, /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__form--wrapper" }, /* @__PURE__ */ (0, import_preact23.h)("label", { className: "straumur__stored-card-component__form--wrapper--label straumur__stored-card-component__form--wrapper--label--readonly" }, i18n(configuration.locale, "stored-cards.expiryDate")), /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component__form--wrapper--input straumur__stored-card-component__form--wrapper--input--readonly" }, storedPaymentMethod.expiryMonth, "/", storedPaymentMethod.expiryYear)), /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ (0, import_preact23.h)(import_preact23.Fragment, null, /* @__PURE__ */ (0, import_preact23.h)(
|
|
1733
1904
|
"label",
|
|
1734
1905
|
{
|
|
1735
1906
|
className: `${"straumur__stored-card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--label--error" : ""}`
|
|
1736
1907
|
},
|
|
1737
1908
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "stored-cards.securityCode3DigitsOptional") : i18n(configuration.locale, "stored-cards.securityCode3Digits")
|
|
1738
|
-
), /* @__PURE__ */ (0,
|
|
1909
|
+
), /* @__PURE__ */ (0, import_preact23.h)(
|
|
1739
1910
|
"span",
|
|
1740
1911
|
{
|
|
1741
1912
|
className: `${"straumur__stored-card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--input--error" : ""}`,
|
|
1742
1913
|
"data-cse": "encryptedSecurityCode"
|
|
1743
1914
|
},
|
|
1744
|
-
/* @__PURE__ */ (0,
|
|
1745
|
-
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0,
|
|
1746
|
-
/* @__PURE__ */ (0,
|
|
1915
|
+
/* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__stored-card-component__form--wrapper--label--info" }, /* @__PURE__ */ (0, import_preact23.h)(Tooltip, { content: i18n(configuration.locale, "stored-cards.securityCode3DigitsInfo") }, /* @__PURE__ */ (0, import_preact23.h)(info_default, null)))
|
|
1916
|
+
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0, import_preact23.h)("span", { className: "straumur__stored-card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message))),
|
|
1917
|
+
/* @__PURE__ */ (0, import_preact23.h)(
|
|
1747
1918
|
"button",
|
|
1748
1919
|
{
|
|
1749
1920
|
className: "straumur__stored-card-component__submit-button",
|
|
@@ -1757,16 +1928,15 @@ function StoredCardComponent({
|
|
|
1757
1928
|
var stored_card_component_default = StoredCardComponent;
|
|
1758
1929
|
|
|
1759
1930
|
// src/features/stored-card/stored-card-container-component.tsx
|
|
1760
|
-
var
|
|
1931
|
+
var import_hooks8 = require("preact/hooks");
|
|
1761
1932
|
function StoredCardContainerComponent({
|
|
1762
1933
|
configuration,
|
|
1763
1934
|
paymentMethods
|
|
1764
1935
|
}) {
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
(_a = paymentMethods.paymentMethods.storedPaymentMethods) != null ? _a : []
|
|
1936
|
+
const [storedPaymentMethods, setStoredPaymentMethods] = (0, import_hooks8.useState)(
|
|
1937
|
+
paymentMethods.paymentMethods.storedPaymentMethods ?? []
|
|
1768
1938
|
);
|
|
1769
|
-
if (!storedPaymentMethods ||
|
|
1939
|
+
if (!storedPaymentMethods || storedPaymentMethods?.length === 0) {
|
|
1770
1940
|
return null;
|
|
1771
1941
|
}
|
|
1772
1942
|
function handleStoredCardRemoved(storedPaymentMethodId) {
|
|
@@ -1774,7 +1944,7 @@ function StoredCardContainerComponent({
|
|
|
1774
1944
|
(prevStoredPaymentMethods) => prevStoredPaymentMethods.filter((storedPaymentMethod) => storedPaymentMethod.id !== storedPaymentMethodId)
|
|
1775
1945
|
);
|
|
1776
1946
|
}
|
|
1777
|
-
return /* @__PURE__ */ (0,
|
|
1947
|
+
return /* @__PURE__ */ (0, import_preact24.h)(import_preact24.Fragment, null, storedPaymentMethods?.map((storedPaymentMethod) => /* @__PURE__ */ (0, import_preact24.h)(
|
|
1778
1948
|
stored_card_component_default,
|
|
1779
1949
|
{
|
|
1780
1950
|
key: storedPaymentMethod.id,
|
|
@@ -1788,26 +1958,26 @@ function StoredCardContainerComponent({
|
|
|
1788
1958
|
var stored_card_container_component_default = StoredCardContainerComponent;
|
|
1789
1959
|
|
|
1790
1960
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1791
|
-
var
|
|
1961
|
+
var import_preact25 = require("preact");
|
|
1792
1962
|
|
|
1793
1963
|
// src/components/payment-method-group/payment-method-group.css
|
|
1794
1964
|
styleInject(".straumur__payment-method-group {\n display: flex;\n flex-direction: column;\n gap: var(--straumur__space-xxlg);\n width: 100%;\n}\n");
|
|
1795
1965
|
|
|
1796
1966
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1797
1967
|
function PaymentMethodGroup({ children, initialValue }) {
|
|
1798
|
-
return /* @__PURE__ */ (0,
|
|
1968
|
+
return /* @__PURE__ */ (0, import_preact25.h)(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ (0, import_preact25.h)("div", { className: "straumur__payment-method-group" }, children));
|
|
1799
1969
|
}
|
|
1800
1970
|
var payment_method_group_default = PaymentMethodGroup;
|
|
1801
1971
|
|
|
1802
1972
|
// src/features/result-component/result-component.tsx
|
|
1803
|
-
var
|
|
1973
|
+
var import_preact28 = require("preact");
|
|
1804
1974
|
|
|
1805
1975
|
// src/features/result-component/result-component.css
|
|
1806
|
-
styleInject(".straumur__result-component {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 300px;\n background-color: white;\n border-radius: 16px;\n}\n");
|
|
1976
|
+
styleInject(".straumur__result-component {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 300px;\n background-color: var(--straumur__color-white);\n border-radius: 16px;\n}\n");
|
|
1807
1977
|
|
|
1808
1978
|
// src/assets/icons/success.tsx
|
|
1809
|
-
var
|
|
1810
|
-
var SuccessIcon = () => /* @__PURE__ */ (0,
|
|
1979
|
+
var import_preact26 = require("preact");
|
|
1980
|
+
var SuccessIcon = () => /* @__PURE__ */ (0, import_preact26.h)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", viewBox: "0 0 120 120" }, /* @__PURE__ */ (0, import_preact26.h)(
|
|
1811
1981
|
"circle",
|
|
1812
1982
|
{
|
|
1813
1983
|
cx: "60",
|
|
@@ -1819,8 +1989,8 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_preact24.h)("svg", { xmlns: "
|
|
|
1819
1989
|
"stroke-dasharray": "314",
|
|
1820
1990
|
"stroke-dashoffset": "314"
|
|
1821
1991
|
},
|
|
1822
|
-
/* @__PURE__ */ (0,
|
|
1823
|
-
), /* @__PURE__ */ (0,
|
|
1992
|
+
/* @__PURE__ */ (0, import_preact26.h)("animate", { attributeName: "stroke-dashoffset", from: "314", to: "0", dur: "1s", fill: "freeze" })
|
|
1993
|
+
), /* @__PURE__ */ (0, import_preact26.h)("g", { transform: "translate(60,60)" }, /* @__PURE__ */ (0, import_preact26.h)(
|
|
1824
1994
|
"path",
|
|
1825
1995
|
{
|
|
1826
1996
|
d: "M-25 5 L-5 25 L25 -15",
|
|
@@ -1832,8 +2002,8 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_preact24.h)("svg", { xmlns: "
|
|
|
1832
2002
|
"stroke-dasharray": "100",
|
|
1833
2003
|
"stroke-dashoffset": "100"
|
|
1834
2004
|
},
|
|
1835
|
-
/* @__PURE__ */ (0,
|
|
1836
|
-
/* @__PURE__ */ (0,
|
|
2005
|
+
/* @__PURE__ */ (0, import_preact26.h)("animate", { attributeName: "stroke-dashoffset", from: "100", to: "0", dur: "0.5s", begin: "1s", fill: "freeze" }),
|
|
2006
|
+
/* @__PURE__ */ (0, import_preact26.h)(
|
|
1837
2007
|
"animateTransform",
|
|
1838
2008
|
{
|
|
1839
2009
|
attributeName: "transform",
|
|
@@ -1846,7 +2016,7 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_preact24.h)("svg", { xmlns: "
|
|
|
1846
2016
|
additive: "sum"
|
|
1847
2017
|
}
|
|
1848
2018
|
),
|
|
1849
|
-
/* @__PURE__ */ (0,
|
|
2019
|
+
/* @__PURE__ */ (0, import_preact26.h)(
|
|
1850
2020
|
"animateTransform",
|
|
1851
2021
|
{
|
|
1852
2022
|
attributeName: "transform",
|
|
@@ -1863,8 +2033,8 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_preact24.h)("svg", { xmlns: "
|
|
|
1863
2033
|
var success_default = SuccessIcon;
|
|
1864
2034
|
|
|
1865
2035
|
// src/assets/icons/failure.tsx
|
|
1866
|
-
var
|
|
1867
|
-
var FailureIcon = () => /* @__PURE__ */ (0,
|
|
2036
|
+
var import_preact27 = require("preact");
|
|
2037
|
+
var FailureIcon = () => /* @__PURE__ */ (0, import_preact27.h)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "120", height: "120", viewBox: "0 0 120 120" }, /* @__PURE__ */ (0, import_preact27.h)(
|
|
1868
2038
|
"circle",
|
|
1869
2039
|
{
|
|
1870
2040
|
cx: "60",
|
|
@@ -1876,8 +2046,8 @@ var FailureIcon = () => /* @__PURE__ */ (0, import_preact25.h)("svg", { xmlns: "
|
|
|
1876
2046
|
"stroke-dasharray": "314",
|
|
1877
2047
|
"stroke-dashoffset": "314"
|
|
1878
2048
|
},
|
|
1879
|
-
/* @__PURE__ */ (0,
|
|
1880
|
-
), /* @__PURE__ */ (0,
|
|
2049
|
+
/* @__PURE__ */ (0, import_preact27.h)("animate", { attributeName: "stroke-dashoffset", from: "314", to: "0", dur: "1s", fill: "freeze" })
|
|
2050
|
+
), /* @__PURE__ */ (0, import_preact27.h)("g", { transform: "translate(60,60)" }, /* @__PURE__ */ (0, import_preact27.h)("g", { id: "crossGroup" }, /* @__PURE__ */ (0, import_preact27.h)(
|
|
1881
2051
|
"line",
|
|
1882
2052
|
{
|
|
1883
2053
|
x1: "-20",
|
|
@@ -1890,8 +2060,8 @@ var FailureIcon = () => /* @__PURE__ */ (0, import_preact25.h)("svg", { xmlns: "
|
|
|
1890
2060
|
"stroke-dasharray": "57",
|
|
1891
2061
|
"stroke-dashoffset": "57"
|
|
1892
2062
|
},
|
|
1893
|
-
/* @__PURE__ */ (0,
|
|
1894
|
-
), /* @__PURE__ */ (0,
|
|
2063
|
+
/* @__PURE__ */ (0, import_preact27.h)("animate", { attributeName: "stroke-dashoffset", from: "57", to: "0", dur: "0.3s", begin: "1s", fill: "freeze" })
|
|
2064
|
+
), /* @__PURE__ */ (0, import_preact27.h)(
|
|
1895
2065
|
"line",
|
|
1896
2066
|
{
|
|
1897
2067
|
x1: "20",
|
|
@@ -1904,7 +2074,7 @@ var FailureIcon = () => /* @__PURE__ */ (0, import_preact25.h)("svg", { xmlns: "
|
|
|
1904
2074
|
"stroke-dasharray": "57",
|
|
1905
2075
|
"stroke-dashoffset": "57"
|
|
1906
2076
|
},
|
|
1907
|
-
/* @__PURE__ */ (0,
|
|
2077
|
+
/* @__PURE__ */ (0, import_preact27.h)("animate", { attributeName: "stroke-dashoffset", from: "57", to: "0", dur: "0.3s", begin: "1.3s", fill: "freeze" })
|
|
1908
2078
|
))));
|
|
1909
2079
|
var failure_default = FailureIcon;
|
|
1910
2080
|
|
|
@@ -1914,52 +2084,53 @@ function ResultComponent({ configuration }) {
|
|
|
1914
2084
|
if (!error && !success) {
|
|
1915
2085
|
return null;
|
|
1916
2086
|
}
|
|
1917
|
-
return /* @__PURE__ */ (0,
|
|
2087
|
+
return /* @__PURE__ */ (0, import_preact28.h)("div", { className: "straumur__result-component" }, error && /* @__PURE__ */ (0, import_preact28.h)(import_preact28.Fragment, null, /* @__PURE__ */ (0, import_preact28.h)(failure_default, null), /* @__PURE__ */ (0, import_preact28.h)("p", { className: "straumur__result-component__error--message" }, i18n(configuration.locale, error))), success && /* @__PURE__ */ (0, import_preact28.h)(import_preact28.Fragment, null, /* @__PURE__ */ (0, import_preact28.h)(success_default, null), /* @__PURE__ */ (0, import_preact28.h)("p", { className: "straumur__result-component__success--message" }, i18n(configuration.locale, success))));
|
|
1918
2088
|
}
|
|
1919
2089
|
var result_component_default = ResultComponent;
|
|
1920
2090
|
|
|
1921
2091
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1922
|
-
var
|
|
1923
|
-
var
|
|
2092
|
+
var import_preact29 = require("preact");
|
|
2093
|
+
var import_hooks9 = require("preact/hooks");
|
|
1924
2094
|
|
|
1925
2095
|
// src/features/three-d-secure-component/three-d-secure-component.css
|
|
1926
|
-
styleInject(".straumur__three-d-secure {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: white;\n border-radius: var(--straumur__border-radius-xxlg);\n}\n");
|
|
2096
|
+
styleInject(".straumur__three-d-secure {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: var(--straumur__color-white);\n border-radius: var(--straumur__border-radius-xxlg);\n}\n");
|
|
1927
2097
|
|
|
1928
2098
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1929
2099
|
function StraumurCheckoutContainer() {
|
|
1930
|
-
const threeDSecureRef = (0,
|
|
2100
|
+
const threeDSecureRef = (0, import_hooks9.useRef)(null);
|
|
1931
2101
|
const { setThreeDSecureRef } = usePaymentMethodGroup();
|
|
1932
|
-
(0,
|
|
2102
|
+
(0, import_hooks9.useEffect)(() => {
|
|
1933
2103
|
if (threeDSecureRef.current) {
|
|
1934
2104
|
setThreeDSecureRef(threeDSecureRef.current);
|
|
1935
2105
|
}
|
|
1936
2106
|
}, []);
|
|
1937
|
-
return /* @__PURE__ */ (0,
|
|
2107
|
+
return /* @__PURE__ */ (0, import_preact29.h)("div", { className: "straumur__three-d-secure", ref: threeDSecureRef });
|
|
1938
2108
|
}
|
|
1939
2109
|
var three_d_secure_component_default = StraumurCheckoutContainer;
|
|
1940
2110
|
|
|
1941
2111
|
// src/features/payment-methods-wrapper/payment-methods-wrapper.tsx
|
|
1942
|
-
var
|
|
2112
|
+
var import_preact30 = require("preact");
|
|
1943
2113
|
function PaymentMethodsWrapper({ children }) {
|
|
1944
2114
|
const { error, success, threeDSecureActive } = usePaymentMethodGroup();
|
|
1945
2115
|
if (error || success || threeDSecureActive) {
|
|
1946
2116
|
return null;
|
|
1947
2117
|
}
|
|
1948
|
-
return /* @__PURE__ */ (0,
|
|
2118
|
+
return /* @__PURE__ */ (0, import_preact30.h)(import_preact30.Fragment, null, children);
|
|
1949
2119
|
}
|
|
1950
2120
|
var payment_methods_wrapper_default = PaymentMethodsWrapper;
|
|
1951
2121
|
|
|
1952
2122
|
// src/features/straumur-checkout-container.tsx
|
|
1953
2123
|
function StraumurCheckoutContainer2({ configuration, paymentMethods }) {
|
|
1954
|
-
return /* @__PURE__ */ (0,
|
|
2124
|
+
return /* @__PURE__ */ (0, import_preact31.h)(payment_method_group_default, { initialValue: null }, /* @__PURE__ */ (0, import_preact31.h)(payment_methods_wrapper_default, null, /* @__PURE__ */ (0, import_preact31.h)(stored_card_container_component_default, { configuration, paymentMethods }), /* @__PURE__ */ (0, import_preact31.h)(card_component_default, { configuration, paymentMethods }), /* @__PURE__ */ (0, import_preact31.h)(google_pay_component_default, { configuration, paymentMethods }), /* @__PURE__ */ (0, import_preact31.h)(apple_pay_component_default, { configuration, paymentMethods })), /* @__PURE__ */ (0, import_preact31.h)(three_d_secure_component_default, null), /* @__PURE__ */ (0, import_preact31.h)(result_component_default, { configuration }));
|
|
1955
2125
|
}
|
|
1956
2126
|
var straumur_checkout_container_default = StraumurCheckoutContainer2;
|
|
1957
2127
|
|
|
1958
2128
|
// src/straumur-checkout.tsx
|
|
1959
2129
|
var StraumurCheckout = class {
|
|
2130
|
+
configuration;
|
|
2131
|
+
paymentMethods = null;
|
|
2132
|
+
mountElement = null;
|
|
1960
2133
|
constructor(config) {
|
|
1961
|
-
this.paymentMethods = null;
|
|
1962
|
-
this.mountElement = null;
|
|
1963
2134
|
this.configuration = { ...config, locale: config.locale || "en-US" };
|
|
1964
2135
|
}
|
|
1965
2136
|
async mount(selector) {
|
|
@@ -1969,8 +2140,8 @@ var StraumurCheckout = class {
|
|
|
1969
2140
|
this.handleError("error.failedToInitializeStraumurWebComponent");
|
|
1970
2141
|
return;
|
|
1971
2142
|
}
|
|
1972
|
-
(0,
|
|
1973
|
-
/* @__PURE__ */ (0,
|
|
2143
|
+
(0, import_preact32.render)(
|
|
2144
|
+
/* @__PURE__ */ (0, import_preact32.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact32.h)("div", { className: "straumur__component" }, /* @__PURE__ */ (0, import_preact32.h)(loader_default, null))),
|
|
1974
2145
|
this.mountElement
|
|
1975
2146
|
);
|
|
1976
2147
|
const response = await setupPaymentMethods(this.configuration.environment, this.configuration.sessionId);
|
|
@@ -1986,8 +2157,8 @@ var StraumurCheckout = class {
|
|
|
1986
2157
|
}
|
|
1987
2158
|
renderComponent() {
|
|
1988
2159
|
if (!this.mountElement) return;
|
|
1989
|
-
(0,
|
|
1990
|
-
/* @__PURE__ */ (0,
|
|
2160
|
+
(0, import_preact32.render)(
|
|
2161
|
+
/* @__PURE__ */ (0, import_preact32.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact32.h)(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods })),
|
|
1991
2162
|
this.mountElement
|
|
1992
2163
|
);
|
|
1993
2164
|
}
|
|
@@ -2007,20 +2178,20 @@ var StraumurCheckout = class {
|
|
|
2007
2178
|
}
|
|
2008
2179
|
destroy() {
|
|
2009
2180
|
if (this.mountElement) {
|
|
2010
|
-
(0,
|
|
2181
|
+
(0, import_preact32.render)(null, this.mountElement);
|
|
2011
2182
|
this.mountElement = null;
|
|
2012
2183
|
}
|
|
2013
2184
|
}
|
|
2014
2185
|
handleError(message) {
|
|
2015
|
-
(0,
|
|
2016
|
-
/* @__PURE__ */ (0,
|
|
2186
|
+
(0, import_preact32.render)(
|
|
2187
|
+
/* @__PURE__ */ (0, import_preact32.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact32.h)("div", { className: "straumur__component" }, /* @__PURE__ */ (0, import_preact32.h)(failure_default, null), /* @__PURE__ */ (0, import_preact32.h)("p", null, i18n(this.configuration.locale, message)))),
|
|
2017
2188
|
this.mountElement
|
|
2018
2189
|
);
|
|
2019
2190
|
}
|
|
2020
2191
|
};
|
|
2021
2192
|
var straumur_checkout_default = StraumurCheckout;
|
|
2022
2193
|
function RootComponent({ children }) {
|
|
2023
|
-
return /* @__PURE__ */ (0,
|
|
2194
|
+
return /* @__PURE__ */ (0, import_preact32.h)("div", { className: "straumur__root-component" }, children);
|
|
2024
2195
|
}
|
|
2025
2196
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2026
2197
|
0 && (module.exports = {
|