@truconsent/consent-banner-react
Version:
React consent-banner components (in-page & modal)
3 lines (2 loc) • 4.21 kB
JavaScript
import e,{useState as t,useEffect as a}from"react";import n from"react-dom";function c(c){var r=c.bannerId,m=c.apiBaseUrl,s=void 0===m?"https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners":m,o=c.logoUrl,i=void 0===o?'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>':o,d=c.companyName,p=void 0===d?"Mars Financial Technologies Private Limited":d,u=t(null),E=u[0],h=u[1];return a(function(){r&&fetch(s+"/"+r).then(function(e){return e.json()}).then(function(e){return h(e)}).catch(console.error)},[r,s]),E?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:i,alt:"Logo",className:"mcm-logo"}),/*#__PURE__*/e.createElement("div",{className:"mcm-header-text"},/*#__PURE__*/e.createElement("h1",null,"Consents by ",p),/*#__PURE__*/e.createElement("p",null,"You have all the rights to decline consents which you feel are not required by ",p,"."))),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/e.createElement("div",{className:"mcm-body"},E.purposes.map(function(t){/*#__PURE__*/return e.createElement(l,{key:t.id,banner:E,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 l(a){var n,c,l=a.banner,m=a.purpose,s=t(!1),o=s[0],i=s[1],d=t(!1),p=d[0],u=d[1],E=t(!1),h=E[0],v=E[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,m.name),/*#__PURE__*/e.createElement("p",{className:"mcm-purpose-desc"},m.description)),/*#__PURE__*/e.createElement("div",{className:"mcm-card-actions"},m.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"}[c=m.expiry_period]||c),/*#__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:function(){return i(!o)}},"Data Elements",/*#__PURE__*/e.createElement(r,{open:o})),o&&/*#__PURE__*/e.createElement("div",{className:"panel"},l.data_elements.map(function(t){/*#__PURE__*/return e.createElement("span",{key:t.id,className:"pill"},t.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return u(!p)}},"Legal Entities",/*#__PURE__*/e.createElement(r,{open:p})),p&&/*#__PURE__*/e.createElement("div",{className:"panel"},l.legal_entities.map(function(t){/*#__PURE__*/return e.createElement("span",{key:t.id,className:"pill"},t.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return v(!h)}},"Tools",/*#__PURE__*/e.createElement(r,{open:h})),h&&/*#__PURE__*/e.createElement("div",{className:"panel"},null==(n=l.tools)?void 0:n.map(function(t,a){/*#__PURE__*/return e.createElement("span",{key:a,className:"pill"},t)}))))}function r(t){/*#__PURE__*/return e.createElement("svg",{className:"chevron "+(t.open?"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{c as TruConsentModal};
//# sourceMappingURL=TruConsentModal.esm.js.map