@netlib/widerrufsbutton 1.2.0 → 2.1.3
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/fallback.cjs.js +32 -27
- package/dist/fallback.es.js +40 -41
- package/dist/index.cjs.js +40 -35
- package/dist/index.d.ts +1 -1
- package/dist/index.es.js +199 -174
- package/dist/types.d.ts +9 -8
- package/dist/widerruf.html +14 -8
- package/dist/widerrufsbutton.iife.js +10 -10
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,102 +1,100 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
async function
|
|
5
|
-
const
|
|
1
|
+
import { jsx as a, jsxs as c, Fragment as q } from "react/jsx-runtime";
|
|
2
|
+
import { useState as w, useRef as F, useEffect as C } from "react";
|
|
3
|
+
import { createPortal as O } from "react-dom";
|
|
4
|
+
async function L(e, r) {
|
|
5
|
+
const l = {
|
|
6
6
|
"Content-Type": "application/json"
|
|
7
7
|
};
|
|
8
|
-
e.authToken && (
|
|
8
|
+
e.authToken && (l.Authorization = `Bearer ${e.authToken}`);
|
|
9
9
|
const o = {
|
|
10
10
|
action: e.action,
|
|
11
11
|
payload: {
|
|
12
12
|
...r,
|
|
13
|
-
|
|
13
|
+
...e.companyName ? { companyName: e.companyName } : {},
|
|
14
|
+
...e.senderEmail ? { senderEmail: e.senderEmail } : {}
|
|
14
15
|
}
|
|
15
|
-
},
|
|
16
|
+
}, n = await fetch(e.apiUrl, {
|
|
16
17
|
method: "PATCH",
|
|
17
|
-
headers:
|
|
18
|
+
headers: l,
|
|
18
19
|
body: JSON.stringify(o)
|
|
19
20
|
});
|
|
20
|
-
let
|
|
21
|
+
let d;
|
|
21
22
|
try {
|
|
22
|
-
|
|
23
|
+
d = await n.json();
|
|
23
24
|
} catch {
|
|
24
|
-
if (!
|
|
25
|
+
if (!n.ok) throw new Error(`Server antwortete mit Status ${n.status}`);
|
|
25
26
|
return;
|
|
26
27
|
}
|
|
27
|
-
if (
|
|
28
|
-
const
|
|
29
|
-
throw new Error(typeof
|
|
28
|
+
if (d !== null && typeof d == "object" && "ok" in d && d.ok === !1) {
|
|
29
|
+
const s = d.message;
|
|
30
|
+
throw new Error(typeof s == "string" && s ? s : `Server antwortete mit Status ${n.status}`);
|
|
30
31
|
}
|
|
31
|
-
if (!
|
|
32
|
-
throw new Error(`Server antwortete mit Status ${
|
|
33
|
-
}
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
year: "numeric"
|
|
38
|
-
}), U = {
|
|
39
|
-
name: "",
|
|
32
|
+
if (!n.ok)
|
|
33
|
+
throw new Error(`Server antwortete mit Status ${n.status}`);
|
|
34
|
+
}
|
|
35
|
+
const U = {
|
|
36
|
+
firstName: "",
|
|
37
|
+
lastName: "",
|
|
40
38
|
email: "",
|
|
41
39
|
orderNumber: "",
|
|
42
40
|
reason: "",
|
|
43
|
-
|
|
41
|
+
userMessage: ""
|
|
44
42
|
};
|
|
45
|
-
function
|
|
43
|
+
function k(e) {
|
|
46
44
|
const r = {};
|
|
47
|
-
return e.
|
|
45
|
+
return e.firstName.trim() || (r.firstName = "Bitte geben Sie Ihren Vornamen an."), e.lastName.trim() || (r.lastName = "Bitte geben Sie Ihren Nachnamen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (r.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : r.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.orderNumber.trim() || (r.orderNumber = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), r;
|
|
48
46
|
}
|
|
49
|
-
function
|
|
50
|
-
const [
|
|
51
|
-
|
|
47
|
+
function I({ config: e, onClose: r }) {
|
|
48
|
+
const [l, o] = w(U), [n, d] = w({}), [s, S] = w({}), [h, N] = w("idle"), [E, z] = w(""), W = F(null);
|
|
49
|
+
C(() => {
|
|
52
50
|
var u;
|
|
53
51
|
(u = W.current) == null || u.focus();
|
|
54
|
-
const
|
|
55
|
-
return document.addEventListener("keydown",
|
|
52
|
+
const t = (b) => b.key === "Escape" && r();
|
|
53
|
+
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
56
54
|
}, [r]);
|
|
57
|
-
function
|
|
58
|
-
const b = { ...
|
|
59
|
-
if (o(b),
|
|
60
|
-
const
|
|
61
|
-
|
|
55
|
+
function m(t, u) {
|
|
56
|
+
const b = { ...l, [t]: u };
|
|
57
|
+
if (o(b), s[t]) {
|
|
58
|
+
const x = k(b);
|
|
59
|
+
d((g) => ({ ...g, [t]: x[t] }));
|
|
62
60
|
}
|
|
63
61
|
}
|
|
64
|
-
function
|
|
65
|
-
S((b) => ({ ...b, [
|
|
66
|
-
const u =
|
|
67
|
-
|
|
62
|
+
function f(t) {
|
|
63
|
+
S((b) => ({ ...b, [t]: !0 }));
|
|
64
|
+
const u = k(l);
|
|
65
|
+
d((b) => ({ ...b, [t]: u[t] }));
|
|
68
66
|
}
|
|
69
|
-
async function
|
|
70
|
-
var
|
|
71
|
-
|
|
67
|
+
async function T(t) {
|
|
68
|
+
var x, g;
|
|
69
|
+
t.preventDefault();
|
|
72
70
|
const u = Object.fromEntries(
|
|
73
|
-
Object.keys(
|
|
71
|
+
Object.keys(l).map((v) => [v, !0])
|
|
74
72
|
);
|
|
75
73
|
S(u);
|
|
76
|
-
const b =
|
|
77
|
-
if (
|
|
78
|
-
|
|
74
|
+
const b = k(l);
|
|
75
|
+
if (d(b), !(Object.keys(b).length > 0)) {
|
|
76
|
+
N("loading"), z("");
|
|
79
77
|
try {
|
|
80
|
-
await
|
|
81
|
-
} catch (
|
|
82
|
-
const
|
|
83
|
-
z(
|
|
78
|
+
await L(e, l), N("success"), (x = e.onSuccess) == null || x.call(e);
|
|
79
|
+
} catch (v) {
|
|
80
|
+
const B = v instanceof Error ? v : new Error("Ein unbekannter Fehler ist aufgetreten.");
|
|
81
|
+
z(B.message), N("error"), (g = e.onError) == null || g.call(e, B);
|
|
84
82
|
}
|
|
85
83
|
}
|
|
86
84
|
}
|
|
87
|
-
const
|
|
88
|
-
return /* @__PURE__ */
|
|
85
|
+
const j = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
|
|
86
|
+
return /* @__PURE__ */ a(
|
|
89
87
|
"div",
|
|
90
88
|
{
|
|
91
89
|
className: "wrb-overlay",
|
|
92
90
|
role: "dialog",
|
|
93
91
|
"aria-modal": "true",
|
|
94
92
|
"aria-labelledby": "wrb-title",
|
|
95
|
-
onClick: (
|
|
93
|
+
onClick: (t) => t.target === t.currentTarget && r(),
|
|
96
94
|
children: /* @__PURE__ */ c("div", { className: "wrb-modal", children: [
|
|
97
95
|
/* @__PURE__ */ c("div", { className: "wrb-modal-header", children: [
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
-
/* @__PURE__ */
|
|
96
|
+
/* @__PURE__ */ a("h2", { className: "wrb-modal-title", id: "wrb-title", children: j }),
|
|
97
|
+
/* @__PURE__ */ a(
|
|
100
98
|
"button",
|
|
101
99
|
{
|
|
102
100
|
className: "wrb-close-btn",
|
|
@@ -107,103 +105,132 @@ function V({ config: e, onClose: r }) {
|
|
|
107
105
|
}
|
|
108
106
|
)
|
|
109
107
|
] }),
|
|
110
|
-
|
|
108
|
+
h === "success" ? /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
|
|
111
109
|
/* @__PURE__ */ c("div", { className: "wrb-success", children: [
|
|
112
|
-
/* @__PURE__ */
|
|
113
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ a("span", { className: "wrb-success-icon", children: "✓" }),
|
|
111
|
+
/* @__PURE__ */ a("h3", { children: "Widerruf eingegangen" }),
|
|
114
112
|
/* @__PURE__ */ c("p", { children: [
|
|
115
113
|
"Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
|
|
116
|
-
/* @__PURE__ */
|
|
114
|
+
/* @__PURE__ */ a("strong", { children: l.email }),
|
|
117
115
|
"."
|
|
118
116
|
] })
|
|
119
117
|
] }),
|
|
120
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ a(A, { config: e })
|
|
121
119
|
] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
|
|
122
|
-
e.introText && /* @__PURE__ */
|
|
123
|
-
|
|
124
|
-
/* @__PURE__ */ c("form", { onSubmit:
|
|
125
|
-
/* @__PURE__ */
|
|
120
|
+
e.introText && /* @__PURE__ */ a("p", { className: "wrb-intro", children: e.introText }),
|
|
121
|
+
h === "error" && E && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
|
|
122
|
+
/* @__PURE__ */ c("form", { onSubmit: T, noValidate: !0, children: [
|
|
123
|
+
/* @__PURE__ */ a(
|
|
126
124
|
p,
|
|
127
125
|
{
|
|
128
|
-
label: "
|
|
126
|
+
label: "Vorname",
|
|
129
127
|
required: !0,
|
|
130
|
-
error:
|
|
131
|
-
children: /* @__PURE__ */
|
|
128
|
+
error: s.firstName ? n.firstName : void 0,
|
|
129
|
+
children: /* @__PURE__ */ a(
|
|
132
130
|
"input",
|
|
133
131
|
{
|
|
134
132
|
ref: W,
|
|
135
|
-
className: `wrb-input${
|
|
133
|
+
className: `wrb-input${s.firstName && n.firstName ? " wrb-error" : ""}`,
|
|
134
|
+
type: "text",
|
|
135
|
+
autoComplete: "given-name",
|
|
136
|
+
value: l.firstName,
|
|
137
|
+
onChange: (t) => m("firstName", t.target.value),
|
|
138
|
+
onBlur: () => f("firstName"),
|
|
139
|
+
placeholder: "Max"
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
/* @__PURE__ */ a(
|
|
145
|
+
p,
|
|
146
|
+
{
|
|
147
|
+
label: "Nachname",
|
|
148
|
+
required: !0,
|
|
149
|
+
error: s.lastName ? n.lastName : void 0,
|
|
150
|
+
children: /* @__PURE__ */ a(
|
|
151
|
+
"input",
|
|
152
|
+
{
|
|
153
|
+
className: `wrb-input${s.lastName && n.lastName ? " wrb-error" : ""}`,
|
|
136
154
|
type: "text",
|
|
137
|
-
autoComplete: "name",
|
|
138
|
-
value:
|
|
139
|
-
onChange: (
|
|
140
|
-
onBlur: () =>
|
|
141
|
-
placeholder: "
|
|
155
|
+
autoComplete: "family-name",
|
|
156
|
+
value: l.lastName,
|
|
157
|
+
onChange: (t) => m("lastName", t.target.value),
|
|
158
|
+
onBlur: () => f("lastName"),
|
|
159
|
+
placeholder: "Mustermann"
|
|
142
160
|
}
|
|
143
161
|
)
|
|
144
162
|
}
|
|
145
163
|
),
|
|
146
|
-
/* @__PURE__ */
|
|
164
|
+
/* @__PURE__ */ a(
|
|
147
165
|
p,
|
|
148
166
|
{
|
|
149
167
|
label: "E-Mail-Adresse",
|
|
150
168
|
required: !0,
|
|
151
169
|
hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
|
|
152
|
-
error:
|
|
153
|
-
children: /* @__PURE__ */
|
|
170
|
+
error: s.email ? n.email : void 0,
|
|
171
|
+
children: /* @__PURE__ */ a(
|
|
154
172
|
"input",
|
|
155
173
|
{
|
|
156
|
-
className: `wrb-input${
|
|
174
|
+
className: `wrb-input${s.email && n.email ? " wrb-error" : ""}`,
|
|
157
175
|
type: "email",
|
|
158
176
|
autoComplete: "email",
|
|
159
|
-
value:
|
|
160
|
-
onChange: (
|
|
161
|
-
onBlur: () =>
|
|
177
|
+
value: l.email,
|
|
178
|
+
onChange: (t) => m("email", t.target.value),
|
|
179
|
+
onBlur: () => f("email"),
|
|
162
180
|
placeholder: "name@beispiel.de"
|
|
163
181
|
}
|
|
164
182
|
)
|
|
165
183
|
}
|
|
166
184
|
),
|
|
167
|
-
/* @__PURE__ */
|
|
185
|
+
/* @__PURE__ */ a(
|
|
168
186
|
p,
|
|
169
187
|
{
|
|
170
188
|
label: "Bestell- / Auftrags- / Vertragsnummer",
|
|
171
189
|
required: !0,
|
|
172
190
|
hint: "Zu finden in Ihrer Bestellbestätigung.",
|
|
173
|
-
error:
|
|
174
|
-
children: /* @__PURE__ */
|
|
191
|
+
error: s.orderNumber ? n.orderNumber : void 0,
|
|
192
|
+
children: /* @__PURE__ */ a(
|
|
175
193
|
"input",
|
|
176
194
|
{
|
|
177
|
-
className: `wrb-input${
|
|
195
|
+
className: `wrb-input${s.orderNumber && n.orderNumber ? " wrb-error" : ""}`,
|
|
178
196
|
type: "text",
|
|
179
|
-
value:
|
|
180
|
-
onChange: (
|
|
181
|
-
onBlur: () =>
|
|
197
|
+
value: l.orderNumber,
|
|
198
|
+
onChange: (t) => m("orderNumber", t.target.value),
|
|
199
|
+
onBlur: () => f("orderNumber"),
|
|
182
200
|
placeholder: "z.B. 10045678"
|
|
183
201
|
}
|
|
184
202
|
)
|
|
185
203
|
}
|
|
186
204
|
),
|
|
187
|
-
/* @__PURE__ */
|
|
205
|
+
/* @__PURE__ */ a(
|
|
188
206
|
p,
|
|
189
207
|
{
|
|
190
|
-
label: "
|
|
208
|
+
label: "Widerrufsgrund",
|
|
191
209
|
hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
|
|
192
|
-
children: /* @__PURE__ */
|
|
210
|
+
children: /* @__PURE__ */ a(
|
|
193
211
|
"textarea",
|
|
194
212
|
{
|
|
195
213
|
className: "wrb-textarea",
|
|
196
|
-
value:
|
|
197
|
-
onChange: (
|
|
214
|
+
value: l.reason,
|
|
215
|
+
onChange: (t) => m("reason", t.target.value),
|
|
198
216
|
placeholder: "Optional",
|
|
199
|
-
rows:
|
|
217
|
+
rows: 2
|
|
200
218
|
}
|
|
201
219
|
)
|
|
202
220
|
}
|
|
203
221
|
),
|
|
204
|
-
/* @__PURE__ */
|
|
222
|
+
/* @__PURE__ */ a(p, { label: "Nachricht", children: /* @__PURE__ */ a(
|
|
223
|
+
"textarea",
|
|
224
|
+
{
|
|
225
|
+
className: "wrb-textarea",
|
|
226
|
+
value: l.userMessage,
|
|
227
|
+
onChange: (t) => m("userMessage", t.target.value),
|
|
228
|
+
placeholder: "Optional",
|
|
229
|
+
rows: 3
|
|
230
|
+
}
|
|
231
|
+
) }),
|
|
205
232
|
/* @__PURE__ */ c("div", { className: "wrb-actions", children: [
|
|
206
|
-
/* @__PURE__ */
|
|
233
|
+
/* @__PURE__ */ a(
|
|
207
234
|
"button",
|
|
208
235
|
{
|
|
209
236
|
type: "button",
|
|
@@ -212,46 +239,45 @@ function V({ config: e, onClose: r }) {
|
|
|
212
239
|
children: e.cancelLabel ?? "Abbrechen"
|
|
213
240
|
}
|
|
214
241
|
),
|
|
215
|
-
/* @__PURE__ */
|
|
242
|
+
/* @__PURE__ */ a(
|
|
216
243
|
"button",
|
|
217
244
|
{
|
|
218
245
|
type: "submit",
|
|
219
246
|
className: "wrb-submit-btn",
|
|
220
|
-
disabled:
|
|
221
|
-
children:
|
|
247
|
+
disabled: h === "loading",
|
|
248
|
+
children: h === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
|
|
222
249
|
}
|
|
223
250
|
)
|
|
224
251
|
] })
|
|
225
252
|
] }),
|
|
226
|
-
/* @__PURE__ */
|
|
253
|
+
/* @__PURE__ */ a(A, { config: e })
|
|
227
254
|
] })
|
|
228
255
|
] })
|
|
229
256
|
}
|
|
230
257
|
);
|
|
231
258
|
}
|
|
232
|
-
function p({ label: e, required: r, hint:
|
|
259
|
+
function p({ label: e, required: r, hint: l, error: o, children: n }) {
|
|
233
260
|
return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
|
|
234
261
|
/* @__PURE__ */ c("label", { className: "wrb-label", children: [
|
|
235
262
|
e,
|
|
236
|
-
r && /* @__PURE__ */
|
|
263
|
+
r && /* @__PURE__ */ a("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
|
|
237
264
|
] }),
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
o && /* @__PURE__ */
|
|
265
|
+
n,
|
|
266
|
+
l && !o && /* @__PURE__ */ a("p", { className: "wrb-hint", children: l }),
|
|
267
|
+
o && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: o })
|
|
241
268
|
] });
|
|
242
269
|
}
|
|
243
|
-
function
|
|
244
|
-
return e
|
|
270
|
+
function A({ config: e }) {
|
|
271
|
+
return e.privacyUrl ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: /* @__PURE__ */ a(
|
|
245
272
|
"a",
|
|
246
273
|
{
|
|
247
|
-
href:
|
|
274
|
+
href: e.privacyUrl,
|
|
248
275
|
className: "wrb-legal-link",
|
|
249
276
|
target: "_blank",
|
|
250
277
|
rel: "noopener noreferrer",
|
|
251
|
-
children:
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
)) }) : null;
|
|
278
|
+
children: e.privacyLabel ?? "Datenschutz"
|
|
279
|
+
}
|
|
280
|
+
) }) : null;
|
|
255
281
|
}
|
|
256
282
|
const $ = `
|
|
257
283
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
@@ -489,53 +515,53 @@ function P() {
|
|
|
489
515
|
const r = document.createElement("style");
|
|
490
516
|
r.id = e, r.textContent = $, document.head.appendChild(r);
|
|
491
517
|
}
|
|
492
|
-
function
|
|
493
|
-
const [r,
|
|
494
|
-
return
|
|
518
|
+
function R({ config: e }) {
|
|
519
|
+
const [r, l] = w(!1);
|
|
520
|
+
return C(() => {
|
|
495
521
|
P();
|
|
496
|
-
}, []), /* @__PURE__ */ c(
|
|
497
|
-
/* @__PURE__ */
|
|
522
|
+
}, []), /* @__PURE__ */ c(q, { children: [
|
|
523
|
+
/* @__PURE__ */ a(
|
|
498
524
|
"button",
|
|
499
525
|
{
|
|
500
526
|
type: "button",
|
|
501
527
|
className: `wrb-btn${e.buttonClass ? ` ${e.buttonClass}` : ""}`,
|
|
502
|
-
onClick: () =>
|
|
528
|
+
onClick: () => l(!0),
|
|
503
529
|
children: e.buttonLabel ?? "Vertrag widerrufen"
|
|
504
530
|
}
|
|
505
531
|
),
|
|
506
|
-
r &&
|
|
507
|
-
/* @__PURE__ */
|
|
532
|
+
r && O(
|
|
533
|
+
/* @__PURE__ */ a(I, { config: e, onClose: () => l(!1) }),
|
|
508
534
|
document.body
|
|
509
535
|
)
|
|
510
536
|
] });
|
|
511
537
|
}
|
|
512
|
-
function
|
|
538
|
+
function i(e) {
|
|
513
539
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
514
540
|
}
|
|
515
|
-
function
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
year: "numeric"
|
|
520
|
-
});
|
|
521
|
-
}
|
|
522
|
-
function v(e) {
|
|
523
|
-
var r;
|
|
524
|
-
return (r = e.legalLinks) != null && r.length ? `
|
|
541
|
+
function y(e) {
|
|
542
|
+
if (!e.privacyUrl) return "";
|
|
543
|
+
const r = i(e.privacyLabel ?? "Datenschutz");
|
|
544
|
+
return `
|
|
525
545
|
<div class="wrb-legal-links">
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
</div>` : "";
|
|
546
|
+
<a href="${i(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
|
|
547
|
+
</div>`;
|
|
529
548
|
}
|
|
530
|
-
function
|
|
531
|
-
const
|
|
549
|
+
function M(e, r = "", l = "") {
|
|
550
|
+
const o = i(e.successUrl ?? r), n = i(e.errorUrl ?? l);
|
|
532
551
|
return `
|
|
533
552
|
<div class="wrb-field">
|
|
534
553
|
<label class="wrb-label">
|
|
535
|
-
|
|
554
|
+
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
555
|
+
</label>
|
|
556
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
557
|
+
placeholder="Max" required>
|
|
558
|
+
</div>
|
|
559
|
+
<div class="wrb-field">
|
|
560
|
+
<label class="wrb-label">
|
|
561
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
536
562
|
</label>
|
|
537
|
-
<input class="wrb-input" type="text" name="
|
|
538
|
-
placeholder="
|
|
563
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
564
|
+
placeholder="Mustermann" required>
|
|
539
565
|
</div>
|
|
540
566
|
<div class="wrb-field">
|
|
541
567
|
<label class="wrb-label">
|
|
@@ -555,29 +581,28 @@ function j(e, r, a = "", o = "") {
|
|
|
555
581
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
556
582
|
</div>
|
|
557
583
|
<div class="wrb-field">
|
|
558
|
-
<label class="wrb-label">
|
|
559
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
584
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
585
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
560
586
|
<p class="wrb-hint">
|
|
561
587
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
562
588
|
</p>
|
|
563
589
|
</div>
|
|
564
590
|
<div class="wrb-field">
|
|
565
|
-
<label class="wrb-label">
|
|
566
|
-
<
|
|
567
|
-
<input type="hidden" name="datum" value="${r}">
|
|
591
|
+
<label class="wrb-label">Nachricht</label>
|
|
592
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
568
593
|
</div>
|
|
569
|
-
<input type="hidden" name="action" value="${
|
|
570
|
-
${
|
|
571
|
-
${
|
|
594
|
+
<input type="hidden" name="action" value="${i(e.action)}">
|
|
595
|
+
${o ? `<input type="hidden" name="successUrl" value="${o}">` : ""}
|
|
596
|
+
${n ? `<input type="hidden" name="errorUrl" value="${n}">` : ""}`;
|
|
572
597
|
}
|
|
573
|
-
function
|
|
574
|
-
const r =
|
|
598
|
+
function K(e) {
|
|
599
|
+
const r = e.companyName ? `Widerruf – ${i(e.companyName)}` : "Widerrufsformular", l = i(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
575
600
|
return `<!DOCTYPE html>
|
|
576
601
|
<html lang="de">
|
|
577
602
|
<head>
|
|
578
603
|
<meta charset="UTF-8">
|
|
579
604
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
580
|
-
<title>${
|
|
605
|
+
<title>${r}</title>
|
|
581
606
|
<style>
|
|
582
607
|
*, *::before, *::after { box-sizing: border-box; }
|
|
583
608
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -597,51 +622,51 @@ function _(e) {
|
|
|
597
622
|
<div class="wrb-page">
|
|
598
623
|
<div class="wrb-modal">
|
|
599
624
|
<div class="wrb-modal-header">
|
|
600
|
-
<h1 class="wrb-modal-title">${
|
|
625
|
+
<h1 class="wrb-modal-title">${r}</h1>
|
|
601
626
|
</div>
|
|
602
627
|
<div class="wrb-modal-body">
|
|
603
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
604
|
-
<form method="POST" action="${
|
|
605
|
-
${
|
|
628
|
+
${e.introText ? `<p class="wrb-intro">${i(e.introText)}</p>` : ""}
|
|
629
|
+
<form method="POST" action="${l}" novalidate>
|
|
630
|
+
${M(e)}
|
|
606
631
|
<div class="wrb-actions">
|
|
607
632
|
<button type="submit" class="wrb-submit-btn">
|
|
608
|
-
${
|
|
633
|
+
${i(e.submitLabel ?? "Absenden")}
|
|
609
634
|
</button>
|
|
610
635
|
</div>
|
|
611
636
|
</form>
|
|
612
|
-
${
|
|
637
|
+
${y(e)}
|
|
613
638
|
</div>
|
|
614
639
|
</div>
|
|
615
640
|
</div>
|
|
616
641
|
</body>
|
|
617
642
|
</html>`;
|
|
618
643
|
}
|
|
619
|
-
function
|
|
620
|
-
const
|
|
644
|
+
function Y(e, { inlineStyles: r = !0 } = {}) {
|
|
645
|
+
const l = e.companyName ? `Widerruf – ${i(e.companyName)}` : "Widerrufsformular", o = i(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), n = `
|
|
621
646
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
622
647
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
623
|
-
return `${r ? `<style>${
|
|
624
|
-
${$}</style>` : `<style>${
|
|
648
|
+
return `${r ? `<style>${n}
|
|
649
|
+
${$}</style>` : `<style>${n}</style>`}
|
|
625
650
|
|
|
626
651
|
<!-- Widerruf: Form-Modal -->
|
|
627
652
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
628
653
|
<div class="wrb-modal">
|
|
629
654
|
<div class="wrb-modal-header">
|
|
630
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
655
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${l}</h2>
|
|
631
656
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
632
657
|
</div>
|
|
633
658
|
<div class="wrb-modal-body">
|
|
634
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
635
|
-
<form method="POST" action="${
|
|
636
|
-
${
|
|
659
|
+
${e.introText ? `<p class="wrb-intro">${i(e.introText)}</p>` : ""}
|
|
660
|
+
<form method="POST" action="${o}" novalidate>
|
|
661
|
+
${M(e, "#wrb-success", "#wrb-error")}
|
|
637
662
|
<div class="wrb-actions">
|
|
638
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
663
|
+
<a href="#" class="wrb-cancel-btn">${i(e.cancelLabel ?? "Abbrechen")}</a>
|
|
639
664
|
<button type="submit" class="wrb-submit-btn">
|
|
640
|
-
${
|
|
665
|
+
${i(e.submitLabel ?? "Absenden")}
|
|
641
666
|
</button>
|
|
642
667
|
</div>
|
|
643
668
|
</form>
|
|
644
|
-
${
|
|
669
|
+
${y(e)}
|
|
645
670
|
</div>
|
|
646
671
|
</div>
|
|
647
672
|
</div>
|
|
@@ -662,7 +687,7 @@ ${$}</style>` : `<style>${l}</style>`}
|
|
|
662
687
|
Bestätigung per E-Mail.
|
|
663
688
|
</p>
|
|
664
689
|
</div>
|
|
665
|
-
${
|
|
690
|
+
${y(e)}
|
|
666
691
|
</div>
|
|
667
692
|
</div>
|
|
668
693
|
</div>
|
|
@@ -683,14 +708,14 @@ ${$}</style>` : `<style>${l}</style>`}
|
|
|
683
708
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
684
709
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
685
710
|
</div>
|
|
686
|
-
${
|
|
711
|
+
${y(e)}
|
|
687
712
|
</div>
|
|
688
713
|
</div>
|
|
689
714
|
</div>`;
|
|
690
715
|
}
|
|
691
716
|
export {
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
717
|
+
I as WiderrufsModal,
|
|
718
|
+
R as WiderrufsWidget,
|
|
719
|
+
K as generateFallbackHtml,
|
|
720
|
+
Y as generateModalHtml
|
|
696
721
|
};
|