@netlib/widerrufsbutton 2.1.4 → 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/index.cjs.js +14 -14
- package/dist/index.es.js +56 -51
- package/dist/widerrufsbutton.iife.js +9 -9
- package/package.json +1 -1
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"),M=require("react-dom");async function q(e,a){const t={"Content-Type":"application/json"};e.authToken&&(t.Authorization=`Bearer ${e.authToken}`);const
|
|
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 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()},[]),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
|
|
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 A(e,a="",t=""){const
|
|
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,9 +269,9 @@
|
|
|
269
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
270
270
|
</p>
|
|
271
271
|
</div>
|
|
272
|
-
<input type="hidden" name="action" value="${
|
|
273
|
-
${
|
|
274
|
-
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function U(e){const a=e.companyName?`Widerruf – ${
|
|
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>
|
|
275
275
|
<html lang="de">
|
|
276
276
|
<head>
|
|
277
277
|
<meta charset="UTF-8">
|
|
@@ -299,12 +299,12 @@
|
|
|
299
299
|
<h1 class="wrb-modal-title">${a}</h1>
|
|
300
300
|
</div>
|
|
301
301
|
<div class="wrb-modal-body">
|
|
302
|
-
${e.introText?`<p class="wrb-intro">${
|
|
302
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
303
303
|
<form method="POST" action="${t}" novalidate>
|
|
304
304
|
${A(e)}
|
|
305
305
|
<div class="wrb-actions">
|
|
306
306
|
<button type="submit" class="wrb-submit-btn">
|
|
307
|
-
${
|
|
307
|
+
${l(e.submitLabel??"Absenden")}
|
|
308
308
|
</button>
|
|
309
309
|
</div>
|
|
310
310
|
</form>
|
|
@@ -313,7 +313,7 @@
|
|
|
313
313
|
</div>
|
|
314
314
|
</div>
|
|
315
315
|
</body>
|
|
316
|
-
</html>`}function I(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${
|
|
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=`
|
|
317
317
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
318
318
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${n}
|
|
319
319
|
${j}</style>`:`<style>${n}</style>`}
|
|
@@ -326,13 +326,13 @@ ${j}</style>`:`<style>${n}</style>`}
|
|
|
326
326
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
327
327
|
</div>
|
|
328
328
|
<div class="wrb-modal-body">
|
|
329
|
-
${e.introText?`<p class="wrb-intro">${
|
|
330
|
-
<form method="POST" action="${
|
|
329
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
330
|
+
<form method="POST" action="${i}" novalidate>
|
|
331
331
|
${A(e,"#wrb-success","#wrb-error")}
|
|
332
332
|
<div class="wrb-actions">
|
|
333
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
333
|
+
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel??"Abbrechen")}</a>
|
|
334
334
|
<button type="submit" class="wrb-submit-btn">
|
|
335
|
-
${
|
|
335
|
+
${l(e.submitLabel??"Absenden")}
|
|
336
336
|
</button>
|
|
337
337
|
</div>
|
|
338
338
|
</form>
|
package/dist/index.es.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as a, jsxs as c, Fragment as q } from "react/jsx-runtime";
|
|
2
|
-
import { useState as m, useRef as
|
|
3
|
-
import { createPortal as
|
|
2
|
+
import { useState as m, useRef as L, useEffect as $ } from "react";
|
|
3
|
+
import { createPortal as F } from "react-dom";
|
|
4
4
|
async function O(e, r) {
|
|
5
5
|
const t = {
|
|
6
6
|
"Content-Type": "application/json"
|
|
7
7
|
};
|
|
8
8
|
e.authToken && (t.Authorization = `Bearer ${e.authToken}`);
|
|
9
|
-
const
|
|
9
|
+
const l = {
|
|
10
10
|
action: e.action,
|
|
11
11
|
payload: {
|
|
12
12
|
...r,
|
|
@@ -16,7 +16,7 @@ async function O(e, r) {
|
|
|
16
16
|
}, i = await fetch(e.apiUrl, {
|
|
17
17
|
method: "PATCH",
|
|
18
18
|
headers: t,
|
|
19
|
-
body: JSON.stringify(
|
|
19
|
+
body: JSON.stringify(l)
|
|
20
20
|
});
|
|
21
21
|
let d;
|
|
22
22
|
try {
|
|
@@ -26,8 +26,8 @@ async function O(e, r) {
|
|
|
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
32
|
if (!i.ok)
|
|
33
33
|
throw new Error(`Server antwortete mit Status ${i.status}`);
|
|
@@ -44,22 +44,22 @@ function k(e) {
|
|
|
44
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;
|
|
45
45
|
}
|
|
46
46
|
function I({ config: e, onClose: r }) {
|
|
47
|
-
const [t,
|
|
48
|
-
|
|
47
|
+
const [t, l] = m(U), [i, d] = m({}), [o, E] = m({}), [h, N] = m("idle"), [z, W] = m(""), B = L(null);
|
|
48
|
+
$(() => {
|
|
49
49
|
var u;
|
|
50
|
-
(u =
|
|
50
|
+
(u = B.current) == null || u.focus();
|
|
51
51
|
const n = (b) => b.key === "Escape" && r();
|
|
52
52
|
return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
|
|
53
53
|
}, [r]);
|
|
54
54
|
function p(n, u) {
|
|
55
55
|
const b = { ...t, [n]: u };
|
|
56
|
-
if (
|
|
56
|
+
if (l(b), o[n]) {
|
|
57
57
|
const x = k(b);
|
|
58
58
|
d((g) => ({ ...g, [n]: x[n] }));
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
function f(n) {
|
|
62
|
-
|
|
62
|
+
E((b) => ({ ...b, [n]: !0 }));
|
|
63
63
|
const u = k(t);
|
|
64
64
|
d((b) => ({ ...b, [n]: u[n] }));
|
|
65
65
|
}
|
|
@@ -69,15 +69,15 @@ function I({ config: e, onClose: r }) {
|
|
|
69
69
|
const u = Object.fromEntries(
|
|
70
70
|
Object.keys(t).map((v) => [v, !0])
|
|
71
71
|
);
|
|
72
|
-
|
|
72
|
+
E(u);
|
|
73
73
|
const b = k(t);
|
|
74
74
|
if (d(b), !(Object.keys(b).length > 0)) {
|
|
75
|
-
N("loading"),
|
|
75
|
+
N("loading"), W("");
|
|
76
76
|
try {
|
|
77
77
|
await O(e, t), N("success"), (x = e.onSuccess) == null || x.call(e);
|
|
78
78
|
} catch (v) {
|
|
79
|
-
const
|
|
80
|
-
|
|
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);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
}
|
|
@@ -114,22 +114,22 @@ function I({ config: e, onClose: r }) {
|
|
|
114
114
|
"."
|
|
115
115
|
] })
|
|
116
116
|
] }),
|
|
117
|
-
/* @__PURE__ */ a(
|
|
117
|
+
/* @__PURE__ */ a(C, { config: e })
|
|
118
118
|
] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
|
|
119
119
|
e.introText && /* @__PURE__ */ a("p", { className: "wrb-intro", children: e.introText }),
|
|
120
|
-
h === "error" &&
|
|
120
|
+
h === "error" && z && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: z }),
|
|
121
121
|
/* @__PURE__ */ c("form", { onSubmit: M, noValidate: !0, children: [
|
|
122
122
|
/* @__PURE__ */ a(
|
|
123
123
|
w,
|
|
124
124
|
{
|
|
125
125
|
label: "Vorname",
|
|
126
126
|
required: !0,
|
|
127
|
-
error:
|
|
127
|
+
error: o.firstName ? i.firstName : void 0,
|
|
128
128
|
children: /* @__PURE__ */ a(
|
|
129
129
|
"input",
|
|
130
130
|
{
|
|
131
|
-
ref:
|
|
132
|
-
className: `wrb-input${
|
|
131
|
+
ref: B,
|
|
132
|
+
className: `wrb-input${o.firstName && i.firstName ? " wrb-error" : ""}`,
|
|
133
133
|
type: "text",
|
|
134
134
|
autoComplete: "given-name",
|
|
135
135
|
value: t.firstName,
|
|
@@ -145,11 +145,11 @@ function I({ config: e, onClose: r }) {
|
|
|
145
145
|
{
|
|
146
146
|
label: "Nachname",
|
|
147
147
|
required: !0,
|
|
148
|
-
error:
|
|
148
|
+
error: o.lastName ? i.lastName : void 0,
|
|
149
149
|
children: /* @__PURE__ */ a(
|
|
150
150
|
"input",
|
|
151
151
|
{
|
|
152
|
-
className: `wrb-input${
|
|
152
|
+
className: `wrb-input${o.lastName && i.lastName ? " wrb-error" : ""}`,
|
|
153
153
|
type: "text",
|
|
154
154
|
autoComplete: "family-name",
|
|
155
155
|
value: t.lastName,
|
|
@@ -166,11 +166,11 @@ function I({ config: e, onClose: r }) {
|
|
|
166
166
|
label: "E-Mail-Adresse",
|
|
167
167
|
required: !0,
|
|
168
168
|
hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
|
|
169
|
-
error:
|
|
169
|
+
error: o.email ? i.email : void 0,
|
|
170
170
|
children: /* @__PURE__ */ a(
|
|
171
171
|
"input",
|
|
172
172
|
{
|
|
173
|
-
className: `wrb-input${
|
|
173
|
+
className: `wrb-input${o.email && i.email ? " wrb-error" : ""}`,
|
|
174
174
|
type: "email",
|
|
175
175
|
autoComplete: "email",
|
|
176
176
|
value: t.email,
|
|
@@ -187,11 +187,11 @@ function I({ config: e, onClose: r }) {
|
|
|
187
187
|
label: "Bestell- / Auftrags- / Vertragsnummer",
|
|
188
188
|
required: !0,
|
|
189
189
|
hint: "Zu finden in Ihrer Bestellbestätigung.",
|
|
190
|
-
error:
|
|
190
|
+
error: o.orderNumber ? i.orderNumber : void 0,
|
|
191
191
|
children: /* @__PURE__ */ a(
|
|
192
192
|
"input",
|
|
193
193
|
{
|
|
194
|
-
className: `wrb-input${
|
|
194
|
+
className: `wrb-input${o.orderNumber && i.orderNumber ? " wrb-error" : ""}`,
|
|
195
195
|
type: "text",
|
|
196
196
|
value: t.orderNumber,
|
|
197
197
|
onChange: (n) => p("orderNumber", n.target.value),
|
|
@@ -239,24 +239,24 @@ function I({ config: e, onClose: r }) {
|
|
|
239
239
|
)
|
|
240
240
|
] })
|
|
241
241
|
] }),
|
|
242
|
-
/* @__PURE__ */ a(
|
|
242
|
+
/* @__PURE__ */ a(C, { config: e })
|
|
243
243
|
] })
|
|
244
244
|
] })
|
|
245
245
|
}
|
|
246
246
|
);
|
|
247
247
|
}
|
|
248
|
-
function w({ label: e, required: r, hint: t, error:
|
|
248
|
+
function w({ label: e, required: r, hint: t, error: l, children: i }) {
|
|
249
249
|
return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
|
|
250
250
|
/* @__PURE__ */ c("label", { className: "wrb-label", children: [
|
|
251
251
|
e,
|
|
252
252
|
r && /* @__PURE__ */ a("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
|
|
253
253
|
] }),
|
|
254
254
|
i,
|
|
255
|
-
t && !
|
|
256
|
-
|
|
255
|
+
t && !l && /* @__PURE__ */ a("p", { className: "wrb-hint", children: t }),
|
|
256
|
+
l && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: l })
|
|
257
257
|
] });
|
|
258
258
|
}
|
|
259
|
-
function
|
|
259
|
+
function C({ config: e }) {
|
|
260
260
|
return e.privacyUrl ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: /* @__PURE__ */ a(
|
|
261
261
|
"a",
|
|
262
262
|
{
|
|
@@ -268,7 +268,7 @@ function A({ config: e }) {
|
|
|
268
268
|
}
|
|
269
269
|
) }) : null;
|
|
270
270
|
}
|
|
271
|
-
const
|
|
271
|
+
const S = `
|
|
272
272
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
273
273
|
.wrb-btn {
|
|
274
274
|
display: inline-flex;
|
|
@@ -502,12 +502,17 @@ function P() {
|
|
|
502
502
|
const e = "wrb-styles";
|
|
503
503
|
if (document.getElementById(e)) return;
|
|
504
504
|
const r = document.createElement("style");
|
|
505
|
-
r.id = e, r.textContent =
|
|
505
|
+
r.id = e, r.textContent = S, document.head.appendChild(r);
|
|
506
506
|
}
|
|
507
507
|
function R({ config: e }) {
|
|
508
508
|
const [r, t] = m(!1);
|
|
509
|
-
return
|
|
509
|
+
return $(() => {
|
|
510
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);
|
|
511
516
|
}, []), /* @__PURE__ */ c(q, { children: [
|
|
512
517
|
/* @__PURE__ */ a(
|
|
513
518
|
"button",
|
|
@@ -518,25 +523,25 @@ function R({ config: e }) {
|
|
|
518
523
|
children: e.buttonLabel ?? "Vertrag widerrufen"
|
|
519
524
|
}
|
|
520
525
|
),
|
|
521
|
-
r &&
|
|
526
|
+
r && F(
|
|
522
527
|
/* @__PURE__ */ a(I, { config: e, onClose: () => t(!1) }),
|
|
523
528
|
document.body
|
|
524
529
|
)
|
|
525
530
|
] });
|
|
526
531
|
}
|
|
527
|
-
function
|
|
532
|
+
function s(e) {
|
|
528
533
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
529
534
|
}
|
|
530
535
|
function y(e) {
|
|
531
536
|
if (!e.privacyUrl) return "";
|
|
532
|
-
const r =
|
|
537
|
+
const r = s(e.privacyLabel ?? "Datenschutz");
|
|
533
538
|
return `
|
|
534
539
|
<div class="wrb-legal-links">
|
|
535
|
-
<a href="${
|
|
540
|
+
<a href="${s(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
|
|
536
541
|
</div>`;
|
|
537
542
|
}
|
|
538
543
|
function T(e, r = "", t = "") {
|
|
539
|
-
const
|
|
544
|
+
const l = s(e.successUrl ?? r), i = s(e.errorUrl ?? t);
|
|
540
545
|
return `
|
|
541
546
|
<div class="wrb-field">
|
|
542
547
|
<label class="wrb-label">
|
|
@@ -576,12 +581,12 @@ function T(e, r = "", t = "") {
|
|
|
576
581
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
577
582
|
</p>
|
|
578
583
|
</div>
|
|
579
|
-
<input type="hidden" name="action" value="${
|
|
580
|
-
${
|
|
584
|
+
<input type="hidden" name="action" value="${s(e.action)}">
|
|
585
|
+
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
581
586
|
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
582
587
|
}
|
|
583
588
|
function K(e) {
|
|
584
|
-
const r = e.companyName ? `Widerruf – ${
|
|
589
|
+
const r = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", t = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
585
590
|
return `<!DOCTYPE html>
|
|
586
591
|
<html lang="de">
|
|
587
592
|
<head>
|
|
@@ -600,7 +605,7 @@ function K(e) {
|
|
|
600
605
|
}
|
|
601
606
|
.wrb-page .wrb-modal { max-height: none; }
|
|
602
607
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
603
|
-
${
|
|
608
|
+
${S}
|
|
604
609
|
</style>
|
|
605
610
|
</head>
|
|
606
611
|
<body>
|
|
@@ -610,12 +615,12 @@ function K(e) {
|
|
|
610
615
|
<h1 class="wrb-modal-title">${r}</h1>
|
|
611
616
|
</div>
|
|
612
617
|
<div class="wrb-modal-body">
|
|
613
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
618
|
+
${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
|
|
614
619
|
<form method="POST" action="${t}" novalidate>
|
|
615
620
|
${T(e)}
|
|
616
621
|
<div class="wrb-actions">
|
|
617
622
|
<button type="submit" class="wrb-submit-btn">
|
|
618
|
-
${
|
|
623
|
+
${s(e.submitLabel ?? "Absenden")}
|
|
619
624
|
</button>
|
|
620
625
|
</div>
|
|
621
626
|
</form>
|
|
@@ -627,11 +632,11 @@ function K(e) {
|
|
|
627
632
|
</html>`;
|
|
628
633
|
}
|
|
629
634
|
function Y(e, { inlineStyles: r = !0 } = {}) {
|
|
630
|
-
const t = e.companyName ? `Widerruf – ${
|
|
635
|
+
const t = e.companyName ? `Widerruf – ${s(e.companyName)}` : "Widerrufsformular", l = s(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
631
636
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
632
637
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
633
638
|
return `${r ? `<style>${i}
|
|
634
|
-
${
|
|
639
|
+
${S}</style>` : `<style>${i}</style>`}
|
|
635
640
|
|
|
636
641
|
<!-- Widerruf: Form-Modal -->
|
|
637
642
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
@@ -641,13 +646,13 @@ ${$}</style>` : `<style>${i}</style>`}
|
|
|
641
646
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
642
647
|
</div>
|
|
643
648
|
<div class="wrb-modal-body">
|
|
644
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
645
|
-
<form method="POST" action="${
|
|
649
|
+
${e.introText ? `<p class="wrb-intro">${s(e.introText)}</p>` : ""}
|
|
650
|
+
<form method="POST" action="${l}" novalidate>
|
|
646
651
|
${T(e, "#wrb-success", "#wrb-error")}
|
|
647
652
|
<div class="wrb-actions">
|
|
648
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
653
|
+
<a href="#" class="wrb-cancel-btn">${s(e.cancelLabel ?? "Abbrechen")}</a>
|
|
649
654
|
<button type="submit" class="wrb-submit-btn">
|
|
650
|
-
${
|
|
655
|
+
${s(e.submitLabel ?? "Absenden")}
|
|
651
656
|
</button>
|
|
652
657
|
</div>
|
|
653
658
|
</form>
|