feat: campaign application step skeleton

public/locales/bg/campaign-application.json

@@ -7,6 +7,19 @@
       "email": "Email",
       "transparencyTerms": "Потвърждавам, че кампанията отговаря на основните принципи за публикуване на платформата: да е законна, да е морална, да не е с бизнес насоченост."
     },
+    "application": {
+      "title": "Информация за кампанията",
+      "beneficiary": "Имена на бенефициента",
+      "funds": "Необходима сума в лева",
+      "campaign-end": {
+        "title": "Желана крайна дата на кампанията:",
+        "options": {
+          "funds": "До събиране на необходимите средства",
+          "ongoing": "Целогодишно/безсрочно",
+          "date": "Посочи дата"
+        }
+      }
+    },
     "admin": {
       "title": "Администраторска редакция",
       "status": "Статус",

public/locales/en/campaign-application.json

@@ -7,6 +7,19 @@
       "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"
+        }
+      }
+    },
     "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>
+  )
 }