ui: Form improvements

src/components/admin/cities/CreateForm.tsx

@@ -9,7 +9,7 @@ import { Box, Button, Grid, Typography } from '@mui/material'
 
 import { CityFormData, CityInput, CityResponse } from 'gql/cities'
 import { routes } from 'common/routes'
-import { ApiErrors, handleUniqueViolation } from 'service/apiErrors'
+import { ApiErrors, Message, handleUniqueViolation } from 'service/apiErrors'
 import { useCreateCity } from 'service/city'
 import { AlertStore } from 'stores/AlertStore'
 import GenericForm from 'components/common/form/GenericForm'
@@ -42,7 +42,9 @@ export default function EditForm() {
     const error = e.response
 
     if (error?.status === 409) {
-      const message = error.data.message.map((el) => handleUniqueViolation(el.constraints, t))
+      const message = (error.data.message as Message[]).map((el) =>
+        handleUniqueViolation(el.constraints, t),
+      )
       return AlertStore.show(message.join('/n'), 'error')
     }
 

src/components/admin/marketing/EmailConsent/SendForm.tsx

@@ -6,6 +6,7 @@ import FormDatePicker from 'components/common/form/FormDatePicker'
 import FormTextField from 'components/common/form/FormTextField'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
+import { FormikHelpers } from 'formik'
 import { SendNewsLetterConsent } from 'gql/marketing'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
@@ -22,7 +23,7 @@ export default function EditForm() {
   const initialValues: SendNewsLetterConsent = {
     templateId: '',
     listId: '',
-    dateThreshold: undefined,
+    dateThreshold: new Date().toISOString(),
   }
 
   const validationSchema: yup.SchemaOf<SendNewsLetterConsent> = yup.object().defined().shape({
@@ -34,25 +35,32 @@ export default function EditForm() {
   const mutationFn = useSendConsentEmail()
 
   const handleError = (e: AxiosError<ApiErrors>) => {
-    AlertStore.show(t(e.message), 'error')
+    const error = e.response
+    AlertStore.show(t(error?.data.message as string), 'error')
   }
 
   const mutation = useMutation<AxiosResponse<any>, AxiosError<ApiErrors>, SendNewsLetterConsent>({
     mutationFn,
     onError: (error) => handleError(error),
     onSuccess: (data) => {
       AlertStore.show(t(`Емайлът беше изпратен успешно на ${data.data} емайла.`), 'success')
-      router.push(routes.admin.marketing.index)
     },
   })
 
-  async function onSubmit(values: SendNewsLetterConsent) {
+  async function onSubmit(
+    values: SendNewsLetterConsent,
+    formikHelpers: FormikHelpers<SendNewsLetterConsent>,
+  ) {
     const data: SendNewsLetterConsent = {
       templateId: values.templateId,
       listId: values.listId,
       dateThreshold: values.dateThreshold,
     }
-    mutation.mutate(data)
+    await mutation.mutateAsync(data)
+    if (mutation.isSuccess && !mutation.isLoading) {
+      console.log(mutation.isSuccess)
+      formikHelpers.resetForm({ values: initialValues })
+    }
   }
 
   return (

src/components/admin/marketing/MarketingPage.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardContent, Container, Grid, Typography } from '@mui/material'
+import { Box, Button, Card, CardContent, Container, Grid, Typography } from '@mui/material'
 import AdminContainer from 'components/common/navigation/AdminContainer'
 import AdminLayout from 'components/common/navigation/AdminLayout'
 import React from 'react'
@@ -15,9 +15,10 @@ export default function MarketingPage() {
       <AdminContainer title={t('admin.marketing')}>
         <Container maxWidth={false} sx={{ py: 5 }}>
           <Grid container spacing={2} rowSpacing={4} px={4} pb={4} mb={2}>
-            {marketingCards.map(({ label, href, icon: Icon }, index) => (
+            {marketingCards.map(({ label, href, icon: Icon, disabled }, index) => (
               <Grid xs={12} sm={6} md={4} lg={2.4} item key={index}>
-                <Card
+                <Button
+                  disabled={disabled}
                   sx={{
                     height: 130,
                     maxWidth: 345,
@@ -47,7 +48,7 @@ export default function MarketingPage() {
                       </Typography>
                     </CardContent>
                   </Link>
-                </Card>
+                </Button>
               </Grid>
             ))}
           </Grid>

src/components/admin/marketing/navigation/marketingCards.ts

@@ -7,10 +7,12 @@ export const marketingCards = [
     label: 'Изпращане на емайл за съгласие',
     icon: ThumbUpAltIcon,
     href: routes.admin.marketing.newsLetterConsent,
+    disabled: false,
   },
   {
     label: 'Изпращане на маркетинг емайл',
     icon: SendIcon,
     href: routes.admin.marketing.newsLetterConsent,
+    disabled: true,
   },
 ]

src/service/apiErrors.ts

@@ -6,7 +6,7 @@ export { isAxiosError }
 
 export interface ApiErrors {
   statusCode: number
-  message: Message[]
+  message: Message[] | string
   error: string
 }