workwithusfix

frontend/src/components/shared/JobForm.jsx

@@ -13,8 +13,6 @@ import HashPositions from './HashPositions';
 import ReCAPTCHA from 'react-google-recaptcha';
 import axios from 'axios';
 
-const api_url = process.env.REACT_APP_API_URL;
-
 export default function JobForm(props) {
   const [sucMsg, setSucMsg] = useState(false);
   const captchaRef = useRef(null);
@@ -53,8 +51,6 @@ export default function JobForm(props) {
     });
   }
 
-
-
   useEffect(() => {
     if (jobForm.file !== '') {
       setErrorMsg('');
@@ -92,11 +88,7 @@ export default function JobForm(props) {
             initialValues={jobForm}
             validationSchema={validationSchema}
             onChange={changeFormHandler}
-            onSubmit={values => {
-
-              setSucMsg(false);
-
-              //prep file
+            onSubmit={async values => {
               const prepFile = async file => {
                 if (file.size >= 2000000) {
                   setErrorMsg('File too large!');
@@ -106,8 +98,8 @@ export default function JobForm(props) {
                   return base64;
                 }
               };
-              //convert file
               const convertBase64 = file => {
+                //console.log(file);
                 return new Promise((resolve, reject) => {
                   const fileReader = new FileReader();
 
@@ -121,42 +113,63 @@ export default function JobForm(props) {
                   };
                 });
               };
+              if (
+                selectedPosition === '' ||
+                (otherInputState === false && values.other === '')
+              )
+                setErrorMsgPosition('Position is Required');
+              else {
+                setErrorMsgPosition('');
+                if (jobForm.file === '') {
+                  setErrorMsg('CV is Required');
+                } else {
+                  setErrorMsg('');
+                  if (jobForm.file.size >= 2000000) {
+                    setErrorMsg('File too large!');
+                  } else {
+                    const file = {
+                      filename: 'CV.pdf',
+                      data: jobForm.file,
+                    };
 
-              let data = {};
+                    const token = captchaRef.current.getValue();
+                    captchaRef.current.reset();
+                    if (token.length === 0) {
+                      setSucMsg(true);
+                      setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+                    } else {
+                      await axios
+                        .post(`${process.env.REACT_APP_CAPTCHA_API}/verify-token`, {
+                          token,
+                        })
+                        .then(res => {
+                          setSucMsg(true);
+                          if (res.data.data.success) {
+                            setMsgText('Submission Succesful! Thank you!');
 
-              const fetchData = async () => {
-                axios.get(`${api_url}/api/job-submissions?filters[Email][$eq]=${values.email}`)
-                  .then((res) => {
-                   data = res.data.data[0];
-                   console.log(data);
-                   const submitDate = new Date(data.attributes.SubmitDate);
-                   const now = new Date();
-                   if ((now.getMonth() - submitDate.getMonth()) < 1)
-                   {
-                    setErrorMsg('You Already sent an email');
-                    return false
-                   }
-                  else {
-                    
-                 fetch(`${api_url}/api/job-submissions/${data.id}`, {
-                    method: "PUT",
-                    headers: {
-                        "Content-type": "application/json; charset=UTF-8",
-                    },
-                    body: JSON.stringify({
-                      data: {
-                        SubmitDate: now,
+                            props.mg.messages.create('dilig.net', {
+                              from: `${values.firstName} ${values.lastName} <${values.email}>`,
+                              to: ['hr@dilig.net'],
+                              subject: 'Applying for a position',
+                              text: `Email: ${values.email}, Position:${values.position} ${values.other}, Cover letter: ${values.coverLetter}, Link: ${values.link} `,
+                              html: `<p>Email: ${values.email}</p><p>Position: ${selectedPosition} ${values.other}</p><p>Cover letter: ${values.coverLetter}</p><p>Link (optional): ${values.link}</p>`,
+                              attachment: file,
+                            });
+                          } else
+                            setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+                        })
+                        .catch(error => {
+                          console.log(error);
+                        });
                     }
                   }
                 }
-                
-                
               }
               ReactGA.event('contact', {
                 category: 'Contact',
                 action: 'Job application',
               });
-            })}}}
+            }}
           >
             {props => (
               <Form onSubmit={props.handleSubmit}>

frontend/src/pages/WorkWithUs.jsx

@@ -32,7 +32,7 @@ const strapiPopulate = [
   'WhyWork.img',
   'Stats',
   'SucessParagraph',
-  'Spec',
+  'Specs',
   'Download',
   'OfficeImg',
   'WorkTogether',
@@ -189,35 +189,35 @@ const WorkWithUs = () => {
                 <div className="flex flex-col sm:flex-row gap-[48px] mx-auto justify-center z-10 opacity-100 font-semibold">
                   <div className="flex flex-col gap-32p sm:mb-8">
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[0].title}
+                      {data.Specs[0].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[1].title}
+                      {data.Specs[1].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[2].title}
+                      {data.Specs[2].text}
                     </div>
                   </div>
                   <div className="flex flex-col gap-32p sm:mt-8">
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[3].title}
+                      {data.Specs[3].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[4].title}
+                      {data.Specs[4].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[5].title}
+                      {data.Specs[5].text}
                     </div>
                   </div>
                   <div className="flex flex-col gap-32p sm:mb-8">
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[6].title}
+                      {data.Specs[6].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[7].title}
+                      {data.Specs[7].text}
                     </div>
                     <div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
-                      {data.Spec[8].title}
+                      {data.Specs[8].text}
                     </div>
                   </div>
                 </div>