@netlib/widerrufsbutton 2.1.3 → 2.1.5
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 +0 -4
- package/dist/fallback.es.js +0 -4
- package/dist/index.cjs.js +21 -25
- package/dist/index.es.js +108 -118
- package/dist/types.d.ts +0 -1
- package/dist/widerruf.html +0 -4
- package/dist/widerrufsbutton.iife.js +9 -9
- package/package.json +1 -1
package/dist/fallback.cjs.js
CHANGED
|
@@ -269,10 +269,6 @@
|
|
|
269
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
270
270
|
</p>
|
|
271
271
|
</div>
|
|
272
|
-
<div class="wrb-field">
|
|
273
|
-
<label class="wrb-label">Nachricht</label>
|
|
274
|
-
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
275
|
-
</div>
|
|
276
272
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
277
273
|
${l?`<input type="hidden" name="successUrl" value="${l}">`:""}
|
|
278
274
|
${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>
|
package/dist/fallback.es.js
CHANGED
|
@@ -280,10 +280,6 @@ function s(e, a = "", t = "") {
|
|
|
280
280
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
281
281
|
</p>
|
|
282
282
|
</div>
|
|
283
|
-
<div class="wrb-field">
|
|
284
|
-
<label class="wrb-label">Nachricht</label>
|
|
285
|
-
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
286
|
-
</div>
|
|
287
283
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
288
284
|
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
289
285
|
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
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"),M=require("react-dom");async function q(e,a){const t={"Content-Type":"application/json"};e.authToken&&(t.Authorization=`Bearer ${e.authToken}`);const i={action:e.action,payload:{...a,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},n=await fetch(e.apiUrl,{method:"PATCH",headers:t,body:JSON.stringify(i)});let d;try{d=await n.json()}catch{if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`);return}if(d!==null&&typeof d=="object"&&"ok"in d&&d.ok===!1){const o=d.message;throw new Error(typeof o=="string"&&o?o:`Server antwortete mit Status ${n.status}`)}if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`)}const F={firstName:"",lastName:"",email:"",orderNumber:"",reason:""};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 B({config:e,onClose:a}){const[t,i]=c.useState(F),[n,d]=c.useState({}),[o,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(i(b),o[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 C(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 T=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:T}),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,{config:e})]}):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:C,noValidate:!0,children:[r.jsx(p,{label:"Vorname",required:!0,error:o.firstName?n.firstName:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${o.firstName&&n.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:o.lastName?n.lastName:void 0,children:r.jsx("input",{className:`wrb-input${o.lastName&&n.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:o.email?n.email:void 0,children:r.jsx("input",{className:`wrb-input${o.email&&n.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:o.orderNumber?n.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${o.orderNumber&&n.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.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,{config:e})]})]})})}function p({label:e,required:a,hint:t,error:i,children:n}){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:"*"})]}),n,t&&!i&&r.jsx("p",{className:"wrb-hint",children:t}),i&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:i})]})}function z({config:e}){return e.privacyUrl?r.jsx("div",{className:"wrb-legal-links",children:r.jsx("a",{href:e.privacyUrl,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:e.privacyLabel??"Datenschutz"})}):null}const j=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,10 +227,10 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
-
`;function
|
|
230
|
+
`;function L(){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(()=>{L()},[]),c.useEffect(()=>{const i=()=>{window.location.hash==="#wrb-modal"&&(history.replaceState(null,"",window.location.pathname+window.location.search),t(!0))};return i(),window.addEventListener("hashchange",i),()=>window.removeEventListener("hashchange",i)},[]),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&&M.createPortal(r.jsx(B,{config:e,onClose:()=>t(!1)}),document.body)]})}function l(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function v(e){if(!e.privacyUrl)return"";const a=l(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
<a href="${
|
|
233
|
-
</div>`}function
|
|
232
|
+
<a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
233
|
+
</div>`}function A(e,a="",t=""){const i=l(e.successUrl??a),n=l(e.errorUrl??t);return`
|
|
234
234
|
<div class="wrb-field">
|
|
235
235
|
<label class="wrb-label">
|
|
236
236
|
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
@@ -269,13 +269,9 @@
|
|
|
269
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
270
270
|
</p>
|
|
271
271
|
</div>
|
|
272
|
-
<
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
</div>
|
|
276
|
-
<input type="hidden" name="action" value="${n(e.action)}">
|
|
277
|
-
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
278
|
-
${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function U(e){const a=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",s=n(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
272
|
+
<input type="hidden" name="action" value="${l(e.action)}">
|
|
273
|
+
${i?`<input type="hidden" name="successUrl" value="${i}">`:""}
|
|
274
|
+
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function U(e){const a=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",t=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
279
275
|
<html lang="de">
|
|
280
276
|
<head>
|
|
281
277
|
<meta charset="UTF-8">
|
|
@@ -303,12 +299,12 @@
|
|
|
303
299
|
<h1 class="wrb-modal-title">${a}</h1>
|
|
304
300
|
</div>
|
|
305
301
|
<div class="wrb-modal-body">
|
|
306
|
-
${e.introText?`<p class="wrb-intro">${
|
|
307
|
-
<form method="POST" action="${
|
|
308
|
-
${
|
|
302
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
303
|
+
<form method="POST" action="${t}" novalidate>
|
|
304
|
+
${A(e)}
|
|
309
305
|
<div class="wrb-actions">
|
|
310
306
|
<button type="submit" class="wrb-submit-btn">
|
|
311
|
-
${
|
|
307
|
+
${l(e.submitLabel??"Absenden")}
|
|
312
308
|
</button>
|
|
313
309
|
</div>
|
|
314
310
|
</form>
|
|
@@ -317,26 +313,26 @@
|
|
|
317
313
|
</div>
|
|
318
314
|
</div>
|
|
319
315
|
</body>
|
|
320
|
-
</html>`}function I(e,{inlineStyles:a=!0}={}){const
|
|
316
|
+
</html>`}function I(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",i=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),n=`
|
|
321
317
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
322
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${
|
|
323
|
-
${j}</style>`:`<style>${
|
|
318
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${n}
|
|
319
|
+
${j}</style>`:`<style>${n}</style>`}
|
|
324
320
|
|
|
325
321
|
<!-- Widerruf: Form-Modal -->
|
|
326
322
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
327
323
|
<div class="wrb-modal">
|
|
328
324
|
<div class="wrb-modal-header">
|
|
329
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
325
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
330
326
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
331
327
|
</div>
|
|
332
328
|
<div class="wrb-modal-body">
|
|
333
|
-
${e.introText?`<p class="wrb-intro">${
|
|
334
|
-
<form method="POST" action="${
|
|
335
|
-
${
|
|
329
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
330
|
+
<form method="POST" action="${i}" novalidate>
|
|
331
|
+
${A(e,"#wrb-success","#wrb-error")}
|
|
336
332
|
<div class="wrb-actions">
|
|
337
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
333
|
+
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel??"Abbrechen")}</a>
|
|
338
334
|
<button type="submit" class="wrb-submit-btn">
|
|
339
|
-
${
|
|
335
|
+
${l(e.submitLabel??"Absenden")}
|
|
340
336
|
</button>
|
|
341
337
|
</div>
|
|
342
338
|
</form>
|
|
@@ -385,4 +381,4 @@ ${j}</style>`:`<style>${l}</style>`}
|
|
|
385
381
|
${v(e)}
|
|
386
382
|
</div>
|
|
387
383
|
</div>
|
|
388
|
-
</div>`}exports.WiderrufsModal=
|
|
384
|
+
</div>`}exports.WiderrufsModal=B;exports.WiderrufsWidget=O;exports.generateFallbackHtml=U;exports.generateModalHtml=I;
|
package/dist/index.es.js
CHANGED
|
@@ -1,84 +1,83 @@
|
|
|
1
1
|
import { jsx as a, jsxs as c, Fragment as q } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
async function
|
|
5
|
-
const
|
|
2
|
+
import { useState as m, useRef as L, useEffect as $ } from "react";
|
|
3
|
+
import { createPortal as F } from "react-dom";
|
|
4
|
+
async function O(e, r) {
|
|
5
|
+
const t = {
|
|
6
6
|
"Content-Type": "application/json"
|
|
7
7
|
};
|
|
8
|
-
e.authToken && (
|
|
9
|
-
const
|
|
8
|
+
e.authToken && (t.Authorization = `Bearer ${e.authToken}`);
|
|
9
|
+
const l = {
|
|
10
10
|
action: e.action,
|
|
11
11
|
payload: {
|
|
12
12
|
...r,
|
|
13
13
|
...e.companyName ? { companyName: e.companyName } : {},
|
|
14
14
|
...e.senderEmail ? { senderEmail: e.senderEmail } : {}
|
|
15
15
|
}
|
|
16
|
-
},
|
|
16
|
+
}, i = await fetch(e.apiUrl, {
|
|
17
17
|
method: "PATCH",
|
|
18
|
-
headers:
|
|
19
|
-
body: JSON.stringify(
|
|
18
|
+
headers: t,
|
|
19
|
+
body: JSON.stringify(l)
|
|
20
20
|
});
|
|
21
21
|
let d;
|
|
22
22
|
try {
|
|
23
|
-
d = await
|
|
23
|
+
d = await i.json();
|
|
24
24
|
} catch {
|
|
25
|
-
if (!
|
|
25
|
+
if (!i.ok) throw new Error(`Server antwortete mit Status ${i.status}`);
|
|
26
26
|
return;
|
|
27
27
|
}
|
|
28
28
|
if (d !== null && typeof d == "object" && "ok" in d && d.ok === !1) {
|
|
29
|
-
const
|
|
30
|
-
throw new Error(typeof
|
|
29
|
+
const o = d.message;
|
|
30
|
+
throw new Error(typeof o == "string" && o ? o : `Server antwortete mit Status ${i.status}`);
|
|
31
31
|
}
|
|
32
|
-
if (!
|
|
33
|
-
throw new Error(`Server antwortete mit Status ${
|
|
32
|
+
if (!i.ok)
|
|
33
|
+
throw new Error(`Server antwortete mit Status ${i.status}`);
|
|
34
34
|
}
|
|
35
35
|
const U = {
|
|
36
36
|
firstName: "",
|
|
37
37
|
lastName: "",
|
|
38
38
|
email: "",
|
|
39
39
|
orderNumber: "",
|
|
40
|
-
reason: ""
|
|
41
|
-
userMessage: ""
|
|
40
|
+
reason: ""
|
|
42
41
|
};
|
|
43
42
|
function k(e) {
|
|
44
43
|
const r = {};
|
|
45
44
|
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;
|
|
46
45
|
}
|
|
47
46
|
function I({ config: e, onClose: r }) {
|
|
48
|
-
const [
|
|
49
|
-
|
|
47
|
+
const [t, l] = m(U), [i, d] = m({}), [o, E] = m({}), [h, N] = m("idle"), [z, W] = m(""), B = L(null);
|
|
48
|
+
$(() => {
|
|
50
49
|
var u;
|
|
51
|
-
(u =
|
|
52
|
-
const
|
|
53
|
-
return document.addEventListener("keydown",
|
|
50
|
+
(u = B.current) == null || u.focus();
|
|
51
|
+
const n = (b) => b.key === "Escape" && r();
|
|
52
|
+
return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
|
|
54
53
|
}, [r]);
|
|
55
|
-
function
|
|
56
|
-
const b = { ...
|
|
57
|
-
if (
|
|
54
|
+
function p(n, u) {
|
|
55
|
+
const b = { ...t, [n]: u };
|
|
56
|
+
if (l(b), o[n]) {
|
|
58
57
|
const x = k(b);
|
|
59
|
-
d((g) => ({ ...g, [
|
|
58
|
+
d((g) => ({ ...g, [n]: x[n] }));
|
|
60
59
|
}
|
|
61
60
|
}
|
|
62
|
-
function f(
|
|
63
|
-
|
|
64
|
-
const u = k(
|
|
65
|
-
d((b) => ({ ...b, [
|
|
61
|
+
function f(n) {
|
|
62
|
+
E((b) => ({ ...b, [n]: !0 }));
|
|
63
|
+
const u = k(t);
|
|
64
|
+
d((b) => ({ ...b, [n]: u[n] }));
|
|
66
65
|
}
|
|
67
|
-
async function
|
|
66
|
+
async function M(n) {
|
|
68
67
|
var x, g;
|
|
69
|
-
|
|
68
|
+
n.preventDefault();
|
|
70
69
|
const u = Object.fromEntries(
|
|
71
|
-
Object.keys(
|
|
70
|
+
Object.keys(t).map((v) => [v, !0])
|
|
72
71
|
);
|
|
73
|
-
|
|
74
|
-
const b = k(
|
|
72
|
+
E(u);
|
|
73
|
+
const b = k(t);
|
|
75
74
|
if (d(b), !(Object.keys(b).length > 0)) {
|
|
76
|
-
N("loading"),
|
|
75
|
+
N("loading"), W("");
|
|
77
76
|
try {
|
|
78
|
-
await
|
|
77
|
+
await O(e, t), N("success"), (x = e.onSuccess) == null || x.call(e);
|
|
79
78
|
} catch (v) {
|
|
80
|
-
const
|
|
81
|
-
|
|
79
|
+
const A = v instanceof Error ? v : new Error("Ein unbekannter Fehler ist aufgetreten.");
|
|
80
|
+
W(A.message), N("error"), (g = e.onError) == null || g.call(e, A);
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
83
|
}
|
|
@@ -90,7 +89,7 @@ function I({ config: e, onClose: r }) {
|
|
|
90
89
|
role: "dialog",
|
|
91
90
|
"aria-modal": "true",
|
|
92
91
|
"aria-labelledby": "wrb-title",
|
|
93
|
-
onClick: (
|
|
92
|
+
onClick: (n) => n.target === n.currentTarget && r(),
|
|
94
93
|
children: /* @__PURE__ */ c("div", { className: "wrb-modal", children: [
|
|
95
94
|
/* @__PURE__ */ c("div", { className: "wrb-modal-header", children: [
|
|
96
95
|
/* @__PURE__ */ a("h2", { className: "wrb-modal-title", id: "wrb-title", children: j }),
|
|
@@ -111,30 +110,30 @@ function I({ config: e, onClose: r }) {
|
|
|
111
110
|
/* @__PURE__ */ a("h3", { children: "Widerruf eingegangen" }),
|
|
112
111
|
/* @__PURE__ */ c("p", { children: [
|
|
113
112
|
"Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
|
|
114
|
-
/* @__PURE__ */ a("strong", { children:
|
|
113
|
+
/* @__PURE__ */ a("strong", { children: t.email }),
|
|
115
114
|
"."
|
|
116
115
|
] })
|
|
117
116
|
] }),
|
|
118
|
-
/* @__PURE__ */ a(
|
|
117
|
+
/* @__PURE__ */ a(C, { config: e })
|
|
119
118
|
] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
|
|
120
119
|
e.introText && /* @__PURE__ */ a("p", { className: "wrb-intro", children: e.introText }),
|
|
121
|
-
h === "error" &&
|
|
122
|
-
/* @__PURE__ */ c("form", { onSubmit:
|
|
120
|
+
h === "error" && z && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: z }),
|
|
121
|
+
/* @__PURE__ */ c("form", { onSubmit: M, noValidate: !0, children: [
|
|
123
122
|
/* @__PURE__ */ a(
|
|
124
|
-
|
|
123
|
+
w,
|
|
125
124
|
{
|
|
126
125
|
label: "Vorname",
|
|
127
126
|
required: !0,
|
|
128
|
-
error:
|
|
127
|
+
error: o.firstName ? i.firstName : void 0,
|
|
129
128
|
children: /* @__PURE__ */ a(
|
|
130
129
|
"input",
|
|
131
130
|
{
|
|
132
|
-
ref:
|
|
133
|
-
className: `wrb-input${
|
|
131
|
+
ref: B,
|
|
132
|
+
className: `wrb-input${o.firstName && i.firstName ? " wrb-error" : ""}`,
|
|
134
133
|
type: "text",
|
|
135
134
|
autoComplete: "given-name",
|
|
136
|
-
value:
|
|
137
|
-
onChange: (
|
|
135
|
+
value: t.firstName,
|
|
136
|
+
onChange: (n) => p("firstName", n.target.value),
|
|
138
137
|
onBlur: () => f("firstName"),
|
|
139
138
|
placeholder: "Max"
|
|
140
139
|
}
|
|
@@ -142,19 +141,19 @@ function I({ config: e, onClose: r }) {
|
|
|
142
141
|
}
|
|
143
142
|
),
|
|
144
143
|
/* @__PURE__ */ a(
|
|
145
|
-
|
|
144
|
+
w,
|
|
146
145
|
{
|
|
147
146
|
label: "Nachname",
|
|
148
147
|
required: !0,
|
|
149
|
-
error:
|
|
148
|
+
error: o.lastName ? i.lastName : void 0,
|
|
150
149
|
children: /* @__PURE__ */ a(
|
|
151
150
|
"input",
|
|
152
151
|
{
|
|
153
|
-
className: `wrb-input${
|
|
152
|
+
className: `wrb-input${o.lastName && i.lastName ? " wrb-error" : ""}`,
|
|
154
153
|
type: "text",
|
|
155
154
|
autoComplete: "family-name",
|
|
156
|
-
value:
|
|
157
|
-
onChange: (
|
|
155
|
+
value: t.lastName,
|
|
156
|
+
onChange: (n) => p("lastName", n.target.value),
|
|
158
157
|
onBlur: () => f("lastName"),
|
|
159
158
|
placeholder: "Mustermann"
|
|
160
159
|
}
|
|
@@ -162,20 +161,20 @@ function I({ config: e, onClose: r }) {
|
|
|
162
161
|
}
|
|
163
162
|
),
|
|
164
163
|
/* @__PURE__ */ a(
|
|
165
|
-
|
|
164
|
+
w,
|
|
166
165
|
{
|
|
167
166
|
label: "E-Mail-Adresse",
|
|
168
167
|
required: !0,
|
|
169
168
|
hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
|
|
170
|
-
error:
|
|
169
|
+
error: o.email ? i.email : void 0,
|
|
171
170
|
children: /* @__PURE__ */ a(
|
|
172
171
|
"input",
|
|
173
172
|
{
|
|
174
|
-
className: `wrb-input${
|
|
173
|
+
className: `wrb-input${o.email && i.email ? " wrb-error" : ""}`,
|
|
175
174
|
type: "email",
|
|
176
175
|
autoComplete: "email",
|
|
177
|
-
value:
|
|
178
|
-
onChange: (
|
|
176
|
+
value: t.email,
|
|
177
|
+
onChange: (n) => p("email", n.target.value),
|
|
179
178
|
onBlur: () => f("email"),
|
|
180
179
|
placeholder: "name@beispiel.de"
|
|
181
180
|
}
|
|
@@ -183,19 +182,19 @@ function I({ config: e, onClose: r }) {
|
|
|
183
182
|
}
|
|
184
183
|
),
|
|
185
184
|
/* @__PURE__ */ a(
|
|
186
|
-
|
|
185
|
+
w,
|
|
187
186
|
{
|
|
188
187
|
label: "Bestell- / Auftrags- / Vertragsnummer",
|
|
189
188
|
required: !0,
|
|
190
189
|
hint: "Zu finden in Ihrer Bestellbestätigung.",
|
|
191
|
-
error:
|
|
190
|
+
error: o.orderNumber ? i.orderNumber : void 0,
|
|
192
191
|
children: /* @__PURE__ */ a(
|
|
193
192
|
"input",
|
|
194
193
|
{
|
|
195
|
-
className: `wrb-input${
|
|
194
|
+
className: `wrb-input${o.orderNumber && i.orderNumber ? " wrb-error" : ""}`,
|
|
196
195
|
type: "text",
|
|
197
|
-
value:
|
|
198
|
-
onChange: (
|
|
196
|
+
value: t.orderNumber,
|
|
197
|
+
onChange: (n) => p("orderNumber", n.target.value),
|
|
199
198
|
onBlur: () => f("orderNumber"),
|
|
200
199
|
placeholder: "z.B. 10045678"
|
|
201
200
|
}
|
|
@@ -203,7 +202,7 @@ function I({ config: e, onClose: r }) {
|
|
|
203
202
|
}
|
|
204
203
|
),
|
|
205
204
|
/* @__PURE__ */ a(
|
|
206
|
-
|
|
205
|
+
w,
|
|
207
206
|
{
|
|
208
207
|
label: "Widerrufsgrund",
|
|
209
208
|
hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
|
|
@@ -211,24 +210,14 @@ function I({ config: e, onClose: r }) {
|
|
|
211
210
|
"textarea",
|
|
212
211
|
{
|
|
213
212
|
className: "wrb-textarea",
|
|
214
|
-
value:
|
|
215
|
-
onChange: (
|
|
213
|
+
value: t.reason,
|
|
214
|
+
onChange: (n) => p("reason", n.target.value),
|
|
216
215
|
placeholder: "Optional",
|
|
217
216
|
rows: 2
|
|
218
217
|
}
|
|
219
218
|
)
|
|
220
219
|
}
|
|
221
220
|
),
|
|
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
|
-
) }),
|
|
232
221
|
/* @__PURE__ */ c("div", { className: "wrb-actions", children: [
|
|
233
222
|
/* @__PURE__ */ a(
|
|
234
223
|
"button",
|
|
@@ -250,24 +239,24 @@ function I({ config: e, onClose: r }) {
|
|
|
250
239
|
)
|
|
251
240
|
] })
|
|
252
241
|
] }),
|
|
253
|
-
/* @__PURE__ */ a(
|
|
242
|
+
/* @__PURE__ */ a(C, { config: e })
|
|
254
243
|
] })
|
|
255
244
|
] })
|
|
256
245
|
}
|
|
257
246
|
);
|
|
258
247
|
}
|
|
259
|
-
function
|
|
248
|
+
function w({ label: e, required: r, hint: t, error: l, children: i }) {
|
|
260
249
|
return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
|
|
261
250
|
/* @__PURE__ */ c("label", { className: "wrb-label", children: [
|
|
262
251
|
e,
|
|
263
252
|
r && /* @__PURE__ */ a("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
|
|
264
253
|
] }),
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
254
|
+
i,
|
|
255
|
+
t && !l && /* @__PURE__ */ a("p", { className: "wrb-hint", children: t }),
|
|
256
|
+
l && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: l })
|
|
268
257
|
] });
|
|
269
258
|
}
|
|
270
|
-
function
|
|
259
|
+
function C({ config: e }) {
|
|
271
260
|
return e.privacyUrl ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: /* @__PURE__ */ a(
|
|
272
261
|
"a",
|
|
273
262
|
{
|
|
@@ -279,7 +268,7 @@ function A({ config: e }) {
|
|
|
279
268
|
}
|
|
280
269
|
) }) : null;
|
|
281
270
|
}
|
|
282
|
-
const
|
|
271
|
+
const S = `
|
|
283
272
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
284
273
|
.wrb-btn {
|
|
285
274
|
display: inline-flex;
|
|
@@ -513,41 +502,46 @@ function P() {
|
|
|
513
502
|
const e = "wrb-styles";
|
|
514
503
|
if (document.getElementById(e)) return;
|
|
515
504
|
const r = document.createElement("style");
|
|
516
|
-
r.id = e, r.textContent =
|
|
505
|
+
r.id = e, r.textContent = S, document.head.appendChild(r);
|
|
517
506
|
}
|
|
518
507
|
function R({ config: e }) {
|
|
519
|
-
const [r,
|
|
520
|
-
return
|
|
508
|
+
const [r, t] = m(!1);
|
|
509
|
+
return $(() => {
|
|
521
510
|
P();
|
|
511
|
+
}, []), $(() => {
|
|
512
|
+
const l = () => {
|
|
513
|
+
window.location.hash === "#wrb-modal" && (history.replaceState(null, "", window.location.pathname + window.location.search), t(!0));
|
|
514
|
+
};
|
|
515
|
+
return l(), window.addEventListener("hashchange", l), () => window.removeEventListener("hashchange", l);
|
|
522
516
|
}, []), /* @__PURE__ */ c(q, { children: [
|
|
523
517
|
/* @__PURE__ */ a(
|
|
524
518
|
"button",
|
|
525
519
|
{
|
|
526
520
|
type: "button",
|
|
527
521
|
className: `wrb-btn${e.buttonClass ? ` ${e.buttonClass}` : ""}`,
|
|
528
|
-
onClick: () =>
|
|
522
|
+
onClick: () => t(!0),
|
|
529
523
|
children: e.buttonLabel ?? "Vertrag widerrufen"
|
|
530
524
|
}
|
|
531
525
|
),
|
|
532
|
-
r &&
|
|
533
|
-
/* @__PURE__ */ a(I, { config: e, onClose: () =>
|
|
526
|
+
r && F(
|
|
527
|
+
/* @__PURE__ */ a(I, { config: e, onClose: () => t(!1) }),
|
|
534
528
|
document.body
|
|
535
529
|
)
|
|
536
530
|
] });
|
|
537
531
|
}
|
|
538
|
-
function
|
|
532
|
+
function s(e) {
|
|
539
533
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
540
534
|
}
|
|
541
535
|
function y(e) {
|
|
542
536
|
if (!e.privacyUrl) return "";
|
|
543
|
-
const r =
|
|
537
|
+
const r = s(e.privacyLabel ?? "Datenschutz");
|
|
544
538
|
return `
|
|
545
539
|
<div class="wrb-legal-links">
|
|
546
|
-
<a href="${
|
|
540
|
+
<a href="${s(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
|
|
547
541
|
</div>`;
|
|
548
542
|
}
|
|
549
|
-
function
|
|
550
|
-
const
|
|
543
|
+
function T(e, r = "", t = "") {
|
|
544
|
+
const l = s(e.successUrl ?? r), i = s(e.errorUrl ?? t);
|
|
551
545
|
return `
|
|
552
546
|
<div class="wrb-field">
|
|
553
547
|
<label class="wrb-label">
|
|
@@ -587,16 +581,12 @@ function M(e, r = "", l = "") {
|
|
|
587
581
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
588
582
|
</p>
|
|
589
583
|
</div>
|
|
590
|
-
<
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
</div>
|
|
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}">` : ""}`;
|
|
584
|
+
<input type="hidden" name="action" value="${s(e.action)}">
|
|
585
|
+
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
586
|
+
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
597
587
|
}
|
|
598
588
|
function K(e) {
|
|
599
|
-
const r = e.companyName ? `Widerruf – ${
|
|
589
|
+
const r = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", t = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
600
590
|
return `<!DOCTYPE html>
|
|
601
591
|
<html lang="de">
|
|
602
592
|
<head>
|
|
@@ -615,7 +605,7 @@ function K(e) {
|
|
|
615
605
|
}
|
|
616
606
|
.wrb-page .wrb-modal { max-height: none; }
|
|
617
607
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
618
|
-
${
|
|
608
|
+
${S}
|
|
619
609
|
</style>
|
|
620
610
|
</head>
|
|
621
611
|
<body>
|
|
@@ -625,12 +615,12 @@ function K(e) {
|
|
|
625
615
|
<h1 class="wrb-modal-title">${r}</h1>
|
|
626
616
|
</div>
|
|
627
617
|
<div class="wrb-modal-body">
|
|
628
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
629
|
-
<form method="POST" action="${
|
|
630
|
-
${
|
|
618
|
+
${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
|
|
619
|
+
<form method="POST" action="${t}" novalidate>
|
|
620
|
+
${T(e)}
|
|
631
621
|
<div class="wrb-actions">
|
|
632
622
|
<button type="submit" class="wrb-submit-btn">
|
|
633
|
-
${
|
|
623
|
+
${s(e.submitLabel ?? "Absenden")}
|
|
634
624
|
</button>
|
|
635
625
|
</div>
|
|
636
626
|
</form>
|
|
@@ -642,27 +632,27 @@ function K(e) {
|
|
|
642
632
|
</html>`;
|
|
643
633
|
}
|
|
644
634
|
function Y(e, { inlineStyles: r = !0 } = {}) {
|
|
645
|
-
const
|
|
635
|
+
const t = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", l = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
646
636
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
647
637
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
648
|
-
return `${r ? `<style>${
|
|
649
|
-
${
|
|
638
|
+
return `${r ? `<style>${i}
|
|
639
|
+
${S}</style>` : `<style>${i}</style>`}
|
|
650
640
|
|
|
651
641
|
<!-- Widerruf: Form-Modal -->
|
|
652
642
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
653
643
|
<div class="wrb-modal">
|
|
654
644
|
<div class="wrb-modal-header">
|
|
655
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
645
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
656
646
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
657
647
|
</div>
|
|
658
648
|
<div class="wrb-modal-body">
|
|
659
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
660
|
-
<form method="POST" action="${
|
|
661
|
-
${
|
|
649
|
+
${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
|
|
650
|
+
<form method="POST" action="${l}" novalidate>
|
|
651
|
+
${T(e, "#wrb-success", "#wrb-error")}
|
|
662
652
|
<div class="wrb-actions">
|
|
663
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
653
|
+
<a href="#" class="wrb-cancel-btn">${s(e.cancelLabel ?? "Abbrechen")}</a>
|
|
664
654
|
<button type="submit" class="wrb-submit-btn">
|
|
665
|
-
${
|
|
655
|
+
${s(e.submitLabel ?? "Absenden")}
|
|
666
656
|
</button>
|
|
667
657
|
</div>
|
|
668
658
|
</form>
|