@netlib/widerrufsbutton 1.2.0 → 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 +32 -27
- package/dist/fallback.es.js +40 -41
- package/dist/index.cjs.js +40 -35
- package/dist/index.d.ts +1 -1
- package/dist/index.es.js +199 -174
- package/dist/types.d.ts +9 -8
- package/dist/widerruf.html +14 -8
- 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 n=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,17 +227,23 @@
|
|
|
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 b(e,a,t="",i=""){const n=r(e.successUrl??t),l=r(e.errorUrl??i);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>
|
|
238
237
|
</label>
|
|
239
|
-
<input class="wrb-input" type="text" name="
|
|
240
|
-
placeholder="
|
|
238
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
239
|
+
placeholder="Max" required>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="wrb-field">
|
|
242
|
+
<label class="wrb-label">
|
|
243
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
244
|
+
</label>
|
|
245
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
246
|
+
placeholder="Mustermann" required>
|
|
241
247
|
</div>
|
|
242
248
|
<div class="wrb-field">
|
|
243
249
|
<label class="wrb-label">
|
|
@@ -257,25 +263,24 @@
|
|
|
257
263
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
258
264
|
</div>
|
|
259
265
|
<div class="wrb-field">
|
|
260
|
-
<label class="wrb-label">
|
|
261
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
266
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
267
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
262
268
|
<p class="wrb-hint">
|
|
263
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
264
270
|
</p>
|
|
265
271
|
</div>
|
|
266
272
|
<div class="wrb-field">
|
|
267
|
-
<label class="wrb-label">
|
|
268
|
-
<
|
|
269
|
-
<input type="hidden" name="datum" value="${a}">
|
|
273
|
+
<label class="wrb-label">Nachricht</label>
|
|
274
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
270
275
|
</div>
|
|
271
276
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
272
|
-
${
|
|
273
|
-
${
|
|
277
|
+
${l?`<input type="hidden" name="successUrl" value="${l}">`:""}
|
|
278
|
+
${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>
|
|
274
279
|
<html lang="de">
|
|
275
280
|
<head>
|
|
276
281
|
<meta charset="UTF-8">
|
|
277
282
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
278
|
-
<title>${
|
|
283
|
+
<title>${a}</title>
|
|
279
284
|
<style>
|
|
280
285
|
*, *::before, *::after { box-sizing: border-box; }
|
|
281
286
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -288,19 +293,19 @@
|
|
|
288
293
|
}
|
|
289
294
|
.wrb-page .wrb-modal { max-height: none; }
|
|
290
295
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
291
|
-
${
|
|
296
|
+
${n}
|
|
292
297
|
</style>
|
|
293
298
|
</head>
|
|
294
299
|
<body>
|
|
295
300
|
<div class="wrb-page">
|
|
296
301
|
<div class="wrb-modal">
|
|
297
302
|
<div class="wrb-modal-header">
|
|
298
|
-
<h1 class="wrb-modal-title">${
|
|
303
|
+
<h1 class="wrb-modal-title">${a}</h1>
|
|
299
304
|
</div>
|
|
300
305
|
<div class="wrb-modal-body">
|
|
301
306
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
302
|
-
<form method="POST" action="${
|
|
303
|
-
${
|
|
307
|
+
<form method="POST" action="${t}" novalidate>
|
|
308
|
+
${s(e)}
|
|
304
309
|
<div class="wrb-actions">
|
|
305
310
|
<button type="submit" class="wrb-submit-btn">
|
|
306
311
|
${r(e.submitLabel??"Absenden")}
|
|
@@ -312,22 +317,22 @@
|
|
|
312
317
|
</div>
|
|
313
318
|
</div>
|
|
314
319
|
</body>
|
|
315
|
-
</html>`}function
|
|
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=`
|
|
316
321
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
317
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${
|
|
318
|
-
${
|
|
322
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${i}
|
|
323
|
+
${n}</style>`:`<style>${i}</style>`}
|
|
319
324
|
|
|
320
325
|
<!-- Widerruf: Form-Modal -->
|
|
321
326
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
322
327
|
<div class="wrb-modal">
|
|
323
328
|
<div class="wrb-modal-header">
|
|
324
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
329
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
325
330
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
326
331
|
</div>
|
|
327
332
|
<div class="wrb-modal-body">
|
|
328
333
|
${e.introText?`<p class="wrb-intro">${r(e.introText)}</p>`:""}
|
|
329
|
-
<form method="POST" action="${
|
|
330
|
-
${
|
|
334
|
+
<form method="POST" action="${l}" novalidate>
|
|
335
|
+
${s(e,"#wrb-success","#wrb-error")}
|
|
331
336
|
<div class="wrb-actions">
|
|
332
337
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel??"Abbrechen")}</a>
|
|
333
338
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -380,4 +385,4 @@ ${s}</style>`:`<style>${l}</style>`}
|
|
|
380
385
|
${o(e)}
|
|
381
386
|
</div>
|
|
382
387
|
</div>
|
|
383
|
-
</div>`}exports.generateFallbackHtml=
|
|
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,30 +231,30 @@ const s = `
|
|
|
231
231
|
function r(e) {
|
|
232
232
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
233
233
|
}
|
|
234
|
-
function d() {
|
|
235
|
-
return (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
|
|
236
|
-
day: "2-digit",
|
|
237
|
-
month: "2-digit",
|
|
238
|
-
year: "numeric"
|
|
239
|
-
});
|
|
240
|
-
}
|
|
241
234
|
function o(e) {
|
|
242
|
-
|
|
243
|
-
|
|
235
|
+
if (!e.privacyUrl) return "";
|
|
236
|
+
const a = r(e.privacyLabel ?? "Datenschutz");
|
|
237
|
+
return `
|
|
244
238
|
<div class="wrb-legal-links">
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
</div>` : "";
|
|
239
|
+
<a href="${r(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
240
|
+
</div>`;
|
|
248
241
|
}
|
|
249
|
-
function
|
|
250
|
-
const
|
|
242
|
+
function s(e, a = "", t = "") {
|
|
243
|
+
const l = r(e.successUrl ?? a), i = r(e.errorUrl ?? t);
|
|
251
244
|
return `
|
|
252
245
|
<div class="wrb-field">
|
|
253
246
|
<label class="wrb-label">
|
|
254
|
-
|
|
247
|
+
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
248
|
+
</label>
|
|
249
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
250
|
+
placeholder="Max" required>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="wrb-field">
|
|
253
|
+
<label class="wrb-label">
|
|
254
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
255
255
|
</label>
|
|
256
|
-
<input class="wrb-input" type="text" name="
|
|
257
|
-
placeholder="
|
|
256
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
257
|
+
placeholder="Mustermann" required>
|
|
258
258
|
</div>
|
|
259
259
|
<div class="wrb-field">
|
|
260
260
|
<label class="wrb-label">
|
|
@@ -274,29 +274,28 @@ function b(e, a, t = "", i = "") {
|
|
|
274
274
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
275
275
|
</div>
|
|
276
276
|
<div class="wrb-field">
|
|
277
|
-
<label class="wrb-label">
|
|
278
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
277
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
278
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
279
279
|
<p class="wrb-hint">
|
|
280
280
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
281
281
|
</p>
|
|
282
282
|
</div>
|
|
283
283
|
<div class="wrb-field">
|
|
284
|
-
<label class="wrb-label">
|
|
285
|
-
<
|
|
286
|
-
<input type="hidden" name="datum" value="${a}">
|
|
284
|
+
<label class="wrb-label">Nachricht</label>
|
|
285
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
287
286
|
</div>
|
|
288
287
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
289
|
-
${
|
|
290
|
-
${
|
|
288
|
+
${l ? `<input type="hidden" name="successUrl" value="${l}">` : ""}
|
|
289
|
+
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
|
|
291
290
|
}
|
|
292
|
-
function
|
|
293
|
-
const a =
|
|
291
|
+
function b(e) {
|
|
292
|
+
const a = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", t = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
294
293
|
return `<!DOCTYPE html>
|
|
295
294
|
<html lang="de">
|
|
296
295
|
<head>
|
|
297
296
|
<meta charset="UTF-8">
|
|
298
297
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
299
|
-
<title>${
|
|
298
|
+
<title>${a}</title>
|
|
300
299
|
<style>
|
|
301
300
|
*, *::before, *::after { box-sizing: border-box; }
|
|
302
301
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -309,19 +308,19 @@ function p(e) {
|
|
|
309
308
|
}
|
|
310
309
|
.wrb-page .wrb-modal { max-height: none; }
|
|
311
310
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
312
|
-
${
|
|
311
|
+
${n}
|
|
313
312
|
</style>
|
|
314
313
|
</head>
|
|
315
314
|
<body>
|
|
316
315
|
<div class="wrb-page">
|
|
317
316
|
<div class="wrb-modal">
|
|
318
317
|
<div class="wrb-modal-header">
|
|
319
|
-
<h1 class="wrb-modal-title">${
|
|
318
|
+
<h1 class="wrb-modal-title">${a}</h1>
|
|
320
319
|
</div>
|
|
321
320
|
<div class="wrb-modal-body">
|
|
322
321
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
323
|
-
<form method="POST" action="${
|
|
324
|
-
${
|
|
322
|
+
<form method="POST" action="${t}" novalidate>
|
|
323
|
+
${s(e)}
|
|
325
324
|
<div class="wrb-actions">
|
|
326
325
|
<button type="submit" class="wrb-submit-btn">
|
|
327
326
|
${r(e.submitLabel ?? "Absenden")}
|
|
@@ -335,24 +334,24 @@ function p(e) {
|
|
|
335
334
|
</body>
|
|
336
335
|
</html>`;
|
|
337
336
|
}
|
|
338
|
-
function
|
|
339
|
-
const t =
|
|
337
|
+
function c(e, { inlineStyles: a = !0 } = {}) {
|
|
338
|
+
const t = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", l = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
340
339
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
341
340
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
342
|
-
return `${a ? `<style>${
|
|
343
|
-
${
|
|
341
|
+
return `${a ? `<style>${i}
|
|
342
|
+
${n}</style>` : `<style>${i}</style>`}
|
|
344
343
|
|
|
345
344
|
<!-- Widerruf: Form-Modal -->
|
|
346
345
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
347
346
|
<div class="wrb-modal">
|
|
348
347
|
<div class="wrb-modal-header">
|
|
349
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
348
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${t}</h2>
|
|
350
349
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
351
350
|
</div>
|
|
352
351
|
<div class="wrb-modal-body">
|
|
353
352
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
354
|
-
<form method="POST" action="${
|
|
355
|
-
${
|
|
353
|
+
<form method="POST" action="${l}" novalidate>
|
|
354
|
+
${s(e, "#wrb-success", "#wrb-error")}
|
|
356
355
|
<div class="wrb-actions">
|
|
357
356
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel ?? "Abbrechen")}</a>
|
|
358
357
|
<button type="submit" class="wrb-submit-btn">
|
|
@@ -408,6 +407,6 @@ ${s}</style>` : `<style>${l}</style>`}
|
|
|
408
407
|
</div>`;
|
|
409
408
|
}
|
|
410
409
|
export {
|
|
411
|
-
|
|
412
|
-
|
|
410
|
+
b as generateFallbackHtml,
|
|
411
|
+
c as generateModalHtml
|
|
413
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"),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,17 +227,23 @@
|
|
|
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 C(e,t,a="",o=""){const s=l(e.successUrl??a),i=l(e.errorUrl??o);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>
|
|
238
237
|
</label>
|
|
239
|
-
<input class="wrb-input" type="text" name="
|
|
240
|
-
placeholder="
|
|
238
|
+
<input class="wrb-input" type="text" name="firstName" autocomplete="given-name"
|
|
239
|
+
placeholder="Max" required>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="wrb-field">
|
|
242
|
+
<label class="wrb-label">
|
|
243
|
+
Nachname <span class="wrb-required" aria-hidden="true">*</span>
|
|
244
|
+
</label>
|
|
245
|
+
<input class="wrb-input" type="text" name="lastName" autocomplete="family-name"
|
|
246
|
+
placeholder="Mustermann" required>
|
|
241
247
|
</div>
|
|
242
248
|
<div class="wrb-field">
|
|
243
249
|
<label class="wrb-label">
|
|
@@ -257,20 +263,19 @@
|
|
|
257
263
|
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
258
264
|
</div>
|
|
259
265
|
<div class="wrb-field">
|
|
260
|
-
<label class="wrb-label">
|
|
261
|
-
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="
|
|
266
|
+
<label class="wrb-label">Widerrufsgrund</label>
|
|
267
|
+
<textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="2"></textarea>
|
|
262
268
|
<p class="wrb-hint">
|
|
263
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
264
270
|
</p>
|
|
265
271
|
</div>
|
|
266
272
|
<div class="wrb-field">
|
|
267
|
-
<label class="wrb-label">
|
|
268
|
-
<
|
|
269
|
-
<input type="hidden" name="datum" value="${t}">
|
|
273
|
+
<label class="wrb-label">Nachricht</label>
|
|
274
|
+
<textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
|
|
270
275
|
</div>
|
|
271
|
-
<input type="hidden" name="action" value="${
|
|
272
|
-
${
|
|
273
|
-
${
|
|
276
|
+
<input type="hidden" name="action" value="${n(e.action)}">
|
|
277
|
+
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
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>
|
|
274
279
|
<html lang="de">
|
|
275
280
|
<head>
|
|
276
281
|
<meta charset="UTF-8">
|
|
@@ -288,7 +293,7 @@
|
|
|
288
293
|
}
|
|
289
294
|
.wrb-page .wrb-modal { max-height: none; }
|
|
290
295
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
291
|
-
${
|
|
296
|
+
${j}
|
|
292
297
|
</style>
|
|
293
298
|
</head>
|
|
294
299
|
<body>
|
|
@@ -298,44 +303,44 @@
|
|
|
298
303
|
<h1 class="wrb-modal-title">${a}</h1>
|
|
299
304
|
</div>
|
|
300
305
|
<div class="wrb-modal-body">
|
|
301
|
-
${e.introText?`<p class="wrb-intro">${
|
|
302
|
-
<form method="POST" action="${
|
|
303
|
-
${
|
|
306
|
+
${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
|
|
307
|
+
<form method="POST" action="${s}" novalidate>
|
|
308
|
+
${B(e)}
|
|
304
309
|
<div class="wrb-actions">
|
|
305
310
|
<button type="submit" class="wrb-submit-btn">
|
|
306
|
-
${
|
|
311
|
+
${n(e.submitLabel??"Absenden")}
|
|
307
312
|
</button>
|
|
308
313
|
</div>
|
|
309
314
|
</form>
|
|
310
|
-
${
|
|
315
|
+
${v(e)}
|
|
311
316
|
</div>
|
|
312
317
|
</div>
|
|
313
318
|
</div>
|
|
314
319
|
</body>
|
|
315
|
-
</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=`
|
|
316
321
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
317
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${
|
|
318
|
-
${
|
|
322
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${l}
|
|
323
|
+
${j}</style>`:`<style>${l}</style>`}
|
|
319
324
|
|
|
320
325
|
<!-- Widerruf: Form-Modal -->
|
|
321
326
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
322
327
|
<div class="wrb-modal">
|
|
323
328
|
<div class="wrb-modal-header">
|
|
324
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
329
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${s}</h2>
|
|
325
330
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
326
331
|
</div>
|
|
327
332
|
<div class="wrb-modal-body">
|
|
328
|
-
${e.introText?`<p class="wrb-intro">${
|
|
329
|
-
<form method="POST" action="${
|
|
330
|
-
${
|
|
333
|
+
${e.introText?`<p class="wrb-intro">${n(e.introText)}</p>`:""}
|
|
334
|
+
<form method="POST" action="${o}" novalidate>
|
|
335
|
+
${B(e,"#wrb-success","#wrb-error")}
|
|
331
336
|
<div class="wrb-actions">
|
|
332
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
337
|
+
<a href="#" class="wrb-cancel-btn">${n(e.cancelLabel??"Abbrechen")}</a>
|
|
333
338
|
<button type="submit" class="wrb-submit-btn">
|
|
334
|
-
${
|
|
339
|
+
${n(e.submitLabel??"Absenden")}
|
|
335
340
|
</button>
|
|
336
341
|
</div>
|
|
337
342
|
</form>
|
|
338
|
-
${
|
|
343
|
+
${v(e)}
|
|
339
344
|
</div>
|
|
340
345
|
</div>
|
|
341
346
|
</div>
|
|
@@ -356,7 +361,7 @@ ${k}</style>`:`<style>${i}</style>`}
|
|
|
356
361
|
Bestätigung per E-Mail.
|
|
357
362
|
</p>
|
|
358
363
|
</div>
|
|
359
|
-
${
|
|
364
|
+
${v(e)}
|
|
360
365
|
</div>
|
|
361
366
|
</div>
|
|
362
367
|
</div>
|
|
@@ -377,7 +382,7 @@ ${k}</style>`:`<style>${i}</style>`}
|
|
|
377
382
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
378
383
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
379
384
|
</div>
|
|
380
|
-
${
|
|
385
|
+
${v(e)}
|
|
381
386
|
</div>
|
|
382
387
|
</div>
|
|
383
|
-
</div>`}exports.WiderrufsModal=
|
|
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';
|