feat: steps campaign application and details skeleton (Epic #1842)

public/locales/bg/campaign-application.json

@@ -7,6 +7,39 @@
       "email": "Email",
       "transparencyTerms": "Потвърждавам, че кампанията отговаря на основните принципи за публикуване на платформата: да е законна, да е морална, да не е с бизнес насоченост."
     },
+    "application": {
+      "title": "Информация за кампанията",
+      "beneficiary": "Имена на бенефициента",
+      "funds": "Необходима сума в лева",
+      "campaign-end": {
+        "title": "Желана крайна дата на кампанията:",
+        "options": {
+          "funds": "До събиране на необходимите средства",
+          "ongoing": "Целогодишно/безсрочно",
+          "date": "Посочи дата"
+        }
+      }
+    },
+    "details": {
+      "title": "Разкажете ни повече за кампанията Ви",
+      "description": "Описание",
+      "current-status": {
+        "label": "Какво е свършено до момента по кампанията?",
+        "placeholder": "(набрани материални и/ или нематериални средства, какво е направено с тях, преминати прегледи/ процедури и т.н.)"
+      },
+      "cause": "За какво са нужни средствата?",
+      "links": {
+        "label": "Ако е приложимо, прикачете:",
+        "fields": {
+          "website": "уебсайт на кампанията",
+          "media": "линкове към медийно отразяване",
+          "facebook": "линк към Facebook страница на кампанията",
+          "donation-platforms": "линк към други платформи за дарения, в които кампанията Ви е (била) активна"
+        }
+      },
+      "photos": "Снимков/видео материал",
+      "documents": "Документи"
+    },
     "admin": {
       "title": "Администраторска редакция",
       "status": "Статус",

public/locales/en/campaign-application.json

@@ -7,6 +7,39 @@
       "email": "Email",
       "transparencyTerms": "I confirm that the campaign meets the basic principles for publishing on the platform: it is legal, it is moral, and it is not business-oriented."
     },
+    "application": {
+      "title": "Campaign Application",
+      "beneficiary": "Beneficiary names",
+      "funds": "The required amount in leva",
+      "campaign-end": {
+        "title": "Desired campaign end date:",
+        "options": {
+          "funds": "Until the required funds are raised",
+          "ongoing": "Year-round/ongoing",
+          "date": "Specify date"
+        }
+      }
+    },
+    "details": {
+      "title": "Tell us more about your campaign",
+      "description": "Description",
+      "current-status": {
+        "label": "What has been done so far in the campaign?",
+        "placeholder": "(collected material and/or non-material resources, what has been done with them, completed examinations/procedures, etc.)"
+      },
+      "cause": "What are the funds needed for?",
+      "links": {
+        "label": "If applicable, attach:",
+        "fields": {
+          "website": "campaign website",
+          "media": "links to media coverage",
+          "facebook": "link to the campaign's Facebook page",
+          "donation-platforms": "link to other donation platforms where your campaign is (or has been) active"
+        }
+      },
+      "photos": "Photo/Video material",
+      "documents": "Documents"
+    },
     "admin": {
       "title": "Admin edit",
       "status": "Status",

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

@@ -56,6 +56,12 @@ export default function CampaignApplicationForm({ person }: Props) {
       transparencyTermsAccepted: false,
       personalInformationProcessingAccepted: false,
     },
+    application: {
+      beneficiaryNames: '',
+      campaignType: '',
+      funds: 0,
+      campaignEnd: '',
+    },
   }
 
   const handleSubmit = () => {

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

@@ -19,8 +19,16 @@ export type CampaignApplicationOrganizer = {
   personalInformationProcessingAccepted: boolean
 }
 
+export type CampaignApplication = {
+  beneficiaryNames: string
+  campaignType: string
+  funds: number
+  campaignEnd: string
+}
+
 export type CampaignApplicationFormData = {
   organizer: CampaignApplicationOrganizer
+  application: CampaignApplication
 }
 
 export type CampaignApplicationFormDataSteps = {
@@ -29,3 +37,9 @@ export type CampaignApplicationFormDataSteps = {
     organizer: CampaignApplicationOrganizer
   }
 }
+
+export enum CampaignEndTypes {
+  FUNDS = 'funds',
+  ONGOING = 'ongoing',
+  DATE = 'date',
+}

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

@@ -1,3 +1,94 @@
+import { FormControl, Grid, Typography } from '@mui/material'
+import { Field, useField } from 'formik'
+import { useTranslation } from 'next-i18next'
+
+import { StyledFormTextField, StyledStepHeading } from '../helpers/campaignApplication.styled'
+import { CampaignEndTypes } from '../helpers/campaignApplication.types'
+import CampaignTypeSelect from 'components/client/campaigns/CampaignTypeSelect'
+import FormDatePicker from 'components/common/form/FormDatePicker'
+
+import theme from 'common/theme'
+
 export default function CampaignApplication() {
-  return <div>Campaign Application</div>
+  const { t } = useTranslation('campaign-application')
+  const [campaignEnd] = useField('application.campaignEnd')
+
+  return (
+    <Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
+      <Grid item container justifyContent="center">
+        <StyledStepHeading variant="h4">{t('steps.application.title')}</StyledStepHeading>
+      </Grid>
+      <Grid item container spacing={6} justifyContent="space-between" direction="row">
+        <Grid item xs={12}>
+          <StyledFormTextField
+            label={t('steps.application.beneficiary')}
+            type="text"
+            name="application.beneficiary"
+            autoComplete="name"
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <CampaignTypeSelect />
+        </Grid>
+        <Grid item xs={12}>
+          <StyledFormTextField
+            label={t('steps.application.funds')}
+            type="number"
+            name="application.funds"
+          />
+        </Grid>
+        <Grid container item>
+          <Grid item xs={12}>
+            <Typography sx={{ fontSize: theme.typography.pxToRem(16), paddingBottom: 2 }}>
+              {t('steps.application.campaign-end.title')}
+            </Typography>
+          </Grid>
+          <Grid container item xs={12}>
+            <FormControl>
+              <Grid container item spacing={2} xs={12}>
+                <Grid item xs={12}>
+                  <label>
+                    <Field
+                      size="medium"
+                      type="radio"
+                      name="application.campaignEnd"
+                      value={CampaignEndTypes.FUNDS}
+                    />
+                    {t('steps.application.campaign-end.options.funds')}
+                  </label>
+                </Grid>
+                <Grid item xs={12}>
+                  <label>
+                    <Field
+                      size="medium"
+                      type="radio"
+                      name="application.campaignEnd"
+                      value={CampaignEndTypes.ONGOING}
+                    />
+                    {t('steps.application.campaign-end.options.ongoing')}
+                  </label>
+                </Grid>
+                <Grid item xs={12}>
+                  <label>
+                    <Field
+                      size="medium"
+                      type="radio"
+                      name="application.campaignEnd"
+                      value={CampaignEndTypes.DATE}
+                    />
+                    {t('steps.application.campaign-end.options.date')}
+                  </label>
+                </Grid>
+              </Grid>
+              {campaignEnd.value === CampaignEndTypes.DATE && (
+                <Grid item xs={6} sx={{ paddingTop: 2 }}>
+                  <FormDatePicker name="application.campaign-end" label="" />
+                </Grid>
+              )}
+            </FormControl>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
 }

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

@@ -1,3 +1,95 @@
+import { useTranslation } from 'next-i18next'
+import { Grid, Typography } from '@mui/material'
+
+import { StyledStepHeading } from '../helpers/campaignApplication.styled'
+import FormTextField from 'components/common/form/FormTextField'
+
+import theme from 'common/theme'
+import FileUpload from 'components/common/file-upload/FileUpload'
+
 export default function CampaignApplicationDetails() {
-  return <div>Campaign Application Details</div>
+  const { t } = useTranslation('campaign-application')
+
+  return (
+    <Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
+      <Grid item container justifyContent="center">
+        <StyledStepHeading variant="h4">{t('steps.details.title')}</StyledStepHeading>
+      </Grid>
+      <Grid item container spacing={6} justifyContent="space-between" direction="row">
+        <Grid item xs={12}>
+          <FormTextField
+            type="text"
+            name="details.description"
+            label={t('steps.details.description')}
+            multiline
+            rows={3}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <FormTextField
+            type="text"
+            name="details.currentStatus"
+            label={t('steps.details.current-status.label')}
+            placeholder={t('steps.details.current-status.placeholder')}
+            multiline
+            rows={5}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <FormTextField
+            type="text"
+            name="details.cause"
+            label={t('steps.details.cause')}
+            multiline
+            rows={3}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Typography sx={{ fontSize: theme.typography.pxToRem(16), paddingBottom: 2 }}>
+            {t('steps.details.links.label')}
+          </Typography>
+          <Grid container item spacing={2} xs={12}>
+            <Grid item xs={12}>
+              <FormTextField
+                type="text"
+                name="details.links.website"
+                label=""
+                placeholder={t('steps.details.links.fields.website')}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormTextField
+                type="text"
+                name="details.links.media"
+                label=""
+                placeholder={t('steps.details.links.fields.media')}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormTextField
+                type="text"
+                name="details.links.facebook"
+                label=""
+                placeholder={t('steps.details.links.fields.facebook')}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormTextField
+                type="text"
+                name="details.links.donationPlatform"
+                label=""
+                placeholder={t('steps.details.links.fields.donation-platforms')}
+              />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <FileUpload buttonLabel={t('steps.details.photos')} onUpload={(files) => {}} />
+        </Grid>
+        <Grid item xs={12}>
+          <FileUpload buttonLabel={t('steps.details.documents')} onUpload={(files) => {}} />
+        </Grid>
+      </Grid>
+    </Grid>
+  )
 }