dev to main - phone number format change

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -36,6 +36,7 @@
     "react-helmet": "^6.1.0",
     "react-modal": "^3.16.1",
     "react-number-format": "^5.3.1",
+    "react-phone-number-input": "^3.4.9",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.21.1",
     "react-scripts": "^5.0.1",

src/features/Account/ManageAccountForm.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import {
   ErrorMessage,
@@ -101,7 +102,6 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
         try {
           const response = await Account.getSelf();
           const newAccountDetails = response.data.data;
-
           // Changed birthdate to age
           //newAccountDetails.age = date2input(newAccountDetails.age);
 
@@ -284,17 +284,31 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
         </>
       )}
 
-      <FastField
-        component={FormikElements.FormattedNumber}
-        label={CONSTANTS.PHONE_NUMBER_LABEL}
-        placeholder="+# (###) ###-####"
-        format="+# (###) ###-####"
-        name={'phoneNumber'}
-        required={true}
-        value={fp.values.phoneNumber}
-      />
-      <ErrorMessage component={FormikElements.Error} name="phoneNumber" />
+      {props.mode === ManageAccountModes.CREATE && (
+        <>
+          <FastField
+            component={FormikElements.PhoneNumberInput}
+            label={CONSTANTS.PHONE_NUMBER_LABEL}
+            name={"phoneNumber"}
+            required={true}
+            value={fp.values.phoneNumber}
+          />
+          <ErrorMessage component={FormikElements.Error} name="phoneNumber" />
+        </>
+      )}
 
+      {props.mode === ManageAccountModes.EDIT && (
+        <>
+          <FastField
+            component={FormikElements.FormattedNumber}
+            label={CONSTANTS.PHONE_NUMBER_LABEL}
+            name={'phoneNumber'}
+            required={true}
+            value={fp.values.phoneNumber}
+          />
+          <ErrorMessage component={FormikElements.Error} name="phoneNumber" />
+        </>
+      )}
 
       <FastField
         component={FormikElements.Select}
@@ -347,21 +361,26 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
   // Render a formik form that allows user to edit account values and then
   // submit (triggering appropriate reaction - account create or edit - based
   // up mode)
+
+  const getInitialValues = () => {
+    return {
+      firstName: accountDetails.firstName,
+      lastName: accountDetails.lastName,
+      email: accountDetails.email,
+      password: accountDetails.password || '',
+      newPassword: '',
+      pronoun: accountDetails.pronoun,
+      gender: accountDetails.gender,
+      dietaryRestrictions: accountDetails.dietaryRestrictions,
+      phoneNumber: accountDetails.phoneNumber, 
+      age: accountDetails.age,
+    };
+  };
+
   return (
     <Formik
       enableReinitialize={true}
-      initialValues={{
-        firstName: accountDetails.firstName,
-        lastName: accountDetails.lastName,
-        email: accountDetails.email,
-        password: accountDetails.password || '',
-        newPassword: '',
-        pronoun: accountDetails.pronoun,
-        gender: accountDetails.gender,
-        dietaryRestrictions: accountDetails.dietaryRestrictions,
-        phoneNumber: accountDetails.phoneNumber,
-        age: accountDetails.age,
-      }}
+      initialValues={getInitialValues()}
       onSubmit={handleSubmit}
       validationSchema={getValidationSchema(
         props.mode === ManageAccountModes.CREATE

src/features/Account/validationSchema.ts

@@ -22,7 +22,8 @@ const getValidationSchema = (isCreate: boolean) => {
       'validPhone',
       'Must be a valid phone number',
       (value) => {
-        return !value || value.length === 11;
+        const parsedValue = value?.replace(/\D/g, '');
+        return !parsedValue || (parsedValue.length > 10 && parsedValue.length < 14);
       }
     ),
     age: number()

src/features/Search/Search.tsx

@@ -204,12 +204,10 @@ class SearchContainer extends React.Component<{}, ISearchState> {
       this.state.account &&
       this.state.account.accountType === UserType.STAFF
     ) {
+      headers.push({ label: CONSTANTS.AGE_LABEL, key: 'accountId.age' });
+      headers.push({ label: CONSTANTS.PHONE_NUMBER_LABEL, key: 'accountId.age' });
       headers.push({ label: 'Resume', key: 'application.general.URL.resume' });
       headers.push({ label: 'Github', key: 'application.general.URL.github' });
-      headers.push({
-        label: CONSTANTS.DRIBBBLE_LINK_LABEL,
-        key: 'application.general.URL.dribbble',
-      });
       headers.push({
         label: CONSTANTS.PERSONAL_LABEL,
         key: 'application.general.URL.personal',
@@ -222,6 +220,10 @@ class SearchContainer extends React.Component<{}, ISearchState> {
         label: CONSTANTS.OTHER_LINK_LABEL,
         key: 'application.general.URL.other',
       });
+      headers.push({
+        label: 'Number of previous hackathons', 
+        key: 'application.shortAnswer.previousHackathons'
+      })
       headers.push({
         label: CONSTANTS.SKILLS_LABEL,
         key: 'application.shortAnswer.skills',
@@ -242,10 +244,10 @@ class SearchContainer extends React.Component<{}, ISearchState> {
         label: CONSTANTS.SHIRT_SIZE_LABEL,
         key: 'application.accommodation.shirtSize',
       });
-      headers.push({
-        label: CONSTANTS.ATTENDENCE_OPTION_PREFERENCE_LABEL,
-        key: 'application.accommodation.attendancePreference',
-      });
+      // headers.push({
+      //   label: CONSTANTS.ATTENDENCE_OPTION_PREFERENCE_LABEL,
+      //   key: 'application.accommodation.attendancePreference',
+      // });
       headers.push({
         label: CONSTANTS.IMPAIRMENTS_LABEL,
         key: 'application.accommodation.impairments',
@@ -254,10 +256,10 @@ class SearchContainer extends React.Component<{}, ISearchState> {
         label: CONSTANTS.BARRIERS_LABEL,
         key: 'application.accommodation.barriers',
       });
-      headers.push({
-        label: CONSTANTS.TRAVEL_LABEL,
-        key: 'application.accommodation.travel',
-      });
+      // headers.push({
+      //   label: CONSTANTS.TRAVEL_LABEL,
+      //   key: 'application.accommodation.travel',
+      // });
       headers.push({
         label: CONSTANTS.ETHNICITY_LABEL,
         key: 'application.other.ethnicity',
@@ -271,6 +273,8 @@ class SearchContainer extends React.Component<{}, ISearchState> {
         label: CONSTANTS.PRONOUN_LABEL,
         key: 'accountId.pronoun',
       });
+      headers.push({label: CONSTANTS.DIETARY_RESTRICTIONS_LABEL, key: 'accountId.dietaryRestrictions'});
+      headers.push({label: 'Authorize MLH to send emails', key: 'application.other.sendEmail'})
     }
     const tempHeaders: string[] = [];
     headers.forEach((header) => {

src/shared/Form/FormikElements/FormattedNumber.tsx

@@ -16,6 +16,7 @@ const NumberFormatFormikComponent: React.FunctionComponent<
   INumberFormatFormikComponent & FieldProps
 > = (props) => {
   const placeholder = props.placeholder ? props.placeholder : '';
+
   return (
     <NumberFormatInput
       onValueChange={handleChange(props)}
@@ -39,4 +40,5 @@ function handleChange({ field, form }: FieldProps) {
   };
 }
 
+
 export { NumberFormatFormikComponent as FormattedNumber };