Merge pull request #185 from GSG-G8/183-complete-availability

update the availability form Page

client/src/components/application/NonlinearStepper/GeneralInfo.js

@@ -1,21 +1,29 @@
 import React from 'react';
-import { Radio, FormControlLabel, RadioGroup } from '@material-ui/core';
+import {
+  Radio,
+  FormControlLabel,
+  RadioGroup,
+  TextareaAutosize,
+} from '@material-ui/core';
 import PropTypes from 'prop-types';
 import InputText from '../../common/TextField';
 import SelectBox from '../SelectBox';
 import Typography from '../../common/Typography';
+import selectBoxQuestions from './questions';
 import { GeneralInfoStyles } from './style';
 
 const GereralInfos = ({ handleFormInput, formValues, errorMsg }) => {
   const classes = GeneralInfoStyles();
-  const GazaAreas = [
-    'North of Gaza Strip',
-    'Gaza City',
-    'Middle Area of Gaza',
-    'Khan Younis',
-    'Rafah',
-  ];
-  const KhalilAreas = ['Old Town', 'New Town'];
+  const {
+    GazaAreas,
+    GazaUniversities,
+    KhalilUniversities,
+    advertisement,
+    codeExperience,
+    primaryMotivationForm,
+    KhalilAreas,
+  } = selectBoxQuestions;
+
   return (
     <div className="availability">
       <div className={classes.gender}>
@@ -55,6 +63,23 @@ const GereralInfos = ({ handleFormInput, formValues, errorMsg }) => {
         isError={errorMsg.includes('Full Name is required')}
         message="ex:- Sam Smith"
       />
+
+      <TextareaAutosize
+        className={` nonlinearSelect ${classes.textArea}`}
+        label="Motivation"
+        name="motivation"
+        placeholder="What is your motivation for joining the Code Academy?        
+        - Tell us 
+        - in your own words 
+        - about your background and why you want to be considered for this program.             
+        - This is your opportunity to tell your story and make your application unique.                          
+        - Please write at least 5 sentences"
+        aria-label="minimum height"
+        onChange={handleFormInput}
+        rowsMin={11}
+        value={formValues.motivation}
+        onError={errorMsg.includes('Insert motivation')}
+      />
       <InputText
         className="nonlinearSelect"
         id="mobID"
@@ -87,6 +112,66 @@ const GereralInfos = ({ handleFormInput, formValues, errorMsg }) => {
         value={formValues.address}
         isError={errorMsg.includes('Address is required')}
       />
+      <SelectBox
+        className="nonlinearSelect"
+        label="university"
+        name="university"
+        items={
+          formValues.location === 'gaza' ? GazaUniversities : KhalilUniversities
+        }
+        setVal={handleFormInput}
+        value={formValues.university}
+        isError={errorMsg.includes('Select your university')}
+      />
+      <InputText
+        className="nonlinearSelect"
+        value={formValues.specialization}
+        placeholder="If you went to university, what was your specialization?"
+        label="specialization"
+        name="specialization"
+        onChange={handleFormInput}
+        isError={errorMsg.includes('Insert your Specialization')}
+        message="(If you didn't go to university, just write N/A) ?"
+      />
+      <SelectBox
+        className="nonlinearSelect"
+        label="Coding Experience"
+        name="codingExperience"
+        items={codeExperience}
+        setVal={handleFormInput}
+        value={formValues.codingExperience}
+        isError={errorMsg.includes('Select your coding experience')}
+      />
+      <SelectBox
+        className="nonlinearSelect"
+        label="Primary Motivation"
+        name="primaryMotivation"
+        items={primaryMotivationForm}
+        setVal={handleFormInput}
+        value={formValues.primaryMotivation}
+        isError={errorMsg.includes('Select your primary motivation first')}
+      />
+      <SelectBox
+        className="nonlinearSelect"
+        label="How did you hear about the Code Academy"
+        name="caReading"
+        items={advertisement}
+        setVal={handleFormInput}
+        value={formValues.caReading}
+        isError={errorMsg.includes('Select how did you hear about Us first')}
+      />
+      <InputText
+        className="nonlinearSelect"
+        value={formValues.cvLink}
+        placeholder="Link for latest version of your CV in English"
+        label="CV Link"
+        name="cvLink"
+        onChange={handleFormInput}
+        isError={
+          errorMsg.includes('Insert Your Cv Link first') ||
+          errorMsg.includes('Enter correct url!')
+        }
+      />
     </div>
   );
 };
@@ -101,10 +186,17 @@ GereralInfos.propTypes = {
   formValues: PropTypes.shape({
     gender: PropTypes.string,
     fullName: PropTypes.string,
+    motivation: PropTypes.string,
     mobileNumber: PropTypes.string,
     age: PropTypes.string,
     address: PropTypes.string,
     location: PropTypes.string,
+    university: PropTypes.string,
+    specialization: PropTypes.string,
+    codingExperience: PropTypes.string,
+    primaryMotivation: PropTypes.string,
+    caReading: PropTypes.string,
+    cvLink: PropTypes.string,
   }),
   errorMsg: PropTypes.arrayOf(PropTypes.string),
 };

client/src/components/application/NonlinearStepper/ProInfos.js

@@ -56,7 +56,7 @@ const ProInfos = ({ handleFormInput, formValues, errorMsg }) => (
       name="jobTitle"
       message="Write [No] if you are not employed"
       onChange={handleFormInput}
-      isError={errorMsg.includes(`if you don't have job just write [ No ]`)}
+      isError={errorMsg.includes(`if you don't have job just write N/A`)}
     />
   </div>
 );

client/src/components/application/NonlinearStepper/index.js

@@ -90,6 +90,13 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
       englishSpeaking,
       employmentStatus,
       jobTitle,
+      motivation,
+      specialization,
+      university,
+      codingExperience,
+      primaryMotivation,
+      caReading,
+      cvLink,
     } = formValues;
     try {
       await generalInfosValidation(values);
@@ -105,6 +112,13 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
           englishSpeaking,
           employmentStatus,
           jobTitle,
+          motivation,
+          specialization,
+          university,
+          codingExperience,
+          primaryMotivation,
+          caReading,
+          cvLink,
         });
         history.push('/accounts');
       } catch (error) {

client/src/components/application/NonlinearStepper/questions.js

@@ -0,0 +1,66 @@
+const GazaAreas = [
+  'North of Gaza Strip',
+  'Gaza City',
+  'Middle Area of Gaza',
+  'Khan Younis',
+  'Rafah',
+];
+const GazaUniversities = [
+  "I didn't go to university",
+  'Islamic University of Gaza',
+  'Al Azhar University',
+  'Palestine University',
+  'UCAS',
+  'Al Quds Open University',
+  'University College of Science and Technology',
+  'Al Aqsa University',
+  'Gaza University',
+  'I went to university outside of Gaza',
+];
+
+const KhalilUniversities = [
+  "I didn't go to university",
+  'Palestine Polytechnic University (PPU)',
+  'Hebron University',
+  'Bethlehem University',
+  'Birzeit University',
+  'Al Najah University',
+  'Arab American University',
+  'Al Quds Open University',
+  'Al Quds University',
+  'Palestine Technical University - Kadoori',
+  'IT College - Vocational Center',
+  'University outside of Palestine',
+  'Other',
+];
+const advertisement = [
+  'Gaza Sky Geeks Social Media (Facebook, Twitter, Instagram)',
+  'Friend or family member who is a Code Academy graduate',
+  'I came to a GSG workshop or event (such as “Coding for Everyone”)',
+  'Online / browsing the web',
+  'Jobs.ps',
+  'Other',
+];
+const codeExperience = [
+  'No Experience',
+  'Some experience as hobby',
+  'A lot of experience as a hobby',
+  'I have a university degree in Computer Science or another related field',
+  'I have had a paid job as a developer.',
+];
+const primaryMotivationForm = [
+  'I want to gain employment/earn income as a developer.',
+  "I want to learn something new - I don't know if I want a coding career",
+  'I want to be part of the GSG and Code Academy community',
+];
+const KhalilAreas = ['Old Town', 'New Town'];
+
+export default {
+  GazaAreas,
+  GazaUniversities,
+  KhalilUniversities,
+  advertisement,
+  codeExperience,
+  primaryMotivationForm,
+  KhalilAreas,
+};

client/src/components/application/NonlinearStepper/style.js

@@ -38,6 +38,10 @@ const GeneralInfoStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
   },
+  textArea: {
+    outlineColor: '#ed6d23',
+    marginLeft: '1rem',
+  },
 }));
 
 export { useStyles, GeneralInfoStyles };

client/src/utils/application/nLinearStepperValidation.js

@@ -9,6 +9,29 @@ const generalInfosSchema = yup.object().shape({
     .required('Mobile Number is required'),
   age: yup.string().required('Age is required').trim(),
   address: yup.string().required('Address is required'),
+  motivation: yup.string().required(`Insert motivation`).trim(),
+  specialization: yup.string().required(`Insert your Specialization`).trim(),
+  university: yup.string().required(`Select your university`).trim(),
+  codingExperience: yup
+    .string()
+    .required(`Select your coding experience`)
+    .trim(),
+  primaryMotivation: yup
+    .string()
+    .required(`Select your primary motivation first`)
+    .trim(),
+  caReading: yup
+    .string()
+    .required(`Select how did you hear about Us first`)
+    .trim(),
+  cvLink: yup
+    .string()
+    .matches(
+      /^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
+      'Enter correct url!'
+    )
+    .required(`Insert Your Cv Link first`)
+    .trim(),
 });
 
 const prosInfoSchema = yup.object().shape({