@netlib/widerrufsbutton 2.1.8 → 2.1.11
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 +16 -16
- package/dist/fallback.es.js +21 -17
- package/dist/index.cjs.js +27 -27
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +190 -141
- package/dist/upgrade.d.ts +7 -0
- 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,10 +227,10 @@
|
|
|
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){if(!e.privacyUrl)return"";const a=r(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
232
|
<a href="${r(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
233
|
-
</div>`}function s(e,a="",t=""){const l=r(e.successUrl??a),i=r(e.errorUrl??t);return`
|
|
233
|
+
</div>`}function s(e){const a=[];return e.companyName&&a.push(`data-company-name="${r(e.companyName)}"`),e.senderEmail&&a.push(`data-sender-email="${r(e.senderEmail)}"`),e.authToken&&a.push(`data-auth-token="${r(e.authToken)}"`),a.length?" "+a.join(" "):""}function d(e,a="",t=""){const l=r(e.successUrl??a),i=r(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>
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
</div>
|
|
272
272
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
273
273
|
${l?`<input type="hidden" name="successUrl" value="${l}">`:""}
|
|
274
|
-
${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}`}function
|
|
274
|
+
${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}`}function b(e){const a=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",t=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
275
275
|
<html lang="de">
|
|
276
276
|
<head>
|
|
277
277
|
<meta charset="UTF-8">
|
|
@@ -289,7 +289,7 @@
|
|
|
289
289
|
}
|
|
290
290
|
.wrb-page .wrb-modal { max-height: none; }
|
|
291
291
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
292
|
-
${
|
|
292
|
+
${o}
|
|
293
293
|
</style>
|
|
294
294
|
</head>
|
|
295
295
|
<body>
|
|
@@ -300,23 +300,23 @@
|
|
|
300
300
|
</div>
|
|
301
301
|
<div class="wrb-modal-body">
|
|
302
302
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
303
|
-
<form method="POST" action="${t}">
|
|
304
|
-
${
|
|
303
|
+
<form method="POST" action="${t}"${s(e)}>
|
|
304
|
+
${d(e)}
|
|
305
305
|
<div class="wrb-actions">
|
|
306
306
|
<button type="submit" class="wrb-submit-btn">
|
|
307
307
|
${r(e.submitLabel??"Absenden")}
|
|
308
308
|
</button>
|
|
309
309
|
</div>
|
|
310
310
|
</form>
|
|
311
|
-
${
|
|
311
|
+
${n(e)}
|
|
312
312
|
</div>
|
|
313
313
|
</div>
|
|
314
314
|
</div>
|
|
315
315
|
</body>
|
|
316
|
-
</html>`}function
|
|
316
|
+
</html>`}function c(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",l=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=`
|
|
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>${i}
|
|
319
|
-
${
|
|
319
|
+
${o}</style>`:`<style>${i}</style>`}
|
|
320
320
|
|
|
321
321
|
<!-- Widerruf: Form-Modal -->
|
|
322
322
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
@@ -327,8 +327,8 @@ ${n}</style>`:`<style>${i}</style>`}
|
|
|
327
327
|
</div>
|
|
328
328
|
<div class="wrb-modal-body">
|
|
329
329
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
330
|
-
<form method="POST" action="${l}">
|
|
331
|
-
${
|
|
330
|
+
<form method="POST" action="${l}"${s(e)}>
|
|
331
|
+
${d(e,"#wrb-success","#wrb-error")}
|
|
332
332
|
<div class="wrb-actions">
|
|
333
333
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel??"Abbrechen")}</a>
|
|
334
334
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -336,7 +336,7 @@ ${n}</style>`:`<style>${i}</style>`}
|
|
|
336
336
|
</button>
|
|
337
337
|
</div>
|
|
338
338
|
</form>
|
|
339
|
-
${
|
|
339
|
+
${n(e)}
|
|
340
340
|
</div>
|
|
341
341
|
</div>
|
|
342
342
|
</div>
|
|
@@ -357,7 +357,7 @@ ${n}</style>`:`<style>${i}</style>`}
|
|
|
357
357
|
Bestätigung per E-Mail.
|
|
358
358
|
</p>
|
|
359
359
|
</div>
|
|
360
|
-
${
|
|
360
|
+
${n(e)}
|
|
361
361
|
</div>
|
|
362
362
|
</div>
|
|
363
363
|
</div>
|
|
@@ -378,7 +378,7 @@ ${n}</style>`:`<style>${i}</style>`}
|
|
|
378
378
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
379
379
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
380
380
|
</div>
|
|
381
|
-
${
|
|
381
|
+
${n(e)}
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
|
-
</div>`}exports.generateFallbackHtml=
|
|
384
|
+
</div>`}exports.generateFallbackHtml=b;exports.generateModalHtml=c;
|
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,7 +231,7 @@ const n = `
|
|
|
231
231
|
function r(e) {
|
|
232
232
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
233
233
|
}
|
|
234
|
-
function
|
|
234
|
+
function n(e) {
|
|
235
235
|
if (!e.privacyUrl) return "";
|
|
236
236
|
const a = r(e.privacyLabel ?? "Datenschutz");
|
|
237
237
|
return `
|
|
@@ -239,7 +239,11 @@ function o(e) {
|
|
|
239
239
|
<a href="${r(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
240
240
|
</div>`;
|
|
241
241
|
}
|
|
242
|
-
function s(e
|
|
242
|
+
function s(e) {
|
|
243
|
+
const a = [];
|
|
244
|
+
return e.companyName && a.push(`data-company-name="${r(e.companyName)}"`), e.senderEmail && a.push(`data-sender-email="${r(e.senderEmail)}"`), e.authToken && a.push(`data-auth-token="${r(e.authToken)}"`), a.length ? " " + a.join(" ") : "";
|
|
245
|
+
}
|
|
246
|
+
function d(e, a = "", t = "") {
|
|
243
247
|
const l = r(e.successUrl ?? a), i = r(e.errorUrl ?? t);
|
|
244
248
|
return `
|
|
245
249
|
<div class="wrb-field">
|
|
@@ -284,7 +288,7 @@ function s(e, a = "", t = "") {
|
|
|
284
288
|
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
285
289
|
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
286
290
|
}
|
|
287
|
-
function
|
|
291
|
+
function c(e) {
|
|
288
292
|
const a = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", t = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
289
293
|
return `<!DOCTYPE html>
|
|
290
294
|
<html lang="de">
|
|
@@ -304,7 +308,7 @@ function b(e) {
|
|
|
304
308
|
}
|
|
305
309
|
.wrb-page .wrb-modal { max-height: none; }
|
|
306
310
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
307
|
-
${
|
|
311
|
+
${o}
|
|
308
312
|
</style>
|
|
309
313
|
</head>
|
|
310
314
|
<body>
|
|
@@ -315,27 +319,27 @@ function b(e) {
|
|
|
315
319
|
</div>
|
|
316
320
|
<div class="wrb-modal-body">
|
|
317
321
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
318
|
-
<form method="POST" action="${t}">
|
|
319
|
-
${
|
|
322
|
+
<form method="POST" action="${t}"${s(e)}>
|
|
323
|
+
${d(e)}
|
|
320
324
|
<div class="wrb-actions">
|
|
321
325
|
<button type="submit" class="wrb-submit-btn">
|
|
322
326
|
${r(e.submitLabel ?? "Absenden")}
|
|
323
327
|
</button>
|
|
324
328
|
</div>
|
|
325
329
|
</form>
|
|
326
|
-
${
|
|
330
|
+
${n(e)}
|
|
327
331
|
</div>
|
|
328
332
|
</div>
|
|
329
333
|
</div>
|
|
330
334
|
</body>
|
|
331
335
|
</html>`;
|
|
332
336
|
}
|
|
333
|
-
function
|
|
337
|
+
function p(e, { inlineStyles: a = !0 } = {}) {
|
|
334
338
|
const t = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", l = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
335
339
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
336
340
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
337
341
|
return `${a ? `<style>${i}
|
|
338
|
-
${
|
|
342
|
+
${o}</style>` : `<style>${i}</style>`}
|
|
339
343
|
|
|
340
344
|
<!-- Widerruf: Form-Modal -->
|
|
341
345
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
@@ -346,8 +350,8 @@ ${n}</style>` : `<style>${i}</style>`}
|
|
|
346
350
|
</div>
|
|
347
351
|
<div class="wrb-modal-body">
|
|
348
352
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
349
|
-
<form method="POST" action="${l}">
|
|
350
|
-
${
|
|
353
|
+
<form method="POST" action="${l}"${s(e)}>
|
|
354
|
+
${d(e, "#wrb-success", "#wrb-error")}
|
|
351
355
|
<div class="wrb-actions">
|
|
352
356
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel ?? "Abbrechen")}</a>
|
|
353
357
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -355,7 +359,7 @@ ${n}</style>` : `<style>${i}</style>`}
|
|
|
355
359
|
</button>
|
|
356
360
|
</div>
|
|
357
361
|
</form>
|
|
358
|
-
${
|
|
362
|
+
${n(e)}
|
|
359
363
|
</div>
|
|
360
364
|
</div>
|
|
361
365
|
</div>
|
|
@@ -376,7 +380,7 @@ ${n}</style>` : `<style>${i}</style>`}
|
|
|
376
380
|
Bestätigung per E-Mail.
|
|
377
381
|
</p>
|
|
378
382
|
</div>
|
|
379
|
-
${
|
|
383
|
+
${n(e)}
|
|
380
384
|
</div>
|
|
381
385
|
</div>
|
|
382
386
|
</div>
|
|
@@ -397,12 +401,12 @@ ${n}</style>` : `<style>${i}</style>`}
|
|
|
397
401
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
398
402
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
399
403
|
</div>
|
|
400
|
-
${
|
|
404
|
+
${n(e)}
|
|
401
405
|
</div>
|
|
402
406
|
</div>
|
|
403
407
|
</div>`;
|
|
404
408
|
}
|
|
405
409
|
export {
|
|
406
|
-
|
|
407
|
-
|
|
410
|
+
c as generateFallbackHtml,
|
|
411
|
+
p as generateModalHtml
|
|
408
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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),U=require("react-dom");async function L(e,t){const a={"Content-Type":"application/json"};e.authToken&&(a.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...t,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},n=await fetch(e.apiUrl,{method:"PATCH",headers:a,body:JSON.stringify(o)});let c;try{c=await n.json()}catch{if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`);return}if(c!==null&&typeof c=="object"&&"ok"in c&&c.ok===!1){const i=c.message;throw new Error(typeof i=="string"&&i?i:`Server antwortete mit Status ${n.status}`)}if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`)}const O={firstName:"",lastName:"",email:"",orderNumber:"",reason:""};function $(e){const t={};return e.firstName.trim()||(t.firstName="Bitte geben Sie Ihren Vornamen an."),e.lastName.trim()||(t.lastName="Bitte geben Sie Ihren Nachnamen an."),e.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)||(t.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):t.email="Bitte geben Sie Ihre E-Mail-Adresse an.",e.orderNumber.trim()||(t.orderNumber="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),t}function A({config:e,onClose:t}){const[a,o]=m.useState(O),[n,c]=m.useState({}),[i,x]=m.useState({}),[w,u]=m.useState("idle"),[d,h]=m.useState(""),y=m.useRef(null);m.useEffect(()=>{var p;(p=y.current)==null||p.focus();const s=b=>b.key==="Escape"&&t();return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[t]);function f(s,p){const b={...a,[s]:p};if(o(b),i[s]){const N=$(b);c(k=>({...k,[s]:N[s]}))}}function v(s){x(b=>({...b,[s]:!0}));const p=$(a);c(b=>({...b,[s]:p[s]}))}async function F(s){var N,k;s.preventDefault();const p=Object.fromEntries(Object.keys(a).map(j=>[j,!0]));x(p);const b=$(a);if(c(b),!(Object.keys(b).length>0)){u("loading"),h("");try{await L(e,a),u("success"),(N=e.onSuccess)==null||N.call(e)}catch(j){const W=j instanceof Error?j:new Error("Ein unbekannter Fehler ist aufgetreten.");h(W.message),u("error"),(k=e.onError)==null||k.call(e,W)}}}const M=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&&t(),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:M}),r.jsx("button",{className:"wrb-close-btn",onClick:t,"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:a.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"&&d&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:d}),r.jsxs("form",{onSubmit:F,noValidate:!0,children:[r.jsx(g,{label:"Vorname",required:!0,error:i.firstName?n.firstName:void 0,children:r.jsx("input",{ref:y,className:`wrb-input${i.firstName&&n.firstName?" wrb-error":""}`,type:"text",autoComplete:"given-name",value:a.firstName,onChange:s=>f("firstName",s.target.value),onBlur:()=>v("firstName"),placeholder:"Max"})}),r.jsx(g,{label:"Nachname",required:!0,error:i.lastName?n.lastName:void 0,children:r.jsx("input",{className:`wrb-input${i.lastName&&n.lastName?" wrb-error":""}`,type:"text",autoComplete:"family-name",value:a.lastName,onChange:s=>f("lastName",s.target.value),onBlur:()=>v("lastName"),placeholder:"Mustermann"})}),r.jsx(g,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:i.email?n.email:void 0,children:r.jsx("input",{className:`wrb-input${i.email&&n.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:a.email,onChange:s=>f("email",s.target.value),onBlur:()=>v("email"),placeholder:"name@beispiel.de"})}),r.jsx(g,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:i.orderNumber?n.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${i.orderNumber&&n.orderNumber?" wrb-error":""}`,type:"text",value:a.orderNumber,onChange:s=>f("orderNumber",s.target.value),onBlur:()=>v("orderNumber"),placeholder:"z.B. 10045678"})}),r.jsx(g,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:a.reason,onChange:s=>f("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:t,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 g({label:e,required:t,hint:a,error:o,children:n}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,t&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),n,a&&!o&&r.jsx("p",{className:"wrb-hint",children:a}),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 E=`
|
|
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 I(){const e="wrb-styles";if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=E,document.head.appendChild(t)}function C(e){e.dataset.wrbUpgraded||(e.dataset.wrbUpgraded="true",e.addEventListener("submit",async t=>{t.preventDefault();const a=e.querySelector('.wrb-submit-btn, button[type="submit"]'),o=(a==null?void 0:a.textContent)??"";a&&(a.disabled=!0,a.textContent="Wird gesendet…");const n=new FormData(e),c=String(n.get("action")??""),i={firstName:String(n.get("firstName")??""),lastName:String(n.get("lastName")??""),email:String(n.get("email")??""),orderNumber:String(n.get("orderNumber")??""),reason:String(n.get("reason")??"")};e.dataset.companyName&&(i.companyName=e.dataset.companyName),e.dataset.senderEmail&&(i.senderEmail=e.dataset.senderEmail);const x={"Content-Type":"application/json"};e.dataset.authToken&&(x.Authorization=`Bearer ${e.dataset.authToken}`);const w=e.getAttribute("action")??"";try{const u=await fetch(w,{method:"PATCH",headers:x,body:JSON.stringify({action:c,payload:i})});let d=null;try{d=await u.json()}catch{}if(!(d&&typeof d=="object"&&"ok"in d?d.ok!==!1:u.ok)){const y=d&&typeof d=="object"&&"message"in d?String(d.message??""):"";throw new Error(y||`Server antwortete mit Status ${u.status}`)}e.reset(),location.hash="#wrb-success"}catch(u){const d=u instanceof Error?u:new Error("Unbekannter Fehler"),h=document.querySelector("#wrb-error .wrb-alert");h&&(h.textContent=d.message),location.hash="#wrb-error"}finally{a&&(a.disabled=!1,a.textContent=o)}}))}function T(){typeof document>"u"||document.querySelectorAll("#wrb-modal form").forEach(C)}function P({config:e}){const[t,a]=m.useState(!1);return m.useEffect(()=>{I(),T()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>a(!0),children:e.buttonLabel??"Vertrag widerrufen"}),t&&U.createPortal(r.jsx(A,{config:e,onClose:()=>a(!1)}),document.body)]})}function l(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function S(e){if(!e.privacyUrl)return"";const t=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">${t}</a>
|
|
233
|
+
</div>`}function B(e){const t=[];return e.companyName&&t.push(`data-company-name="${l(e.companyName)}"`),e.senderEmail&&t.push(`data-sender-email="${l(e.senderEmail)}"`),e.authToken&&t.push(`data-auth-token="${l(e.authToken)}"`),t.length?" "+t.join(" "):""}function q(e,t="",a=""){const o=l(e.successUrl??t),n=l(e.errorUrl??a);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,14 +269,14 @@
|
|
|
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="${
|
|
272
|
+
<input type="hidden" name="action" value="${l(e.action)}">
|
|
273
273
|
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
274
|
-
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function
|
|
274
|
+
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function D(e){const t=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",a=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">
|
|
278
278
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
279
|
-
<title>${
|
|
279
|
+
<title>${t}</title>
|
|
280
280
|
<style>
|
|
281
281
|
*, *::before, *::after { box-sizing: border-box; }
|
|
282
282
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -289,54 +289,54 @@
|
|
|
289
289
|
}
|
|
290
290
|
.wrb-page .wrb-modal { max-height: none; }
|
|
291
291
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
292
|
-
${
|
|
292
|
+
${E}
|
|
293
293
|
</style>
|
|
294
294
|
</head>
|
|
295
295
|
<body>
|
|
296
296
|
<div class="wrb-page">
|
|
297
297
|
<div class="wrb-modal">
|
|
298
298
|
<div class="wrb-modal-header">
|
|
299
|
-
<h1 class="wrb-modal-title">${
|
|
299
|
+
<h1 class="wrb-modal-title">${t}</h1>
|
|
300
300
|
</div>
|
|
301
301
|
<div class="wrb-modal-body">
|
|
302
|
-
${e.introText?`<p class="wrb-intro">${
|
|
303
|
-
<form method="POST" action="${
|
|
304
|
-
${
|
|
302
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
303
|
+
<form method="POST" action="${a}"${B(e)}>
|
|
304
|
+
${q(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>
|
|
311
|
-
${
|
|
311
|
+
${S(e)}
|
|
312
312
|
</div>
|
|
313
313
|
</div>
|
|
314
314
|
</div>
|
|
315
315
|
</body>
|
|
316
|
-
</html>`}function
|
|
316
|
+
</html>`}function H(e,{inlineStyles:t=!0}={}){const a=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",o=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),n=`
|
|
317
317
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
318
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${
|
|
319
|
-
${
|
|
318
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${t?`<style>${n}
|
|
319
|
+
${E}</style>`:`<style>${n}</style>`}
|
|
320
320
|
|
|
321
321
|
<!-- Widerruf: Form-Modal -->
|
|
322
322
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
323
323
|
<div class="wrb-modal">
|
|
324
324
|
<div class="wrb-modal-header">
|
|
325
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
325
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${a}</h2>
|
|
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="${o}">
|
|
331
|
-
${
|
|
329
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
330
|
+
<form method="POST" action="${o}"${B(e)}>
|
|
331
|
+
${q(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>
|
|
339
|
-
${
|
|
339
|
+
${S(e)}
|
|
340
340
|
</div>
|
|
341
341
|
</div>
|
|
342
342
|
</div>
|
|
@@ -357,7 +357,7 @@ ${j}</style>`:`<style>${n}</style>`}
|
|
|
357
357
|
Bestätigung per E-Mail.
|
|
358
358
|
</p>
|
|
359
359
|
</div>
|
|
360
|
-
${
|
|
360
|
+
${S(e)}
|
|
361
361
|
</div>
|
|
362
362
|
</div>
|
|
363
363
|
</div>
|
|
@@ -378,7 +378,7 @@ ${j}</style>`:`<style>${n}</style>`}
|
|
|
378
378
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
379
379
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
380
380
|
</div>
|
|
381
|
-
${
|
|
381
|
+
${S(e)}
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
|
-
</div>`}exports.WiderrufsModal=
|
|
384
|
+
</div>`}exports.WiderrufsModal=A;exports.WiderrufsWidget=P;exports.generateFallbackHtml=D;exports.generateModalHtml=H;exports.upgradeAllStaticForms=T;exports.upgradeStaticForm=C;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { WiderrufsWidget } from './components/WiderrufsWidget';
|
|
2
2
|
export { WiderrufsModal } from './components/WiderrufsModal';
|
|
3
3
|
export { generateFallbackHtml, generateModalHtml } from './fallback';
|
|
4
|
+
export { upgradeAllStaticForms, upgradeStaticForm } from './upgrade';
|
|
4
5
|
export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus } from './types';
|