Fix: Phone Input Filter

gatsby-config.js

@@ -15,7 +15,7 @@ module.exports = {
       open: true,
       discord: false,
       rsvp: true,
-      schedule: true,
+      schedule: false,
       sponsors: false,
     },
   },

src/components/Navigation/index.jsx

@@ -136,15 +136,15 @@ export default function Navigation({ noNav }) {
             </Button>
             {site.siteMetadata.featureFlags.mlh && (
               <a
-                href='https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2023-season&utm_content=white'
+                href='https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white'
                 className={styles.bannerContainer}
                 rel='noreferrer noopenner'
                 target='_blank'
                 {...srProps}
               >
                 <img
-                  src='https://s3.amazonaws.com/logged-assets/trust-badge/2023/mlh-trust-badge-2023-white.svg'
-                  alt='Major League Hacking 2023 Hackathon Season'
+                  src='https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg'
+                  alt='Major League Hacking 2024 Hackathon Season'
                   className={styles.banner}
                 />
               </a>

src/sections/Application/Demography/index.jsx

@@ -22,6 +22,8 @@ export default function Demography() {
           <FormField index='10' />
         </div>
         <FormField index='11' />
+        <FormField index='19' /> 
+        <FormField index='20' />
       </div>
     </fieldset>
   );

src/sections/Application/Form/FormContext.jsx

@@ -204,7 +204,6 @@ export function FormProvider({ children }) {
       mlh_share: false,
       mlh_email: false,
       htv_consent: false,
-      htv_vaccination: false,
     },
   });
 

src/sections/Application/Personal/index.jsx

@@ -8,6 +8,10 @@ import './Personal.module.scss';
 export default function Personal({ userInfo }) {
   const { formInfo, setFormState } = useForm();
 
+  const validator = (value) => {
+    return /[0-9]{3}[- ]?[0-9]{3}[- ]?[0-9]{4}/.test(value)
+  }
+
   useEffect(() => {
     const [fn, sn, email] = formInfo.questions.slice(0, 3);
     setFormState(_ => ({
@@ -19,7 +23,7 @@ export default function Personal({ userInfo }) {
         [email.id]: userInfo.email,
       },
     }));
-  }, [ formInfo.questions, userInfo, setFormState ]);
+  }, [formInfo.questions, userInfo, setFormState]);
 
   return (
     <fieldset className={fieldset}>
@@ -44,12 +48,13 @@ export default function Personal({ userInfo }) {
         <FormField
           index='2'
           fieldProps={{
-            description: 'For any institutional email, do check your spam for the confirmation',
+            description: 'For institutional emails, please check your spam for the confirmation email',
             disabled: true,
             readOnly: true,
           }}
         />
         <FormField
+          validator={validator}
           fieldProps={{
             placeholder: 'e.g. +1-4162878872',
           }}

src/sections/Application/SkillConfidence/SkillConfidence.module.scss

@@ -0,0 +1,12 @@
+.upload {
+  padding-top: 2rem;
+}
+
+.upload__layout {
+  & label {
+    font-size: 0.9rem;
+    right: 0;
+    left: 0;
+    top: 0;
+  }
+}

src/sections/Application/SkillConfidence/index.jsx

@@ -0,0 +1,33 @@
+import Text from '@htv/ui-kit/components/Text';
+
+import { fieldset, legend, layout, two_col } from '../Application.module.scss';
+import { FormField } from '../Form/FormContext';
+
+export default function SkillConfidence() {
+  return (
+    <fieldset className={fieldset}>
+      <Text className={legend} type='body1' font='secondary' as='legend' >
+        Rate Your Confidence in the Following
+      </Text>
+
+      <div className={layout}>
+        <div className={two_col}>
+        <FormField index='25' />
+        <FormField index='26' />
+        </div>
+        <div className={two_col}>
+        <FormField index='27' />
+        <FormField index='28' />
+        </div>
+        <div className={two_col}>
+        <FormField index='21' />
+        <FormField index='22' />
+        </div>
+        <div className={two_col}>
+        <FormField index='23' />
+        <FormField index='24' />
+        </div>
+      </div>
+    </fieldset>
+  );
+}

src/sections/Application/index.jsx

@@ -7,7 +7,7 @@ import Mlh from './Mlh';
 import Personal from './Personal';
 import School from './School';
 import General from './General';
-import Covid from './Covid';
+import SkillConfidence from './SkillConfidence';
 import { useGet } from 'restful-react';
 
 export default function ApplicationForm() {
@@ -23,8 +23,8 @@ export default function ApplicationForm() {
         <School />
         <Demography />
         <Experience />
+        <SkillConfidence />
         <General />
-        <Covid />
         <Mlh />
         <Consent />
       </Form>