@netlib/widerrufsbutton 2.1.1 → 2.1.3
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 +10 -11
- package/dist/fallback.es.js +13 -13
- package/dist/index.cjs.js +9 -10
- package/dist/index.d.ts +1 -1
- package/dist/index.es.js +95 -96
- package/dist/types.d.ts +4 -6
- package/dist/widerrufsbutton.iife.js +9 -9
- 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 n=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,11 +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 o(e){if(!e.privacyUrl)return"";const a=r(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
</div>`:""}function s(e,a="",t=""){const l=r(e.successUrl??a),i=r(e.errorUrl??t);return`
|
|
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`
|
|
235
234
|
<div class="wrb-field">
|
|
236
235
|
<label class="wrb-label">
|
|
237
236
|
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
@@ -294,7 +293,7 @@
|
|
|
294
293
|
}
|
|
295
294
|
.wrb-page .wrb-modal { max-height: none; }
|
|
296
295
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
297
|
-
${
|
|
296
|
+
${n}
|
|
298
297
|
</style>
|
|
299
298
|
</head>
|
|
300
299
|
<body>
|
|
@@ -313,7 +312,7 @@
|
|
|
313
312
|
</button>
|
|
314
313
|
</div>
|
|
315
314
|
</form>
|
|
316
|
-
${
|
|
315
|
+
${o(e)}
|
|
317
316
|
</div>
|
|
318
317
|
</div>
|
|
319
318
|
</div>
|
|
@@ -321,7 +320,7 @@
|
|
|
321
320
|
</html>`}function b(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",l=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=`
|
|
322
321
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
323
322
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${i}
|
|
324
|
-
${
|
|
323
|
+
${n}</style>`:`<style>${i}</style>`}
|
|
325
324
|
|
|
326
325
|
<!-- Widerruf: Form-Modal -->
|
|
327
326
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
@@ -341,7 +340,7 @@ ${o}</style>`:`<style>${i}</style>`}
|
|
|
341
340
|
</button>
|
|
342
341
|
</div>
|
|
343
342
|
</form>
|
|
344
|
-
${
|
|
343
|
+
${o(e)}
|
|
345
344
|
</div>
|
|
346
345
|
</div>
|
|
347
346
|
</div>
|
|
@@ -362,7 +361,7 @@ ${o}</style>`:`<style>${i}</style>`}
|
|
|
362
361
|
Bestätigung per E-Mail.
|
|
363
362
|
</p>
|
|
364
363
|
</div>
|
|
365
|
-
${
|
|
364
|
+
${o(e)}
|
|
366
365
|
</div>
|
|
367
366
|
</div>
|
|
368
367
|
</div>
|
|
@@ -383,7 +382,7 @@ ${o}</style>`:`<style>${i}</style>`}
|
|
|
383
382
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
384
383
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
385
384
|
</div>
|
|
386
|
-
${
|
|
385
|
+
${o(e)}
|
|
387
386
|
</div>
|
|
388
387
|
</div>
|
|
389
388
|
</div>`}exports.generateFallbackHtml=d;exports.generateModalHtml=b;
|
package/dist/fallback.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const n = `
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -231,13 +231,13 @@ const o = `
|
|
|
231
231
|
function r(e) {
|
|
232
232
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
233
233
|
}
|
|
234
|
-
function
|
|
235
|
-
|
|
236
|
-
|
|
234
|
+
function o(e) {
|
|
235
|
+
if (!e.privacyUrl) return "";
|
|
236
|
+
const a = r(e.privacyLabel ?? "Datenschutz");
|
|
237
|
+
return `
|
|
237
238
|
<div class="wrb-legal-links">
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
</div>` : "";
|
|
239
|
+
<a href="${r(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
240
|
+
</div>`;
|
|
241
241
|
}
|
|
242
242
|
function s(e, a = "", t = "") {
|
|
243
243
|
const l = r(e.successUrl ?? a), i = r(e.errorUrl ?? t);
|
|
@@ -308,7 +308,7 @@ function b(e) {
|
|
|
308
308
|
}
|
|
309
309
|
.wrb-page .wrb-modal { max-height: none; }
|
|
310
310
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
311
|
-
${
|
|
311
|
+
${n}
|
|
312
312
|
</style>
|
|
313
313
|
</head>
|
|
314
314
|
<body>
|
|
@@ -327,7 +327,7 @@ function b(e) {
|
|
|
327
327
|
</button>
|
|
328
328
|
</div>
|
|
329
329
|
</form>
|
|
330
|
-
${
|
|
330
|
+
${o(e)}
|
|
331
331
|
</div>
|
|
332
332
|
</div>
|
|
333
333
|
</div>
|
|
@@ -339,7 +339,7 @@ function c(e, { inlineStyles: a = !0 } = {}) {
|
|
|
339
339
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
340
340
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
341
341
|
return `${a ? `<style>${i}
|
|
342
|
-
${
|
|
342
|
+
${n}</style>` : `<style>${i}</style>`}
|
|
343
343
|
|
|
344
344
|
<!-- Widerruf: Form-Modal -->
|
|
345
345
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
@@ -359,7 +359,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
359
359
|
</button>
|
|
360
360
|
</div>
|
|
361
361
|
</form>
|
|
362
|
-
${
|
|
362
|
+
${o(e)}
|
|
363
363
|
</div>
|
|
364
364
|
</div>
|
|
365
365
|
</div>
|
|
@@ -380,7 +380,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
380
380
|
Bestätigung per E-Mail.
|
|
381
381
|
</p>
|
|
382
382
|
</div>
|
|
383
|
-
${
|
|
383
|
+
${o(e)}
|
|
384
384
|
</div>
|
|
385
385
|
</div>
|
|
386
386
|
</div>
|
|
@@ -401,7 +401,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
401
401
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
402
402
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
403
403
|
</div>
|
|
404
|
-
${
|
|
404
|
+
${o(e)}
|
|
405
405
|
</div>
|
|
406
406
|
</div>
|
|
407
407
|
</div>`;
|
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"),T=require("react-dom");async function q(e,a){const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),T=require("react-dom");async function q(e,a){const s={"Content-Type":"application/json"};e.authToken&&(s.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...a,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},l=await fetch(e.apiUrl,{method:"PATCH",headers:s,body:JSON.stringify(o)});let d;try{d=await l.json()}catch{if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`);return}if(d!==null&&typeof d=="object"&&"ok"in d&&d.ok===!1){const i=d.message;throw new Error(typeof i=="string"&&i?i:`Server antwortete mit Status ${l.status}`)}if(!l.ok)throw new Error(`Server antwortete mit Status ${l.status}`)}const F={firstName:"",lastName:"",email:"",orderNumber:"",reason:"",userMessage:""};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 M({config:e,onClose:a}){const[s,o]=c.useState(F),[l,d]=c.useState({}),[i,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 t=b=>b.key==="Escape"&&a();return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a]);function m(t,u){const b={...s,[t]:u};if(o(b),i[t]){const x=N(b);d(f=>({...f,[t]:x[t]}))}}function h(t){k(b=>({...b,[t]:!0}));const u=N(s);d(b=>({...b,[t]:u[t]}))}async function A(t){var x,f;t.preventDefault();const u=Object.fromEntries(Object.keys(s).map(g=>[g,!0]));k(u);const b=N(s);if(d(b),!(Object.keys(b).length>0)){y("loading"),$("");try{await q(e,s),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 C=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:t=>t.target===t.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:C}),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:s.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:A,noValidate:!0,children:[r.jsx(p,{label:"Vorname",required:!0,error:i.firstName?l.firstName:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${i.firstName&&l.firstName?" wrb-error":""}`,type:"text",autoComplete:"given-name",value:s.firstName,onChange:t=>m("firstName",t.target.value),onBlur:()=>h("firstName"),placeholder:"Max"})}),r.jsx(p,{label:"Nachname",required:!0,error:i.lastName?l.lastName:void 0,children:r.jsx("input",{className:`wrb-input${i.lastName&&l.lastName?" wrb-error":""}`,type:"text",autoComplete:"family-name",value:s.lastName,onChange:t=>m("lastName",t.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:i.email?l.email:void 0,children:r.jsx("input",{className:`wrb-input${i.email&&l.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:s.email,onChange:t=>m("email",t.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:i.orderNumber?l.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${i.orderNumber&&l.orderNumber?" wrb-error":""}`,type:"text",value:s.orderNumber,onChange:t=>m("orderNumber",t.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:s.reason,onChange:t=>m("reason",t.target.value),placeholder:"Optional",rows:2})}),r.jsx(p,{label:"Nachricht",children:r.jsx("textarea",{className:"wrb-textarea",value:s.userMessage,onChange:t=>m("userMessage",t.target.value),placeholder:"Optional",rows:3})}),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:s,error:o,children:l}){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:"*"})]}),l,s&&!o&&r.jsx("p",{className:"wrb-hint",children:s}),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,11 +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=j,document.head.appendChild(a)}function L({config:e}){const[a,s]=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:()=>s(!0),children:e.buttonLabel??"Vertrag widerrufen"}),a&&T.createPortal(r.jsx(M,{config:e,onClose:()=>s(!1)}),document.body)]})}function n(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function v(e){if(!e.privacyUrl)return"";const a=n(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
</div>`:""}function B(e,a="",t=""){const o=n(e.successUrl??a),l=n(e.errorUrl??t);return`
|
|
232
|
+
<a href="${n(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
233
|
+
</div>`}function B(e,a="",s=""){const o=n(e.successUrl??a),l=n(e.errorUrl??s);return`
|
|
235
234
|
<div class="wrb-field">
|
|
236
235
|
<label class="wrb-label">
|
|
237
236
|
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
@@ -276,7 +275,7 @@
|
|
|
276
275
|
</div>
|
|
277
276
|
<input type="hidden" name="action" value="${n(e.action)}">
|
|
278
277
|
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
279
|
-
${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function
|
|
278
|
+
${l?`<input type="hidden" name="errorUrl" value="${l}">`:""}`}function U(e){const a=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",s=n(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
280
279
|
<html lang="de">
|
|
281
280
|
<head>
|
|
282
281
|
<meta charset="UTF-8">
|
|
@@ -305,7 +304,7 @@
|
|
|
305
304
|
</div>
|
|
306
305
|
<div class="wrb-modal-body">
|
|
307
306
|
${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
|
|
308
|
-
<form method="POST" action="${
|
|
307
|
+
<form method="POST" action="${s}" novalidate>
|
|
309
308
|
${B(e)}
|
|
310
309
|
<div class="wrb-actions">
|
|
311
310
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -318,7 +317,7 @@
|
|
|
318
317
|
</div>
|
|
319
318
|
</div>
|
|
320
319
|
</body>
|
|
321
|
-
</html>`}function
|
|
320
|
+
</html>`}function I(e,{inlineStyles:a=!0}={}){const s=e.companyName?`Widerruf – ${n(e.companyName)}`:"Widerrufsformular",o=n(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),l=`
|
|
322
321
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
323
322
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${l}
|
|
324
323
|
${j}</style>`:`<style>${l}</style>`}
|
|
@@ -327,7 +326,7 @@ ${j}</style>`:`<style>${l}</style>`}
|
|
|
327
326
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
328
327
|
<div class="wrb-modal">
|
|
329
328
|
<div class="wrb-modal-header">
|
|
330
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
329
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${s}</h2>
|
|
331
330
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
332
331
|
</div>
|
|
333
332
|
<div class="wrb-modal-body">
|
|
@@ -386,4 +385,4 @@ ${j}</style>`:`<style>${l}</style>`}
|
|
|
386
385
|
${v(e)}
|
|
387
386
|
</div>
|
|
388
387
|
</div>
|
|
389
|
-
</div>`}exports.WiderrufsModal=M;exports.WiderrufsWidget=
|
|
388
|
+
</div>`}exports.WiderrufsModal=M;exports.WiderrufsWidget=L;exports.generateFallbackHtml=U;exports.generateModalHtml=I;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { WiderrufsWidget } from './components/WiderrufsWidget';
|
|
2
2
|
export { WiderrufsModal } from './components/WiderrufsModal';
|
|
3
3
|
export { generateFallbackHtml, generateModalHtml } from './fallback';
|
|
4
|
-
export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus
|
|
4
|
+
export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus } from './types';
|