@netlib/widerrufsbutton 1.2.0 → 2.1.1
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 +35 -29
- package/dist/fallback.es.js +40 -41
- package/dist/index.cjs.js +40 -34
- package/dist/index.es.js +185 -159
- package/dist/types.d.ts +5 -2
- package/dist/widerruf.html +14 -8
- package/dist/widerrufsbutton.iife.js +10 -10
- package/package.json +1 -1
package/dist/fallback.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,17 +227,24 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
-
`;function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function
|
|
230
|
+
`;function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function n(e){var a;return(a=e.legalLinks)!=null&&a.length?`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
232
|
${e.legalLinks.map(t=>`<a href="${r(t.href)}" class="wrb-legal-link" rel="noopener noreferrer">${r(t.name)}</a>`).join(`
|
|
233
233
|
`)}
|
|
234
|
-
</div>`:""}function
|
|
234
|
+
</div>`:""}function s(e,a="",t=""){const l=r(e.successUrl??a),i=r(e.errorUrl??t);return`
|
|
235
235
|
<div class="wrb-field">
|
|
236
236
|
<label class="wrb-label">
|
|
237
|
-
|
|
237
|
+
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
238
238
|
</label>
|
|
239
|
-
<input class="wrb-input" type="text" name="
|
|
240
|
-
placeholder="
|
|
239
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
240
|
+
placeholder="Max" required>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="wrb-field">
|
|
243
|
+
<label class="wrb-label">
|
|
244
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
245
|
+
</label>
|
|
246
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
247
|
+
placeholder="Mustermann" required>
|
|
241
248
|
</div>
|
|
242
249
|
<div class="wrb-field">
|
|
243
250
|
<label class="wrb-label">
|
|
@@ -257,25 +264,24 @@
|
|
|
257
264
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
258
265
|
</div>
|
|
259
266
|
<div class="wrb-field">
|
|
260
|
-
<label class="wrb-label">
|
|
261
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
267
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
268
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
262
269
|
<p class="wrb-hint">
|
|
263
270
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
264
271
|
</p>
|
|
265
272
|
</div>
|
|
266
273
|
<div class="wrb-field">
|
|
267
|
-
<label class="wrb-label">
|
|
268
|
-
<
|
|
269
|
-
<input type="hidden" name="datum" value="${a}">
|
|
274
|
+
<label class="wrb-label">Nachricht</label>
|
|
275
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
270
276
|
</div>
|
|
271
277
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
272
|
-
${
|
|
273
|
-
${
|
|
278
|
+
${l?`<input type="hidden" name="successUrl" value="${l}">`:""}
|
|
279
|
+
${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}`}function d(e){const a=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",t=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
274
280
|
<html lang="de">
|
|
275
281
|
<head>
|
|
276
282
|
<meta charset="UTF-8">
|
|
277
283
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
278
|
-
<title>${
|
|
284
|
+
<title>${a}</title>
|
|
279
285
|
<style>
|
|
280
286
|
*, *::before, *::after { box-sizing: border-box; }
|
|
281
287
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -288,46 +294,46 @@
|
|
|
288
294
|
}
|
|
289
295
|
.wrb-page .wrb-modal { max-height: none; }
|
|
290
296
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
291
|
-
${
|
|
297
|
+
${o}
|
|
292
298
|
</style>
|
|
293
299
|
</head>
|
|
294
300
|
<body>
|
|
295
301
|
<div class="wrb-page">
|
|
296
302
|
<div class="wrb-modal">
|
|
297
303
|
<div class="wrb-modal-header">
|
|
298
|
-
<h1 class="wrb-modal-title">${
|
|
304
|
+
<h1 class="wrb-modal-title">${a}</h1>
|
|
299
305
|
</div>
|
|
300
306
|
<div class="wrb-modal-body">
|
|
301
307
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
302
|
-
<form method="POST" action="${
|
|
303
|
-
${
|
|
308
|
+
<form method="POST" action="${t}" novalidate>
|
|
309
|
+
${s(e)}
|
|
304
310
|
<div class="wrb-actions">
|
|
305
311
|
<button type="submit" class="wrb-submit-btn">
|
|
306
312
|
${r(e.submitLabel??"Absenden")}
|
|
307
313
|
</button>
|
|
308
314
|
</div>
|
|
309
315
|
</form>
|
|
310
|
-
${
|
|
316
|
+
${n(e)}
|
|
311
317
|
</div>
|
|
312
318
|
</div>
|
|
313
319
|
</div>
|
|
314
320
|
</body>
|
|
315
|
-
</html>`}function
|
|
321
|
+
</html>`}function b(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",l=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=`
|
|
316
322
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
317
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${
|
|
318
|
-
${
|
|
323
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${i}
|
|
324
|
+
${o}</style>`:`<style>${i}</style>`}
|
|
319
325
|
|
|
320
326
|
<!-- Widerruf: Form-Modal -->
|
|
321
327
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
322
328
|
<div class="wrb-modal">
|
|
323
329
|
<div class="wrb-modal-header">
|
|
324
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
330
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
325
331
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
326
332
|
</div>
|
|
327
333
|
<div class="wrb-modal-body">
|
|
328
334
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
329
|
-
<form method="POST" action="${
|
|
330
|
-
${
|
|
335
|
+
<form method="POST" action="${l}" novalidate>
|
|
336
|
+
${s(e,"#wrb-success","#wrb-error")}
|
|
331
337
|
<div class="wrb-actions">
|
|
332
338
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel??"Abbrechen")}</a>
|
|
333
339
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -335,7 +341,7 @@ ${s}</style>`:`<style>${l}</style>`}
|
|
|
335
341
|
</button>
|
|
336
342
|
</div>
|
|
337
343
|
</form>
|
|
338
|
-
${
|
|
344
|
+
${n(e)}
|
|
339
345
|
</div>
|
|
340
346
|
</div>
|
|
341
347
|
</div>
|
|
@@ -356,7 +362,7 @@ ${s}</style>`:`<style>${l}</style>`}
|
|
|
356
362
|
Bestätigung per E-Mail.
|
|
357
363
|
</p>
|
|
358
364
|
</div>
|
|
359
|
-
${
|
|
365
|
+
${n(e)}
|
|
360
366
|
</div>
|
|
361
367
|
</div>
|
|
362
368
|
</div>
|
|
@@ -377,7 +383,7 @@ ${s}</style>`:`<style>${l}</style>`}
|
|
|
377
383
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
378
384
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
379
385
|
</div>
|
|
380
|
-
${
|
|
386
|
+
${n(e)}
|
|
381
387
|
</div>
|
|
382
388
|
</div>
|
|
383
|
-
</div>`}exports.generateFallbackHtml=
|
|
389
|
+
</div>`}exports.generateFallbackHtml=d;exports.generateModalHtml=b;
|
package/dist/fallback.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const o = `
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -231,14 +231,7 @@ const s = `
|
|
|
231
231
|
function r(e) {
|
|
232
232
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
233
233
|
}
|
|
234
|
-
function
|
|
235
|
-
return (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
|
|
236
|
-
day: "2-digit",
|
|
237
|
-
month: "2-digit",
|
|
238
|
-
year: "numeric"
|
|
239
|
-
});
|
|
240
|
-
}
|
|
241
|
-
function o(e) {
|
|
234
|
+
function n(e) {
|
|
242
235
|
var a;
|
|
243
236
|
return (a = e.legalLinks) != null && a.length ? `
|
|
244
237
|
<div class="wrb-legal-links">
|
|
@@ -246,15 +239,22 @@ function o(e) {
|
|
|
246
239
|
`)}
|
|
247
240
|
</div>` : "";
|
|
248
241
|
}
|
|
249
|
-
function
|
|
250
|
-
const
|
|
242
|
+
function s(e, a = "", t = "") {
|
|
243
|
+
const l = r(e.successUrl ?? a), i = r(e.errorUrl ?? t);
|
|
251
244
|
return `
|
|
252
245
|
<div class="wrb-field">
|
|
253
246
|
<label class="wrb-label">
|
|
254
|
-
|
|
247
|
+
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
248
|
+
</label>
|
|
249
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
250
|
+
placeholder="Max" required>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="wrb-field">
|
|
253
|
+
<label class="wrb-label">
|
|
254
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
255
255
|
</label>
|
|
256
|
-
<input class="wrb-input" type="text" name="
|
|
257
|
-
placeholder="
|
|
256
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
257
|
+
placeholder="Mustermann" required>
|
|
258
258
|
</div>
|
|
259
259
|
<div class="wrb-field">
|
|
260
260
|
<label class="wrb-label">
|
|
@@ -274,29 +274,28 @@ function b(e, a, t = "", i = "") {
|
|
|
274
274
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
275
275
|
</div>
|
|
276
276
|
<div class="wrb-field">
|
|
277
|
-
<label class="wrb-label">
|
|
278
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
277
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
278
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
279
279
|
<p class="wrb-hint">
|
|
280
280
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
281
281
|
</p>
|
|
282
282
|
</div>
|
|
283
283
|
<div class="wrb-field">
|
|
284
|
-
<label class="wrb-label">
|
|
285
|
-
<
|
|
286
|
-
<input type="hidden" name="datum" value="${a}">
|
|
284
|
+
<label class="wrb-label">Nachricht</label>
|
|
285
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
287
286
|
</div>
|
|
288
287
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
289
|
-
${
|
|
290
|
-
${
|
|
288
|
+
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
289
|
+
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
291
290
|
}
|
|
292
|
-
function
|
|
293
|
-
const a =
|
|
291
|
+
function b(e) {
|
|
292
|
+
const a = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", t = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
294
293
|
return `<!DOCTYPE html>
|
|
295
294
|
<html lang="de">
|
|
296
295
|
<head>
|
|
297
296
|
<meta charset="UTF-8">
|
|
298
297
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
299
|
-
<title>${
|
|
298
|
+
<title>${a}</title>
|
|
300
299
|
<style>
|
|
301
300
|
*, *::before, *::after { box-sizing: border-box; }
|
|
302
301
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -309,50 +308,50 @@ function p(e) {
|
|
|
309
308
|
}
|
|
310
309
|
.wrb-page .wrb-modal { max-height: none; }
|
|
311
310
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
312
|
-
${
|
|
311
|
+
${o}
|
|
313
312
|
</style>
|
|
314
313
|
</head>
|
|
315
314
|
<body>
|
|
316
315
|
<div class="wrb-page">
|
|
317
316
|
<div class="wrb-modal">
|
|
318
317
|
<div class="wrb-modal-header">
|
|
319
|
-
<h1 class="wrb-modal-title">${
|
|
318
|
+
<h1 class="wrb-modal-title">${a}</h1>
|
|
320
319
|
</div>
|
|
321
320
|
<div class="wrb-modal-body">
|
|
322
321
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
323
|
-
<form method="POST" action="${
|
|
324
|
-
${
|
|
322
|
+
<form method="POST" action="${t}" novalidate>
|
|
323
|
+
${s(e)}
|
|
325
324
|
<div class="wrb-actions">
|
|
326
325
|
<button type="submit" class="wrb-submit-btn">
|
|
327
326
|
${r(e.submitLabel ?? "Absenden")}
|
|
328
327
|
</button>
|
|
329
328
|
</div>
|
|
330
329
|
</form>
|
|
331
|
-
${
|
|
330
|
+
${n(e)}
|
|
332
331
|
</div>
|
|
333
332
|
</div>
|
|
334
333
|
</div>
|
|
335
334
|
</body>
|
|
336
335
|
</html>`;
|
|
337
336
|
}
|
|
338
|
-
function
|
|
339
|
-
const t =
|
|
337
|
+
function c(e, { inlineStyles: a = !0 } = {}) {
|
|
338
|
+
const t = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", l = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
340
339
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
341
340
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
342
|
-
return `${a ? `<style>${
|
|
343
|
-
${
|
|
341
|
+
return `${a ? `<style>${i}
|
|
342
|
+
${o}</style>` : `<style>${i}</style>`}
|
|
344
343
|
|
|
345
344
|
<!-- Widerruf: Form-Modal -->
|
|
346
345
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
347
346
|
<div class="wrb-modal">
|
|
348
347
|
<div class="wrb-modal-header">
|
|
349
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
348
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
350
349
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
351
350
|
</div>
|
|
352
351
|
<div class="wrb-modal-body">
|
|
353
352
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
354
|
-
<form method="POST" action="${
|
|
355
|
-
${
|
|
353
|
+
<form method="POST" action="${l}" novalidate>
|
|
354
|
+
${s(e, "#wrb-success", "#wrb-error")}
|
|
356
355
|
<div class="wrb-actions">
|
|
357
356
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel ?? "Abbrechen")}</a>
|
|
358
357
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -360,7 +359,7 @@ ${s}</style>` : `<style>${l}</style>`}
|
|
|
360
359
|
</button>
|
|
361
360
|
</div>
|
|
362
361
|
</form>
|
|
363
|
-
${
|
|
362
|
+
${n(e)}
|
|
364
363
|
</div>
|
|
365
364
|
</div>
|
|
366
365
|
</div>
|
|
@@ -381,7 +380,7 @@ ${s}</style>` : `<style>${l}</style>`}
|
|
|
381
380
|
Bestätigung per E-Mail.
|
|
382
381
|
</p>
|
|
383
382
|
</div>
|
|
384
|
-
${
|
|
383
|
+
${n(e)}
|
|
385
384
|
</div>
|
|
386
385
|
</div>
|
|
387
386
|
</div>
|
|
@@ -402,12 +401,12 @@ ${s}</style>` : `<style>${l}</style>`}
|
|
|
402
401
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
403
402
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
404
403
|
</div>
|
|
405
|
-
${
|
|
404
|
+
${n(e)}
|
|
406
405
|
</div>
|
|
407
406
|
</div>
|
|
408
407
|
</div>`;
|
|
409
408
|
}
|
|
410
409
|
export {
|
|
411
|
-
|
|
412
|
-
|
|
410
|
+
b as generateFallbackHtml,
|
|
411
|
+
c as generateModalHtml
|
|
413
412
|
};
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),T=require("react-dom");async function q(e,a){const t={"Content-Type":"application/json"};e.authToken&&(t.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...a,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},l=await fetch(e.apiUrl,{method:"PATCH",headers:t,body:JSON.stringify(o)});let d;try{d=await l.json()}catch{if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`);return}if(d!==null&&typeof d=="object"&&"ok"in d&&d.ok===!1){const i=d.message;throw new Error(typeof i=="string"&&i?i:`Server antwortete mit Status ${l.status}`)}if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`)}const L={firstName:"",lastName:"",email:"",orderNumber:"",reason:"",userMessage:""};function N(e){const a={};return e.firstName.trim()||(a.firstName="Bitte geben Sie Ihren Vornamen an."),e.lastName.trim()||(a.lastName="Bitte geben Sie Ihren Nachnamen an."),e.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)||(a.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):a.email="Bitte geben Sie Ihre E-Mail-Adresse an.",e.orderNumber.trim()||(a.orderNumber="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),a}function M({config:e,onClose:a}){const[t,o]=c.useState(L),[l,d]=c.useState({}),[i,k]=c.useState({}),[w,y]=c.useState("idle"),[S,$]=c.useState(""),E=c.useRef(null);c.useEffect(()=>{var u;(u=E.current)==null||u.focus();const s=b=>b.key==="Escape"&&a();return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[a]);function m(s,u){const b={...t,[s]:u};if(o(b),i[s]){const x=N(b);d(f=>({...f,[s]:x[s]}))}}function h(s){k(b=>({...b,[s]:!0}));const u=N(t);d(b=>({...b,[s]:u[s]}))}async function A(s){var x,f;s.preventDefault();const u=Object.fromEntries(Object.keys(t).map(g=>[g,!0]));k(u);const b=N(t);if(d(b),!(Object.keys(b).length>0)){y("loading"),$("");try{await q(e,t),y("success"),(x=e.onSuccess)==null||x.call(e)}catch(g){const W=g instanceof Error?g:new Error("Ein unbekannter Fehler ist aufgetreten.");$(W.message),y("error"),(f=e.onError)==null||f.call(e,W)}}}const C=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:s=>s.target===s.currentTarget&&a(),children:r.jsxs("div",{className:"wrb-modal",children:[r.jsxs("div",{className:"wrb-modal-header",children:[r.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:C}),r.jsx("button",{className:"wrb-close-btn",onClick:a,"aria-label":"Schließen",type:"button",children:"✕"})]}),w==="success"?r.jsxs("div",{className:"wrb-modal-body",children:[r.jsxs("div",{className:"wrb-success",children:[r.jsx("span",{className:"wrb-success-icon",children:"✓"}),r.jsx("h3",{children:"Widerruf eingegangen"}),r.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",r.jsx("strong",{children:t.email}),"."]})]}),r.jsx(z,{links:e.legalLinks})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),w==="error"&&S&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:S}),r.jsxs("form",{onSubmit:A,noValidate:!0,children:[r.jsx(p,{label:"Vorname",required:!0,error:i.firstName?l.firstName:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${i.firstName&&l.firstName?" wrb-error":""}`,type:"text",autoComplete:"given-name",value:t.firstName,onChange:s=>m("firstName",s.target.value),onBlur:()=>h("firstName"),placeholder:"Max"})}),r.jsx(p,{label:"Nachname",required:!0,error:i.lastName?l.lastName:void 0,children:r.jsx("input",{className:`wrb-input${i.lastName&&l.lastName?" wrb-error":""}`,type:"text",autoComplete:"family-name",value:t.lastName,onChange:s=>m("lastName",s.target.value),onBlur:()=>h("lastName"),placeholder:"Mustermann"})}),r.jsx(p,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:i.email?l.email:void 0,children:r.jsx("input",{className:`wrb-input${i.email&&l.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:t.email,onChange:s=>m("email",s.target.value),onBlur:()=>h("email"),placeholder:"name@beispiel.de"})}),r.jsx(p,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:i.orderNumber?l.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${i.orderNumber&&l.orderNumber?" wrb-error":""}`,type:"text",value:t.orderNumber,onChange:s=>m("orderNumber",s.target.value),onBlur:()=>h("orderNumber"),placeholder:"z.B. 10045678"})}),r.jsx(p,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:t.reason,onChange:s=>m("reason",s.target.value),placeholder:"Optional",rows:2})}),r.jsx(p,{label:"Nachricht",children:r.jsx("textarea",{className:"wrb-textarea",value:t.userMessage,onChange:s=>m("userMessage",s.target.value),placeholder:"Optional",rows:3})}),r.jsxs("div",{className:"wrb-actions",children:[r.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:a,children:e.cancelLabel??"Abbrechen"}),r.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:w==="loading",children:w==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx(z,{links:e.legalLinks})]})]})})}function p({label:e,required:a,hint:t,error:o,children:l}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,a&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),l,t&&!o&&r.jsx("p",{className:"wrb-hint",children:t}),o&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:o})]})}function z({links:e}){return e!=null&&e.length?r.jsx("div",{className:"wrb-legal-links",children:e.map(a=>r.jsx("a",{href:a.href,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:a.name},a.href))}):null}const j=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,17 +227,24 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
-
`;function
|
|
230
|
+
`;function F(){const e="wrb-styles";if(document.getElementById(e))return;const a=document.createElement("style");a.id=e,a.textContent=j,document.head.appendChild(a)}function O({config:e}){const[a,t]=c.useState(!1);return c.useEffect(()=>{F()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>t(!0),children:e.buttonLabel??"Vertrag widerrufen"}),a&&T.createPortal(r.jsx(M,{config:e,onClose:()=>t(!1)}),document.body)]})}function n(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function v(e){var a;return(a=e.legalLinks)!=null&&a.length?`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
${e.legalLinks.map(
|
|
232
|
+
${e.legalLinks.map(t=>`<a href="${n(t.href)}" class="wrb-legal-link" rel="noopener noreferrer">${n(t.name)}</a>`).join(`
|
|
233
233
|
`)}
|
|
234
|
-
</div>`:""}function
|
|
234
|
+
</div>`:""}function B(e,a="",t=""){const o=n(e.successUrl??a),l=n(e.errorUrl??t);return`
|
|
235
235
|
<div class="wrb-field">
|
|
236
236
|
<label class="wrb-label">
|
|
237
|
-
|
|
237
|
+
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
238
238
|
</label>
|
|
239
|
-
<input class="wrb-input" type="text" name="
|
|
240
|
-
placeholder="
|
|
239
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
240
|
+
placeholder="Max" required>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="wrb-field">
|
|
243
|
+
<label class="wrb-label">
|
|
244
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
245
|
+
</label>
|
|
246
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
247
|
+
placeholder="Mustermann" required>
|
|
241
248
|
</div>
|
|
242
249
|
<div class="wrb-field">
|
|
243
250
|
<label class="wrb-label">
|
|
@@ -257,20 +264,19 @@
|
|
|
257
264
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
258
265
|
</div>
|
|
259
266
|
<div class="wrb-field">
|
|
260
|
-
<label class="wrb-label">
|
|
261
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
267
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
268
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
262
269
|
<p class="wrb-hint">
|
|
263
270
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
264
271
|
</p>
|
|
265
272
|
</div>
|
|
266
273
|
<div class="wrb-field">
|
|
267
|
-
<label class="wrb-label">
|
|
268
|
-
<
|
|
269
|
-
<input type="hidden" name="datum" value="${t}">
|
|
274
|
+
<label class="wrb-label">Nachricht</label>
|
|
275
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
270
276
|
</div>
|
|
271
|
-
<input type="hidden" name="action" value="${
|
|
272
|
-
${
|
|
273
|
-
${
|
|
277
|
+
<input type="hidden" name="action" value="${n(e.action)}">
|
|
278
|
+
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
279
|
+
${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function I(e){const a=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",t=n(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
274
280
|
<html lang="de">
|
|
275
281
|
<head>
|
|
276
282
|
<meta charset="UTF-8">
|
|
@@ -288,7 +294,7 @@
|
|
|
288
294
|
}
|
|
289
295
|
.wrb-page .wrb-modal { max-height: none; }
|
|
290
296
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
291
|
-
${
|
|
297
|
+
${j}
|
|
292
298
|
</style>
|
|
293
299
|
</head>
|
|
294
300
|
<body>
|
|
@@ -298,44 +304,44 @@
|
|
|
298
304
|
<h1 class="wrb-modal-title">${a}</h1>
|
|
299
305
|
</div>
|
|
300
306
|
<div class="wrb-modal-body">
|
|
301
|
-
${e.introText?`<p class="wrb-intro">${
|
|
302
|
-
<form method="POST" action="${
|
|
303
|
-
${
|
|
307
|
+
${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
|
|
308
|
+
<form method="POST" action="${t}" novalidate>
|
|
309
|
+
${B(e)}
|
|
304
310
|
<div class="wrb-actions">
|
|
305
311
|
<button type="submit" class="wrb-submit-btn">
|
|
306
|
-
${
|
|
312
|
+
${n(e.submitLabel??"Absenden")}
|
|
307
313
|
</button>
|
|
308
314
|
</div>
|
|
309
315
|
</form>
|
|
310
|
-
${
|
|
316
|
+
${v(e)}
|
|
311
317
|
</div>
|
|
312
318
|
</div>
|
|
313
319
|
</div>
|
|
314
320
|
</body>
|
|
315
|
-
</html>`}function
|
|
321
|
+
</html>`}function U(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",o=n(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),l=`
|
|
316
322
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
317
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${
|
|
318
|
-
${
|
|
323
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${l}
|
|
324
|
+
${j}</style>`:`<style>${l}</style>`}
|
|
319
325
|
|
|
320
326
|
<!-- Widerruf: Form-Modal -->
|
|
321
327
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
322
328
|
<div class="wrb-modal">
|
|
323
329
|
<div class="wrb-modal-header">
|
|
324
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
330
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
325
331
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
326
332
|
</div>
|
|
327
333
|
<div class="wrb-modal-body">
|
|
328
|
-
${e.introText?`<p class="wrb-intro">${
|
|
329
|
-
<form method="POST" action="${
|
|
330
|
-
${
|
|
334
|
+
${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
|
|
335
|
+
<form method="POST" action="${o}" novalidate>
|
|
336
|
+
${B(e,"#wrb-success","#wrb-error")}
|
|
331
337
|
<div class="wrb-actions">
|
|
332
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
338
|
+
<a href="#" class="wrb-cancel-btn">${n(e.cancelLabel??"Abbrechen")}</a>
|
|
333
339
|
<button type="submit" class="wrb-submit-btn">
|
|
334
|
-
${
|
|
340
|
+
${n(e.submitLabel??"Absenden")}
|
|
335
341
|
</button>
|
|
336
342
|
</div>
|
|
337
343
|
</form>
|
|
338
|
-
${
|
|
344
|
+
${v(e)}
|
|
339
345
|
</div>
|
|
340
346
|
</div>
|
|
341
347
|
</div>
|
|
@@ -356,7 +362,7 @@ ${k}</style>`:`<style>${i}</style>`}
|
|
|
356
362
|
Bestätigung per E-Mail.
|
|
357
363
|
</p>
|
|
358
364
|
</div>
|
|
359
|
-
${
|
|
365
|
+
${v(e)}
|
|
360
366
|
</div>
|
|
361
367
|
</div>
|
|
362
368
|
</div>
|
|
@@ -377,7 +383,7 @@ ${k}</style>`:`<style>${i}</style>`}
|
|
|
377
383
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
378
384
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
379
385
|
</div>
|
|
380
|
-
${
|
|
386
|
+
${v(e)}
|
|
381
387
|
</div>
|
|
382
388
|
</div>
|
|
383
|
-
</div>`}exports.WiderrufsModal=
|
|
389
|
+
</div>`}exports.WiderrufsModal=M;exports.WiderrufsWidget=O;exports.generateFallbackHtml=I;exports.generateModalHtml=U;
|