@truconsent/consent-banner-react/dist/index.modern.mjs

React consent-banner components (in-page & modal)

import e,{useState as t,useEffect as a}from"react";import n from"react-dom";function l({bannerId:n,apiUrl:l="https://your-api.com",userId:r="anonymous"}){const[o,c]=t(null);if(a(()=>{fetch(`${l}/banners/${n}`).then(e=>e.json()).then(c).catch(console.error)},[n,l]),!o)return null;const s=(e=null)=>{const t={};o.purposes.forEach(a=>{if(null!==e)t[a]=e;else{const e=document.querySelector(`[data-purpose="${a}"] input[type="checkbox"]`);t[a]=e.checked}}),fetch(`${l}/banners/${n}/consent`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:r,consentData:t})}).then(()=>c(null))};/*#__PURE__*/return e.createElement("div",{style:{fontFamily:"'Segoe UI', sans-serif",maxWidth:500,margin:"20px auto",border:"1px solid #e0e0e0",borderRadius:8,boxShadow:"0 2px 8px rgba(0,0,0,0.1)",background:"#fff",overflow:"hidden"}},/*#__PURE__*/e.createElement("div",{style:{background:"#f7f7f7",padding:16,borderBottom:"1px solid #e0e0e0"}},/*#__PURE__*/e.createElement("h3",{style:{margin:0,fontSize:18,fontWeight:600}},"Consents by ",o.legal_entities.join(", "))),/*#__PURE__*/e.createElement("div",{style:{padding:16}},/*#__PURE__*/e.createElement("p",{style:{fontSize:13,color:"#555",marginBottom:16}},"You have all the rights to decline consents you feel are not required."),o.purposes.map(t=>/*#__PURE__*/e.createElement("div",{key:t,"data-purpose":t,style:{border:"1px solid #eee",borderRadius:6,padding:12,marginBottom:16}},/*#__PURE__*/e.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}},/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("b",null,t),/*#__PURE__*/e.createElement("br",null),/*#__PURE__*/e.createElement("small",{style:{color:"#666"}},o.collection_point)),/*#__PURE__*/e.createElement("label",{style:{position:"relative",display:"inline-block",width:36,height:20}},/*#__PURE__*/e.createElement("input",{type:"checkbox",defaultChecked:!0,style:{display:"none"}}),/*#__PURE__*/e.createElement("span",{style:{position:"absolute",cursor:"pointer",top:0,left:0,right:0,bottom:0,backgroundColor:"#ccc",borderRadius:34,transition:"0.2s"}}),/*#__PURE__*/e.createElement("span",{style:{position:"absolute",height:14,width:14,left:3,bottom:3,backgroundColor:"#fff",borderRadius:"50%",transition:"0.2s"}}))),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("b",null,"Data Elements:")," ",o.data_elements.map(t=>/*#__PURE__*/e.createElement("span",{key:t,style:{display:"inline-block",padding:"4px 8px",fontSize:12,background:"#f0f0f0",borderRadius:12,margin:"4px 6px 0 0"}},t)))))),/*#__PURE__*/e.createElement("div",{style:{textAlign:"right",padding:16,background:"#f7f7f7",borderTop:"1px solid #e0e0e0"}},/*#__PURE__*/e.createElement("button",{onClick:()=>s(!1),style:{padding:"8px 16px",border:"1px solid #ccc",background:"#fff",borderRadius:6,cursor:"pointer",marginRight:8}},"Reject All"),/*#__PURE__*/e.createElement("button",{onClick:()=>s(!0),style:{padding:"8px 16px",background:"#F15B5B",color:"#fff",border:"none",borderRadius:6,cursor:"pointer"}},"I Consent")))}function r({bannerId:l,apiBaseUrl:r="https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners",logoUrl:c='data:image/svg+xml;utf8,\n<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100">\n  <rect width="100" height="100" fill="#8e44ad"/>\n  <text x="50" y="55" font-size="50" text-anchor="middle" fill="#fff" font-family="Arial">M</text>\n</svg>',companyName:s="Mars Financial Technologies Private Limited"}){const[m,i]=t(null);return a(()=>{l&&fetch(`${r}/${l}`).then(e=>e.json()).then(e=>i(e)).catch(console.error)},[l,r]),m?n.createPortal(/*#__PURE__*/e.createElement("div",{className:"mcm-overlay"},/*#__PURE__*/e.createElement("div",{className:"mcm-container"},/*#__PURE__*/e.createElement("header",{className:"mcm-header"},/*#__PURE__*/e.createElement("img",{src:c,alt:"Logo",className:"mcm-logo"}),/*#__PURE__*/e.createElement("div",{className:"mcm-header-text"},/*#__PURE__*/e.createElement("h1",null,"Consents by ",s),/*#__PURE__*/e.createElement("p",null,"You have all the rights to decline consents which you feel are not required by ",s,"."))),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/e.createElement("div",{className:"mcm-body"},m.purposes.map(t=>/*#__PURE__*/e.createElement(o,{key:t.id,banner:m,purpose:t}))),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/e.createElement("footer",{className:"mcm-footer"},/*#__PURE__*/e.createElement("button",{className:"mcm-btn reject"},"Reject All"),/*#__PURE__*/e.createElement("button",{className:"mcm-btn consent"},"I Consent")))),document.body):null}function o({banner:a,purpose:n}){var l;const[r,o]=t(!1),[s,m]=t(!1),[i,d]=t(!1);/*#__PURE__*/return e.createElement("div",{className:"mcm-card"},/*#__PURE__*/e.createElement("div",{className:"mcm-card-header"},/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("h2",null,n.name),/*#__PURE__*/e.createElement("p",{className:"mcm-purpose-desc"},n.description)),/*#__PURE__*/e.createElement("div",{className:"mcm-card-actions"},n.is_mandatory&&/*#__PURE__*/e.createElement("span",{className:"badge mandatory"},"Mandatory"),/*#__PURE__*/e.createElement("span",{className:"badge expiry"},"Expiry Type: ",{"7a203e84-016b-4f61-b776-2375dd1755e4":"One Year"}[p=n.expiry_period]||p),/*#__PURE__*/e.createElement("label",{className:"switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",defaultChecked:!0}),/*#__PURE__*/e.createElement("span",{className:"track"}),/*#__PURE__*/e.createElement("span",{className:"thumb"})),/*#__PURE__*/e.createElement("span",{className:"toggle-label"},"Accept"))),/*#__PURE__*/e.createElement("div",{className:"accordion"},/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:()=>o(!r)},"Data Elements",/*#__PURE__*/e.createElement(c,{open:r})),r&&/*#__PURE__*/e.createElement("div",{className:"panel"},a.data_elements.map(t=>/*#__PURE__*/e.createElement("span",{key:t.id,className:"pill"},t.name))),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:()=>m(!s)},"Legal Entities",/*#__PURE__*/e.createElement(c,{open:s})),s&&/*#__PURE__*/e.createElement("div",{className:"panel"},a.legal_entities.map(t=>/*#__PURE__*/e.createElement("span",{key:t.id,className:"pill"},t.name))),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:()=>d(!i)},"Tools",/*#__PURE__*/e.createElement(c,{open:i})),i&&/*#__PURE__*/e.createElement("div",{className:"panel"},null==(l=a.tools)?void 0:l.map((t,a)=>/*#__PURE__*/e.createElement("span",{key:a,className:"pill"},t)))));var p}function c({open:t}){/*#__PURE__*/return e.createElement("svg",{className:"chevron "+(t?"open":""),width:"16",height:"16",viewBox:"0 0 24 24"},/*#__PURE__*/e.createElement("path",{d:"M6 9l6 6 6-6",fill:"none",stroke:"#333",strokeWidth:"2"}))}export{l as TruConsent,r as TruConsentModal};
//# sourceMappingURL=index.modern.mjs.map