@netlib/widerrufsbutton 2.1.3 → 2.1.4
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 +19 -23
- package/dist/index.es.js +82 -97
- package/dist/types.d.ts +0 -1
- package/dist/widerruf.html +0 -4
- package/dist/widerrufsbutton.iife.js +5 -5
- 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 o={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(o)});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 l=d.message;throw new Error(typeof l=="string"&&l?l:`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,o]=c.useState(F),[n,d]=c.useState({}),[l,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),l[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:l.firstName?n.firstName:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${l.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:l.lastName?n.lastName:void 0,children:r.jsx("input",{className:`wrb-input${l.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:l.email?n.email:void 0,children:r.jsx("input",{className:`wrb-input${l.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:l.orderNumber?n.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${l.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:o,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&&!o&&r.jsx("p",{className:"wrb-hint",children:t}),o&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:o})]})}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()},[]),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 i(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function v(e){if(!e.privacyUrl)return"";const a=i(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
<a href="${
|
|
233
|
-
</div>`}function
|
|
232
|
+
<a href="${i(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
233
|
+
</div>`}function A(e,a="",t=""){const o=i(e.successUrl??a),n=i(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
|
-
<label class="wrb-label">Nachricht</label>
|
|
274
|
-
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
275
|
-
</div>
|
|
276
|
-
<input type="hidden" name="action" value="${n(e.action)}">
|
|
272
|
+
<input type="hidden" name="action" value="${i(e.action)}">
|
|
277
273
|
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
278
|
-
${
|
|
274
|
+
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function U(e){const a=e.companyName?`Widerruf – ${i(e.companyName)}`:"Widerrufsformular",t=i(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">${i(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
|
+
${i(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 – ${i(e.companyName)}`:"Widerrufsformular",o=i(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">${
|
|
329
|
+
${e.introText?`<p class="wrb-intro">${i(e.introText)}</p>`:""}
|
|
334
330
|
<form method="POST" action="${o}" novalidate>
|
|
335
|
-
${
|
|
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">${i(e.cancelLabel??"Abbrechen")}</a>
|
|
338
334
|
<button type="submit" class="wrb-submit-btn">
|
|
339
|
-
${
|
|
335
|
+
${i(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,11 +1,11 @@
|
|
|
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 F, useEffect as C } from "react";
|
|
3
|
+
import { createPortal as L } from "react-dom";
|
|
4
|
+
async function O(e, r) {
|
|
5
|
+
const t = {
|
|
6
6
|
"Content-Type": "application/json"
|
|
7
7
|
};
|
|
8
|
-
e.authToken && (
|
|
8
|
+
e.authToken && (t.Authorization = `Bearer ${e.authToken}`);
|
|
9
9
|
const o = {
|
|
10
10
|
action: e.action,
|
|
11
11
|
payload: {
|
|
@@ -13,69 +13,68 @@ async function L(e, 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:
|
|
18
|
+
headers: t,
|
|
19
19
|
body: JSON.stringify(o)
|
|
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
29
|
const s = d.message;
|
|
30
|
-
throw new Error(typeof s == "string" && s ? s : `Server antwortete mit Status ${
|
|
30
|
+
throw new Error(typeof s == "string" && s ? s : `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 [
|
|
47
|
+
const [t, o] = m(U), [i, d] = m({}), [s, S] = m({}), [h, N] = m("idle"), [E, z] = m(""), W = F(null);
|
|
49
48
|
C(() => {
|
|
50
49
|
var u;
|
|
51
50
|
(u = W.current) == null || u.focus();
|
|
52
|
-
const
|
|
53
|
-
return document.addEventListener("keydown",
|
|
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 (o(b), s[
|
|
54
|
+
function p(n, u) {
|
|
55
|
+
const b = { ...t, [n]: u };
|
|
56
|
+
if (o(b), s[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
|
-
S((b) => ({ ...b, [
|
|
64
|
-
const u = k(
|
|
65
|
-
d((b) => ({ ...b, [
|
|
61
|
+
function f(n) {
|
|
62
|
+
S((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
72
|
S(u);
|
|
74
|
-
const b = k(
|
|
73
|
+
const b = k(t);
|
|
75
74
|
if (d(b), !(Object.keys(b).length > 0)) {
|
|
76
75
|
N("loading"), z("");
|
|
77
76
|
try {
|
|
78
|
-
await
|
|
77
|
+
await O(e, t), N("success"), (x = e.onSuccess) == null || x.call(e);
|
|
79
78
|
} catch (v) {
|
|
80
79
|
const B = v instanceof Error ? v : new Error("Ein unbekannter Fehler ist aufgetreten.");
|
|
81
80
|
z(B.message), N("error"), (g = e.onError) == null || g.call(e, B);
|
|
@@ -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,7 +110,7 @@ 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
|
] }),
|
|
@@ -119,22 +118,22 @@ function I({ config: e, onClose: r }) {
|
|
|
119
118
|
] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
|
|
120
119
|
e.introText && /* @__PURE__ */ a("p", { className: "wrb-intro", children: e.introText }),
|
|
121
120
|
h === "error" && E && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
|
|
122
|
-
/* @__PURE__ */ c("form", { onSubmit:
|
|
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: s.firstName ?
|
|
127
|
+
error: s.firstName ? i.firstName : void 0,
|
|
129
128
|
children: /* @__PURE__ */ a(
|
|
130
129
|
"input",
|
|
131
130
|
{
|
|
132
131
|
ref: W,
|
|
133
|
-
className: `wrb-input${s.firstName &&
|
|
132
|
+
className: `wrb-input${s.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: s.lastName ?
|
|
148
|
+
error: s.lastName ? i.lastName : void 0,
|
|
150
149
|
children: /* @__PURE__ */ a(
|
|
151
150
|
"input",
|
|
152
151
|
{
|
|
153
|
-
className: `wrb-input${s.lastName &&
|
|
152
|
+
className: `wrb-input${s.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: s.email ?
|
|
169
|
+
error: s.email ? i.email : void 0,
|
|
171
170
|
children: /* @__PURE__ */ a(
|
|
172
171
|
"input",
|
|
173
172
|
{
|
|
174
|
-
className: `wrb-input${s.email &&
|
|
173
|
+
className: `wrb-input${s.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: s.orderNumber ?
|
|
190
|
+
error: s.orderNumber ? i.orderNumber : void 0,
|
|
192
191
|
children: /* @__PURE__ */ a(
|
|
193
192
|
"input",
|
|
194
193
|
{
|
|
195
|
-
className: `wrb-input${s.orderNumber &&
|
|
194
|
+
className: `wrb-input${s.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",
|
|
@@ -256,14 +245,14 @@ function I({ config: e, onClose: r }) {
|
|
|
256
245
|
}
|
|
257
246
|
);
|
|
258
247
|
}
|
|
259
|
-
function
|
|
248
|
+
function w({ label: e, required: r, hint: t, error: o, 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
|
-
|
|
254
|
+
i,
|
|
255
|
+
t && !o && /* @__PURE__ */ a("p", { className: "wrb-hint", children: t }),
|
|
267
256
|
o && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: o })
|
|
268
257
|
] });
|
|
269
258
|
}
|
|
@@ -516,7 +505,7 @@ function P() {
|
|
|
516
505
|
r.id = e, r.textContent = $, document.head.appendChild(r);
|
|
517
506
|
}
|
|
518
507
|
function R({ config: e }) {
|
|
519
|
-
const [r,
|
|
508
|
+
const [r, t] = m(!1);
|
|
520
509
|
return C(() => {
|
|
521
510
|
P();
|
|
522
511
|
}, []), /* @__PURE__ */ c(q, { children: [
|
|
@@ -525,29 +514,29 @@ function R({ config: e }) {
|
|
|
525
514
|
{
|
|
526
515
|
type: "button",
|
|
527
516
|
className: `wrb-btn${e.buttonClass ? ` ${e.buttonClass}` : ""}`,
|
|
528
|
-
onClick: () =>
|
|
517
|
+
onClick: () => t(!0),
|
|
529
518
|
children: e.buttonLabel ?? "Vertrag widerrufen"
|
|
530
519
|
}
|
|
531
520
|
),
|
|
532
|
-
r &&
|
|
533
|
-
/* @__PURE__ */ a(I, { config: e, onClose: () =>
|
|
521
|
+
r && L(
|
|
522
|
+
/* @__PURE__ */ a(I, { config: e, onClose: () => t(!1) }),
|
|
534
523
|
document.body
|
|
535
524
|
)
|
|
536
525
|
] });
|
|
537
526
|
}
|
|
538
|
-
function
|
|
527
|
+
function l(e) {
|
|
539
528
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
540
529
|
}
|
|
541
530
|
function y(e) {
|
|
542
531
|
if (!e.privacyUrl) return "";
|
|
543
|
-
const r =
|
|
532
|
+
const r = l(e.privacyLabel ?? "Datenschutz");
|
|
544
533
|
return `
|
|
545
534
|
<div class="wrb-legal-links">
|
|
546
|
-
<a href="${
|
|
535
|
+
<a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
|
|
547
536
|
</div>`;
|
|
548
537
|
}
|
|
549
|
-
function
|
|
550
|
-
const o =
|
|
538
|
+
function T(e, r = "", t = "") {
|
|
539
|
+
const o = l(e.successUrl ?? r), i = l(e.errorUrl ?? t);
|
|
551
540
|
return `
|
|
552
541
|
<div class="wrb-field">
|
|
553
542
|
<label class="wrb-label">
|
|
@@ -587,16 +576,12 @@ function M(e, r = "", l = "") {
|
|
|
587
576
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
588
577
|
</p>
|
|
589
578
|
</div>
|
|
590
|
-
<
|
|
591
|
-
<label class="wrb-label">Nachricht</label>
|
|
592
|
-
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
593
|
-
</div>
|
|
594
|
-
<input type="hidden" name="action" value="${i(e.action)}">
|
|
579
|
+
<input type="hidden" name="action" value="${l(e.action)}">
|
|
595
580
|
${o ? `<input type="hidden" name="successUrl" value="${o}">` : ""}
|
|
596
|
-
${
|
|
581
|
+
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
597
582
|
}
|
|
598
583
|
function K(e) {
|
|
599
|
-
const r = e.companyName ? `Widerruf – ${
|
|
584
|
+
const r = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", t = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
600
585
|
return `<!DOCTYPE html>
|
|
601
586
|
<html lang="de">
|
|
602
587
|
<head>
|
|
@@ -625,12 +610,12 @@ function K(e) {
|
|
|
625
610
|
<h1 class="wrb-modal-title">${r}</h1>
|
|
626
611
|
</div>
|
|
627
612
|
<div class="wrb-modal-body">
|
|
628
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
629
|
-
<form method="POST" action="${
|
|
630
|
-
${
|
|
613
|
+
${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
|
|
614
|
+
<form method="POST" action="${t}" novalidate>
|
|
615
|
+
${T(e)}
|
|
631
616
|
<div class="wrb-actions">
|
|
632
617
|
<button type="submit" class="wrb-submit-btn">
|
|
633
|
-
${
|
|
618
|
+
${l(e.submitLabel ?? "Absenden")}
|
|
634
619
|
</button>
|
|
635
620
|
</div>
|
|
636
621
|
</form>
|
|
@@ -642,27 +627,27 @@ function K(e) {
|
|
|
642
627
|
</html>`;
|
|
643
628
|
}
|
|
644
629
|
function Y(e, { inlineStyles: r = !0 } = {}) {
|
|
645
|
-
const
|
|
630
|
+
const t = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", o = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
646
631
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
647
632
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
648
|
-
return `${r ? `<style>${
|
|
649
|
-
${$}</style>` : `<style>${
|
|
633
|
+
return `${r ? `<style>${i}
|
|
634
|
+
${$}</style>` : `<style>${i}</style>`}
|
|
650
635
|
|
|
651
636
|
<!-- Widerruf: Form-Modal -->
|
|
652
637
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
653
638
|
<div class="wrb-modal">
|
|
654
639
|
<div class="wrb-modal-header">
|
|
655
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
640
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
656
641
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
657
642
|
</div>
|
|
658
643
|
<div class="wrb-modal-body">
|
|
659
|
-
${e.introText ? `<p class="wrb-intro">${
|
|
644
|
+
${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
|
|
660
645
|
<form method="POST" action="${o}" novalidate>
|
|
661
|
-
${
|
|
646
|
+
${T(e, "#wrb-success", "#wrb-error")}
|
|
662
647
|
<div class="wrb-actions">
|
|
663
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
648
|
+
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel ?? "Abbrechen")}</a>
|
|
664
649
|
<button type="submit" class="wrb-submit-btn">
|
|
665
|
-
${
|
|
650
|
+
${l(e.submitLabel ?? "Absenden")}
|
|
666
651
|
</button>
|
|
667
652
|
</div>
|
|
668
653
|
</form>
|
package/dist/types.d.ts
CHANGED
package/dist/widerruf.html
CHANGED
|
@@ -296,10 +296,6 @@
|
|
|
296
296
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
297
297
|
</p>
|
|
298
298
|
</div>
|
|
299
|
-
<div class="wrb-field">
|
|
300
|
-
<label class="wrb-label">Nachricht</label>
|
|
301
|
-
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
302
|
-
</div>
|
|
303
299
|
<input type="hidden" name="action" value="widerruf_submit">
|
|
304
300
|
|
|
305
301
|
|