UNPKG

@truconsent/consent-banner-react

Version:

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

3 lines (2 loc) 5.75 kB
import e,{useState as n,useEffect as t}from"react";import a from"react-dom";function r(r){var l=r.bannerId,o=r.apiBaseUrl,m=void 0===o?"https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners":o,s=r.logoUrl,i=r.companyName,d=void 0===i?"Mars Company":i,u=r.onClose,p=n(null),E=p[0],f=p[1],h=n(!0),b=h[0],v=h[1],N=n(!1),g=N[0],y=N[1],k=n(""),x=k[0],w=k[1],C=n(!0)[0];t(function(){if(!l)return w("Missing bannerId"),void v(!1);v(!0),fetch(m+"/"+l).then(function(e){if(!e.ok)throw new Error("Failed to load data");return e.json()}).then(function(e){return f(e)}).catch(function(e){return w(e.message||"Error loading banner")}).finally(function(){return v(!1)})},[l,m]);var P=function(e){try{y(!0),w("");var n=E.collection_point,t=E.purposes[0].id,a=e;return Promise.resolve(function(r,c){try{var l=function(r,c){try{var l=Promise.resolve(fetch(m+"/"+n+"/consent",{method:"POST",headers:{"Content-type":"application/json"},body:JSON.stringify({userId:"random-13344",purposeId:t,action:a})})).then(function(n){if(!n.ok)throw new Error("Submission failed");!function(e){u&&u(e)}(e)})}catch(e){return c(e)}return l&&l.then?l.then(void 0,c):l}(0,function(e){console.error(e),w("Something went wrong. Please try again.")})}catch(e){return c(!0,e)}return l&&l.then?l.then(c.bind(null,!1),c.bind(null,!0)):c(!1,l)}(0,function(e,n){if(y(!1),e)throw n;return n}))}catch(e){return Promise.reject(e)}};return C?a.createPortal(/*#__PURE__*/e.createElement("div",{className:"mcm-overlay"},b?/*#__PURE__*/e.createElement("div",{className:"mcm-spinner"}):/*#__PURE__*/e.createElement("div",{className:"mcm-container",role:"dialog","aria-modal":"true"},/*#__PURE__*/e.createElement("header",{className:"mcm-header"},s&&/*#__PURE__*/e.createElement("img",{src:s,alt:"Logo",className:"mcm-logo"}),/*#__PURE__*/e.createElement("div",{className:"mcm-header-text"},/*#__PURE__*/e.createElement("h1",null,"Consents by ",d),/*#__PURE__*/e.createElement("p",null,"You have all rights to decline consents not required by ",d,"."))),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),x&&/*#__PURE__*/e.createElement("div",{className:"mcm-error",role:"alert"},x),/*#__PURE__*/e.createElement("div",{className:"mcm-body"},E.purposes.map(function(n){/*#__PURE__*/return e.createElement(c,{key:n.id,banner:E,purpose:n})})),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/e.createElement("footer",{className:"mcm-footer"},/*#__PURE__*/e.createElement("button",{className:"mcm-btn reject",disabled:g,onClick:function(){return P("declined")}},g?"Processing…":"Reject All"),/*#__PURE__*/e.createElement("button",{className:"mcm-btn consent",disabled:g,onClick:function(){return P("approved")}},g?"Processing…":"I Consent")))),document.body):null}function c(t){var a=t.banner,r=t.purpose,c=n(!1),o=c[0],m=c[1],s=n(!1),i=s[0],d=s[1],u=n(!1),p=u[0],E=u[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,r.name),/*#__PURE__*/e.createElement("p",{className:"mcm-purpose-desc"},r.description)),/*#__PURE__*/e.createElement("div",{className:"mcm-card-actions"},r.is_mandatory&&/*#__PURE__*/e.createElement("span",{className:"badge mandatory"},"Mandatory"),/*#__PURE__*/e.createElement("span",{className:"badge expiry"},"Expiry: ",r.expiry_label||r.expiry_period.slice(0,6)),/*#__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 m(!o)}},"Data Elements",/*#__PURE__*/e.createElement(l,{open:o})),o&&/*#__PURE__*/e.createElement("div",{className:"panel"},a.data_elements.map(function(n){/*#__PURE__*/return e.createElement("span",{key:n.id,className:"pill"},n.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return d(!i)}},"Legal Entities",/*#__PURE__*/e.createElement(l,{open:i})),i&&/*#__PURE__*/e.createElement("div",{className:"panel"},a.legal_entities.map(function(n){/*#__PURE__*/return e.createElement("span",{key:n.id,className:"pill"},n.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return E(!p)}},"Tools",/*#__PURE__*/e.createElement(l,{open:p})),p&&/*#__PURE__*/e.createElement("div",{className:"panel"},a.tools.map(function(n){/*#__PURE__*/return e.createElement("span",{key:n.id,className:"pill"},n.name)}))))}function l(n){/*#__PURE__*/return e.createElement("svg",{className:"chevron "+(n.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"}))}function o(t){var a=t.bannerId,c=t.apiBaseUrl,l=t.logoUrl,o=t.companyName,m=n(!1),s=m[0],i=m[1];/*#__PURE__*/return e.createElement(Fragment,null,/*#__PURE__*/e.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__*/e.createElement("span",null,"We value your privacy."),/*#__PURE__*/e.createElement("button",{onClick:function(){return i(!0)},style:{marginLeft:"12px",padding:"6px 12px"}},"Manage Consents")),s&&/*#__PURE__*/e.createElement(r,{bannerId:a,apiBaseUrl:c,logoUrl:l,companyName:o}))}export{o as TruConsent,r as TruConsentModal,r as default}; //# sourceMappingURL=index.esm.js.map