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

public/locales/bg/campaign-application.json

@@ -20,6 +20,26 @@
         }
       }
     },
+    "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

@@ -20,6 +20,26 @@
         }
       }
     },
+    "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/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>
+  )
 }