import{h as e,r as s}from"./p-083180bf.js";import{i as t}from"./p-f8a09b0f.js";import{l as i,k as a,f as r,n}from"./p-a7fc1e02.js";import{d as o,q as l,F as c,i as d,o as p}from"./p-d0993bb9.js";import{c as m}from"./p-c1086930.js";import{g as u}from"./p-9ec99ced.js";import{c as f}from"./p-cef45012.js";import{E as h}from"./p-49b20dae.js";import{T as g}from"./p-c813ec64.js";import{V as y,S as x,a as b}from"./p-38c7775a.js";import{u as v}from"./p-3366b81e.js";const C=f({Wrapper:{display:"flex",flexDirection:"column",gap:"var(--sl-spacing-medium)",maxWidth:"550px"},HeaderContainer:{display:"flex",flexDirection:"column"},InputsContainer:{display:"flex",gap:"var(--sl-spacing-medium)",position:"relative",flexDirection:"column"},CodeInputContainer:{display:"flex",gap:"var(--sl-spacing-medium)"},CodeInput:{maxWidth:"40px","&::part(base)":{borderRadius:"4px !important"},"&::part(input)":{margin:"0",padding:"0 var(--sl-input-spacing-small)",fontSize:"var(--sl-font-size-large)"}},CodeInputError:{...h,maxWidth:"40px","&::part(base)":{borderRadius:"4px !important"},"&::part(input)":{margin:"0",padding:"0 var(--sl-input-spacing-small)",fontSize:"var(--sl-font-size-large)"}},ErrorText:{color:"var(--sqm-danger-color-text)",fontSize:"var(--sl-font-size-small)",margin:"0"},ContinueButton:{width:"100%",maxWidth:"100px"},FooterContainer:{display:"flex",flexDirection:"column"},SkeletonOne:{width:"50%",height:"16px"},SkeletonTwo:{width:"30%",height:"34px"},SkeletonThree:{width:"15%",height:"24px"}}),k=C.toString();function E(s){const{states:i,refs:a,callbacks:r,text:n}=s,o=t.formatMessage({id:"resendCodeText",defaultMessage:n.resendCodeText},{resendCodeLink:e("a",{href:"",style:{textDecoration:"underline",color:"inherit",cursor:"pointer"},onClick:e=>{e.preventDefault(),r.resendEmail()}},n.resendCodeLabel)}),l=t.formatMessage({id:"codeResentSuccessfully",defaultMessage:n.codeResentSuccessfullyText},{email:i.email}),c=i.verifyFailed?C.classes.CodeInputError:C.classes.CodeInput;return e("div",{part:"sqm-base"},e("style",{type:"text/css"},"\n:host {\n  display: block;\n}\n:host([hidden]): {\n  display: none;\n}\n\n\n",k),e("div",{class:C.classes.Wrapper},e("div",{class:C.classes.HeaderContainer},e(g,{type:"p"},t.formatMessage({id:"emailHeaderText",defaultMessage:i.verifyFailed?n.reverifyCodeHeaderText:n.verifyCodeHeaderText},{email:i.email}))),i.emailResent&&e("sqm-form-message",{type:"success",exportparts:"successalert-icon"},e("b",null,l)),e("div",{class:C.classes.InputsContainer},e("div",{ref:a.codeWrapperRef,class:C.classes.CodeInputContainer},e("sl-input",{class:c,name:"code"}),e("sl-input",{class:c,name:"code"}),e("sl-input",{class:c,name:"code"}),e("sl-input",{class:c,name:"code"}),e("sl-input",{class:c,name:"code"}),e("sl-input",{class:c,name:"code"})),i.verifyFailed&&e("p",{class:C.classes.ErrorText},n.invalidCodeText),e("sl-button",{class:C.classes.ContinueButton,onClick:r.submitCode,disabled:i.loading||i.initialiseLoading,loading:i.loading||i.initialiseLoading,exportparts:"base: primarybutton-base",type:"primary"},n.verifyText)),e("div",{class:C.classes.FooterContainer},e(g,{type:"p"},o))))}o.gql`
  mutation submitImpactPublisherEmail2FACode(
    $user: UserIdInput!
    $code: String!
  ) {
    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
      verifiedEmail
      accessKey
    }
  }
`;const j=class{constructor(e){s(this,e),this.verifyCodeHeaderText="Enter the code sent to {email} from our referral provider, impact.com.",this.reverifyCodeHeaderText="Enter the code sent to {email} from our referral provider, impact.com.",this.resendCodeText="Didn't receive your code? {resendCodeLink}",this.resendCodeLabel="Resend code",this.codeResentSuccessfullyText="Another code has been sent to {email}",this.invalidCodeText="Please check your code and try again. If you’re still having trouble, try resending your code.",this.verifyText="Verify",this.networkErrorMessage="An error occurred while verifying your email. Please refresh the page and try again.",n(this)}disconnectedCallback(){}getTextProps(){return u(this)}render(){const s=d()?function(e){const[s,t]=a(!1),i=p(b);return m({states:{initialiseLoading:!1,loading:!1,email:"test@example.com",emailResent:s,verifyFailed:!1},refs:{codeWrapperRef:()=>{}},callbacks:{resendEmail:async()=>t(!0),submitCode:async()=>i(!0)},text:e.getTextProps()},e.demoData||{},{arrayMerge:(e,s)=>s})}(this):function(e){i();const[s,t]=l(x),n=c(y),[o,d]=a(!1),[p,m]=a(!1),[u,f]=a(null),[h,g]=a(!1),[b,C]=a(!1),{initialized:k,verificationEmail:E,send:[j,{loading:w,errors:I}],verify:[S,{loading:R,errors:T}]}=v();r((()=>{if(!u)return;const e=u.querySelectorAll("sl-input"),s=Array.from(e).map((e=>e.shadowRoot.querySelector('input[name="code"]')));s.forEach(((e,t)=>{e.addEventListener("focus",(e=>{e.target.select()})),e.addEventListener("keydown",(e=>{"Backspace"===e.key&&""===e.target.value&&s[Math.max(0,t-1)].focus()})),e.addEventListener("input",(e=>{const i=e.data;if(i)if(t!==s.length-1){if(i.length>1){const a=i.slice(1);e.target.value=i.slice(0,1),s[t+1].dispatchEvent(new InputEvent("input",{inputType:"insertFromPaste",data:a}))}s[t+1].focus()}else e.target.value=i.slice(0,1)}))}))}),[u]);const z=async()=>{k&&(await j()?(o&&m(!0),d(!0)):C(!0))};return r((()=>{k&&(n?d(!0):z())}),[k]),{refs:{codeWrapperRef:f},states:{email:E,emailResent:p,resendError:I||T,initialiseLoading:!k,loading:w||R,verifyFailed:!!h},callbacks:{resendEmail:z,submitCode:async()=>{const s=u.querySelectorAll("sl-input"),i=Array.from(s).map((e=>e.shadowRoot.querySelector('input[name="code"]')));if(i.find((e=>!e.value)))return void g(!0);let a="";if(i.forEach((e=>{a=`${a}${e.value}`})),!k)return;g(!1);const r=await S(a);(null==r?void 0:r.success)?(e.onVerification(r.accessKey),t(!1),g(!1)):g(!0)}},text:e.getTextProps()}}(this);return e(E,Object.assign({},s))}};export{j as sqm_code_verification}