straumur-web-component 0.1.0 → 0.2.0
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.js → index.cjs} +69 -59
- package/dist/index.mjs +76 -66
- package/package.json +3 -4
- /package/dist/{index.d.mts → index.d.cts} +0 -0
|
@@ -51,7 +51,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
// src/styles/main.css
|
|
54
|
-
styleInject('
|
|
54
|
+
styleInject(':root {\n --straumur__color-primary: #002649;\n --straumur__color-secondary: #72889d;\n --straumur__color-secondary-gamma: #eef0f2;\n --straumur__color-blue-beta: #bce6f3;\n --straumur__color-blue-gamma: #eff8fa;\n --straumur__color-red-beta: #d96666;\n --straumur__color-red-gamma: #fff8f5;\n --straumur__color-gray-epsilon: #e7e7e7;\n --straumur__color-cosmos-blue-delta: #cdd8e2;\n --straumur__color-cosmos-blue-gamma: #e6ebef;\n --straumur__color-white: #ffffff;\n --straumur__color-transparent: transparent;\n --straumur__border-radius-xxs: 4px;\n --straumur__border-radius-xs: 6px;\n --straumur__border-radius-s: 8px;\n --straumur__border-radius-md: 10px;\n --straumur__border-radius-lg: 12px;\n --straumur__border-radius-xlg: 14px;\n --straumur__border-radius-xxlg: 16px;\n --straumur__space-xxs: 4px;\n --straumur__space-xs: 6px;\n --straumur__space-s: 8px;\n --straumur__space-md: 10px;\n --straumur__space-lg: 12px;\n --straumur__space-xlg: 14px;\n --straumur__space-xxlg: 16px;\n --straumur__space-3xlg: 18px;\n --straumur__space-4xlg: 20px;\n --straumur__space-5xlg: 24px;\n}\n.straumur__root-component {\n font-family: "AkzidenzGroteskPro", sans-serif;\n max-width: 440px;\n min-width: 320px;\n}\n.straumur__component * {\n font-family: inherit;\n}\n.straumur__render-brand-icons__overflow {\n color: #72889d;\n}\n.straumur__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: var(--straumur__border-radius-xxlg);\n}\n');
|
|
55
55
|
|
|
56
56
|
// src/env.ts
|
|
57
57
|
var getEnv = () => {
|
|
@@ -152,7 +152,7 @@ var import_preact17 = require("preact");
|
|
|
152
152
|
var import_hooks4 = require("preact/hooks");
|
|
153
153
|
|
|
154
154
|
// src/features/card/card-component.css
|
|
155
|
-
styleInject('.
|
|
155
|
+
styleInject('.straumur__card-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__card-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__card-component__content {\n display: grid;\n grid-template-columns: 26px 40px auto 1fr;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__card-component__radio-selector:checked + .straumur__card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__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__card-component__content:hover .straumur__card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__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__card-component__radio-selector:checked + .straumur__card-component__content .straumur__card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__card-component__radio-selector:checked + .straumur__card-component__content .straumur__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__card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__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__card-component__loading-text {\n display: flex;\n justify-content: center;\n}\n.straumur__card-component__radio-selector:checked ~ .straumur__card-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__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__card-component__form--wrapper {\n display: flex;\n flex-direction: column;\n justify-items: start;\n position: relative;\n width: 100%;\n}\n.straumur__card-component__form--wrapper--error {\n color: var(--straumur__color-red-beta);\n font-size: 12px;\n}\n.straumur__card-component__form--wrapper--label {\n transform: translateX(var(--straumur__space-md)) 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__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}\n.straumur__card-component__form--wrapper--label--info {\n position: absolute;\n top: 33%;\n right: var(--straumur__space-md);\n}\n.straumur__card-component__form--wrapper--input {\n background: var(--straumur__color-secondary-gamma);\n color: #00112c;\n display: block;\n font-family: inherit;\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}\n.straumur__card-component__form--wrapper--input:hover {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__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__card-component__form--wrapper--input--error:hover {\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__card-component__form--field-wrapper {\n display: flex;\n width: 100%;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__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__card-component__submit-button:hover {\n background: var(--straumur__color-primary);\n border: 1px solid #dbdee2;\n}\n.straumur__card-component__submit-button:disabled {\n background: #72889d;\n border: 1px solid #dbdee2;\n cursor: not-allowed;\n}\n.straumur__card-component__form--wrapper--label-checkbox {\n height: 38px;\n display: flex;\n align-items: center;\n padding: 8px;\n gap: var(--straumur__space-s);\n border-radius: var(--straumur__border-radius-s);\n cursor: pointer;\n user-select: none;\n transition: background-color 0.25s ease-in-out;\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover {\n background-color: var(--straumur__color-blue-gamma);\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover .straumur__card-component__form--wrapper--label-checkbox--checkmark {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark {\n height: var(--straumur__space-5xlg);\n width: var(--straumur__space-5xlg);\n background-color: var(--straumur__color-secondary-gamma);\n border-radius: var(--straumur__border-radius-xxs);\n flex-shrink: 0;\n border: 1px solid var(--straumur__color-transparent);\n transition: all 0.2s ease-in;\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover .straumur__card-component__form--wrapper--label-checkbox--checkmark.straumur__card-component__form--wrapper--label-checkbox--checkmark--checked {\n border: 1px solid var(--straumur__color-transparent);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--checked {\n background-color: var(--straumur__color-blue-beta);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--icon {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 9px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s ease-in;\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--icon--checked {\n opacity: 1;\n visibility: visible;\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkbox {\n display: none;\n}\n');
|
|
156
156
|
|
|
157
157
|
// src/components/payment-method-group/payment-method-group-context.tsx
|
|
158
158
|
var import_preact = require("preact");
|
|
@@ -311,7 +311,7 @@ function i18n(language, key) {
|
|
|
311
311
|
var import_preact3 = require("preact");
|
|
312
312
|
|
|
313
313
|
// src/components/tooltip/tooltip.css
|
|
314
|
-
styleInject(".
|
|
314
|
+
styleInject(".straumur__tooltip__content {\n position: absolute;\n z-index: 50;\n padding: var(--straumur__space-s);\n border-radius: var(--straumur__border-radius-s);\n right: 40%;\n top: 100%;\n width: max-content;\n color: var(--straumur__color-white);\n background-color: var(--straumur__color-primary);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n");
|
|
315
315
|
|
|
316
316
|
// src/components/tooltip/tooltip.tsx
|
|
317
317
|
var import_hooks2 = require("preact/hooks");
|
|
@@ -324,7 +324,7 @@ var Tooltip = ({ children, content }) => {
|
|
|
324
324
|
const handleMouseLeave = () => {
|
|
325
325
|
setIsVisible(false);
|
|
326
326
|
};
|
|
327
|
-
return /* @__PURE__ */ (0, import_preact3.h)("div", { style: { position: "relative" } }, /* @__PURE__ */ (0, import_preact3.h)("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children), isVisible && triggerRef && /* @__PURE__ */ (0, import_preact3.h)("div", { className: "
|
|
327
|
+
return /* @__PURE__ */ (0, import_preact3.h)("div", { style: { position: "relative" } }, /* @__PURE__ */ (0, import_preact3.h)("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children), isVisible && triggerRef && /* @__PURE__ */ (0, import_preact3.h)("div", { className: "straumur__tooltip__content" }, content));
|
|
328
328
|
};
|
|
329
329
|
|
|
330
330
|
// src/assets/icons/card.tsx
|
|
@@ -933,7 +933,7 @@ function RenderBrandIcons({ brands, brandHidden = [], limit = 3 }) {
|
|
|
933
933
|
{
|
|
934
934
|
content: /* @__PURE__ */ (0, import_preact14.h)("span", { style: { display: "flex", gap: "4px", overflow: "visible" } }, brandToShow.slice(Math.min(limit, widthLimit)).map(({ brand: brand2 }) => /* @__PURE__ */ (0, import_preact14.h)(RenderBrandIcon, { key: brand2, brand: brand2 })))
|
|
935
935
|
},
|
|
936
|
-
/* @__PURE__ */ (0, import_preact14.h)("span", { key: brand, className: "
|
|
936
|
+
/* @__PURE__ */ (0, import_preact14.h)("span", { key: brand, className: "straumur__render-brand-icons__overflow" }, "+", brandToShow.length - Math.min(limit, widthLimit))
|
|
937
937
|
);
|
|
938
938
|
}
|
|
939
939
|
return null;
|
|
@@ -1163,71 +1163,71 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1163
1163
|
if (!customCardRef.current) return;
|
|
1164
1164
|
customCardRef.current.submit();
|
|
1165
1165
|
}
|
|
1166
|
-
return /* @__PURE__ */ (0, import_preact17.h)("label", { className: "
|
|
1166
|
+
return /* @__PURE__ */ (0, import_preact17.h)("label", { className: "straumur__card-component" }, /* @__PURE__ */ (0, import_preact17.h)(
|
|
1167
1167
|
"input",
|
|
1168
1168
|
{
|
|
1169
1169
|
type: "radio",
|
|
1170
|
-
className: "
|
|
1170
|
+
className: "straumur__card-component__radio-selector",
|
|
1171
1171
|
checked: activePaymentMethod === "card",
|
|
1172
1172
|
onChange: handleBoxChange
|
|
1173
1173
|
}
|
|
1174
|
-
), /* @__PURE__ */ (0, import_preact17.h)("span", { className: "
|
|
1174
|
+
), /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component__content" }, /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component--circle" }), /* @__PURE__ */ (0, import_preact17.h)(card_default, null), /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component--text" }, i18n(configuration.locale, "cards.title")), /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component--brands" }, /* @__PURE__ */ (0, import_preact17.h)(RenderBrandIcons, { brands, brandHidden }))), /* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__expandable", ref: cardElementRef }, !isPaymentMethodInitialized.card && /* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__loading-text" }, /* @__PURE__ */ (0, import_preact17.h)(loader_default, null)), /* @__PURE__ */ (0, import_preact17.h)(
|
|
1175
1175
|
"div",
|
|
1176
1176
|
{
|
|
1177
|
-
className: "
|
|
1177
|
+
className: "straumur__card-component__form",
|
|
1178
1178
|
style: {
|
|
1179
1179
|
opacity: isPaymentMethodInitialized.card ? 1 : 0,
|
|
1180
1180
|
position: isPaymentMethodInitialized.card ? "relative" : "absolute",
|
|
1181
1181
|
transition: "opacity 0.3s ease-in-out"
|
|
1182
1182
|
}
|
|
1183
1183
|
},
|
|
1184
|
-
/* @__PURE__ */ (0, import_preact17.h)("div", { className: "
|
|
1184
|
+
/* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__form--wrapper" }, /* @__PURE__ */ (0, import_preact17.h)(
|
|
1185
1185
|
"label",
|
|
1186
1186
|
{
|
|
1187
|
-
className: `${"
|
|
1187
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedCardNumber.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1188
1188
|
},
|
|
1189
1189
|
i18n(configuration.locale, "cards.cardNumber")
|
|
1190
1190
|
), /* @__PURE__ */ (0, import_preact17.h)(
|
|
1191
1191
|
"span",
|
|
1192
1192
|
{
|
|
1193
|
-
className: `${"
|
|
1193
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedCardNumber.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1194
1194
|
"data-cse": "encryptedCardNumber"
|
|
1195
1195
|
}
|
|
1196
|
-
), formErrors.encryptedCardNumber.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "
|
|
1197
|
-
/* @__PURE__ */ (0, import_preact17.h)("div", { className: "
|
|
1196
|
+
), formErrors.encryptedCardNumber.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedCardNumber.message)),
|
|
1197
|
+
/* @__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
1198
|
"label",
|
|
1199
1199
|
{
|
|
1200
|
-
className: `${"
|
|
1200
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "card-component__form--wrapper--label--error" : ""}`
|
|
1201
1201
|
},
|
|
1202
1202
|
i18n(configuration.locale, "cards.expiryDate")
|
|
1203
1203
|
), /* @__PURE__ */ (0, import_preact17.h)(
|
|
1204
1204
|
"span",
|
|
1205
1205
|
{
|
|
1206
|
-
className: `${"
|
|
1206
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedExpiryDate.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1207
1207
|
"data-cse": "encryptedExpiryDate"
|
|
1208
1208
|
}
|
|
1209
|
-
), formErrors.encryptedExpiryDate.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "
|
|
1209
|
+
), formErrors.encryptedExpiryDate.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedExpiryDate.message)), /* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ (0, import_preact17.h)(import_preact17.Fragment, null, /* @__PURE__ */ (0, import_preact17.h)(
|
|
1210
1210
|
"label",
|
|
1211
1211
|
{
|
|
1212
|
-
className: `${"
|
|
1212
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1213
1213
|
},
|
|
1214
1214
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "cards.securityCode3DigitsOptional") : i18n(configuration.locale, "cards.securityCode3Digits")
|
|
1215
1215
|
), /* @__PURE__ */ (0, import_preact17.h)(
|
|
1216
1216
|
"span",
|
|
1217
1217
|
{
|
|
1218
|
-
className: `${"
|
|
1218
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1219
1219
|
"data-cse": "encryptedSecurityCode"
|
|
1220
1220
|
}
|
|
1221
|
-
), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "
|
|
1222
|
-
paymentMethods.enableStoreDetails === "AskForConsent" && /* @__PURE__ */ (0, import_preact17.h)("label", { className: "
|
|
1221
|
+
), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0, import_preact17.h)("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message), /* @__PURE__ */ (0, import_preact17.h)("div", { className: "straumur__card-component__form--wrapper--label--info" }, /* @__PURE__ */ (0, import_preact17.h)(Tooltip, { content: /* @__PURE__ */ (0, import_preact17.h)("span", null, i18n(configuration.locale, "cards.securityCode3DigitsInfo")) }, /* @__PURE__ */ (0, import_preact17.h)(info_default, null)))))),
|
|
1222
|
+
paymentMethods.enableStoreDetails === "AskForConsent" && /* @__PURE__ */ (0, import_preact17.h)("label", { className: "straumur__card-component__form--wrapper--label-checkbox" }, /* @__PURE__ */ (0, import_preact17.h)(
|
|
1223
1223
|
"div",
|
|
1224
1224
|
{
|
|
1225
|
-
className: `${"
|
|
1225
|
+
className: `${"straumur__card-component__form--wrapper--label-checkbox--checkmark"} ${storePaymentMethod ? "straumur__card-component__form--wrapper--label-checkbox--checkmark--checked" : ""}`
|
|
1226
1226
|
},
|
|
1227
1227
|
/* @__PURE__ */ (0, import_preact17.h)(
|
|
1228
1228
|
"div",
|
|
1229
1229
|
{
|
|
1230
|
-
className: `${"
|
|
1230
|
+
className: `${"straumur__card-component__form--wrapper--label-checkbox--checkmark--icon"} ${storePaymentMethod ? "straumur__card-component__form--wrapper--label-checkbox--checkmark--icon--checked" : ""}`
|
|
1231
1231
|
},
|
|
1232
1232
|
/* @__PURE__ */ (0, import_preact17.h)(checkmark_default, null)
|
|
1233
1233
|
)
|
|
@@ -1235,12 +1235,20 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1235
1235
|
"input",
|
|
1236
1236
|
{
|
|
1237
1237
|
type: "checkbox",
|
|
1238
|
-
className: "
|
|
1238
|
+
className: "straumur__card-component__form--wrapper--label-checkbox--checkbox",
|
|
1239
1239
|
checked: storePaymentMethod,
|
|
1240
1240
|
onChange: handleStorePaymentMethodChange
|
|
1241
1241
|
}
|
|
1242
1242
|
), i18n(configuration.locale, "cards.storePaymentMethod")),
|
|
1243
|
-
/* @__PURE__ */ (0, import_preact17.h)(
|
|
1243
|
+
/* @__PURE__ */ (0, import_preact17.h)(
|
|
1244
|
+
"button",
|
|
1245
|
+
{
|
|
1246
|
+
className: "straumur__card-component__submit-button",
|
|
1247
|
+
disabled: payButtonDisabled,
|
|
1248
|
+
onClick: handleSubmitClick
|
|
1249
|
+
},
|
|
1250
|
+
paymentMethods.formattedAmount
|
|
1251
|
+
)
|
|
1244
1252
|
)));
|
|
1245
1253
|
}
|
|
1246
1254
|
var card_component_default = CardComponent;
|
|
@@ -1250,7 +1258,7 @@ var import_preact19 = require("preact");
|
|
|
1250
1258
|
var import_hooks5 = require("preact/hooks");
|
|
1251
1259
|
|
|
1252
1260
|
// src/features/google-pay/google-pay-component.css
|
|
1253
|
-
styleInject('.
|
|
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');
|
|
1254
1262
|
|
|
1255
1263
|
// src/features/google-pay/google-pay-component.tsx
|
|
1256
1264
|
var import_adyen_web2 = require("@adyen/adyen-web");
|
|
@@ -1380,7 +1388,7 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1380
1388
|
const handleBoxChange = () => {
|
|
1381
1389
|
setActivePaymentMethod("googlepay");
|
|
1382
1390
|
};
|
|
1383
|
-
function handleOnError(
|
|
1391
|
+
function handleOnError(_, __) {
|
|
1384
1392
|
handleError("error.unknownError");
|
|
1385
1393
|
}
|
|
1386
1394
|
async function handleOnSubmit(state, _, actions) {
|
|
@@ -1443,15 +1451,15 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1443
1451
|
if (!hasGooglePay) {
|
|
1444
1452
|
return null;
|
|
1445
1453
|
}
|
|
1446
|
-
return /* @__PURE__ */ (0, import_preact19.h)("label", { className: "
|
|
1454
|
+
return /* @__PURE__ */ (0, import_preact19.h)("label", { className: "straumur__google-pay-component" }, /* @__PURE__ */ (0, import_preact19.h)(
|
|
1447
1455
|
"input",
|
|
1448
1456
|
{
|
|
1449
1457
|
type: "radio",
|
|
1450
|
-
className: "
|
|
1458
|
+
className: "straumur__google-pay-component__radio-selector",
|
|
1451
1459
|
checked: activePaymentMethod === "googlepay",
|
|
1452
1460
|
onChange: handleBoxChange
|
|
1453
1461
|
}
|
|
1454
|
-
), /* @__PURE__ */ (0, import_preact19.h)("span", { className: "
|
|
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, "googlepay.title"))), /* @__PURE__ */ (0, import_preact19.h)("div", { className: "straumur__google-pay-component__expandable" }, /* @__PURE__ */ (0, import_preact19.h)("div", { ref: googlePayElementRef })));
|
|
1455
1463
|
}
|
|
1456
1464
|
var google_pay_component_default = GooglePayComponent;
|
|
1457
1465
|
|
|
@@ -1463,7 +1471,7 @@ var import_preact21 = require("preact");
|
|
|
1463
1471
|
var import_hooks6 = require("preact/hooks");
|
|
1464
1472
|
|
|
1465
1473
|
// src/features/stored-card/stored-card-component.css
|
|
1466
|
-
styleInject('.
|
|
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(--ta jstraumur__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');
|
|
1467
1475
|
|
|
1468
1476
|
// src/features/stored-card/stored-card-component.tsx
|
|
1469
1477
|
var import_adyen_web3 = require("@adyen/adyen-web");
|
|
@@ -1664,15 +1672,15 @@ function StoredCardComponent({
|
|
|
1664
1672
|
if (!customCardRef.current) return;
|
|
1665
1673
|
customCardRef.current.submit();
|
|
1666
1674
|
}
|
|
1667
|
-
return /* @__PURE__ */ (0, import_preact21.h)("label", { className: "
|
|
1675
|
+
return /* @__PURE__ */ (0, import_preact21.h)("label", { className: "straumur__stored-card-component" }, /* @__PURE__ */ (0, import_preact21.h)(
|
|
1668
1676
|
"input",
|
|
1669
1677
|
{
|
|
1670
1678
|
type: "radio",
|
|
1671
|
-
className: "
|
|
1679
|
+
className: "straumur__stored-card-component__radio-selector",
|
|
1672
1680
|
checked: activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id,
|
|
1673
1681
|
onChange: handleBoxChange
|
|
1674
1682
|
}
|
|
1675
|
-
), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "
|
|
1683
|
+
), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__stored-card-component__content" }, /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__stored-card-component--circle" }), /* @__PURE__ */ (0, import_preact21.h)(
|
|
1676
1684
|
RenderBrandIcons,
|
|
1677
1685
|
{
|
|
1678
1686
|
brands: [
|
|
@@ -1682,64 +1690,63 @@ function StoredCardComponent({
|
|
|
1682
1690
|
}
|
|
1683
1691
|
]
|
|
1684
1692
|
}
|
|
1685
|
-
), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "
|
|
1693
|
+
), /* @__PURE__ */ (0, import_preact21.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_preact21.h)("div", { className: "straumur__stored-card-component__remove-stored-card-button" }, /* @__PURE__ */ (0, import_preact21.h)(
|
|
1686
1694
|
"button",
|
|
1687
1695
|
{
|
|
1688
1696
|
onClick: handleAskToConfirmRemoveCard,
|
|
1689
|
-
className: "
|
|
1697
|
+
className: "straumur__stored-card-component__remove-stored-card-button--text",
|
|
1690
1698
|
disabled: askConfirmRemoveStoredCard
|
|
1691
1699
|
},
|
|
1692
1700
|
i18n(configuration.locale, "stored-cards.removeStoredCard")
|
|
1693
1701
|
))), /* @__PURE__ */ (0, import_preact21.h)(
|
|
1694
1702
|
"div",
|
|
1695
1703
|
{
|
|
1696
|
-
className: `${"
|
|
1704
|
+
className: `${"straumur__stored-card-component__confirm-remove-stored-card"} ${askConfirmRemoveStoredCard ? "straumur__stored-card-component__confirm-remove-stored-card--expanded" : ""}`
|
|
1697
1705
|
},
|
|
1698
|
-
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "
|
|
1699
|
-
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "
|
|
1706
|
+
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--header" }, /* @__PURE__ */ (0, import_preact21.h)(warning_default, null), /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__stored-card-component__confirm-remove-stored-card--header--title" }, i18n(configuration.locale, "stored-cards.removeStoredCardQuestion"))),
|
|
1707
|
+
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--actions" }, /* @__PURE__ */ (0, import_preact21.h)(
|
|
1700
1708
|
"button",
|
|
1701
1709
|
{
|
|
1702
|
-
className: "
|
|
1710
|
+
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1703
1711
|
onClick: handleConfirmRemoveStoredCard
|
|
1704
1712
|
},
|
|
1705
1713
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionYesRemove")
|
|
1706
1714
|
), /* @__PURE__ */ (0, import_preact21.h)(
|
|
1707
1715
|
"button",
|
|
1708
1716
|
{
|
|
1709
|
-
className: "
|
|
1717
|
+
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1710
1718
|
onClick: handleCancelRemoveStoredCard
|
|
1711
1719
|
},
|
|
1712
1720
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionCancel")
|
|
1713
1721
|
))
|
|
1714
|
-
), /* @__PURE__ */ (0, import_preact21.h)("div", { className: "
|
|
1722
|
+
), /* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__expandable", ref: storedCardElementRef }, !isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__loading-text" }, /* @__PURE__ */ (0, import_preact21.h)(loader_default, null)), /* @__PURE__ */ (0, import_preact21.h)(
|
|
1715
1723
|
"div",
|
|
1716
1724
|
{
|
|
1717
|
-
className: "
|
|
1725
|
+
className: "straumur__stored-card-component__form",
|
|
1718
1726
|
style: {
|
|
1719
1727
|
opacity: isStoredCardInitialized[storedPaymentMethod.id] ? 1 : 0,
|
|
1720
1728
|
position: isStoredCardInitialized[storedPaymentMethod.id] ? "relative" : "absolute",
|
|
1721
1729
|
transition: "opacity 0.3s ease-in-out"
|
|
1722
1730
|
}
|
|
1723
1731
|
},
|
|
1724
|
-
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "
|
|
1732
|
+
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__form--field-wrapper" }, /* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__form--wrapper" }, /* @__PURE__ */ (0, import_preact21.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_preact21.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_preact21.h)("div", { className: "straumur__stored-card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ (0, import_preact21.h)(import_preact21.Fragment, null, /* @__PURE__ */ (0, import_preact21.h)(
|
|
1725
1733
|
"label",
|
|
1726
1734
|
{
|
|
1727
|
-
className: `${"
|
|
1735
|
+
className: `${"straumur__stored-card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--label--error" : ""}`
|
|
1728
1736
|
},
|
|
1729
1737
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "stored-cards.securityCode3DigitsOptional") : i18n(configuration.locale, "stored-cards.securityCode3Digits")
|
|
1730
1738
|
), /* @__PURE__ */ (0, import_preact21.h)(
|
|
1731
1739
|
"span",
|
|
1732
1740
|
{
|
|
1733
|
-
className: `${"
|
|
1741
|
+
className: `${"straumur__stored-card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--input--error" : ""}`,
|
|
1734
1742
|
"data-cse": "encryptedSecurityCode"
|
|
1735
1743
|
},
|
|
1736
|
-
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "
|
|
1737
|
-
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0, import_preact21.h)("span", { className: "
|
|
1744
|
+
/* @__PURE__ */ (0, import_preact21.h)("div", { className: "straumur__stored-card-component__form--wrapper--label--info" }, /* @__PURE__ */ (0, import_preact21.h)(Tooltip, { content: i18n(configuration.locale, "stored-cards.securityCode3DigitsInfo") }, /* @__PURE__ */ (0, import_preact21.h)(info_default, null)))
|
|
1745
|
+
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ (0, import_preact21.h)("span", { className: "straumur__stored-card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message))),
|
|
1738
1746
|
/* @__PURE__ */ (0, import_preact21.h)(
|
|
1739
1747
|
"button",
|
|
1740
1748
|
{
|
|
1741
|
-
|
|
1742
|
-
className: "stored-card-component__submit-button",
|
|
1749
|
+
className: "straumur__stored-card-component__submit-button",
|
|
1743
1750
|
disabled: payButtonDisabled,
|
|
1744
1751
|
onClick: handleSubmitClick
|
|
1745
1752
|
},
|
|
@@ -1784,11 +1791,11 @@ var stored_card_container_component_default = StoredCardContainerComponent;
|
|
|
1784
1791
|
var import_preact23 = require("preact");
|
|
1785
1792
|
|
|
1786
1793
|
// src/components/payment-method-group/payment-method-group.css
|
|
1787
|
-
styleInject(".
|
|
1794
|
+
styleInject(".straumur__payment-method-group {\n display: flex;\n flex-direction: column;\n gap: var(--straumur__space-xxlg);\n width: 100%;\n}\n");
|
|
1788
1795
|
|
|
1789
1796
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1790
1797
|
function PaymentMethodGroup({ children, initialValue }) {
|
|
1791
|
-
return /* @__PURE__ */ (0, import_preact23.h)(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ (0, import_preact23.h)("div", { className: "
|
|
1798
|
+
return /* @__PURE__ */ (0, import_preact23.h)(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ (0, import_preact23.h)("div", { className: "straumur__payment-method-group" }, children));
|
|
1792
1799
|
}
|
|
1793
1800
|
var payment_method_group_default = PaymentMethodGroup;
|
|
1794
1801
|
|
|
@@ -1796,7 +1803,7 @@ var payment_method_group_default = PaymentMethodGroup;
|
|
|
1796
1803
|
var import_preact26 = require("preact");
|
|
1797
1804
|
|
|
1798
1805
|
// src/features/result-component/result-component.css
|
|
1799
|
-
styleInject(".
|
|
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");
|
|
1800
1807
|
|
|
1801
1808
|
// src/assets/icons/success.tsx
|
|
1802
1809
|
var import_preact24 = require("preact");
|
|
@@ -1907,7 +1914,7 @@ function ResultComponent({ configuration }) {
|
|
|
1907
1914
|
if (!error && !success) {
|
|
1908
1915
|
return null;
|
|
1909
1916
|
}
|
|
1910
|
-
return /* @__PURE__ */ (0, import_preact26.h)("div", { className: "
|
|
1917
|
+
return /* @__PURE__ */ (0, import_preact26.h)("div", { className: "straumur__result-component" }, error && /* @__PURE__ */ (0, import_preact26.h)(import_preact26.Fragment, null, /* @__PURE__ */ (0, import_preact26.h)(failure_default, null), /* @__PURE__ */ (0, import_preact26.h)("p", { className: "straumur__result-component__error--message" }, i18n(configuration.locale, error))), success && /* @__PURE__ */ (0, import_preact26.h)(import_preact26.Fragment, null, /* @__PURE__ */ (0, import_preact26.h)(success_default, null), /* @__PURE__ */ (0, import_preact26.h)("p", { className: "straumur__result-component__success--message" }, i18n(configuration.locale, success))));
|
|
1911
1918
|
}
|
|
1912
1919
|
var result_component_default = ResultComponent;
|
|
1913
1920
|
|
|
@@ -1916,7 +1923,7 @@ var import_preact27 = require("preact");
|
|
|
1916
1923
|
var import_hooks8 = require("preact/hooks");
|
|
1917
1924
|
|
|
1918
1925
|
// src/features/three-d-secure-component/three-d-secure-component.css
|
|
1919
|
-
styleInject(".
|
|
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");
|
|
1920
1927
|
|
|
1921
1928
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1922
1929
|
function StraumurCheckoutContainer() {
|
|
@@ -1927,7 +1934,7 @@ function StraumurCheckoutContainer() {
|
|
|
1927
1934
|
setThreeDSecureRef(threeDSecureRef.current);
|
|
1928
1935
|
}
|
|
1929
1936
|
}, []);
|
|
1930
|
-
return /* @__PURE__ */ (0, import_preact27.h)("div", { className: "
|
|
1937
|
+
return /* @__PURE__ */ (0, import_preact27.h)("div", { className: "straumur__three-d-secure", ref: threeDSecureRef });
|
|
1931
1938
|
}
|
|
1932
1939
|
var three_d_secure_component_default = StraumurCheckoutContainer;
|
|
1933
1940
|
|
|
@@ -1963,7 +1970,7 @@ var StraumurCheckout = class {
|
|
|
1963
1970
|
return;
|
|
1964
1971
|
}
|
|
1965
1972
|
(0, import_preact30.render)(
|
|
1966
|
-
/* @__PURE__ */ (0, import_preact30.h)("div", { className: "
|
|
1973
|
+
/* @__PURE__ */ (0, import_preact30.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact30.h)("div", { className: "straumur__component" }, /* @__PURE__ */ (0, import_preact30.h)(loader_default, null))),
|
|
1967
1974
|
this.mountElement
|
|
1968
1975
|
);
|
|
1969
1976
|
const response = await setupPaymentMethods(this.configuration.environment, this.configuration.sessionId);
|
|
@@ -1980,7 +1987,7 @@ var StraumurCheckout = class {
|
|
|
1980
1987
|
renderComponent() {
|
|
1981
1988
|
if (!this.mountElement) return;
|
|
1982
1989
|
(0, import_preact30.render)(
|
|
1983
|
-
/* @__PURE__ */ (0, import_preact30.h)(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods }),
|
|
1990
|
+
/* @__PURE__ */ (0, import_preact30.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact30.h)(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods })),
|
|
1984
1991
|
this.mountElement
|
|
1985
1992
|
);
|
|
1986
1993
|
}
|
|
@@ -2006,12 +2013,15 @@ var StraumurCheckout = class {
|
|
|
2006
2013
|
}
|
|
2007
2014
|
handleError(message) {
|
|
2008
2015
|
(0, import_preact30.render)(
|
|
2009
|
-
/* @__PURE__ */ (0, import_preact30.h)("div", { className: "
|
|
2016
|
+
/* @__PURE__ */ (0, import_preact30.h)(RootComponent, null, /* @__PURE__ */ (0, import_preact30.h)("div", { className: "straumur__component" }, /* @__PURE__ */ (0, import_preact30.h)(failure_default, null), /* @__PURE__ */ (0, import_preact30.h)("p", null, i18n(this.configuration.locale, message)))),
|
|
2010
2017
|
this.mountElement
|
|
2011
2018
|
);
|
|
2012
2019
|
}
|
|
2013
2020
|
};
|
|
2014
2021
|
var straumur_checkout_default = StraumurCheckout;
|
|
2022
|
+
function RootComponent({ children }) {
|
|
2023
|
+
return /* @__PURE__ */ (0, import_preact30.h)("div", { className: "straumur__root-component" }, children);
|
|
2024
|
+
}
|
|
2015
2025
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2016
2026
|
0 && (module.exports = {
|
|
2017
2027
|
StraumurCheckout
|
package/dist/index.mjs
CHANGED
|
@@ -25,7 +25,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
// src/styles/main.css
|
|
28
|
-
styleInject('
|
|
28
|
+
styleInject(':root {\n --straumur__color-primary: #002649;\n --straumur__color-secondary: #72889d;\n --straumur__color-secondary-gamma: #eef0f2;\n --straumur__color-blue-beta: #bce6f3;\n --straumur__color-blue-gamma: #eff8fa;\n --straumur__color-red-beta: #d96666;\n --straumur__color-red-gamma: #fff8f5;\n --straumur__color-gray-epsilon: #e7e7e7;\n --straumur__color-cosmos-blue-delta: #cdd8e2;\n --straumur__color-cosmos-blue-gamma: #e6ebef;\n --straumur__color-white: #ffffff;\n --straumur__color-transparent: transparent;\n --straumur__border-radius-xxs: 4px;\n --straumur__border-radius-xs: 6px;\n --straumur__border-radius-s: 8px;\n --straumur__border-radius-md: 10px;\n --straumur__border-radius-lg: 12px;\n --straumur__border-radius-xlg: 14px;\n --straumur__border-radius-xxlg: 16px;\n --straumur__space-xxs: 4px;\n --straumur__space-xs: 6px;\n --straumur__space-s: 8px;\n --straumur__space-md: 10px;\n --straumur__space-lg: 12px;\n --straumur__space-xlg: 14px;\n --straumur__space-xxlg: 16px;\n --straumur__space-3xlg: 18px;\n --straumur__space-4xlg: 20px;\n --straumur__space-5xlg: 24px;\n}\n.straumur__root-component {\n font-family: "AkzidenzGroteskPro", sans-serif;\n max-width: 440px;\n min-width: 320px;\n}\n.straumur__component * {\n font-family: inherit;\n}\n.straumur__render-brand-icons__overflow {\n color: #72889d;\n}\n.straumur__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: var(--straumur__border-radius-xxlg);\n}\n');
|
|
29
29
|
|
|
30
30
|
// src/env.ts
|
|
31
31
|
var getEnv = () => {
|
|
@@ -122,11 +122,11 @@ async function setupPaymentMethods(environment, sessionId) {
|
|
|
122
122
|
import { h as h28 } from "preact";
|
|
123
123
|
|
|
124
124
|
// src/features/card/card-component.tsx
|
|
125
|
-
import { Fragment as
|
|
125
|
+
import { Fragment as Fragment2, h as h16 } from "preact";
|
|
126
126
|
import { useRef as useRef3, useState as useState4, useEffect as useEffect2 } from "preact/hooks";
|
|
127
127
|
|
|
128
128
|
// src/features/card/card-component.css
|
|
129
|
-
styleInject('.
|
|
129
|
+
styleInject('.straumur__card-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__card-component__radio-selector {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n.straumur__card-component__content {\n display: grid;\n grid-template-columns: 26px 40px auto 1fr;\n align-items: center;\n gap: var(--straumur__space-lg);\n transition: background-color 0.3s ease;\n}\n.straumur__card-component__radio-selector:checked + .straumur__card-component__content {\n padding-bottom: var(--straumur__space-xxlg);\n}\n.straumur__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__card-component__content:hover .straumur__card-component--circle {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__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__card-component__radio-selector:checked + .straumur__card-component__content .straumur__card-component--circle {\n background: var(--straumur__color-blue-beta);\n border-color: var(--straumur__color-transparent);\n}\n.straumur__card-component__radio-selector:checked + .straumur__card-component__content .straumur__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__card-component--text {\n color: #213547;\n font-size: 1rem;\n user-select: none;\n}\n.straumur__card-component--brands {\n display: flex;\n margin-left: auto;\n align-items: center;\n gap: var(--straumur__space-xxs);\n}\n.straumur__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__card-component__loading-text {\n display: flex;\n justify-content: center;\n}\n.straumur__card-component__radio-selector:checked ~ .straumur__card-component__expandable {\n max-height: 400px;\n opacity: 1;\n}\n.straumur__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__card-component__form--wrapper {\n display: flex;\n flex-direction: column;\n justify-items: start;\n position: relative;\n width: 100%;\n}\n.straumur__card-component__form--wrapper--error {\n color: var(--straumur__color-red-beta);\n font-size: 12px;\n}\n.straumur__card-component__form--wrapper--label {\n transform: translateX(var(--straumur__space-md)) 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__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}\n.straumur__card-component__form--wrapper--label--info {\n position: absolute;\n top: 33%;\n right: var(--straumur__space-md);\n}\n.straumur__card-component__form--wrapper--input {\n background: var(--straumur__color-secondary-gamma);\n color: #00112c;\n display: block;\n font-family: inherit;\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}\n.straumur__card-component__form--wrapper--input:hover {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__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__card-component__form--wrapper--input--error:hover {\n border: 1px solid var(--straumur__color-red-beta);\n}\n.straumur__card-component__form--field-wrapper {\n display: flex;\n width: 100%;\n gap: var(--straumur__space-5xlg);\n}\n.straumur__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__card-component__submit-button:hover {\n background: var(--straumur__color-primary);\n border: 1px solid #dbdee2;\n}\n.straumur__card-component__submit-button:disabled {\n background: #72889d;\n border: 1px solid #dbdee2;\n cursor: not-allowed;\n}\n.straumur__card-component__form--wrapper--label-checkbox {\n height: 38px;\n display: flex;\n align-items: center;\n padding: 8px;\n gap: var(--straumur__space-s);\n border-radius: var(--straumur__border-radius-s);\n cursor: pointer;\n user-select: none;\n transition: background-color 0.25s ease-in-out;\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover {\n background-color: var(--straumur__color-blue-gamma);\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover .straumur__card-component__form--wrapper--label-checkbox--checkmark {\n border: 1px solid var(--straumur__color-cosmos-blue-delta);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark {\n height: var(--straumur__space-5xlg);\n width: var(--straumur__space-5xlg);\n background-color: var(--straumur__color-secondary-gamma);\n border-radius: var(--straumur__border-radius-xxs);\n flex-shrink: 0;\n border: 1px solid var(--straumur__color-transparent);\n transition: all 0.2s ease-in;\n}\n.straumur__card-component__form--wrapper--label-checkbox:hover .straumur__card-component__form--wrapper--label-checkbox--checkmark.straumur__card-component__form--wrapper--label-checkbox--checkmark--checked {\n border: 1px solid var(--straumur__color-transparent);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--checked {\n background-color: var(--straumur__color-blue-beta);\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--icon {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 9px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s ease-in;\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkmark--icon--checked {\n opacity: 1;\n visibility: visible;\n}\n.straumur__card-component__form--wrapper--label-checkbox--checkbox {\n display: none;\n}\n');
|
|
130
130
|
|
|
131
131
|
// src/components/payment-method-group/payment-method-group-context.tsx
|
|
132
132
|
import { h } from "preact";
|
|
@@ -288,7 +288,7 @@ function i18n(language, key) {
|
|
|
288
288
|
import { h as h2 } from "preact";
|
|
289
289
|
|
|
290
290
|
// src/components/tooltip/tooltip.css
|
|
291
|
-
styleInject(".
|
|
291
|
+
styleInject(".straumur__tooltip__content {\n position: absolute;\n z-index: 50;\n padding: var(--straumur__space-s);\n border-radius: var(--straumur__border-radius-s);\n right: 40%;\n top: 100%;\n width: max-content;\n color: var(--straumur__color-white);\n background-color: var(--straumur__color-primary);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n");
|
|
292
292
|
|
|
293
293
|
// src/components/tooltip/tooltip.tsx
|
|
294
294
|
import { useRef as useRef2, useState as useState2 } from "preact/hooks";
|
|
@@ -301,7 +301,7 @@ var Tooltip = ({ children, content }) => {
|
|
|
301
301
|
const handleMouseLeave = () => {
|
|
302
302
|
setIsVisible(false);
|
|
303
303
|
};
|
|
304
|
-
return /* @__PURE__ */ h2("div", { style: { position: "relative" } }, /* @__PURE__ */ h2("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children), isVisible && triggerRef && /* @__PURE__ */ h2("div", { className: "
|
|
304
|
+
return /* @__PURE__ */ h2("div", { style: { position: "relative" } }, /* @__PURE__ */ h2("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children), isVisible && triggerRef && /* @__PURE__ */ h2("div", { className: "straumur__tooltip__content" }, content));
|
|
305
305
|
};
|
|
306
306
|
|
|
307
307
|
// src/assets/icons/card.tsx
|
|
@@ -346,7 +346,7 @@ var InfoIcon = () => /* @__PURE__ */ h4("svg", { width: "21", height: "20", view
|
|
|
346
346
|
var info_default = InfoIcon;
|
|
347
347
|
|
|
348
348
|
// src/utils/renderBrandIcons.tsx
|
|
349
|
-
import { Fragment
|
|
349
|
+
import { Fragment, h as h13 } from "preact";
|
|
350
350
|
|
|
351
351
|
// src/assets/icons/mastercard.tsx
|
|
352
352
|
import { h as h5 } from "preact";
|
|
@@ -902,7 +902,7 @@ function RenderBrandIcons({ brands, brandHidden = [], limit = 3 }) {
|
|
|
902
902
|
const hidden = brandHidden.some((x) => x.brand === brandName);
|
|
903
903
|
return !hidden;
|
|
904
904
|
});
|
|
905
|
-
return /* @__PURE__ */ h13(
|
|
905
|
+
return /* @__PURE__ */ h13(Fragment, null, brandToShow.map(({ brand }, index) => {
|
|
906
906
|
if (index >= Math.min(limit, widthLimit)) {
|
|
907
907
|
if (index === Math.min(limit, widthLimit)) {
|
|
908
908
|
return /* @__PURE__ */ h13(
|
|
@@ -910,7 +910,7 @@ function RenderBrandIcons({ brands, brandHidden = [], limit = 3 }) {
|
|
|
910
910
|
{
|
|
911
911
|
content: /* @__PURE__ */ h13("span", { style: { display: "flex", gap: "4px", overflow: "visible" } }, brandToShow.slice(Math.min(limit, widthLimit)).map(({ brand: brand2 }) => /* @__PURE__ */ h13(RenderBrandIcon, { key: brand2, brand: brand2 })))
|
|
912
912
|
},
|
|
913
|
-
/* @__PURE__ */ h13("span", { key: brand, className: "
|
|
913
|
+
/* @__PURE__ */ h13("span", { key: brand, className: "straumur__render-brand-icons__overflow" }, "+", brandToShow.length - Math.min(limit, widthLimit))
|
|
914
914
|
);
|
|
915
915
|
}
|
|
916
916
|
return null;
|
|
@@ -1140,71 +1140,71 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1140
1140
|
if (!customCardRef.current) return;
|
|
1141
1141
|
customCardRef.current.submit();
|
|
1142
1142
|
}
|
|
1143
|
-
return /* @__PURE__ */ h16("label", { className: "
|
|
1143
|
+
return /* @__PURE__ */ h16("label", { className: "straumur__card-component" }, /* @__PURE__ */ h16(
|
|
1144
1144
|
"input",
|
|
1145
1145
|
{
|
|
1146
1146
|
type: "radio",
|
|
1147
|
-
className: "
|
|
1147
|
+
className: "straumur__card-component__radio-selector",
|
|
1148
1148
|
checked: activePaymentMethod === "card",
|
|
1149
1149
|
onChange: handleBoxChange
|
|
1150
1150
|
}
|
|
1151
|
-
), /* @__PURE__ */ h16("span", { className: "
|
|
1151
|
+
), /* @__PURE__ */ h16("span", { className: "straumur__card-component__content" }, /* @__PURE__ */ h16("span", { className: "straumur__card-component--circle" }), /* @__PURE__ */ h16(card_default, null), /* @__PURE__ */ h16("span", { className: "straumur__card-component--text" }, i18n(configuration.locale, "cards.title")), /* @__PURE__ */ h16("span", { className: "straumur__card-component--brands" }, /* @__PURE__ */ h16(RenderBrandIcons, { brands, brandHidden }))), /* @__PURE__ */ h16("div", { className: "straumur__card-component__expandable", ref: cardElementRef }, !isPaymentMethodInitialized.card && /* @__PURE__ */ h16("div", { className: "straumur__card-component__loading-text" }, /* @__PURE__ */ h16(loader_default, null)), /* @__PURE__ */ h16(
|
|
1152
1152
|
"div",
|
|
1153
1153
|
{
|
|
1154
|
-
className: "
|
|
1154
|
+
className: "straumur__card-component__form",
|
|
1155
1155
|
style: {
|
|
1156
1156
|
opacity: isPaymentMethodInitialized.card ? 1 : 0,
|
|
1157
1157
|
position: isPaymentMethodInitialized.card ? "relative" : "absolute",
|
|
1158
1158
|
transition: "opacity 0.3s ease-in-out"
|
|
1159
1159
|
}
|
|
1160
1160
|
},
|
|
1161
|
-
/* @__PURE__ */ h16("div", { className: "
|
|
1161
|
+
/* @__PURE__ */ h16("div", { className: "straumur__card-component__form--wrapper" }, /* @__PURE__ */ h16(
|
|
1162
1162
|
"label",
|
|
1163
1163
|
{
|
|
1164
|
-
className: `${"
|
|
1164
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedCardNumber.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1165
1165
|
},
|
|
1166
1166
|
i18n(configuration.locale, "cards.cardNumber")
|
|
1167
1167
|
), /* @__PURE__ */ h16(
|
|
1168
1168
|
"span",
|
|
1169
1169
|
{
|
|
1170
|
-
className: `${"
|
|
1170
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedCardNumber.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1171
1171
|
"data-cse": "encryptedCardNumber"
|
|
1172
1172
|
}
|
|
1173
|
-
), formErrors.encryptedCardNumber.visible && /* @__PURE__ */ h16("span", { className: "
|
|
1174
|
-
/* @__PURE__ */ h16("div", { className: "
|
|
1173
|
+
), formErrors.encryptedCardNumber.visible && /* @__PURE__ */ h16("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedCardNumber.message)),
|
|
1174
|
+
/* @__PURE__ */ h16("div", { className: "straumur__card-component__form--field-wrapper" }, /* @__PURE__ */ h16("div", { className: "straumur__card-component__form--wrapper" }, /* @__PURE__ */ h16(
|
|
1175
1175
|
"label",
|
|
1176
1176
|
{
|
|
1177
|
-
className: `${"
|
|
1177
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedExpiryDate.visible ? "card-component__form--wrapper--label--error" : ""}`
|
|
1178
1178
|
},
|
|
1179
1179
|
i18n(configuration.locale, "cards.expiryDate")
|
|
1180
1180
|
), /* @__PURE__ */ h16(
|
|
1181
1181
|
"span",
|
|
1182
1182
|
{
|
|
1183
|
-
className: `${"
|
|
1183
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedExpiryDate.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1184
1184
|
"data-cse": "encryptedExpiryDate"
|
|
1185
1185
|
}
|
|
1186
|
-
), formErrors.encryptedExpiryDate.visible && /* @__PURE__ */ h16("span", { className: "
|
|
1186
|
+
), formErrors.encryptedExpiryDate.visible && /* @__PURE__ */ h16("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedExpiryDate.message)), /* @__PURE__ */ h16("div", { className: "straumur__card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ h16(Fragment2, null, /* @__PURE__ */ h16(
|
|
1187
1187
|
"label",
|
|
1188
1188
|
{
|
|
1189
|
-
className: `${"
|
|
1189
|
+
className: `${"straumur__card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__card-component__form--wrapper--label--error" : ""}`
|
|
1190
1190
|
},
|
|
1191
1191
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "cards.securityCode3DigitsOptional") : i18n(configuration.locale, "cards.securityCode3Digits")
|
|
1192
1192
|
), /* @__PURE__ */ h16(
|
|
1193
1193
|
"span",
|
|
1194
1194
|
{
|
|
1195
|
-
className: `${"
|
|
1195
|
+
className: `${"straumur__card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__card-component__form--wrapper--input--error" : ""}`,
|
|
1196
1196
|
"data-cse": "encryptedSecurityCode"
|
|
1197
1197
|
}
|
|
1198
|
-
), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ h16("span", { className: "
|
|
1199
|
-
paymentMethods.enableStoreDetails === "AskForConsent" && /* @__PURE__ */ h16("label", { className: "
|
|
1198
|
+
), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ h16("span", { className: "straumur__card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message), /* @__PURE__ */ h16("div", { className: "straumur__card-component__form--wrapper--label--info" }, /* @__PURE__ */ h16(Tooltip, { content: /* @__PURE__ */ h16("span", null, i18n(configuration.locale, "cards.securityCode3DigitsInfo")) }, /* @__PURE__ */ h16(info_default, null)))))),
|
|
1199
|
+
paymentMethods.enableStoreDetails === "AskForConsent" && /* @__PURE__ */ h16("label", { className: "straumur__card-component__form--wrapper--label-checkbox" }, /* @__PURE__ */ h16(
|
|
1200
1200
|
"div",
|
|
1201
1201
|
{
|
|
1202
|
-
className: `${"
|
|
1202
|
+
className: `${"straumur__card-component__form--wrapper--label-checkbox--checkmark"} ${storePaymentMethod ? "straumur__card-component__form--wrapper--label-checkbox--checkmark--checked" : ""}`
|
|
1203
1203
|
},
|
|
1204
1204
|
/* @__PURE__ */ h16(
|
|
1205
1205
|
"div",
|
|
1206
1206
|
{
|
|
1207
|
-
className: `${"
|
|
1207
|
+
className: `${"straumur__card-component__form--wrapper--label-checkbox--checkmark--icon"} ${storePaymentMethod ? "straumur__card-component__form--wrapper--label-checkbox--checkmark--icon--checked" : ""}`
|
|
1208
1208
|
},
|
|
1209
1209
|
/* @__PURE__ */ h16(checkmark_default, null)
|
|
1210
1210
|
)
|
|
@@ -1212,12 +1212,20 @@ function CardComponent({ configuration, paymentMethods }) {
|
|
|
1212
1212
|
"input",
|
|
1213
1213
|
{
|
|
1214
1214
|
type: "checkbox",
|
|
1215
|
-
className: "
|
|
1215
|
+
className: "straumur__card-component__form--wrapper--label-checkbox--checkbox",
|
|
1216
1216
|
checked: storePaymentMethod,
|
|
1217
1217
|
onChange: handleStorePaymentMethodChange
|
|
1218
1218
|
}
|
|
1219
1219
|
), i18n(configuration.locale, "cards.storePaymentMethod")),
|
|
1220
|
-
/* @__PURE__ */ h16(
|
|
1220
|
+
/* @__PURE__ */ h16(
|
|
1221
|
+
"button",
|
|
1222
|
+
{
|
|
1223
|
+
className: "straumur__card-component__submit-button",
|
|
1224
|
+
disabled: payButtonDisabled,
|
|
1225
|
+
onClick: handleSubmitClick
|
|
1226
|
+
},
|
|
1227
|
+
paymentMethods.formattedAmount
|
|
1228
|
+
)
|
|
1221
1229
|
)));
|
|
1222
1230
|
}
|
|
1223
1231
|
var card_component_default = CardComponent;
|
|
@@ -1227,7 +1235,7 @@ import { h as h18 } from "preact";
|
|
|
1227
1235
|
import { useEffect as useEffect3, useRef as useRef4 } from "preact/hooks";
|
|
1228
1236
|
|
|
1229
1237
|
// src/features/google-pay/google-pay-component.css
|
|
1230
|
-
styleInject('.
|
|
1238
|
+
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');
|
|
1231
1239
|
|
|
1232
1240
|
// src/features/google-pay/google-pay-component.tsx
|
|
1233
1241
|
import {
|
|
@@ -1360,7 +1368,7 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1360
1368
|
const handleBoxChange = () => {
|
|
1361
1369
|
setActivePaymentMethod("googlepay");
|
|
1362
1370
|
};
|
|
1363
|
-
function handleOnError(
|
|
1371
|
+
function handleOnError(_, __) {
|
|
1364
1372
|
handleError("error.unknownError");
|
|
1365
1373
|
}
|
|
1366
1374
|
async function handleOnSubmit(state, _, actions) {
|
|
@@ -1423,27 +1431,27 @@ function GooglePayComponent({ configuration, paymentMethods }) {
|
|
|
1423
1431
|
if (!hasGooglePay) {
|
|
1424
1432
|
return null;
|
|
1425
1433
|
}
|
|
1426
|
-
return /* @__PURE__ */ h18("label", { className: "
|
|
1434
|
+
return /* @__PURE__ */ h18("label", { className: "straumur__google-pay-component" }, /* @__PURE__ */ h18(
|
|
1427
1435
|
"input",
|
|
1428
1436
|
{
|
|
1429
1437
|
type: "radio",
|
|
1430
|
-
className: "
|
|
1438
|
+
className: "straumur__google-pay-component__radio-selector",
|
|
1431
1439
|
checked: activePaymentMethod === "googlepay",
|
|
1432
1440
|
onChange: handleBoxChange
|
|
1433
1441
|
}
|
|
1434
|
-
), /* @__PURE__ */ h18("span", { className: "
|
|
1442
|
+
), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component__content" }, /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--circle" }), /* @__PURE__ */ h18(googlepay_default, null), /* @__PURE__ */ h18("span", { className: "straumur__google-pay-component--text" }, i18n(configuration.locale, "googlepay.title"))), /* @__PURE__ */ h18("div", { className: "straumur__google-pay-component__expandable" }, /* @__PURE__ */ h18("div", { ref: googlePayElementRef })));
|
|
1435
1443
|
}
|
|
1436
1444
|
var google_pay_component_default = GooglePayComponent;
|
|
1437
1445
|
|
|
1438
1446
|
// src/features/stored-card/stored-card-container-component.tsx
|
|
1439
|
-
import { Fragment as
|
|
1447
|
+
import { Fragment as Fragment4, h as h21 } from "preact";
|
|
1440
1448
|
|
|
1441
1449
|
// src/features/stored-card/stored-card-component.tsx
|
|
1442
|
-
import { Fragment as
|
|
1450
|
+
import { Fragment as Fragment3, h as h20 } from "preact";
|
|
1443
1451
|
import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "preact/hooks";
|
|
1444
1452
|
|
|
1445
1453
|
// src/features/stored-card/stored-card-component.css
|
|
1446
|
-
styleInject('.
|
|
1454
|
+
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(--ta jstraumur__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');
|
|
1447
1455
|
|
|
1448
1456
|
// src/features/stored-card/stored-card-component.tsx
|
|
1449
1457
|
import {
|
|
@@ -1647,15 +1655,15 @@ function StoredCardComponent({
|
|
|
1647
1655
|
if (!customCardRef.current) return;
|
|
1648
1656
|
customCardRef.current.submit();
|
|
1649
1657
|
}
|
|
1650
|
-
return /* @__PURE__ */ h20("label", { className: "
|
|
1658
|
+
return /* @__PURE__ */ h20("label", { className: "straumur__stored-card-component" }, /* @__PURE__ */ h20(
|
|
1651
1659
|
"input",
|
|
1652
1660
|
{
|
|
1653
1661
|
type: "radio",
|
|
1654
|
-
className: "
|
|
1662
|
+
className: "straumur__stored-card-component__radio-selector",
|
|
1655
1663
|
checked: activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id,
|
|
1656
1664
|
onChange: handleBoxChange
|
|
1657
1665
|
}
|
|
1658
|
-
), /* @__PURE__ */ h20("span", { className: "
|
|
1666
|
+
), /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component__content" }, /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component--circle" }), /* @__PURE__ */ h20(
|
|
1659
1667
|
RenderBrandIcons,
|
|
1660
1668
|
{
|
|
1661
1669
|
brands: [
|
|
@@ -1665,64 +1673,63 @@ function StoredCardComponent({
|
|
|
1665
1673
|
}
|
|
1666
1674
|
]
|
|
1667
1675
|
}
|
|
1668
|
-
), /* @__PURE__ */ h20("span", { className: "
|
|
1676
|
+
), /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component--text" }, "\u2022\u2022\u2022\u2022 ", storedPaymentMethod.lastFour), activePaymentMethod === "storedcard" && activeStoredPaymentMethodId === storedPaymentMethod.id && isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__remove-stored-card-button" }, /* @__PURE__ */ h20(
|
|
1669
1677
|
"button",
|
|
1670
1678
|
{
|
|
1671
1679
|
onClick: handleAskToConfirmRemoveCard,
|
|
1672
|
-
className: "
|
|
1680
|
+
className: "straumur__stored-card-component__remove-stored-card-button--text",
|
|
1673
1681
|
disabled: askConfirmRemoveStoredCard
|
|
1674
1682
|
},
|
|
1675
1683
|
i18n(configuration.locale, "stored-cards.removeStoredCard")
|
|
1676
1684
|
))), /* @__PURE__ */ h20(
|
|
1677
1685
|
"div",
|
|
1678
1686
|
{
|
|
1679
|
-
className: `${"
|
|
1687
|
+
className: `${"straumur__stored-card-component__confirm-remove-stored-card"} ${askConfirmRemoveStoredCard ? "straumur__stored-card-component__confirm-remove-stored-card--expanded" : ""}`
|
|
1680
1688
|
},
|
|
1681
|
-
/* @__PURE__ */ h20("div", { className: "
|
|
1682
|
-
/* @__PURE__ */ h20("div", { className: "
|
|
1689
|
+
/* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--header" }, /* @__PURE__ */ h20(warning_default, null), /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component__confirm-remove-stored-card--header--title" }, i18n(configuration.locale, "stored-cards.removeStoredCardQuestion"))),
|
|
1690
|
+
/* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__confirm-remove-stored-card--actions" }, /* @__PURE__ */ h20(
|
|
1683
1691
|
"button",
|
|
1684
1692
|
{
|
|
1685
|
-
className: "
|
|
1693
|
+
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1686
1694
|
onClick: handleConfirmRemoveStoredCard
|
|
1687
1695
|
},
|
|
1688
1696
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionYesRemove")
|
|
1689
1697
|
), /* @__PURE__ */ h20(
|
|
1690
1698
|
"button",
|
|
1691
1699
|
{
|
|
1692
|
-
className: "
|
|
1700
|
+
className: "straumur__stored-card-component__confirm-remove-stored-card--actions--button",
|
|
1693
1701
|
onClick: handleCancelRemoveStoredCard
|
|
1694
1702
|
},
|
|
1695
1703
|
i18n(configuration.locale, "stored-cards.removeStoredCardQuestionCancel")
|
|
1696
1704
|
))
|
|
1697
|
-
), /* @__PURE__ */ h20("div", { className: "
|
|
1705
|
+
), /* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__expandable", ref: storedCardElementRef }, !isStoredCardInitialized[storedPaymentMethod.id] && /* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__loading-text" }, /* @__PURE__ */ h20(loader_default, null)), /* @__PURE__ */ h20(
|
|
1698
1706
|
"div",
|
|
1699
1707
|
{
|
|
1700
|
-
className: "
|
|
1708
|
+
className: "straumur__stored-card-component__form",
|
|
1701
1709
|
style: {
|
|
1702
1710
|
opacity: isStoredCardInitialized[storedPaymentMethod.id] ? 1 : 0,
|
|
1703
1711
|
position: isStoredCardInitialized[storedPaymentMethod.id] ? "relative" : "absolute",
|
|
1704
1712
|
transition: "opacity 0.3s ease-in-out"
|
|
1705
1713
|
}
|
|
1706
1714
|
},
|
|
1707
|
-
/* @__PURE__ */ h20("div", { className: "
|
|
1715
|
+
/* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__form--field-wrapper" }, /* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__form--wrapper" }, /* @__PURE__ */ h20("label", { className: "straumur__stored-card-component__form--wrapper--label straumur__stored-card-component__form--wrapper--label--readonly" }, i18n(configuration.locale, "stored-cards.expiryDate")), /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component__form--wrapper--input straumur__stored-card-component__form--wrapper--input--readonly" }, storedPaymentMethod.expiryMonth, "/", storedPaymentMethod.expiryYear)), /* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__form--wrapper" }, (securityCodePolicy === "optional" || securityCodePolicy === "required") && /* @__PURE__ */ h20(Fragment3, null, /* @__PURE__ */ h20(
|
|
1708
1716
|
"label",
|
|
1709
1717
|
{
|
|
1710
|
-
className: `${"
|
|
1718
|
+
className: `${"straumur__stored-card-component__form--wrapper--label"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--label--error" : ""}`
|
|
1711
1719
|
},
|
|
1712
1720
|
securityCodePolicy === "optional" ? i18n(configuration.locale, "stored-cards.securityCode3DigitsOptional") : i18n(configuration.locale, "stored-cards.securityCode3Digits")
|
|
1713
1721
|
), /* @__PURE__ */ h20(
|
|
1714
1722
|
"span",
|
|
1715
1723
|
{
|
|
1716
|
-
className: `${"
|
|
1724
|
+
className: `${"straumur__stored-card-component__form--wrapper--input"} ${formErrors.encryptedSecurityCode.visible ? "straumur__stored-card-component__form--wrapper--input--error" : ""}`,
|
|
1717
1725
|
"data-cse": "encryptedSecurityCode"
|
|
1718
1726
|
},
|
|
1719
|
-
/* @__PURE__ */ h20("div", { className: "
|
|
1720
|
-
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ h20("span", { className: "
|
|
1727
|
+
/* @__PURE__ */ h20("div", { className: "straumur__stored-card-component__form--wrapper--label--info" }, /* @__PURE__ */ h20(Tooltip, { content: i18n(configuration.locale, "stored-cards.securityCode3DigitsInfo") }, /* @__PURE__ */ h20(info_default, null)))
|
|
1728
|
+
)), formErrors.encryptedSecurityCode.visible && /* @__PURE__ */ h20("span", { className: "straumur__stored-card-component__form--wrapper--error" }, formErrors.encryptedSecurityCode.message))),
|
|
1721
1729
|
/* @__PURE__ */ h20(
|
|
1722
1730
|
"button",
|
|
1723
1731
|
{
|
|
1724
|
-
|
|
1725
|
-
className: "stored-card-component__submit-button",
|
|
1732
|
+
className: "straumur__stored-card-component__submit-button",
|
|
1726
1733
|
disabled: payButtonDisabled,
|
|
1727
1734
|
onClick: handleSubmitClick
|
|
1728
1735
|
},
|
|
@@ -1750,7 +1757,7 @@ function StoredCardContainerComponent({
|
|
|
1750
1757
|
(prevStoredPaymentMethods) => prevStoredPaymentMethods.filter((storedPaymentMethod) => storedPaymentMethod.id !== storedPaymentMethodId)
|
|
1751
1758
|
);
|
|
1752
1759
|
}
|
|
1753
|
-
return /* @__PURE__ */ h21(
|
|
1760
|
+
return /* @__PURE__ */ h21(Fragment4, null, storedPaymentMethods == null ? void 0 : storedPaymentMethods.map((storedPaymentMethod) => /* @__PURE__ */ h21(
|
|
1754
1761
|
stored_card_component_default,
|
|
1755
1762
|
{
|
|
1756
1763
|
key: storedPaymentMethod.id,
|
|
@@ -1767,19 +1774,19 @@ var stored_card_container_component_default = StoredCardContainerComponent;
|
|
|
1767
1774
|
import { h as h22 } from "preact";
|
|
1768
1775
|
|
|
1769
1776
|
// src/components/payment-method-group/payment-method-group.css
|
|
1770
|
-
styleInject(".
|
|
1777
|
+
styleInject(".straumur__payment-method-group {\n display: flex;\n flex-direction: column;\n gap: var(--straumur__space-xxlg);\n width: 100%;\n}\n");
|
|
1771
1778
|
|
|
1772
1779
|
// src/components/payment-method-group/payment-method-group.tsx
|
|
1773
1780
|
function PaymentMethodGroup({ children, initialValue }) {
|
|
1774
|
-
return /* @__PURE__ */ h22(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ h22("div", { className: "
|
|
1781
|
+
return /* @__PURE__ */ h22(PaymentMethodGroupContext, { initialValue }, /* @__PURE__ */ h22("div", { className: "straumur__payment-method-group" }, children));
|
|
1775
1782
|
}
|
|
1776
1783
|
var payment_method_group_default = PaymentMethodGroup;
|
|
1777
1784
|
|
|
1778
1785
|
// src/features/result-component/result-component.tsx
|
|
1779
|
-
import { h as h25 } from "preact";
|
|
1786
|
+
import { Fragment as Fragment5, h as h25 } from "preact";
|
|
1780
1787
|
|
|
1781
1788
|
// src/features/result-component/result-component.css
|
|
1782
|
-
styleInject(".
|
|
1789
|
+
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");
|
|
1783
1790
|
|
|
1784
1791
|
// src/assets/icons/success.tsx
|
|
1785
1792
|
import { h as h23 } from "preact";
|
|
@@ -1890,7 +1897,7 @@ function ResultComponent({ configuration }) {
|
|
|
1890
1897
|
if (!error && !success) {
|
|
1891
1898
|
return null;
|
|
1892
1899
|
}
|
|
1893
|
-
return /* @__PURE__ */ h25("div", { className: "
|
|
1900
|
+
return /* @__PURE__ */ h25("div", { className: "straumur__result-component" }, error && /* @__PURE__ */ h25(Fragment5, null, /* @__PURE__ */ h25(failure_default, null), /* @__PURE__ */ h25("p", { className: "straumur__result-component__error--message" }, i18n(configuration.locale, error))), success && /* @__PURE__ */ h25(Fragment5, null, /* @__PURE__ */ h25(success_default, null), /* @__PURE__ */ h25("p", { className: "straumur__result-component__success--message" }, i18n(configuration.locale, success))));
|
|
1894
1901
|
}
|
|
1895
1902
|
var result_component_default = ResultComponent;
|
|
1896
1903
|
|
|
@@ -1899,7 +1906,7 @@ import { h as h26 } from "preact";
|
|
|
1899
1906
|
import { useEffect as useEffect5, useRef as useRef6 } from "preact/hooks";
|
|
1900
1907
|
|
|
1901
1908
|
// src/features/three-d-secure-component/three-d-secure-component.css
|
|
1902
|
-
styleInject(".
|
|
1909
|
+
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");
|
|
1903
1910
|
|
|
1904
1911
|
// src/features/three-d-secure-component/three-d-secure-component.tsx
|
|
1905
1912
|
function StraumurCheckoutContainer() {
|
|
@@ -1910,7 +1917,7 @@ function StraumurCheckoutContainer() {
|
|
|
1910
1917
|
setThreeDSecureRef(threeDSecureRef.current);
|
|
1911
1918
|
}
|
|
1912
1919
|
}, []);
|
|
1913
|
-
return /* @__PURE__ */ h26("div", { className: "
|
|
1920
|
+
return /* @__PURE__ */ h26("div", { className: "straumur__three-d-secure", ref: threeDSecureRef });
|
|
1914
1921
|
}
|
|
1915
1922
|
var three_d_secure_component_default = StraumurCheckoutContainer;
|
|
1916
1923
|
|
|
@@ -1946,7 +1953,7 @@ var StraumurCheckout = class {
|
|
|
1946
1953
|
return;
|
|
1947
1954
|
}
|
|
1948
1955
|
render(
|
|
1949
|
-
/* @__PURE__ */ h29("div", { className: "
|
|
1956
|
+
/* @__PURE__ */ h29(RootComponent, null, /* @__PURE__ */ h29("div", { className: "straumur__component" }, /* @__PURE__ */ h29(loader_default, null))),
|
|
1950
1957
|
this.mountElement
|
|
1951
1958
|
);
|
|
1952
1959
|
const response = await setupPaymentMethods(this.configuration.environment, this.configuration.sessionId);
|
|
@@ -1963,7 +1970,7 @@ var StraumurCheckout = class {
|
|
|
1963
1970
|
renderComponent() {
|
|
1964
1971
|
if (!this.mountElement) return;
|
|
1965
1972
|
render(
|
|
1966
|
-
/* @__PURE__ */ h29(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods }),
|
|
1973
|
+
/* @__PURE__ */ h29(RootComponent, null, /* @__PURE__ */ h29(straumur_checkout_container_default, { configuration: this.configuration, paymentMethods: this.paymentMethods })),
|
|
1967
1974
|
this.mountElement
|
|
1968
1975
|
);
|
|
1969
1976
|
}
|
|
@@ -1989,12 +1996,15 @@ var StraumurCheckout = class {
|
|
|
1989
1996
|
}
|
|
1990
1997
|
handleError(message) {
|
|
1991
1998
|
render(
|
|
1992
|
-
/* @__PURE__ */ h29("div", { className: "
|
|
1999
|
+
/* @__PURE__ */ h29(RootComponent, null, /* @__PURE__ */ h29("div", { className: "straumur__component" }, /* @__PURE__ */ h29(failure_default, null), /* @__PURE__ */ h29("p", null, i18n(this.configuration.locale, message)))),
|
|
1993
2000
|
this.mountElement
|
|
1994
2001
|
);
|
|
1995
2002
|
}
|
|
1996
2003
|
};
|
|
1997
2004
|
var straumur_checkout_default = StraumurCheckout;
|
|
2005
|
+
function RootComponent({ children }) {
|
|
2006
|
+
return /* @__PURE__ */ h29("div", { className: "straumur__root-component" }, children);
|
|
2007
|
+
}
|
|
1998
2008
|
export {
|
|
1999
2009
|
straumur_checkout_default as StraumurCheckout
|
|
2000
2010
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "straumur-web-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://docs.straumur.is",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"main": "dist/index.
|
|
8
|
-
"module": "dist/index.
|
|
9
|
-
"unpkg": "dist/index.js",
|
|
7
|
+
"main": "dist/index.cjs",
|
|
8
|
+
"module": "dist/index.mjs",
|
|
10
9
|
"types": "dist/index.d.ts",
|
|
11
10
|
"exports": {
|
|
12
11
|
"import": "./dist/index.mjs",
|
|
File without changes
|