{"version":3,"file":"component---src-pages-contact-us-tsx-1605745361cf751b421d.js","mappings":"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","sources":["webpack://qebal-website/./src/pages/contact-us.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport \"../styles/main.scss\";\r\nimport { useState } from \"react\"\r\nimport { useForm } from \"react-hook-form\";\r\nimport { Helmet } from \"react-helmet\";\r\nimport { Navigation, Content } from \"../components\";\r\n\r\ninterface Inputs {\r\n    name: string;\r\n    email: string;\r\n    company: string;\r\n    telephone: string;\r\n    comments: string;\r\n    source: string;\r\n};\r\n\r\nenum InputType {\r\n    input,\r\n    text\r\n}\r\ninterface FIProps {\r\n    id: string;\r\n    label: string;\r\n    register: any;//UseFormRegister<Inputs>;\r\n    required?: boolean;\r\n    inputType?: InputType;\r\n    errors: any;\r\n}\r\n\r\nconst Input = (props: FIProps) => {\r\n    const properties = props.required ? { required: true } : {};\r\n\r\n    switch (props.inputType) {\r\n        case InputType.text:\r\n            return <textarea {...props.register(props.id, properties)} type=\"text\" name={props.id} id={`contact_${props.id}`} className=\"form-control\" rows={3}></textarea>;\r\n        case InputType.input:\r\n        default:\r\n            return <input {...props.register(props.id, properties)} type=\"text\" name={props.id} id={`contact_${props.id}`} className=\"form-control\" />;\r\n\r\n    };\r\n}\r\n\r\nconst FormInput = (props: FIProps) => {\r\n    return <div className=\"row mb-2\">\r\n        <label htmlFor={`contact_${props.id}`} className=\"form-label col-12 col-md-4 py-md-2\">\r\n            {props.label}\r\n            {props.required &&\r\n                <span className=\"ms-2 text-info align-end\">(Required)</span>\r\n            }\r\n        </label>\r\n        <div className=\"col-12 col-md-8 px-md-0\">\r\n            <Input {...props} />\r\n            {props.errors[props.id] && <div className=\"mt-2 text-danger font-bold\">This field is required</div>}\r\n        </div>\r\n    </div>;\r\n};\r\n\r\nconst ContactUs = () => {\r\n    const [pending, setPending] = useState(false);\r\n    const [submitted, setSubmitted] = useState(false);\r\n    const [problem, setProblem] = useState<string>(\"\");\r\n    const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();\r\n\r\n    const onSubmit = (data: Inputs) => {\r\n        setProblem(\"\");\r\n        setPending(true);\r\n\r\n        try {\r\n            fetch(\"https://api.viewpointbi.com/contact\", {\r\n                method: \"POST\",\r\n                mode: \"cors\",\r\n                cache: \"no-cache\",\r\n                headers: {\r\n                    \"Content-Type\": \"application/json\",\r\n                    \"Subscription-Key\": \"8b376fdb63994d408ba8247e59130975\"\r\n                },\r\n                body: JSON.stringify(data)\r\n            })\r\n                .then((response) => {\r\n                    if (response && response.ok) {\r\n                        setPending(false);\r\n                        setSubmitted(true);\r\n                    } else {\r\n                        setPending(false);\r\n                        setProblem(\"Could not submit form.\");\r\n                    }\r\n                })\r\n                .catch(error => {\r\n                    setPending(false);\r\n                    setProblem(error);\r\n                });\r\n        } catch (error) {\r\n            setPending(false);\r\n            setProblem(\"Could not submit form.\");\r\n        }\r\n    };\r\n\r\n    return (\r\n        <>\r\n            <Helmet title=\"Qebal / Contact us\" htmlAttributes={{ lang: 'en' }} />\r\n            <Navigation />\r\n            <Content hideContact>\r\n                <div className=\"container-lg\">\r\n\r\n                    <div className=\"row mb-4\">\r\n                        <div className=\"col-12 col-md-10 col-lg-8 px-4\">\r\n                            <h1>Contact us</h1>\r\n\r\n                            <p>\r\n                                To find out more about Qebal, or for a demo of our HR analytics platform,\r\n                                please provide your details below.\r\n                            </p>\r\n                            <p>\r\n                                Telephone <strong>+44 (0)208 1333 555</strong>\r\n                            </p>\r\n                            <p>\r\n                                Email <strong><a className=\"hidearrow\" href=\"mailto:hello@qebal.com\">hello@qebal.com</a></strong>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <form onSubmit={handleSubmit(onSubmit)}>\r\n                        <fieldset disabled={pending || submitted}>\r\n\r\n                            <div className=\"row\">\r\n                                <div className=\"col-12 col-lg-10 col-xl-8 px-2\">\r\n\r\n                                    <div className=\"border fs-6\">\r\n                                        <input {...register(\"source\")} type=\"hidden\" value=\"Qebal Contact\" name=\"source\" id=\"contact_source\" />\r\n\r\n                                        {!submitted &&\r\n                                            <div className=\"px-4 pt-3 pb-1 bg-white\">\r\n                                                <FormInput id=\"name\" label=\"Your name\" register={register} errors={errors} />\r\n                                                <FormInput id=\"email\" label=\"Email address\" required register={register} errors={errors} />\r\n                                                <FormInput id=\"company\" label=\"Company name\" register={register} errors={errors} />\r\n                                                <FormInput id=\"telephone\" label=\"Contact telephone number\" inputType={InputType.input} register={register} errors={errors} />\r\n                                                <FormInput id=\"comments\" label=\"Any questions or comments\" inputType={InputType.text} register={register} errors={errors} />\r\n                                            </div>\r\n                                        }\r\n                                        <div className=\"px-4 py-3\">\r\n                                            {problem &&\r\n                                                <div className=\"mb-2\">\r\n                                                    Sorry, but we couldn&apos;t process your request.<br />\r\n                                                    Please try again, or contact us on <strong>+44(0)208&nbsp;1333&nbsp;555</strong> to talk to us.\r\n                                                </div>\r\n                                            }\r\n\r\n                                            {!pending && !submitted &&\r\n                                                <button type=\"submit\" className=\"btn btn-primary\">Next</button>\r\n                                            }\r\n                                            {pending &&\r\n                                                <>One moment please...</>\r\n                                            }\r\n\r\n                                            {!pending && submitted &&\r\n                                                <div className=\"my-4\">\r\n                                                    <span className=\"fs-3\"><strong>Thank you for contacting us.</strong><br />We will be in touch soon.</span>\r\n                                                </div>\r\n                                            }\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                        </fieldset>\r\n                    </form>\r\n                    <p>&nbsp;</p>\r\n                    <p>&nbsp;</p>\r\n                    <p>&nbsp;</p>\r\n                </div>\r\n            </Content>\r\n        </>\r\n    );\r\n};\r\n\r\nexport default ContactUs;\r\n"],"names":["InputType","Input","props","properties","required","inputType","text","register","id","type","name","className","rows","input","FormInput","htmlFor","label","errors","useState","pending","setPending","submitted","setSubmitted","problem","setProblem","useForm","handleSubmit","formState","title","htmlAttributes","lang","hideContact","href","onSubmit","data","fetch","method","mode","cache","headers","body","JSON","stringify","then","response","ok","catch","error","disabled","value"],"sourceRoot":""}