Add support for custom yup methods

app/src/features/projects/components/ProjectCoordinatorForm.tsx

@@ -14,7 +14,7 @@ import {
 import AutocompleteField from 'components/fields/AutocompleteField';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 export interface IProjectCoordinatorForm {
   first_name: string;

app/src/features/projects/components/ProjectDetailsForm.tsx

@@ -5,8 +5,7 @@ import MultiAutocompleteFieldVariableSize, {
 import StartEndDateFields from 'components/fields/StartEndDateFields';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import { getEndDateStringValidator, getStartDateStringValidator } from 'utils/YupValidations';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 export interface IProjectDetailsForm {
   project_name: string;
@@ -30,8 +29,8 @@ export const ProjectDetailsFormInitialValues: IProjectDetailsForm = {
 export const ProjectDetailsFormYupSchema = yup.object().shape({
   project_name: yup.string().max(50, 'Cannot exceed 50 characters').required('Required'),
   project_type: yup.string().required('Required'),
-  start_date: getStartDateStringValidator().required('Required'),
-  end_date: getEndDateStringValidator('start_date')
+  start_date: yup.string().isValidDateString().required('Required'),
+  end_date: yup.string().isValidDateString().isEndDateAfterStartDate('start_date')
 });
 
 export interface IProjectDetailsFormProps {

app/src/features/projects/components/ProjectFundingForm.tsx

@@ -7,7 +7,7 @@ import { DATE_FORMAT } from 'constants/dateFormats';
 import { FieldArray, useFormikContext } from 'formik';
 import React, { useState } from 'react';
 import { getFormattedDateRangeString } from 'utils/Utils';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 import ProjectFundingItemForm, {
   IProjectFundingFormArrayItem,
   ProjectFundingFormArrayItemInitialValues

app/src/features/projects/components/ProjectFundingItemForm.tsx

@@ -20,8 +20,7 @@ import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocomple
 import StartEndDateFields from 'components/fields/StartEndDateFields';
 import { Formik, FormikHelpers } from 'formik';
 import React from 'react';
-import { getEndDateStringValidator, getStartDateStringValidator } from 'utils/YupValidations';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 import { IInvestmentActionCategoryOption } from './ProjectFundingForm';
 
 export interface IProjectFundingFormArrayItem {
@@ -55,8 +54,8 @@ export const ProjectFundingFormArrayItemYupSchema = yup.object().shape({
     .typeError('Must be a number')
     .min(0, 'Must be a positive number')
     .required('Required'),
-  start_date: getStartDateStringValidator().required('Required'),
-  end_date: getEndDateStringValidator('start_date')
+  start_date: yup.string().isValidDateString().required('Required'),
+  end_date: yup.string().isValidDateString().isEndDateAfterStartDate('start_date')
 });
 
 export interface IProjectFundingItemFormProps {

app/src/features/projects/components/ProjectIUCNForm.tsx

@@ -15,7 +15,7 @@ import { mdiTrashCanOutline } from '@mdi/js';
 import { FieldArray, useFormikContext } from 'formik';
 import { IMultiAutocompleteFieldOption } from 'components/fields/MultiAutocompleteFieldVariableSize';
 import React from 'react';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 const useStyles = makeStyles((theme) => ({
   iucnInputContainer: {

app/src/features/projects/components/ProjectLocationForm.tsx

@@ -6,7 +6,7 @@ import {
 import { useFormikContext } from 'formik';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useState, useEffect } from 'react';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 //@ts-ignore
 import { kml } from '@tmcw/togeojson';
 import bbox from '@turf/bbox';

app/src/features/projects/components/ProjectObjectivesForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid, TextField } from '@material-ui/core';
 import { useFormikContext } from 'formik';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 export interface IProjectObjectivesForm {
   objectives: string;

app/src/features/projects/components/ProjectPermitForm.tsx

@@ -14,7 +14,7 @@ import { mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import { FieldArray, useFormikContext } from 'formik';
 import React, { useEffect } from 'react';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 export interface IProjectPermitFormArrayItem {
   permit_number: string;

app/src/features/projects/components/ProjectSpeciesForm.tsx

@@ -4,7 +4,7 @@ import MultiAutocompleteFieldVariableSize, {
 } from 'components/fields/MultiAutocompleteFieldVariableSize';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import * as yup from 'yup';
+import yup from 'utils/YupSchema';
 
 export interface IProjectSpeciesForm {
   focal_species: string[];

app/src/types/yup.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Extend the default yup type definitions to include the definitions of our custom validators
+ * - See utils/YupSchema.ts
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { DATE_FORMAT } from 'constants/dateFormats';
+import yup from 'yup';
+
+declare module 'yup' {
+  export class StringSchema extends yup.StringSchema {
+    /**
+     * Determine if the string is a valid date string. Does nothing if the string is null.
+     *
+     * @param {DATE_FORMAT} dateFormat=DATE_FORMAT.ShortDateFormat - date format the string must match
+     * @param {string} message='Invalid Date' - error message if this check fails
+     * @return {*}  {(yup.StringSchema<string | undefined, Record<string, any>, string | undefined>)}
+     * @memberof StringSchema
+     */
+    isValidDateString(
+      dateFormat?: DATE_FORMAT,
+      message?: string
+    ): yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+
+    /**
+     * Determine if the end date string is after the start date string. Does nothing if either the end or start
+     * date stings are null or invalid.
+     *
+     * @param {string} startDateName - name of the start date field
+     * @param {DATE_FORMAT} dateFormat=DATE_FORMAT.ShortDateFormat - date format the string must match
+     * @param {string} message='Invalid Date' - error message if this check fails
+     * @return {*}  {(yup.StringSchema<string | undefined, Record<string, any>, string | undefined>)}
+     * @memberof StringSchema
+     */
+    isEndDateAfterStartDate(
+      startDateName: string,
+      dateFormat?: DATE_FORMAT = DATE_FORMAT.ShortDateFormat,
+      message?: string
+    ): yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+  }
+}

app/src/utils/YupSchema.ts

@@ -0,0 +1,50 @@
+/**
+ * Make sure to add the type definition for any new methods added here to the `types/yup.d.ts` types file.
+ * - See types/yup.d.ts
+ */
+
+import { DATE_FORMAT } from 'constants/dateFormats';
+import moment from 'moment';
+import * as yup from 'yup';
+
+yup.addMethod(
+  yup.string,
+  'isValidDateString',
+  function (dateFormat: DATE_FORMAT = DATE_FORMAT.ShortDateFormat, message: string = 'Invalid date') {
+    return this.test('is-valid-date', message, (value) => {
+      if (!value) {
+        // don't validate date string if it is null
+        return true;
+      }
+
+      return moment(value, dateFormat, true).isValid();
+    });
+  }
+);
+
+yup.addMethod(
+  yup.string,
+  'isEndDateAfterStartDate',
+  function (
+    startDateName: string,
+    dateFormat: DATE_FORMAT = DATE_FORMAT.ShortDateFormat,
+    message: string = 'End date must be after start date'
+  ) {
+    return this.test('is-end-date-after-start-date', message, function (value) {
+      if (!value) {
+        // don't validate end_date if it is null
+        return true;
+      }
+
+      if (!moment(this.parent[startDateName], dateFormat, true).isValid()) {
+        // don't validate start_date if it is invalid
+        return true;
+      }
+
+      // compare valid start and end dates
+      return moment(this.parent.start_date, dateFormat, true).isBefore(moment(value, dateFormat, true));
+    });
+  }
+);
+
+export default yup;