@truconsent/consent-banner-react/dist/TruConsent.modern.mjs.map

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

{"version":3,"file":"TruConsent.modern.mjs","sources":["../src/TruConsent.jsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nexport default function TruConsent({\n  bannerId,\n  apiUrl = \"https://your-api.com\",\n  userId = \"anonymous\"\n}) {\n  const [banner, setBanner] = useState(null);\n\n  useEffect(() => {\n    fetch(`${apiUrl}/banners/${bannerId}`)\n      .then((r) => r.json())\n      .then(setBanner)\n      .catch(console.error);\n  }, [bannerId, apiUrl]);\n\n  if (!banner) return null;\n\n  const submitConsent = (override = null) => {\n    const consentData = {};\n    banner.purposes.forEach((p) => {\n      if (override !== null) {\n        consentData[p] = override;\n      } else {\n        const el = document.querySelector(\n          `[data-purpose=\"${p}\"] input[type=\"checkbox\"]`\n        );\n        consentData[p] = el.checked;\n      }\n    });\n\n    fetch(`${apiUrl}/banners/${bannerId}/consent`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ userId, consentData }),\n    }).then(() => setBanner(null));\n  };\n\n  return (\n    <div style={{\n      fontFamily: \"'Segoe UI', sans-serif\",\n      maxWidth: 500,\n      margin: \"20px auto\",\n      border: \"1px solid #e0e0e0\",\n      borderRadius: 8,\n      boxShadow: \"0 2px 8px rgba(0,0,0,0.1)\",\n      background: \"#fff\",\n      overflow: \"hidden\",\n    }}>\n      <div style={{ background: \"#f7f7f7\", padding: 16, borderBottom: \"1px solid #e0e0e0\" }}>\n        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>\n          Consents by {banner.legal_entities.join(\", \")}\n        </h3>\n      </div>\n      <div style={{ padding: 16 }}>\n        <p style={{ fontSize: 13, color: \"#555\", marginBottom: 16 }}>\n          You have all the rights to decline consents you feel are not required.\n        </p>\n        {banner.purposes.map((p) => (\n          <div key={p} data-purpose={p} style={{\n            border: \"1px solid #eee\",\n            borderRadius: 6,\n            padding: 12,\n            marginBottom: 16\n          }}>\n            <div style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              alignItems: \"center\",\n              marginBottom: 8\n            }}>\n              <div>\n                <b>{p}</b><br/>\n                <small style={{ color: \"#666\" }}>{banner.collection_point}</small>\n              </div>\n              <label style={{ position: \"relative\", display: \"inline-block\", width: 36, height: 20 }}>\n                <input type=\"checkbox\" defaultChecked style={{ display: \"none\" }}/>\n                <span style={{\n                  position: \"absolute\",\n                  cursor: \"pointer\",\n                  top: 0, left: 0, right: 0, bottom: 0,\n                  backgroundColor: \"#ccc\",\n                  borderRadius: 34,\n                  transition: \"0.2s\"\n                }} />\n                <span style={{\n                  position: \"absolute\",\n                  height: 14, width: 14,\n                  left: 3, bottom: 3,\n                  backgroundColor: \"#fff\",\n                  borderRadius: \"50%\",\n                  transition: \"0.2s\"\n                }} />\n              </label>\n            </div>\n            <div>\n              <b>Data Elements:</b>{\" \"}\n              {banner.data_elements.map((e) => (\n                <span key={e} style={{\n                  display: \"inline-block\",\n                  padding: \"4px 8px\",\n                  fontSize: 12,\n                  background: \"#f0f0f0\",\n                  borderRadius: 12,\n                  margin: \"4px 6px 0 0\"\n                }}>{e}</span>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n      <div style={{ textAlign: \"right\", padding: 16, background: \"#f7f7f7\", borderTop: \"1px solid #e0e0e0\" }}>\n        <button onClick={() => submitConsent(false)} style={{\n          padding: \"8px 16px\",\n          border: \"1px solid #ccc\",\n          background: \"#fff\",\n          borderRadius: 6,\n          cursor: \"pointer\",\n          marginRight: 8\n        }}>Reject All</button>\n        <button onClick={() => submitConsent(true)} style={{\n          padding: \"8px 16px\",\n          background: \"#F15B5B\",\n          color: \"#fff\",\n          border: \"none\",\n          borderRadius: 6,\n          cursor: \"pointer\"\n        }}>I Consent</button>\n      </div>\n    </div>\n  );\n}\n"],"names":["TruConsent","bannerId","apiUrl","userId","banner","setBanner","useState","useEffect","fetch","then","r","json","catch","console","error","submitConsent","override","consentData","purposes","forEach","p","el","document","querySelector","checked","method","headers","body","JSON","stringify","React","createElement","style","fontFamily","maxWidth","margin","border","borderRadius","boxShadow","background","overflow","padding","borderBottom","fontSize","fontWeight","legal_entities","join","color","marginBottom","map","key","display","justifyContent","alignItems","collection_point","position","width","height","type","defaultChecked","cursor","top","left","right","bottom","backgroundColor","transition","data_elements","e","textAlign","borderTop","onClick","marginRight"],"mappings":"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"}