UNPKG

@truconsent/consent-banner-react

Version:

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

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