https://app.quicklyhire.com/static/js/3889.40d1f1b0.chunk.js

1"use strict";(self.webpackChunkquickly_hire_demo=self.webpackChunkquickly_hire_demo||[]).push([[3889],{3889:(e,s,t)=>{t.r(s),t.d(s,{default:()=>g});var a=t(65043),l=t(73216),n=t(91788),r=t(6890),i=t(3538),o=t(31759),c=t(68428),d=t(71264),m=t(75165),x=t(8729),u=t(39528),h=t(70579);const p=(0,r.Qg)(n.Cn,"adminAction");function f(){return(0,h.jsxs)("div",{className:"flex flex-col gap-4 p-6",children:[(0,h.jsx)("div",{className:"h-12 w-2/3 animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-4 w-full animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-4 w-5/6 animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-4 w-3/4 animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-4 w-full animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-4 w-2/3 animate-skeleton rounded-sm"}),(0,h.jsx)("div",{className:"h-10 w-36 animate-skeleton rounded-sm mt-4"})]})}const g=function(){const e=(0,l.Zp)(),{claims:s}=(0,x.w1)(),[t,n]=(0,a.useState)("Hello from Quickly Hire"),[r,g]=(0,a.useState)(""),[j,b]=(0,a.useState)('<p style="margin:0 0 16px">Hello there,</p>\n<p style="margin:0 0 16px">This is a preview of the email template chrome. Edit the content above and watch the preview update in real time.</p>'),[v,y]=(0,a.useState)(""),[N,w]=(0,a.useState)(!1),[k,E]=(0,a.useState)(""),[C,S]=(0,a.useState)(null),[T,H]=(0,a.useState)(""),A=(0,a.useRef)(null);(0,a.useEffect)(()=>{"admin"!==s.role&&"manager"!==s.role&&e("/dashboard")},[e,s]),(0,a.useEffect)(()=>{let e=!1;return(async()=>{try{const{data:s}=await p({type:"renderEmailPreview",section:"blocks"});e||S(s.blocks)}catch(s){e||H((null===s||void 0===s?void 0:s.message)||"Could not load insert blocks. The backend action may not be deployed yet.")}})(),()=>{e=!0}},[]);const P=(0,a.useCallback)(async(e,s,t)=>{w(!0),E("");try{const{data:a}=await p({type:"renderEmailPreview",section:"render",title:e,subject:s,content:t});y(a.html)}catch(a){E((null===a||void 0===a?void 0:a.message)||"Preview render failed. The backend action may not be deployed yet.")}finally{w(!1)}},[]),M=function(e,s){const t=(0,a.useRef)(null);return(0,a.useCallback)(function(){for(var a=arguments.length,l=new Array(a),n=0;n<a;n++)l[n]=arguments[n];clearTimeout(t.current),t.current=setTimeout(()=>e(...l),s)},[e,s])}(P,500);return(0,a.useEffect)(()=>{M(t,r,j)},[t,r,j]),(0,a.useEffect)(()=>{null!==C&&P(t,r,j)},[C]),(0,h.jsxs)(o.A,{padding:!1,children:[(0,h.jsx)(c.A,{title:"Email Harness"}),(0,h.jsxs)("div",{className:"px-5 lg:px-8 pt-6 pb-2 border-b border-border",children:[(0,h.jsx)("h2",{className:"text-lg font-semibold text-foreground mb-0.5",children:"Email Harness"}),(0,h.jsx)("p",{className:"text-foreground-secondary mb-4",children:"Preview any email design in the real template chrome."})]}),(0,h.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-0 lg:divide-x divide-border",children:[(0,h.jsxs)("div",{className:"px-5 lg:px-8 py-6 flex flex-col gap-5",children:[(0,h.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,h.jsx)("label",{className:"text-sm font-medium text-foreground-secondary",children:"Title"}),(0,h.jsx)("input",{className:u.jp,type:"text",placeholder:"Email heading shown in the template",value:t,onChange:e=>n(e.target.value)})]}),(0,h.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,h.jsxs)("label",{className:"text-sm font-medium text-foreground-secondary",children:["Subject"," ",(0,h.jsx)("span",{className:"font-normal text-foreground-muted",children:"(optional)"})]}),(0,h.jsx)("input",{className:u.jp,type:"text",placeholder:"Email subject line",value:r,onChange:e=>g(e.target.value)})]}),(0,h.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,h.jsxs)("div",{className:"flex items-center justify-between",children:[(0,h.jsx)("label",{className:"text-sm font-medium text-foreground-secondary",children:"Content HTML"}),(0,h.jsxs)("div",{className:"flex items-center gap-1 text-xs text-foreground-muted",children:[(0,h.jsx)(i.JiX,{className:"text-base"}),"raw HTML"]})]}),(0,h.jsx)("textarea",{ref:A,className:"".concat(u.jp," font-mono text-sm resize-y"),rows:16,spellCheck:!1,placeholder:"Paste or type your email body HTML here\u2026",value:j,onChange:e=>b(e.target.value)})]}),(0,h.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,h.jsx)("p",{className:"text-sm font-medium text-foreground-secondary",children:"Insert block at cursor"}),T&&(0,h.jsx)(d.A,{type:"warning",noMargin:!0,children:T}),(0,h.jsx)(m.tK,{className:"flex-wrap gap-3",children:[{label:"Paragraph",key:"paragraph"},{label:"Button",key:"button"},{label:"Details table",key:"details"},{label:"Featured box",key:"featured"},{label:"Footer",key:"footer"}].map(e=>{let{label:s,key:t}=e;return(0,h.jsx)(m.rm,{type:"button",disabled:!C,onClick:()=>C&&(e=>{const s=A.current;if(!s)return;const t=s.selectionStart,a=s.selectionEnd,l=j.slice(0,t),n=j.slice(a);b(l+e+n),requestAnimationFrame(()=>{s.focus();const a=t+e.length;s.setSelectionRange(a,a)})})(C[t]||""),children:s},t)})})]})]}),(0,h.jsxs)("div",{className:"px-5 lg:px-8 py-6 flex flex-col gap-3",children:[(0,h.jsxs)("div",{className:"flex items-center justify-between",children:[(0,h.jsx)("p",{className:"text-sm font-medium text-foreground-secondary",children:"Live preview"}),N&&(0,h.jsxs)("span",{className:"flex items-center gap-1.5 text-xs text-foreground-muted",children:[(0,h.jsx)(i.fmZ,{className:"animate-spin text-base"}),"Rendering\u2026"]})]}

1),k&&(0,h.jsx)(d.A,{type:"error",noMargin:!0,children:k}),(0,h.jsxs)("div",{className:"relative rounded-lg border border-border overflow-hidden min-h-[600px]",children:[N&&!v&&(0,h.jsx)(f,{}),N&&v&&(0,h.jsx)("div",{className:"absolute inset-0 z-10 pointer-events-none",children:(0,h.jsx)(f,{})}),v&&(0,h.jsx)("iframe",{title:"Email preview",sandbox:"",srcDoc:v,className:"w-full min-h-[600px] block border-none",style:{height:"700px"}}),!v&&!N&&!k&&(0,h.jsx)("div",{className:"flex items-center justify-center min-h-[600px] text-foreground-muted text-sm",children:"Preview will appear here"})]})]})]})]})}}}]);
2//# sourceMappingURL=3889.40d1f1b0.chunk.js.map