UNPKG

@truconsent/consent-banner-react

Version:

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

3 lines (2 loc) 3.75 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).consentBannerReact=t(e.react)}(this,function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);return function(t){var o=t.bannerId,r=t.apiUrl,l=void 0===r?"https://your-api.com":r,a=t.userId,i=void 0===a?"anonymous":a,d=e.useState(null),u=d[0],c=d[1];if(e.useEffect(function(){fetch(l+"/banners/"+o).then(function(e){return e.json()}).then(c).catch(console.error)},[o,l]),!u)return null;var s=function(e){void 0===e&&(e=null);var t={};u.purposes.forEach(function(n){if(null!==e)t[n]=e;else{var o=document.querySelector('[data-purpose="'+n+'"] input[type="checkbox"]');t[n]=o.checked}}),fetch(l+"/banners/"+o+"/consent",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:i,consentData:t})}).then(function(){return c(null)})};/*#__PURE__*/return n.default.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__*/n.default.createElement("div",{style:{background:"#f7f7f7",padding:16,borderBottom:"1px solid #e0e0e0"}},/*#__PURE__*/n.default.createElement("h3",{style:{margin:0,fontSize:18,fontWeight:600}},"Consents by ",u.legal_entities.join(", "))),/*#__PURE__*/n.default.createElement("div",{style:{padding:16}},/*#__PURE__*/n.default.createElement("p",{style:{fontSize:13,color:"#555",marginBottom:16}},"You have all the rights to decline consents you feel are not required."),u.purposes.map(function(e){/*#__PURE__*/return n.default.createElement("div",{key:e,"data-purpose":e,style:{border:"1px solid #eee",borderRadius:6,padding:12,marginBottom:16}},/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}},/*#__PURE__*/n.default.createElement("div",null,/*#__PURE__*/n.default.createElement("b",null,e),/*#__PURE__*/n.default.createElement("br",null),/*#__PURE__*/n.default.createElement("small",{style:{color:"#666"}},u.collection_point)),/*#__PURE__*/n.default.createElement("label",{style:{position:"relative",display:"inline-block",width:36,height:20}},/*#__PURE__*/n.default.createElement("input",{type:"checkbox",defaultChecked:!0,style:{display:"none"}}),/*#__PURE__*/n.default.createElement("span",{style:{position:"absolute",cursor:"pointer",top:0,left:0,right:0,bottom:0,backgroundColor:"#ccc",borderRadius:34,transition:"0.2s"}}),/*#__PURE__*/n.default.createElement("span",{style:{position:"absolute",height:14,width:14,left:3,bottom:3,backgroundColor:"#fff",borderRadius:"50%",transition:"0.2s"}}))),/*#__PURE__*/n.default.createElement("div",null,/*#__PURE__*/n.default.createElement("b",null,"Data Elements:")," ",u.data_elements.map(function(e){/*#__PURE__*/return n.default.createElement("span",{key:e,style:{display:"inline-block",padding:"4px 8px",fontSize:12,background:"#f0f0f0",borderRadius:12,margin:"4px 6px 0 0"}},e)})))})),/*#__PURE__*/n.default.createElement("div",{style:{textAlign:"right",padding:16,background:"#f7f7f7",borderTop:"1px solid #e0e0e0"}},/*#__PURE__*/n.default.createElement("button",{onClick:function(){return s(!1)},style:{padding:"8px 16px",border:"1px solid #ccc",background:"#fff",borderRadius:6,cursor:"pointer",marginRight:8}},"Reject All"),/*#__PURE__*/n.default.createElement("button",{onClick:function(){return s(!0)},style:{padding:"8px 16px",background:"#F15B5B",color:"#fff",border:"none",borderRadius:6,cursor:"pointer"}},"I Consent")))}}); //# sourceMappingURL=TruConsent.umd.js.map