import React, { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { crm } from "onepage-kit"; const FORM_ID="29d011ad-6e78-49ca-9137-001a6d7836a9"; const POSITIONS=[ "Educator (TLEP Mentorenprogramm)", "Markt Analyst", "Educator", "Sonstiges", ]; export default function TLEP_Karriere_Modal() { const [modalOpen, setModalOpen]=useState(false); const [form, setForm]=useState({ firstName:"", lastName:"", email:"", phone:"", about:"", positions:[] }); const [status, setStatus]=useState("idle"); const togglePosition=(p)=> { setForm(prev=>({ ...prev, positions:prev.positions.includes(p) ? prev.positions.filter(x=>x !==p):[...prev.positions, p] })); } ; const handleSubmit=async(e)=> { e.preventDefault(); setStatus("sending"); try { await crm.submitForm({ formId:FORM_ID, data: { firstName:form.firstName, lastName:form.lastName, email:form.email, phone:form.phone, about:form.about, positions:form.positions.join(", ") } }); setStatus("done"); } catch(error) { setStatus("error"); } } ; return (

{ modalOpen && ( { if(e.target===e.currentTarget) setModalOpen(false) } } style= { { position:"fixed", inset:0, background:"rgba(0,0,0,.85)", display:"flex", alignItems:"center", justifyContent:"center", zIndex:99999, padding:"20px" } } > { status==="done" ? (

Vielen Dank !

Deine Anfrage wurde erfolgreich gesendet. Wir melden uns schnellstmöglich bei dir.

):(<>

TLEP Karriere

Vereinbare ein Gespräch und werde Teil von TLEP.

setForm({ ...form, firstName:e.target.value }) } /> setForm({ ...form, lastName:e.target.value }) } />

setForm({ ...form, email:e.target.value }) } /> setForm({ ...form, phone:e.target.value }) } />

setForm({

...form,

about:e.target.value
        })
}

/> <h4> Interessierte Rolle </h4> {
    POSITIONS.map(p=>(<label key= {
                p
            }

style= {
                    {

display:"block",

margin:"12px 0",

cursor:"pointer"

}
            }

> <input type="checkbox"

checked= {
                form.positions.includes(p)
            }

onChange= {
                ()=>togglePosition(p)
            }

/> {
                " "
            }

{
                p
            }

</label>))
}

{
    status==="error" && (<p style= {
                {
                color:"red"
            }
        }

> Fehler beim Senden. Bitte erneut versuchen. </p>)
}

<button type="submit"

style= {
        {

width:"100%",

marginTop:"25px",

padding:"16px",

background:"#D4AF37",

color:"#000",

border:"none",

borderRadius:"12px",

fontWeight:"800",

cursor:"pointer"

}
}

> {
    status==="sending"

?"Wird gesendet..."

:"Bewerbung absenden"

}

</button> </form> </>)
}

</motion.div> </motion.div>)
}

</AnimatePresence> </div>);

}

const inputStyle= {

width: "100%",

padding:"14px",

margin:"10px 0",

borderRadius:"10px",

border:"1px solid #333",

background:"#151515",

color:"#fff",

fontSize:"15px",

boxSizing:"border-box"

}

;</article></body></html>

Trader Showcase

Melde dich an, um mitzumachen