@truconsent/consent-banner-react
Version:
React consent-banner components (in-page & modal)
3 lines (2 loc) • 28.9 kB
JavaScript
import e,{useState as t,useEffect as a}from"react";import n from"react-dom";import{User as c,Info as r,X as l,CheckCircle2 as s,Mail as o,Clock as m}from"lucide-react";function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},i.apply(null,arguments)}function d(t){/*#__PURE__*/return e.createElement("svg",{className:"chevron "+(t.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 u(a){var n=a.banner,c=a.purpose,r=a.onChangePurpose,l="accepted"===c.consented,s=t(!1),o=s[0],m=s[1],i=t(!1),u=i[0],p=i[1],E=t(!1),N=E[0],v=E[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,c.name),/*#__PURE__*/e.createElement("p",{className:"mcm-purpose-desc"},c.description)),/*#__PURE__*/e.createElement("div",{className:"mcm-card-actions"},c.is_mandatory&&/*#__PURE__*/e.createElement("span",{className:"badge mandatory"},"Mandatory"),/*#__PURE__*/e.createElement("span",{className:"badge expiry"},"Expiry: ",c.expiry_label||c.expiry_period.slice(0,6)),/*#__PURE__*/e.createElement("label",{className:"switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:l,onChange:function(e){r(c.id,e.target.checked?"accepted":"declined")}}),/*#__PURE__*/e.createElement("span",{className:"track"}),/*#__PURE__*/e.createElement("span",{className:"thumb"})),/*#__PURE__*/e.createElement("span",{className:"toggle-label"},l?"Accepted":"Accept"))),/*#__PURE__*/e.createElement("div",{className:"accordion"},/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return m(function(e){return!e})}},"Data Elements ",/*#__PURE__*/e.createElement(d,{open:o})),o&&/*#__PURE__*/e.createElement("div",{className:"panel"},n.data_elements.map(function(t){/*#__PURE__*/return e.createElement("span",{key:t.id,className:"pill"},t.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return p(function(e){return!e})}},"Legal Entities ",/*#__PURE__*/e.createElement(d,{open:u})),u&&/*#__PURE__*/e.createElement("div",{className:"panel"},n.legal_entities.map(function(t){/*#__PURE__*/return e.createElement("span",{key:t.id,className:"pill"},t.name)})),/*#__PURE__*/e.createElement("button",{className:"accordion-btn",onClick:function(){return v(function(e){return!e})}},"Tools ",/*#__PURE__*/e.createElement(d,{open:N})),N&&/*#__PURE__*/e.createElement("div",{className:"panel"},n.tools.map(function(t){/*#__PURE__*/return e.createElement("span",{key:t.id,className:"pill"},t.name)}))))}function p(c){var r=c.bannerId,l=c.userId,s=c.apiBaseUrl,o=void 0===s?"https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners":s,m=c.logoUrl,d=c.companyName,p=void 0===d?"Mars Company":d,E=c.onClose,N=t(null),v=N[0],f=N[1],h=t(!0),b=h[0],y=h[1],g=t(!1),C=g[0],k=g[1],w=t(""),_=w[0],x=w[1],P=t(!0),D=P[0],T=P[1];a(function(){if(!r)return x("Missing bannerId"),void y(!1);y(!0),fetch(o+"/"+r).then(function(e){if(!e.ok)throw new Error("Failed to load banner");return e.json()}).then(function(e){f(e)}).catch(function(e){return x(e.message)}).finally(function(){return y(!1)})},[r,o]);var j=function(e,t){f(function(a){return i({},a,{purposes:a.purposes.map(function(a){return a.id===e?i({},a,{consented:t}):a})})})},S=function(e){try{return v?(k(!0),x(""),console.log("banner",v.purposes),Promise.resolve(function(t,a){try{var n=function(t,a){try{var n=Promise.resolve(fetch(o+"/"+v.collection_point+"/consent",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:l,purposes:v.purposes,action:e})})).then(function(t){if(!t.ok)throw new Error("Submission failed");var a;a=e,T(!1),E&&E(a)})}catch(e){return a()}return n&&n.then?n.then(void 0,a):n}(0,function(){x("Something went wrong. Please try again.")})}catch(e){return a(!0,e)}return n&&n.then?n.then(a.bind(null,!1),a.bind(null,!0)):a(!1,n)}(0,function(e,t){if(k(!1),e)throw t;return t}))):Promise.resolve()}catch(e){return Promise.reject(e)}};return D?n.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"},m&&/*#__PURE__*/e.createElement("img",{src:m,alt:p+" Logo",className:"mcm-logo"}),/*#__PURE__*/e.createElement("div",{className:"mcm-header-text"},/*#__PURE__*/e.createElement("h1",null,"Consents by ",p),/*#__PURE__*/e.createElement("p",null,"You have the right to decline any non‐mandatory consents."))),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),_&&/*#__PURE__*/e.createElement("div",{className:"mcm-error",role:"alert"},_),/*#__PURE__*/e.createElement("div",{className:"mcm-body"},v&&v.purposes.map(function(t){/*#__PURE__*/return e.createElement(u,{key:t.id,banner:v,purpose:t,onChangePurpose:j})})),/*#__PURE__*/e.createElement("div",{className:"mcm-separator"}),/*#__PURE__*/e.createElement("footer",{className:"mcm-footer"},/*#__PURE__*/e.createElement("button",{className:"mcm-btn reject",disabled:C,onClick:function(){return S("declined")}},C?"Processing…":"Reject All"),/*#__PURE__*/e.createElement("button",{className:"mcm-btn consent",disabled:C,onClick:function(){return S("approved")}},C?"Processing…":"I Consent")))),document.body):null}function E(a){var n=a.bannerId,c=a.apiBaseUrl,r=a.logoUrl,l=a.companyName,s=t(!1),o=s[0],m=s[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 m(!0)},style:{marginLeft:"12px",padding:"6px 12px"}},"Manage Consents")),o&&/*#__PURE__*/e.createElement(p,{bannerId:n,apiBaseUrl:c,logoUrl:r,companyName:l}))}function N(n){var d=n.userId,u="https://7nd6pu6evh.execute-api.ap-south-1.amazonaws.com/dev/banners",p=t("Consent"),E=p[0],N=p[1],v=t(null),f=v[0],h=v[1],b=t([]),y=b[0],g=b[1],C=t(!1),k=C[0],w=C[1],_=t({nominee_name:"",relationship:"",nominee_email:"",nominee_mobile:"",purpose_of_appointment:""}),x=_[0],P=_[1],D=y[0]||null,T=t([]),j=T[0],S=T[1],O=t(!1)[1],M=t({subject:"",category:"",description:""}),q=M[0],A=M[1];a(function(){fetch(u+"/dpo_information").then(function(e){return e.json()}).then(h).catch(console.error),fetch(u+"/user_nominees/user/"+d).then(function(e){return e.json()}).then(g).catch(console.error),fetch(u+"/grievance_tickets/user/"+d).then(function(e){return e.json()}).then(S).catch(console.error)},[d]);var I=t([]),Y=I[0],R=I[1],U=t(!1),B=U[0],L=U[1],W=t(null),F=W[0],G=W[1],J=t(!1),z=J[0],H=J[1],Q=t(!1),V=Q[0],K=Q[1],X=t(!1),Z=X[0],$=X[1];return a(function(){fetch(u+"/user/"+d).then(function(e){return e.json()}).then(function(e){var t=e.flatMap(function(e){return e.purposes.map(function(t){return{id:t.id,title:t.name,name:t.name,description:t.description,expiry:t.expiry_period,collectionPoint:e.title,collectionId:e.collection_point,type:t.is_mandatory?"Mandatory":"Optional",dataElements:e.data_elements.map(function(e){return{label:e.name,description:e.description}}),shownToPrincipal:"yes",consented:t.consented}})});console.log("items",t),R(t)}).catch(console.error)},[d]),/*#__PURE__*/e.createElement("div",{className:"rc-container"},/*#__PURE__*/e.createElement("nav",{className:"rc-tabs"},["Consent","Rights","Transparency","Dpo","Nominee","Grievance"].map(function(t){/*#__PURE__*/return e.createElement("button",{key:t,onClick:function(){return N(t)},disabled:0==Y.length,className:"rc-tab "+(E===t?"rc-tab-active":"")},t)})),/*#__PURE__*/e.createElement("div",{className:"rc-principal-id"},/*#__PURE__*/e.createElement(c,{className:"rc-principal-icon"}),/*#__PURE__*/e.createElement("span",{className:"rc-principal-text"},"Data Principal ID: ",d||"f93ba6f4-815a-44b9-9a3f-aab5c7667f8c")),"Consent"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-content"},/*#__PURE__*/e.createElement("div",{className:"rc-section-header"},/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Manage your Consents here!"),B&&/*#__PURE__*/e.createElement("button",{className:"rc-btn-primary",onClick:function(){fetch(u+"/"+Y[0].collectionId+"/consent",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:d,purposes:Y,action:"approved"})}).then(function(){L(!1),alert("All changes saved.")}).catch(console.error)}},"Save Changes")),Y.length>0?/*#__PURE__*/e.createElement("div",{className:"rc-consent-list"},Y.map(function(t){/*#__PURE__*/return e.createElement("div",{key:t.id,className:"rc-consent-item"},/*#__PURE__*/e.createElement("div",{className:"rc-consent-header"},/*#__PURE__*/e.createElement("div",{className:"rc-consent-title-row"},/*#__PURE__*/e.createElement("h3",{className:"rc-consent-title"},t.title),/*#__PURE__*/e.createElement("div",{className:"rc-consent-header-right"},/*#__PURE__*/e.createElement(r,{className:"rc-info-icon",onClick:function(){return G(t)}}),/*#__PURE__*/e.createElement("span",{className:"rc-badge "+("Mandatory"===t.type?"rc-badge-mandatory":"rc-badge-optional")},t.type)))),/*#__PURE__*/e.createElement("p",{className:"rc-consent-description"},t.description),/*#__PURE__*/e.createElement("div",{className:"rc-consent-details"},/*#__PURE__*/e.createElement("div",{className:"rc-detail-item"},/*#__PURE__*/e.createElement("span",{className:"rc-detail-label"},"Expiry:"),/*#__PURE__*/e.createElement("span",{className:"rc-detail-value"},t.expiry)),/*#__PURE__*/e.createElement("div",{className:"rc-detail-item"},/*#__PURE__*/e.createElement("span",{className:"rc-detail-label"},"Collection Point:"),/*#__PURE__*/e.createElement("span",{className:"rc-detail-value"},t.collectionPoint))),/*#__PURE__*/e.createElement("div",{className:"rc-consent-status"},/*#__PURE__*/e.createElement("div",{className:"rc-status-item"},/*#__PURE__*/e.createElement("span",{className:"rc-status-label"},"Shown to Principal:"),/*#__PURE__*/e.createElement("span",{className:"rc-status-pill "+(t.shownToPrincipal?"rc-status-yes":"rc-status-no")},t.shownToPrincipal?"Yes":"No")),/*#__PURE__*/e.createElement("div",{className:"rc-status-item"},/*#__PURE__*/e.createElement("span",{className:"rc-status-label"},"Consented:"),/*#__PURE__*/e.createElement("span",{className:"rc-status-pill "+("accepted"===t.consented?"rc-status-yes":"rc-status-no")},"accepted"===t.consented?"Yes":"No"))),/*#__PURE__*/e.createElement("div",{className:"rc-consent-toggle"},/*#__PURE__*/e.createElement("label",{className:"rc-switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:"accepted"===t.consented,onChange:function(){return e=t.id,R(function(t){return t.map(function(t){return t.id===e?i({},t,{consented:"accepted"===t.consented?"declined":"accepted"}):t})}),void L(!0);var e}}),/*#__PURE__*/e.createElement("span",{className:"rc-slider"}))))})):/*#__PURE__*/e.createElement("div",{className:"rc-empty-state"},/*#__PURE__*/e.createElement(r,{className:"rc-empty-state-icon"}),"You currently have no consent records to display."),F&&/*#__PURE__*/e.createElement("div",{className:"rc-modal-overlay"},/*#__PURE__*/e.createElement("div",{className:"rc-modal"},/*#__PURE__*/e.createElement("header",{className:"rc-modal-header"},/*#__PURE__*/e.createElement("h2",{className:"rc-modal-title"},F.title),/*#__PURE__*/e.createElement("button",{className:"rc-modal-close",onClick:function(){return G(null)}},/*#__PURE__*/e.createElement(l,null))),/*#__PURE__*/e.createElement("p",{className:"rc-modal-subtitle"},"Detailed information about this purpose and how your data is used"),/*#__PURE__*/e.createElement("div",{className:"rc-modal-content"},/*#__PURE__*/e.createElement("section",{className:"rc-modal-section"},/*#__PURE__*/e.createElement("h3",{className:"rc-modal-section-title"},"Purpose Details"),/*#__PURE__*/e.createElement("div",{className:"rc-modal-field"},/*#__PURE__*/e.createElement("strong",{className:"rc-modal-field-label"},"Description:"),/*#__PURE__*/e.createElement("span",{className:"rc-modal-field-value"},F.description)),/*#__PURE__*/e.createElement("div",{className:"rc-modal-field"},/*#__PURE__*/e.createElement("strong",{className:"rc-modal-field-label"},"Expiry Period:"),/*#__PURE__*/e.createElement("span",{className:"rc-modal-field-value"},F.expiry)),/*#__PURE__*/e.createElement("div",{className:"rc-modal-field"},/*#__PURE__*/e.createElement("strong",{className:"rc-modal-field-label"},"Collection Point:"),/*#__PURE__*/e.createElement("span",{className:"rc-modal-field-value"},F.collectionPoint)),/*#__PURE__*/e.createElement("div",{className:"rc-modal-field"},/*#__PURE__*/e.createElement("strong",{className:"rc-modal-field-label"},"Type:"),/*#__PURE__*/e.createElement("span",{className:"rc-badge "+("Mandatory"===F.type?"rc-badge-mandatory":"rc-badge-optional")},F.type))),/*#__PURE__*/e.createElement("section",{className:"rc-modal-section"},/*#__PURE__*/e.createElement("h3",{className:"rc-modal-section-title"},"Data Elements"),/*#__PURE__*/e.createElement("div",{className:"rc-elements-grid"},Array.from(F.dataElements.reduce(function(e,t){return e.set(t.label,t),e},new Map).values()).map(function(t){/*#__PURE__*/return e.createElement("div",{key:t.label,className:"rc-element-card"},/*#__PURE__*/e.createElement("strong",{className:"rc-element-title"},t.label),/*#__PURE__*/e.createElement("p",{className:"rc-element-description"},t.description))}))),/*#__PURE__*/e.createElement("section",{className:"rc-modal-section"},/*#__PURE__*/e.createElement("h3",{className:"rc-modal-section-title"},"Current Status"),/*#__PURE__*/e.createElement("div",{className:"rc-modal-status-item"},/*#__PURE__*/e.createElement("span",{className:"rc-modal-status-label"},"Shown to Data Principal:"),/*#__PURE__*/e.createElement("span",{className:"rc-status-pill "+(F.shownToPrincipal?"rc-status-yes":"rc-status-no")},F.shownToPrincipal?"Yes":"No")),/*#__PURE__*/e.createElement("div",{className:"rc-modal-status-item"},/*#__PURE__*/e.createElement("span",{className:"rc-modal-status-label"},"Consent Given:"),/*#__PURE__*/e.createElement("span",{className:"rc-status-pill "+(F.consented?"rc-status-yes":"rc-status-no")},"accepted"===F.consented?"Yes":"No"))))))),"Rights"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-content"},/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Your Data Rights"),/*#__PURE__*/e.createElement("p",{className:"rc-section-subtitle"},"You can access, correct, delete, or export your data."),/*#__PURE__*/e.createElement("div",{className:"rc-rights-actions"},/*#__PURE__*/e.createElement("button",{className:"rc-btn-danger",onClick:function(){return H(!0)}},"Request Data Deletion")),z&&/*#__PURE__*/e.createElement("div",{className:"rc-modal-overlay"},/*#__PURE__*/e.createElement("div",{className:"rc-modal rc-modal-small"},V?/*#__PURE__*/e.createElement("div",{className:"rc-modal-success"},/*#__PURE__*/e.createElement(s,{className:"rc-success-icon"}),/*#__PURE__*/e.createElement("h3",{className:"rc-modal-title"},"Request Submitted"),/*#__PURE__*/e.createElement("p",{className:"rc-modal-subtitle"},"Your data deletion request has been submitted successfully!")):/*#__PURE__*/e.createElement("div",{className:"rc-modal-content"},/*#__PURE__*/e.createElement("div",{className:"rc-warning-icon"},"⚠️"),/*#__PURE__*/e.createElement("h3",{className:"rc-modal-title"},"Confirm Data Deletion"),/*#__PURE__*/e.createElement("p",{className:"rc-modal-subtitle"},"Are you sure you want to request data deletion? This action cannot be undone."),/*#__PURE__*/e.createElement("div",{className:"rc-modal-actions"},/*#__PURE__*/e.createElement("button",{className:"rc-btn-danger",onClick:function(){K(!0),setTimeout(function(){H(!1)},1500)}},"Confirm Deletion"),/*#__PURE__*/e.createElement("button",{className:"rc-btn-secondary",onClick:function(){return H(!1)}},"Cancel")))))),"Transparency"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-content"},/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Transparency"),/*#__PURE__*/e.createElement("p",{className:"rc-section-subtitle"},"Learn how we collect, use, and protect your data"),/*#__PURE__*/e.createElement("p",{className:"rc-transparency-text"},"We collect your data to provide better services and comply with regulations. Your data is stored securely and used only for the purposes you've consented to.")),"Dpo"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-content"},/*#__PURE__*/e.createElement("div",{className:"rc-dpo-header"},/*#__PURE__*/e.createElement(c,{className:"rc-dpo-icon"}),/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Data Protection Officer (DPO) Contact")),/*#__PURE__*/e.createElement("p",{className:"rc-section-subtitle"},"Contact our DPO for data protection matters and privacy concerns"),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-content"},/*#__PURE__*/e.createElement("div",{className:"rc-dpo-left"},/*#__PURE__*/e.createElement("div",{className:"rc-dpo-item"},/*#__PURE__*/e.createElement(c,{className:"rc-dpo-item-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Name"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},null==f?void 0:f.full_name))),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-item"},/*#__PURE__*/e.createElement(o,{className:"rc-dpo-item-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Email"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},null==f?void 0:f.email))),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-item"},/*#__PURE__*/e.createElement(m,{className:"rc-dpo-item-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Appointment Date"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},null==f?void 0:f.appointment_date)))),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-right"},/*#__PURE__*/e.createElement("div",{className:"rc-dpo-info-item"},/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Qualifications"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},null==f?void 0:f.qualifications)),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-info-item"},/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Responsibilities"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},null==f?void 0:f.responsibilities)),/*#__PURE__*/e.createElement("div",{className:"rc-dpo-info-item"},/*#__PURE__*/e.createElement(m,{className:"rc-dpo-time-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-dpo-label"},"Working Hours"),/*#__PURE__*/e.createElement("span",{className:"rc-dpo-value"},"Monday - Friday, 9:00 AM - 5:00 PM"))),/*#__PURE__*/e.createElement("div",{className:"rc-response-box"},/*#__PURE__*/e.createElement("h4",{className:"rc-response-title"},"Response Time"),/*#__PURE__*/e.createElement("p",{className:"rc-response-text"},"We aim to respond to all privacy inquiries within 30 days as per regulatory requirements."))))),"Nominee"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-section-container"},/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Appoint Nominee"),/*#__PURE__*/e.createElement("p",{className:"rc-section-subtitle"},"Appoint someone to manage your data rights on your behalf"),/*#__PURE__*/e.createElement("div",{className:"rc-nominee-warning"},/*#__PURE__*/e.createElement("div",{className:"rc-warning-icon"},"⚠️"),/*#__PURE__*/e.createElement("p",null,"Your nominee will be able to exercise all data rights on your behalf.")),D&&!k?/*#__PURE__*/e.createElement("div",{className:"rc-nominee-details-grid"},/*#__PURE__*/e.createElement("div",{className:"rc-nominee-item"},/*#__PURE__*/e.createElement(c,{className:"rc-nominee-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-nominee-label"},"Name"),/*#__PURE__*/e.createElement("span",{className:"rc-nominee-value"},D.nominee_name))),/*#__PURE__*/e.createElement("div",{className:"rc-nominee-item"},/*#__PURE__*/e.createElement(c,{className:"rc-nominee-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-nominee-label"},"Relationship"),/*#__PURE__*/e.createElement("span",{className:"rc-nominee-value"},D.relationship))),/*#__PURE__*/e.createElement("div",{className:"rc-nominee-item"},/*#__PURE__*/e.createElement(o,{className:"rc-nominee-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-nominee-label"},"Email"),/*#__PURE__*/e.createElement("span",{className:"rc-nominee-value"},D.nominee_email))),/*#__PURE__*/e.createElement("div",{className:"rc-nominee-item"},/*#__PURE__*/e.createElement(m,{className:"rc-nominee-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-nominee-label"},"Mobile"),/*#__PURE__*/e.createElement("span",{className:"rc-nominee-value"},D.nominee_mobile))),D.purpose_of_appointment&&/*#__PURE__*/e.createElement("div",{className:"rc-nominee-item rc-nominee-fullwidth"},/*#__PURE__*/e.createElement(r,{className:"rc-nominee-icon"}),/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("span",{className:"rc-nominee-label"},"Purpose of Appointment"),/*#__PURE__*/e.createElement("span",{className:"rc-nominee-value"},D.purpose_of_appointment))),/*#__PURE__*/e.createElement("div",{className:"rc-nominee-actions-fullwidth"},/*#__PURE__*/e.createElement("button",{className:"rc-btn-primary",onClick:function(){w(!0)}},"Edit"),/*#__PURE__*/e.createElement("button",{className:"rc-btn-danger",onClick:function(){D&&fetch("/user_nominees/"+D.id,{method:"DELETE"}).then(function(){return g([])}).catch(console.error)}},"Delete"))):/*#__PURE__*/e.createElement("form",{className:"rc-nominee-form",onSubmit:function(e){e.preventDefault();var t=i({user_id:d},x);fetch(D&&k?"/user_nominees/"+D.id:"/user_nominees",{method:D&&k?"PUT":"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}).then(function(e){return e.json()}).then(function(e){g([e]),w(!1)}).catch(console.error)}},/*#__PURE__*/e.createElement("div",{className:"rc-form-row"},/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Name *"),/*#__PURE__*/e.createElement("input",{type:"text",className:"rc-form-input",placeholder:"Full name of nominee",value:x.nominee_name,onChange:function(e){return P(i({},x,{nominee_name:e.target.value}))},required:!0})),/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Relationship *"),/*#__PURE__*/e.createElement("select",{className:"rc-form-select",value:x.relationship,onChange:function(e){return P(i({},x,{relationship:e.target.value}))},required:!0},/*#__PURE__*/e.createElement("option",{value:""},"Select relationship"),/*#__PURE__*/e.createElement("option",null,"Spouse"),/*#__PURE__*/e.createElement("option",null,"Parent"),/*#__PURE__*/e.createElement("option",null,"Child"),/*#__PURE__*/e.createElement("option",null,"Sibling"),/*#__PURE__*/e.createElement("option",null,"Other")))),/*#__PURE__*/e.createElement("div",{className:"rc-form-row"},/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Email *"),/*#__PURE__*/e.createElement("input",{type:"email",className:"rc-form-input",placeholder:"nominee@example.com",value:x.nominee_email,onChange:function(e){return P(i({},x,{nominee_email:e.target.value}))},required:!0})),/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Mobile Number *"),/*#__PURE__*/e.createElement("input",{type:"tel",className:"rc-form-input",placeholder:"+1234567890",value:x.nominee_mobile,onChange:function(e){return P(i({},x,{nominee_mobile:e.target.value}))},required:!0}))),/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Purpose of Appointment"),/*#__PURE__*/e.createElement("textarea",{className:"rc-form-textarea",placeholder:"Explain why you are appointing this nominee",rows:"4",value:x.purpose_of_appointment,onChange:function(e){return P(i({},x,{purpose_of_appointment:e.target.value}))}})),/*#__PURE__*/e.createElement("div",{className:"rc-form-actions"},/*#__PURE__*/e.createElement("button",{type:"submit",className:"rc-btn-primary"},k?"Update Nominee":"Send Verification Code"),k&&/*#__PURE__*/e.createElement("button",{type:"button",className:"rc-btn-secondary",onClick:function(){return w(!1)}},"Cancel")))),"Grievance"===E&&/*#__PURE__*/e.createElement("div",{className:"rc-content"},/*#__PURE__*/e.createElement("div",{className:"rc-section-header"},/*#__PURE__*/e.createElement("div",null,/*#__PURE__*/e.createElement("h2",{className:"rc-section-title"},"Grievance Tickets"),/*#__PURE__*/e.createElement("p",{className:"rc-section-subtitle"},"Submit privacy concerns or view your existing tickets")),/*#__PURE__*/e.createElement("button",{className:"rc-btn-primary",onClick:function(){return $(!Z)}},"Create New Ticket")),Z&&/*#__PURE__*/e.createElement("form",{className:"rc-grievance-form",onSubmit:function(e){e.preventDefault(),fetch(u+"/grievance_tickets",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({client_user_id:d,subject:q.subject,category:q.category,description:q.description})}).then(function(e){return e.json()}).then(function(e){S(function(t){return[e].concat(t)}),O(!1),A({subject:"",category:"",description:""})}).catch(console.error)}},/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Subject *"),/*#__PURE__*/e.createElement("input",{name:"subject",type:"text",className:"rc-form-input",placeholder:"Brief description of your concern",value:q.subject,onChange:function(e){return A(i({},q,{subject:e.target.value}))},required:!0})),/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Category *"),/*#__PURE__*/e.createElement("select",{name:"category",className:"rc-form-select",value:q.category,onChange:function(e){return A(i({},q,{category:e.target.value}))},required:!0},/*#__PURE__*/e.createElement("option",{value:""},"Select category"),/*#__PURE__*/e.createElement("option",{value:"Privacy Concern"},"Privacy Concern"),/*#__PURE__*/e.createElement("option",{value:"Data Access"},"Data Access"),/*#__PURE__*/e.createElement("option",{value:"Other"},"Other"))),/*#__PURE__*/e.createElement("div",{className:"rc-form-group"},/*#__PURE__*/e.createElement("label",{className:"rc-form-label"},"Description *"),/*#__PURE__*/e.createElement("textarea",{name:"description",className:"rc-form-textarea",placeholder:"Detailed description of your concern or request",rows:"4",value:q.description,onChange:function(e){return A(i({},q,{description:e.target.value}))},required:!0})),/*#__PURE__*/e.createElement("div",{className:"rc-form-actions"},/*#__PURE__*/e.createElement("button",{type:"submit",className:"rc-btn-primary"},"Submit Ticket"),/*#__PURE__*/e.createElement("button",{type:"button",className:"rc-btn-secondary",onClick:function(){return $(!1)}},"Cancel"))),/*#__PURE__*/e.createElement("div",{className:"rc-tickets-section"},/*#__PURE__*/e.createElement("h3",{className:"rc-tickets-title"},"Your Tickets"),0===j.length?/*#__PURE__*/e.createElement("div",{className:"rc-empty-state"},/*#__PURE__*/e.createElement("p",null,"No tickets found. Create your first grievance ticket above.")):/*#__PURE__*/e.createElement("div",{className:"rc-ticket-list"},j.map(function(t,a){/*#__PURE__*/return e.createElement("div",{key:a,className:"rc-ticket-item"},/*#__PURE__*/e.createElement("div",{className:"rc-ticket-header"},/*#__PURE__*/e.createElement("h4",{className:"rc-ticket-subject"},t.subject),/*#__PURE__*/e.createElement("span",{className:"rc-ticket-status"},"Open")),/*#__PURE__*/e.createElement("p",{className:"rc-ticket-description"},t.description))})))))}export{N as RightCenter,E as TruConsent,p as TruConsentModal,p as default};
//# sourceMappingURL=index.esm.js.map