Target Date Field added to withdrawals forms. (#1611)

* Target Date Field added to withdrawals forms.

-Field added in both createForm.tsx and editForm.tsx.
-Added targetDate in gql/withdrawals.d.ts types.
-Created SelectDate.tsx file for the custom element.

* fixed-formatting

* Validation-targetDate-fields-wthdrawals/transfers

Eddited targetDate in withdrawals.d.ts to required

Eddited targetDate in transfer.d.ts to required

Fixed validationSchema in ../withdrawals/CreateForm.tsx and EditForm.tsx
- validation permits usage of previous date now

Fixed validationSchema in ../transfers/CreateForm.tsx and EditForm.tsx
- validation permits usage of previous date now

* Ran yarn format, yarn test, yarn build
-minor issues fixed- forgotten save of EditForm.tsx

src/components/admin/transfers/CreateForm.tsx

@@ -74,7 +74,7 @@ export default function CreateForm({ campaigns }: Props) {
     }),
     reason: yup.string().trim().min(1).max(300).required(),
     documentId: yup.string().uuid().notRequired().nullable(),
-    targetDate: yup.date().min(new Date(), 'Date is invalid.').notRequired().nullable(),
+    targetDate: yup.date().required(),
     approvedById: yup.string().uuid().notRequired().nullable(),
     sourceVaultId: yup.string().uuid().required(),
     sourceCampaignId: yup.string().uuid().required(),
@@ -101,7 +101,7 @@ export default function CreateForm({ campaigns }: Props) {
       amount: toMoney(values.amount),
       reason: values.reason,
       documentId: values.documentId ? values.documentId : null,
-      targetDate: values.targetDate ? new Date(values.targetDate) : null,
+      targetDate: values.targetDate,
       approvedById: values.approvedById ? values.approvedById : null,
       sourceCampaignId: values.sourceCampaignId,
       sourceVaultId: values.sourceVaultId,

src/components/admin/transfers/EditForm.tsx

@@ -41,7 +41,7 @@ const validationSchema: yup.SchemaOf<TransferData> = yup.object().shape({
   amount: yup.number().positive('Amount must be a positive number.').required(),
   reason: yup.string().trim().min(1).max(300).required(),
   documentId: yup.string().uuid().notRequired().nullable(),
-  targetDate: yup.date().min(new Date(), 'Date is invalid.').notRequired().nullable(),
+  targetDate: yup.date().required(),
   approvedById: yup.string().uuid().notRequired().nullable(),
   sourceVaultId: yup.string().uuid().required(),
   sourceCampaignId: yup.string().uuid().required(),
@@ -97,7 +97,7 @@ export default function EditForm({ transfer, campaigns, id }: Props) {
       amount: toMoney(values.amount),
       reason: values.reason,
       documentId: values.documentId ? values.documentId : null,
-      targetDate: values.targetDate ? new Date(values.targetDate) : null,
+      targetDate: values.targetDate,
       approvedById: values.approvedById ? values.approvedById : null,
       sourceCampaignId: values.sourceCampaignId,
       sourceVaultId: values.sourceVaultId,
@@ -130,7 +130,7 @@ export default function EditForm({ transfer, campaigns, id }: Props) {
             <FormTextField disabled type="number" label={t('amount')} name="amount" />
           </Grid>
           <Grid item xs={12}>
-            <SelectDate label={t('targetDate')} name="targetDate" />
+            <SelectDate name="targetDate" />
           </Grid>
 
           <Grid item xs={12}>

src/components/admin/withdrawals/CreateForm.tsx

@@ -7,6 +7,7 @@ import { AxiosError, AxiosResponse } from 'axios'
 import * as yup from 'yup'
 import { Box, Button, Grid, Typography } from '@mui/material'
 
+import SelectDate from './custom/SelectDate'
 import { WithdrawalData, WithdrawalInput, WithdrawalResponse } from 'gql/withdrawals'
 import { routes } from 'common/routes'
 import { ApiErrors } from 'service/apiErrors'
@@ -57,6 +58,7 @@ export default function CreateForm() {
         otherwise: yup.number().positive().integer().required(),
       }),
       reason: yup.string().trim().min(1).max(300).required(),
+      targetDate: yup.date().required(),
       currency: yup.string().oneOf(Object.values(Currency)).required(),
       sourceVaultId: yup.string().uuid().required(),
       sourceCampaignId: yup.string().uuid().required(),
@@ -74,6 +76,7 @@ export default function CreateForm() {
     sourceCampaignId: '',
     bankAccountId: '',
     documentId: uuidv4(), //this will be the id of the uploaded doc when attachments are implemented
+    targetDate: '',
     approvedById: '',
   }
 
@@ -102,6 +105,7 @@ export default function CreateForm() {
       sourceCampaignId: values.sourceCampaignId,
       bankAccountId: values.bankAccountId,
       documentId: values.documentId,
+      targetDate: values.targetDate,
       approvedById: values.approvedById,
     }
     mutation.mutate(data)
@@ -182,6 +186,9 @@ export default function CreateForm() {
           <Grid item xs={12}>
             <FormTextField type="text" label={t('reason')} name="reason" autoComplete="reason" />
           </Grid>
+          <Grid item xs={12}>
+            <SelectDate name="targetDate" />
+          </Grid>
 
           <Grid item xs={12}>
             <BankAccountSelect />

src/components/admin/withdrawals/EditForm.tsx

@@ -33,6 +33,14 @@ import { Currency } from 'gql/currency'
 import { fromMoney, toMoney } from 'common/util/money'
 import { useVaultsList } from 'common/hooks/vaults'
 import FormSelectField from 'components/common/form/FormSelectField'
+import SelectDate from './custom/SelectDate'
+
+const dateParser = (date: Date | undefined) => {
+  if (date) {
+    return date.toString().slice(0, 10)
+  }
+  return undefined
+}
 
 const validationSchema: yup.SchemaOf<WithdrawalData> = yup
   .object()
@@ -46,6 +54,7 @@ const validationSchema: yup.SchemaOf<WithdrawalData> = yup
     sourceCampaignId: yup.string().uuid().required(),
     bankAccountId: yup.string().uuid().required(),
     documentId: yup.string().uuid().required(),
+    targetDate: yup.date().required(),
     approvedById: yup.string().uuid().required(),
   })
 
@@ -71,6 +80,7 @@ export default function EditForm() {
     bankAccountId: data?.bankAccountId,
     documentId: data?.documentId,
     approvedById: data?.approvedById,
+    targetDate: dateParser(data?.targetDate) || '',
   }
 
   const mutation = useMutation<
@@ -95,6 +105,7 @@ export default function EditForm() {
       reason: values.reason,
       sourceVaultId: values.sourceVaultId,
       sourceCampaignId: values.sourceCampaignId,
+      targetDate: values.targetDate,
       bankAccountId: values.bankAccountId,
       documentId: values.documentId,
       approvedById: values.approvedById,
@@ -158,6 +169,9 @@ export default function EditForm() {
           <Grid item xs={12}>
             <BankAccountSelect disabled={initialValues.status === WithdrawalStatus.succeeded} />
           </Grid>
+          <Grid item xs={12}>
+            <SelectDate name="targetDate" />
+          </Grid>
           <Grid item xs={12}>
             <FormTextField
               type="string"

src/components/admin/withdrawals/custom/SelectDate.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useField } from 'formik'
+import { useTranslation } from 'next-i18next'
+
+import { TextFieldProps } from '@mui/material'
+
+import { translateError } from 'common/form/useForm'
+import { TranslatableField } from 'common/form/validation'
+import FormTextField from 'components/common/form/FormTextField'
+
+type Props = {
+  name: string
+} & TextFieldProps
+
+export default function SelectDate({ name, ...textFieldProps }: Props) {
+  const { t } = useTranslation('withdrawals')
+
+  const [field, meta] = useField(name)
+
+  const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
+
+  return (
+    <FormTextField
+      {...textFieldProps}
+      {...field}
+      type="date"
+      variant="outlined"
+      fullWidth
+      InputLabelProps={{ shrink: true }}
+      error={Boolean(meta.error) && Boolean(meta.touched)}
+      label={t('targetDate')}
+      helperText={helperText}
+    />
+  )
+}

src/gql/transfer.d.ts

@@ -11,7 +11,7 @@ export type TransferInput = {
   amount: number
   reason: string
   documentId?: UUID | string | null
-  targetDate?: Date | string | null
+  targetDate: Date | string
   approvedById?: string | null
   sourceCampaignId: string
   sourceVaultId: string
@@ -25,7 +25,7 @@ export type TransferData = {
   amount: number | undefined
   reason: string | undefined
   documentId?: UUID | string | null
-  targetDate?: Date | string | null
+  targetDate: Date | string
   approvedById?: UUID | string | null
   sourceCampaignId: UUID | string | undefined
   sourceVaultId: UUID | string | undefined
@@ -40,7 +40,7 @@ export type TransferResponse = {
   amount: number
   reason: string
   documentId: string | undefined
-  targetDate: Date | undefined
+  targetDate: Date
   approvedBy: PersonResponse | undefined
   sourceCampaign: CampaignResponse
   sourceVault: VaultResponse

src/gql/withdrawals.d.ts

@@ -9,6 +9,7 @@ export type WithdrawalResponse = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate: Date
   approvedBy: Person
   bankAccount: Record<string, unknown>
   sourceCampaign: Record<string, unknown>
@@ -21,6 +22,7 @@ export type WithdrawalResponse2 = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate: Date
   approvedBy: string
   bankAccount: string
   sourceCampaign: string
@@ -33,6 +35,7 @@ export type WithdrawalInput = {
   amountAvailable: number
   reason: string | undefined
   documentId?: UUID | undefined
+  targetDate: Date | string
   approvedById?: UUID | undefined
   bankAccountId?: UUID | undefined
   sourceCampaignId?: UUID | undefined
@@ -45,6 +48,7 @@ export type WithdrawalData = {
   amount: number | undefined
   reason: string | undefined
   documentId?: string | undefined
+  targetDate: Date | string
   approvedById?: string | undefined
   bankAccountId?: string | undefined
   sourceCampaignId?: string | undefined
@@ -58,6 +62,7 @@ export type WithdrawalEditResponse = {
   amount: number
   reason: string
   documentId: UUID
+  targetDate: Date
   approvedById: UUID
   bankAccountId: UUID
   sourceCampaignId: UUID