@netlib/widerrufsbutton 2.1.7 → 2.1.9
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 +12 -12
- package/dist/index.es.js +45 -41
- package/dist/widerruf.html +1 -1
- 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"),c=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),q=require("react-dom");async function F(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 L={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 A({config:e,onClose:a}){const[t,o]=c.useState(L),[n,d]=c.useState({}),[l,j]=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){j(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]));j(u);const b=N(t);if(d(b),!(Object.keys(b).length>0)){y("loading"),S("");try{await F(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.");S(W.message),y("error"),(f=e.onError)==null||f.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&&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:M}),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"&&$&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:$}),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 k=`
|
|
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 O(){const e="wrb-styles";if(document.getElementById(e))return;const a=document.createElement("style");a.id=e,a.textContent=k,document.head.appendChild(a)}function U({config:e}){const[a,t]=c.useState(!1);return c.useEffect(()=>{O()},[]),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&&q.createPortal(r.jsx(A,{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
232
|
<a href="${i(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
233
|
-
</div>`}function
|
|
233
|
+
</div>`}function B(e){const a=[];return e.companyName&&a.push(`data-company-name="${i(e.companyName)}"`),e.senderEmail&&a.push(`data-sender-email="${i(e.senderEmail)}"`),e.authToken&&a.push(`data-auth-token="${i(e.authToken)}"`),a.length?" "+a.join(" "):""}function T(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>
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
</div>
|
|
272
272
|
<input type="hidden" name="action" value="${i(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 I(e){const a=e.companyName?`Widerruf – ${i(e.companyName)}`:"Widerrufsformular",t=i(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
|
+
${k}
|
|
293
293
|
</style>
|
|
294
294
|
</head>
|
|
295
295
|
<body>
|
|
@@ -300,8 +300,8 @@
|
|
|
300
300
|
</div>
|
|
301
301
|
<div class="wrb-modal-body">
|
|
302
302
|
${e.introText?`<p class="wrb-intro">${i(e.introText)}</p>`:""}
|
|
303
|
-
<form method="POST" action="${t}"
|
|
304
|
-
${
|
|
303
|
+
<form method="POST" action="${t}"${B(e)}>
|
|
304
|
+
${T(e)}
|
|
305
305
|
<div class="wrb-actions">
|
|
306
306
|
<button type="submit" class="wrb-submit-btn">
|
|
307
307
|
${i(e.submitLabel??"Absenden")}
|
|
@@ -313,10 +313,10 @@
|
|
|
313
313
|
</div>
|
|
314
314
|
</div>
|
|
315
315
|
</body>
|
|
316
|
-
</html>`}function
|
|
316
|
+
</html>`}function P(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${i(e.companyName)}`:"Widerrufsformular",o=i(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
|
+
${k}</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">
|
|
@@ -327,8 +327,8 @@ ${j}</style>`:`<style>${n}</style>`}
|
|
|
327
327
|
</div>
|
|
328
328
|
<div class="wrb-modal-body">
|
|
329
329
|
${e.introText?`<p class="wrb-intro">${i(e.introText)}</p>`:""}
|
|
330
|
-
<form method="POST" action="${o}"
|
|
331
|
-
${
|
|
330
|
+
<form method="POST" action="${o}"${B(e)}>
|
|
331
|
+
${T(e,"#wrb-success","#wrb-error")}
|
|
332
332
|
<div class="wrb-actions">
|
|
333
333
|
<a href="#" class="wrb-cancel-btn">${i(e.cancelLabel??"Abbrechen")}</a>
|
|
334
334
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -381,4 +381,4 @@ ${j}</style>`:`<style>${n}</style>`}
|
|
|
381
381
|
${v(e)}
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
|
-
</div>`}exports.WiderrufsModal=
|
|
384
|
+
</div>`}exports.WiderrufsModal=A;exports.WiderrufsWidget=U;exports.generateFallbackHtml=I;exports.generateModalHtml=P;
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as a, jsxs as c, Fragment as
|
|
2
|
-
import { useState as m, useRef as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
async function
|
|
1
|
+
import { jsx as a, jsxs as c, Fragment as F } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useRef as L, useEffect as T } from "react";
|
|
3
|
+
import { createPortal as O } from "react-dom";
|
|
4
|
+
async function U(e, r) {
|
|
5
5
|
const t = {
|
|
6
6
|
"Content-Type": "application/json"
|
|
7
7
|
};
|
|
@@ -32,7 +32,7 @@ async function O(e, r) {
|
|
|
32
32
|
if (!i.ok)
|
|
33
33
|
throw new Error(`Server antwortete mit Status ${i.status}`);
|
|
34
34
|
}
|
|
35
|
-
const
|
|
35
|
+
const I = {
|
|
36
36
|
firstName: "",
|
|
37
37
|
lastName: "",
|
|
38
38
|
email: "",
|
|
@@ -43,9 +43,9 @@ function k(e) {
|
|
|
43
43
|
const r = {};
|
|
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
|
-
function
|
|
47
|
-
const [t, o] = m(
|
|
48
|
-
|
|
46
|
+
function P({ config: e, onClose: r }) {
|
|
47
|
+
const [t, o] = m(I), [i, d] = m({}), [s, E] = m({}), [h, N] = m("idle"), [S, z] = m(""), W = L(null);
|
|
48
|
+
T(() => {
|
|
49
49
|
var u;
|
|
50
50
|
(u = W.current) == null || u.focus();
|
|
51
51
|
const n = (b) => b.key === "Escape" && r();
|
|
@@ -55,33 +55,33 @@ function I({ config: e, onClose: r }) {
|
|
|
55
55
|
const b = { ...t, [n]: u };
|
|
56
56
|
if (o(b), s[n]) {
|
|
57
57
|
const x = k(b);
|
|
58
|
-
d((
|
|
58
|
+
d((v) => ({ ...v, [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
|
}
|
|
66
66
|
async function M(n) {
|
|
67
|
-
var x,
|
|
67
|
+
var x, v;
|
|
68
68
|
n.preventDefault();
|
|
69
69
|
const u = Object.fromEntries(
|
|
70
|
-
Object.keys(t).map((
|
|
70
|
+
Object.keys(t).map((g) => [g, !0])
|
|
71
71
|
);
|
|
72
|
-
|
|
72
|
+
E(u);
|
|
73
73
|
const b = k(t);
|
|
74
74
|
if (d(b), !(Object.keys(b).length > 0)) {
|
|
75
75
|
N("loading"), z("");
|
|
76
76
|
try {
|
|
77
|
-
await
|
|
78
|
-
} catch (
|
|
79
|
-
const
|
|
80
|
-
z(
|
|
77
|
+
await U(e, t), N("success"), (x = e.onSuccess) == null || x.call(e);
|
|
78
|
+
} catch (g) {
|
|
79
|
+
const A = g instanceof Error ? g : new Error("Ein unbekannter Fehler ist aufgetreten.");
|
|
80
|
+
z(A.message), N("error"), (v = e.onError) == null || v.call(e, A);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
-
const
|
|
84
|
+
const q = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
|
|
85
85
|
return /* @__PURE__ */ a(
|
|
86
86
|
"div",
|
|
87
87
|
{
|
|
@@ -92,7 +92,7 @@ function I({ config: e, onClose: r }) {
|
|
|
92
92
|
onClick: (n) => n.target === n.currentTarget && r(),
|
|
93
93
|
children: /* @__PURE__ */ c("div", { className: "wrb-modal", children: [
|
|
94
94
|
/* @__PURE__ */ c("div", { className: "wrb-modal-header", children: [
|
|
95
|
-
/* @__PURE__ */ a("h2", { className: "wrb-modal-title", id: "wrb-title", children:
|
|
95
|
+
/* @__PURE__ */ a("h2", { className: "wrb-modal-title", id: "wrb-title", children: q }),
|
|
96
96
|
/* @__PURE__ */ a(
|
|
97
97
|
"button",
|
|
98
98
|
{
|
|
@@ -114,10 +114,10 @@ function I({ config: e, onClose: r }) {
|
|
|
114
114
|
"."
|
|
115
115
|
] })
|
|
116
116
|
] }),
|
|
117
|
-
/* @__PURE__ */ a(
|
|
117
|
+
/* @__PURE__ */ a(B, { 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" && S && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: S }),
|
|
121
121
|
/* @__PURE__ */ c("form", { onSubmit: M, noValidate: !0, children: [
|
|
122
122
|
/* @__PURE__ */ a(
|
|
123
123
|
w,
|
|
@@ -239,7 +239,7 @@ function I({ config: e, onClose: r }) {
|
|
|
239
239
|
)
|
|
240
240
|
] })
|
|
241
241
|
] }),
|
|
242
|
-
/* @__PURE__ */ a(
|
|
242
|
+
/* @__PURE__ */ a(B, { config: e })
|
|
243
243
|
] })
|
|
244
244
|
] })
|
|
245
245
|
}
|
|
@@ -256,7 +256,7 @@ function w({ label: e, required: r, hint: t, error: o, children: i }) {
|
|
|
256
256
|
o && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: o })
|
|
257
257
|
] });
|
|
258
258
|
}
|
|
259
|
-
function
|
|
259
|
+
function B({ config: e }) {
|
|
260
260
|
return e.privacyUrl ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: /* @__PURE__ */ a(
|
|
261
261
|
"a",
|
|
262
262
|
{
|
|
@@ -498,17 +498,17 @@ const $ = `
|
|
|
498
498
|
text-decoration: underline;
|
|
499
499
|
}
|
|
500
500
|
`;
|
|
501
|
-
function
|
|
501
|
+
function V() {
|
|
502
502
|
const e = "wrb-styles";
|
|
503
503
|
if (document.getElementById(e)) return;
|
|
504
504
|
const r = document.createElement("style");
|
|
505
505
|
r.id = e, r.textContent = $, document.head.appendChild(r);
|
|
506
506
|
}
|
|
507
|
-
function
|
|
507
|
+
function K({ config: e }) {
|
|
508
508
|
const [r, t] = m(!1);
|
|
509
|
-
return
|
|
510
|
-
|
|
511
|
-
}, []), /* @__PURE__ */ c(
|
|
509
|
+
return T(() => {
|
|
510
|
+
V();
|
|
511
|
+
}, []), /* @__PURE__ */ c(F, { children: [
|
|
512
512
|
/* @__PURE__ */ a(
|
|
513
513
|
"button",
|
|
514
514
|
{
|
|
@@ -518,8 +518,8 @@ function R({ config: e }) {
|
|
|
518
518
|
children: e.buttonLabel ?? "Vertrag widerrufen"
|
|
519
519
|
}
|
|
520
520
|
),
|
|
521
|
-
r &&
|
|
522
|
-
/* @__PURE__ */ a(
|
|
521
|
+
r && O(
|
|
522
|
+
/* @__PURE__ */ a(P, { config: e, onClose: () => t(!1) }),
|
|
523
523
|
document.body
|
|
524
524
|
)
|
|
525
525
|
] });
|
|
@@ -535,7 +535,11 @@ function y(e) {
|
|
|
535
535
|
<a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
|
|
536
536
|
</div>`;
|
|
537
537
|
}
|
|
538
|
-
function
|
|
538
|
+
function C(e) {
|
|
539
|
+
const r = [];
|
|
540
|
+
return e.companyName && r.push(`data-company-name="${l(e.companyName)}"`), e.senderEmail && r.push(`data-sender-email="${l(e.senderEmail)}"`), e.authToken && r.push(`data-auth-token="${l(e.authToken)}"`), r.length ? " " + r.join(" ") : "";
|
|
541
|
+
}
|
|
542
|
+
function j(e, r = "", t = "") {
|
|
539
543
|
const o = l(e.successUrl ?? r), i = l(e.errorUrl ?? t);
|
|
540
544
|
return `
|
|
541
545
|
<div class="wrb-field">
|
|
@@ -580,7 +584,7 @@ function T(e, r = "", t = "") {
|
|
|
580
584
|
${o ? `<input type="hidden" name="successUrl" value="${o}">` : ""}
|
|
581
585
|
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
582
586
|
}
|
|
583
|
-
function
|
|
587
|
+
function Y(e) {
|
|
584
588
|
const r = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", t = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
585
589
|
return `<!DOCTYPE html>
|
|
586
590
|
<html lang="de">
|
|
@@ -611,8 +615,8 @@ function K(e) {
|
|
|
611
615
|
</div>
|
|
612
616
|
<div class="wrb-modal-body">
|
|
613
617
|
${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
|
|
614
|
-
<form method="POST" action="${t}"
|
|
615
|
-
${
|
|
618
|
+
<form method="POST" action="${t}"${C(e)}>
|
|
619
|
+
${j(e)}
|
|
616
620
|
<div class="wrb-actions">
|
|
617
621
|
<button type="submit" class="wrb-submit-btn">
|
|
618
622
|
${l(e.submitLabel ?? "Absenden")}
|
|
@@ -626,7 +630,7 @@ function K(e) {
|
|
|
626
630
|
</body>
|
|
627
631
|
</html>`;
|
|
628
632
|
}
|
|
629
|
-
function
|
|
633
|
+
function _(e, { inlineStyles: r = !0 } = {}) {
|
|
630
634
|
const t = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", o = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
631
635
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
632
636
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
@@ -642,8 +646,8 @@ ${$}</style>` : `<style>${i}</style>`}
|
|
|
642
646
|
</div>
|
|
643
647
|
<div class="wrb-modal-body">
|
|
644
648
|
${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
|
|
645
|
-
<form method="POST" action="${o}"
|
|
646
|
-
${
|
|
649
|
+
<form method="POST" action="${o}"${C(e)}>
|
|
650
|
+
${j(e, "#wrb-success", "#wrb-error")}
|
|
647
651
|
<div class="wrb-actions">
|
|
648
652
|
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel ?? "Abbrechen")}</a>
|
|
649
653
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -699,8 +703,8 @@ ${$}</style>` : `<style>${i}</style>`}
|
|
|
699
703
|
</div>`;
|
|
700
704
|
}
|
|
701
705
|
export {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
+
P as WiderrufsModal,
|
|
707
|
+
K as WiderrufsWidget,
|
|
708
|
+
Y as generateFallbackHtml,
|
|
709
|
+
_ as generateModalHtml
|
|
706
710
|
};
|
package/dist/widerruf.html
CHANGED