Add validation for empty phone numbers

Author: Joshua Zhou

src/features/Account/ManageAccountForm.tsx

@@ -281,18 +281,35 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
             name={'newPassword'}
           />
           <ErrorMessage component={FormikElements.Error} name="newPassword" />
+        </>
+      )}
+
+      {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}
-            placeholder="+# (###) ###-####"
-            format="+# (###) ###-####"
             name={'phoneNumber'}
             required={true}
             value={fp.values.phoneNumber}
           />
           <ErrorMessage component={FormikElements.Error} name="phoneNumber" />
         </>
       )}
+
       <FastField
         component={FormikElements.Select}
         creatable={true}
@@ -374,4 +391,4 @@ const ManageAccountForm: React.FC<IManageAccountProps> = (props) => {
   );
 };
 
-export default WithToasterContainer(ManageAccountForm);
+export default WithToasterContainer(ManageAccountForm);

src/features/Account/validationSchema.ts

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