Create campaign application - fixes (#2002)

* feat: campaign application fixes

- move the field cause (aka goal - "за какво са нужни средствата") down as per request from team campaigns
- add a "at least one document" hint to the document
- make the beneficiary relationship required (as it is on the API side)
- add validation error for not accepted terms
- add validation for missing document
- reset touched state after first step b/c that first step's submit makes all fields on steps 2 and 3 touched and shows errors immediately

* chore: update e2e tests

Author: gparlakov

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-87-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

e2e/tests/regression/campaign-application/campaign-application-admin.spec.ts

@@ -165,6 +165,6 @@ function camAppForEdit(): CampaignApplicationExisting {
     acceptTermsAndConditions: true,
     transparencyTermsAccepted: true,
     personalInformationProcessingAccepted: true,
-    documents: [],
+    documents: [{ filename: 'test.me', id: 'test.me' }],
   }
 }

e2e/tests/regression/campaign-application/campaign-application-giver.spec.ts

@@ -13,7 +13,7 @@ test.describe('Campaign application giver', () => {
 
     // assert
     const t = await textLocalized().campaign.bg()
-    await expect(page.getByRole('heading')).toHaveText(t.steps.organizer.title)
+    await expect(page.getByRole('heading', { name: t.steps.organizer.title })).toBeVisible()
 
     await page.getByRole('checkbox').first().click()
     await page.getByRole('checkbox').nth(1).click()
@@ -22,7 +22,7 @@ test.describe('Campaign application giver', () => {
     await page.getByRole('button', { name: t.cta.next }).click()
 
     // assert
-    await expect(page.getByRole('heading')).toHaveText(t.steps.application.title)
+    await expect(page.getByRole('heading', { name: t.steps.application.title })).toBeVisible()
   })
 
   test('should see the second step -application - of create campaign application wizard and after filling in the beneficiary, relations, title, type and funds go to step 3', async ({
@@ -55,7 +55,7 @@ test.describe('Campaign application giver', () => {
     await page.getByRole('button', { name: t.cta.next }).click()
 
     // assert
-    await expect(page.getByRole('heading')).toHaveText(t.steps.details.title)
+    await expect(page.getByRole('heading', { name: t.steps.details.title })).toBeVisible()
   })
 
   test('should see the third step - details - of create campaign application wizard and after filling the title, description, history and 2 files be able to create a new campaign application', async ({

public/locales/bg/campaign-application.json

@@ -41,7 +41,8 @@
       },
       "photos": "Снимков/видео материал",
       "documents": "Документи",
-      "disclaimer": "Приемат се до 10 документа. Всеки от документите може да бъде до 30МБ"
+      "disclaimer": "Приемат се до 10 документа. Всеки от документите може да бъде до 30МБ",
+      "documents-hint": "Моля, приложете поне един документ в подкрепа на нуждата ви, като например: медицинска документация, оферти за ремонт, обучение или лечение, писма или становища от институции, детайлен бюджет, оферти за необходими артикули или услуги, както и други документи, свързани с каузата ви."
     },
     "admin": {
       "title": "Администраторска редакция",

public/locales/en/campaign-application.json

@@ -41,7 +41,8 @@
       },
       "photos": "Photo/Video material",
       "documents": "Documents",
-      "disclaimer": "Up to 10 documents accepted. Each of the documents can be up to 30MB is size"
+      "disclaimer": "Up to 10 documents accepted. Each of the documents can be up to 30MB is size",
+      "documents-hint": "Please attach at least one document to stake your claim like: medical documents, offers for repair learning or healthcare, letters from institutions, detailed budget, offers for required items or services, as well as any other documents to do with your cause."
     },
     "admin": {
       "title": "Admin edit",

src/components/client/campaign-application/CampaignApplicationForm.tsx

@@ -84,7 +84,7 @@ export default function CampaignApplicationForm({
 
   const handleSubmit = async (
     formData: CampaignApplicationFormData,
-    { resetForm }: FormikHelpers<CampaignApplicationFormData>,
+    { resetForm, setTouched }: FormikHelpers<CampaignApplicationFormData>,
   ) => {
     if (activeStep === Steps.CREATED_DETAILS && camApp?.id != null) {
       router.push(routes.campaigns.applicationEdit(camApp?.id)) // go to the edit page
@@ -100,6 +100,26 @@ export default function CampaignApplicationForm({
       }
     } else {
       setActiveStep((prevActiveStep) => prevActiveStep + 1)
+
+      // reset the touched state b/c every step gets "submitted" in terms of formik and that in turn marks all values as touched
+      // the effect is that every step after the first immediately marks all required fields as errored even before the user has touched them
+      setTouched({
+        applicationDetails: {
+          description: false,
+          currentStatus: false,
+          cause: false,
+          documents: false,
+        },
+        applicationBasic: {
+          beneficiaryNames: false,
+          title: false,
+          campaignType: false,
+          funds: false,
+          campaignEnd: false,
+          campaignEndDate: false,
+          organizerBeneficiaryRelationship: false,
+        },
+      })
     }
   }
 

src/components/client/campaign-application/helpers/campaignApplication.types.ts

@@ -26,13 +26,14 @@ export type CampaignApplicationBasic = {
   funds: number
   campaignEnd: string
   campaignEndDate?: string
+  organizerBeneficiaryRelationship?: string
 }
 
 export type CampaignApplicationDetails = {
   cause: string
-  organizerBeneficiaryRelationship?: string
   description?: string
   currentStatus?: string
+  documents?: File[]
 }
 
 // keep in sync with api repo/podkrepi.dbml -> Enum CampaignApplicationState

src/components/client/campaign-application/helpers/validation-schema.ts

@@ -31,16 +31,16 @@ const basicSchema: yup.SchemaOf<CampaignApplicationBasic> = yup.object().shape({
   funds: yup.number().required(),
   title: yup.string().required(),
   campaignEndDate: yup.string().optional(),
+  organizerBeneficiaryRelationship: yup.string().required(),
 })
 
 const detailsSchema: yup.SchemaOf<CampaignApplicationDetails> = yup.object().shape({
   cause: yup.string().required(),
   campaignGuarantee: yup.string().optional(),
   currentStatus: yup.string().optional(),
   description: yup.string().optional(),
-  documents: yup.array().optional(),
+  documents: yup.array().min(1, 'documents-hint').required(),
   links: yup.array().optional(),
-  organizerBeneficiaryRelationship: yup.string().optional(),
   otherFinancialSources: yup.string().optional(),
 })
 

src/components/client/campaign-application/steps/CampaignApplicationBasic.tsx

@@ -47,7 +47,7 @@ export default function CampaignApplicationBasic() {
           <StyledFormTextField
             label={t('steps.application.beneficiaryRelationship')}
             type="text"
-            name="applicationDetails.organizerBeneficiaryRelationship"
+            name="applicationBasic.organizerBeneficiaryRelationship"
           />
         </Grid>
         <Grid item xs={12}>

src/components/client/campaign-application/steps/CampaignApplicationDetails.tsx

@@ -1,12 +1,14 @@
-import { Grid, Typography } from '@mui/material'
+import { FormControl, FormHelperText, Grid, Typography } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
 import FormTextField from 'components/common/form/FormTextField'
 import { StyledStepHeading } from '../helpers/campaignApplication.styled'
 
 import FileList from 'components/common/file-upload/FileList'
 import FileUpload from 'components/common/file-upload/FileUpload'
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import { useFormikContext } from 'formik'
+import { CampaignApplicationFormData } from '../helpers/campaignApplication.types'
 
 export type Props = {
   files: File[]
@@ -15,6 +17,11 @@ export type Props = {
 
 export default function CampaignApplicationDetails({ files, setFiles }: Props) {
   const { t } = useTranslation('campaign-application')
+  const { setFieldValue, errors, touched } = useFormikContext<CampaignApplicationFormData>()
+
+  useEffect(() => {
+    setFieldValue('applicationDetails.documents', files, false)
+  }, [files])
 
   return (
     <Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
@@ -51,13 +58,20 @@ export default function CampaignApplicationDetails({ files, setFiles }: Props) {
           />
         </Grid>
         <Grid item xs={12}>
-          <FileUpload
-            buttonLabel={t('steps.details.documents')}
-            onUpload={(newFiles) => {
-              setFiles((prevFiles) => [...prevFiles, ...newFiles])
-            }}
-            accept="text/plain,application/json,application/pdf,image/png,image/jpeg,application/xml,text/xml,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-          />
+          <FormControl>
+            <Typography variant="h6">{t('steps.details.documents-hint')}</Typography>
+            <FileUpload
+              buttonLabel={t('steps.details.documents')}
+              onUpload={(newFiles) => {
+                setFiles((prevFiles) => [...prevFiles, ...newFiles])
+                setFieldValue('applicationDetails.documents', newFiles)
+              }}
+              accept="text/plain,application/json,application/pdf,image/png,image/jpeg,application/xml,text/xml,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            />
+            {touched.applicationDetails?.documents && errors.applicationDetails?.documents && (
+              <FormHelperText error>{t('steps.details.documents-hint')}</FormHelperText>
+            )}
+          </FormControl>
           <Typography>{t('steps.details.disclaimer')}</Typography>
           <FileList
             files={files}