UNPKG

@truconsent/consent-banner-react

Version:

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

3 lines (2 loc) 6.55 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e||self).consentBannerReact={},e.react,e.reactDom)}(this,function(e,t,a){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=/*#__PURE__*/n(t),r=/*#__PURE__*/n(a);function c(e){var a=e.bannerId,n=e.apiBaseUrl,c=void 0===n?"https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners":n,s=e.logoUrl,u=e.companyName,m=void 0===u?"Mars Company":u,d=e.onClose,i=t.useState(null),f=i[0],p=i[1],E=t.useState(!0),h=E[0],b=E[1],v=t.useState(!1),y=v[0],N=v[1],g=t.useState(""),x=g[0],k=g[1],C=t.useState(!0)[0];t.useEffect(function(){if(!a)return k("Missing bannerId"),void b(!1);b(!0),fetch(c+"/"+a).then(function(e){if(!e.ok)throw new Error("Failed to load data");return e.json()}).then(function(e){return p(e)}).catch(function(e){return k(e.message||"Error loading banner")}).finally(function(){return b(!1)})},[a,c]);var S=function(e){try{N(!0),k("");var t=f.collection_point,a=f.purposes[0].id,n=e;return Promise.resolve(function(l,r){try{var o=function(l,r){try{var o=Promise.resolve(fetch(c+"/"+t+"/consent",{method:"POST",headers:{"Content-type":"application/json"},body:JSON.stringify({userId:"random-13344",purposeId:a,action:n})})).then(function(t){if(!t.ok)throw new Error("Submission failed");!function(e){d&&d(e)}(e)})}catch(e){return r(e)}return o&&o.then?o.then(void 0,r):o}(0,function(e){console.error(e),k("Something went wrong. Please try again.")})}catch(e){return r(!0,e)}return o&&o.then?o.then(r.bind(null,!1),r.bind(null,!0)):r(!1,o)}(0,function(e,t){if(N(!1),e)throw t;return t}))}catch(e){return Promise.reject(e)}};return C?r.default.createPortal(/*#__PURE__*/l.default.createElement("div",{className:"mcm-overlay"},h?/*#__PURE__*/l.default.createElement("div",{className:"mcm-spinner"}):/*#__PURE__*/l.default.createElement("div",{className:"mcm-container",role:"dialog","aria-modal":"true"},/*#__PURE__*/l.default.createElement("header",{className:"mcm-header"},s&&/*#__PURE__*/l.default.createElement("img",{src:s,alt:"Logo",className:"mcm-logo"}),/*#__PURE__*/l.default.createElement("div",{className:"mcm-header-text"},/*#__PURE__*/l.default.createElement("h1",null,"Consents by ",m),/*#__PURE__*/l.default.createElement("p",null,"You have all rights to decline consents not required by ",m,"."))),/*#__PURE__*/l.default.createElement("div",{className:"mcm-separator"}),x&&/*#__PURE__*/l.default.createElement("div",{className:"mcm-error",role:"alert"},x),/*#__PURE__*/l.default.createElement("div",{className:"mcm-body"},f.purposes.map(function(e){/*#__PURE__*/return l.default.createElement(o,{key:e.id,banner:f,purpose:e})})),/*#__PURE__*/l.default.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/l.default.createElement("footer",{className:"mcm-footer"},/*#__PURE__*/l.default.createElement("button",{className:"mcm-btn reject",disabled:y,onClick:function(){return S("declined")}},y?"Processing…":"Reject All"),/*#__PURE__*/l.default.createElement("button",{className:"mcm-btn consent",disabled:y,onClick:function(){return S("approved")}},y?"Processing…":"I Consent")))),document.body):null}function o(e){var a=e.banner,n=e.purpose,r=t.useState(!1),c=r[0],o=r[1],u=t.useState(!1),m=u[0],d=u[1],i=t.useState(!1),f=i[0],p=i[1];/*#__PURE__*/return l.default.createElement("div",{className:"mcm-card"},/*#__PURE__*/l.default.createElement("div",{className:"mcm-card-header"},/*#__PURE__*/l.default.createElement("div",null,/*#__PURE__*/l.default.createElement("h2",null,n.name),/*#__PURE__*/l.default.createElement("p",{className:"mcm-purpose-desc"},n.description)),/*#__PURE__*/l.default.createElement("div",{className:"mcm-card-actions"},n.is_mandatory&&/*#__PURE__*/l.default.createElement("span",{className:"badge mandatory"},"Mandatory"),/*#__PURE__*/l.default.createElement("span",{className:"badge expiry"},"Expiry: ",n.expiry_label||n.expiry_period.slice(0,6)),/*#__PURE__*/l.default.createElement("label",{className:"switch"},/*#__PURE__*/l.default.createElement("input",{type:"checkbox",defaultChecked:!0}),/*#__PURE__*/l.default.createElement("span",{className:"track"}),/*#__PURE__*/l.default.createElement("span",{className:"thumb"})),/*#__PURE__*/l.default.createElement("span",{className:"toggle-label"},"Accept"))),/*#__PURE__*/l.default.createElement("div",{className:"accordion"},/*#__PURE__*/l.default.createElement("button",{className:"accordion-btn",onClick:function(){return o(!c)}},"Data Elements",/*#__PURE__*/l.default.createElement(s,{open:c})),c&&/*#__PURE__*/l.default.createElement("div",{className:"panel"},a.data_elements.map(function(e){/*#__PURE__*/return l.default.createElement("span",{key:e.id,className:"pill"},e.name)})),/*#__PURE__*/l.default.createElement("button",{className:"accordion-btn",onClick:function(){return d(!m)}},"Legal Entities",/*#__PURE__*/l.default.createElement(s,{open:m})),m&&/*#__PURE__*/l.default.createElement("div",{className:"panel"},a.legal_entities.map(function(e){/*#__PURE__*/return l.default.createElement("span",{key:e.id,className:"pill"},e.name)})),/*#__PURE__*/l.default.createElement("button",{className:"accordion-btn",onClick:function(){return p(!f)}},"Tools",/*#__PURE__*/l.default.createElement(s,{open:f})),f&&/*#__PURE__*/l.default.createElement("div",{className:"panel"},a.tools.map(function(e){/*#__PURE__*/return l.default.createElement("span",{key:e.id,className:"pill"},e.name)}))))}function s(e){/*#__PURE__*/return l.default.createElement("svg",{className:"chevron "+(e.open?"open":""),width:"16",height:"16",viewBox:"0 0 24 24"},/*#__PURE__*/l.default.createElement("path",{d:"M6 9l6 6 6-6",fill:"none",stroke:"#333",strokeWidth:"2"}))}e.TruConsent=function(e){var a=e.bannerId,n=e.apiBaseUrl,r=e.logoUrl,o=e.companyName,s=t.useState(!1),u=s[0],m=s[1];/*#__PURE__*/return l.default.createElement(Fragment,null,/*#__PURE__*/l.default.createElement("div",{style:{position:"fixed",bottom:0,width:"100%",background:"#fff",boxShadow:"0 -2px 8px rgba(0,0,0,0.1)",padding:"10px",textAlign:"center"}},/*#__PURE__*/l.default.createElement("span",null,"We value your privacy."),/*#__PURE__*/l.default.createElement("button",{onClick:function(){return m(!0)},style:{marginLeft:"12px",padding:"6px 12px"}},"Manage Consents")),u&&/*#__PURE__*/l.default.createElement(c,{bannerId:a,apiBaseUrl:n,logoUrl:r,companyName:o}))},e.TruConsentModal=c,e.default=c}); //# sourceMappingURL=index.umd.js.map