Skip to content

Commit 3e7dab5

Browse files
teodorazhelyazkovateodorazhelyazkova
authored
feat: steps campaign application and details skeleton (Epic #1842) (#1884)
* feat: campaign application step skeleton * feat: campaign details step skeleton * fix: linter return error
1 parent b2c43dd commit 3e7dab5

File tree

6 files changed

+281
-2
lines changed

6 files changed

+281
-2
lines changed

‎public/locales/bg/campaign-application.json

+33
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,39 @@
77
"email": "Email",
88
"transparencyTerms": "Потвърждавам, че кампанията отговаря на основните принципи за публикуване на платформата: да е законна, да е морална, да не е с бизнес насоченост."
99
},
10+
"application": {
11+
"title": "Информация за кампанията",
12+
"beneficiary": "Имена на бенефициента",
13+
"funds": "Необходима сума в лева",
14+
"campaign-end": {
15+
"title": "Желана крайна дата на кампанията:",
16+
"options": {
17+
"funds": "До събиране на необходимите средства",
18+
"ongoing": "Целогодишно/безсрочно",
19+
"date": "Посочи дата"
20+
}
21+
}
22+
},
23+
"details": {
24+
"title": "Разкажете ни повече за кампанията Ви",
25+
"description": "Описание",
26+
"current-status": {
27+
"label": "Какво е свършено до момента по кампанията?",
28+
"placeholder": "(набрани материални и/ или нематериални средства, какво е направено с тях, преминати прегледи/ процедури и т.н.)"
29+
},
30+
"cause": "За какво са нужни средствата?",
31+
"links": {
32+
"label": "Ако е приложимо, прикачете:",
33+
"fields": {
34+
"website": "уебсайт на кампанията",
35+
"media": "линкове към медийно отразяване",
36+
"facebook": "линк към Facebook страница на кампанията",
37+
"donation-platforms": "линк към други платформи за дарения, в които кампанията Ви е (била) активна"
38+
}
39+
},
40+
"photos": "Снимков/видео материал",
41+
"documents": "Документи"
42+
},
1043
"admin": {
1144
"title": "Администраторска редакция",
1245
"status": "Статус",

‎public/locales/en/campaign-application.json

+33
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,39 @@
77
"email": "Email",
88
"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."
99
},
10+
"application": {
11+
"title": "Campaign Application",
12+
"beneficiary": "Beneficiary names",
13+
"funds": "The required amount in leva",
14+
"campaign-end": {
15+
"title": "Desired campaign end date:",
16+
"options": {
17+
"funds": "Until the required funds are raised",
18+
"ongoing": "Year-round/ongoing",
19+
"date": "Specify date"
20+
}
21+
}
22+
},
23+
"details": {
24+
"title": "Tell us more about your campaign",
25+
"description": "Description",
26+
"current-status": {
27+
"label": "What has been done so far in the campaign?",
28+
"placeholder": "(collected material and/or non-material resources, what has been done with them, completed examinations/procedures, etc.)"
29+
},
30+
"cause": "What are the funds needed for?",
31+
"links": {
32+
"label": "If applicable, attach:",
33+
"fields": {
34+
"website": "campaign website",
35+
"media": "links to media coverage",
36+
"facebook": "link to the campaign's Facebook page",
37+
"donation-platforms": "link to other donation platforms where your campaign is (or has been) active"
38+
}
39+
},
40+
"photos": "Photo/Video material",
41+
"documents": "Documents"
42+
},
1043
"admin": {
1144
"title": "Admin edit",
1245
"status": "Status",

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

+6
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ export default function CampaignApplicationForm({ person }: Props) {
5656
transparencyTermsAccepted: false,
5757
personalInformationProcessingAccepted: false,
5858
},
59+
application: {
60+
beneficiaryNames: '',
61+
campaignType: '',
62+
funds: 0,
63+
campaignEnd: '',
64+
},
5965
}
6066

6167
const handleSubmit = () => {

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

+14
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,16 @@ export type CampaignApplicationOrganizer = {
1919
personalInformationProcessingAccepted: boolean
2020
}
2121

22+
export type CampaignApplication = {
23+
beneficiaryNames: string
24+
campaignType: string
25+
funds: number
26+
campaignEnd: string
27+
}
28+
2229
export type CampaignApplicationFormData = {
2330
organizer: CampaignApplicationOrganizer
31+
application: CampaignApplication
2432
}
2533

2634
export type CampaignApplicationFormDataSteps = {
@@ -29,3 +37,9 @@ export type CampaignApplicationFormDataSteps = {
2937
organizer: CampaignApplicationOrganizer
3038
}
3139
}
40+
41+
export enum CampaignEndTypes {
42+
FUNDS = 'funds',
43+
ONGOING = 'ongoing',
44+
DATE = 'date',
45+
}

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

+92-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,94 @@
1+
import { FormControl, Grid, Typography } from '@mui/material'
2+
import { Field, useField } from 'formik'
3+
import { useTranslation } from 'next-i18next'
4+
5+
import { StyledFormTextField, StyledStepHeading } from '../helpers/campaignApplication.styled'
6+
import { CampaignEndTypes } from '../helpers/campaignApplication.types'
7+
import CampaignTypeSelect from 'components/client/campaigns/CampaignTypeSelect'
8+
import FormDatePicker from 'components/common/form/FormDatePicker'
9+
10+
import theme from 'common/theme'
11+
112
export default function CampaignApplication() {
2-
return <div>Campaign Application</div>
13+
const { t } = useTranslation('campaign-application')
14+
const [campaignEnd] = useField('application.campaignEnd')
15+
16+
return (
17+
<Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
18+
<Grid item container justifyContent="center">
19+
<StyledStepHeading variant="h4">{t('steps.application.title')}</StyledStepHeading>
20+
</Grid>
21+
<Grid item container spacing={6} justifyContent="space-between" direction="row">
22+
<Grid item xs={12}>
23+
<StyledFormTextField
24+
label={t('steps.application.beneficiary')}
25+
type="text"
26+
name="application.beneficiary"
27+
autoComplete="name"
28+
/>
29+
</Grid>
30+
<Grid item xs={12}>
31+
<CampaignTypeSelect />
32+
</Grid>
33+
<Grid item xs={12}>
34+
<StyledFormTextField
35+
label={t('steps.application.funds')}
36+
type="number"
37+
name="application.funds"
38+
/>
39+
</Grid>
40+
<Grid container item>
41+
<Grid item xs={12}>
42+
<Typography sx={{ fontSize: theme.typography.pxToRem(16), paddingBottom: 2 }}>
43+
{t('steps.application.campaign-end.title')}
44+
</Typography>
45+
</Grid>
46+
<Grid container item xs={12}>
47+
<FormControl>
48+
<Grid container item spacing={2} xs={12}>
49+
<Grid item xs={12}>
50+
<label>
51+
<Field
52+
size="medium"
53+
type="radio"
54+
name="application.campaignEnd"
55+
value={CampaignEndTypes.FUNDS}
56+
/>
57+
{t('steps.application.campaign-end.options.funds')}
58+
</label>
59+
</Grid>
60+
<Grid item xs={12}>
61+
<label>
62+
<Field
63+
size="medium"
64+
type="radio"
65+
name="application.campaignEnd"
66+
value={CampaignEndTypes.ONGOING}
67+
/>
68+
{t('steps.application.campaign-end.options.ongoing')}
69+
</label>
70+
</Grid>
71+
<Grid item xs={12}>
72+
<label>
73+
<Field
74+
size="medium"
75+
type="radio"
76+
name="application.campaignEnd"
77+
value={CampaignEndTypes.DATE}
78+
/>
79+
{t('steps.application.campaign-end.options.date')}
80+
</label>
81+
</Grid>
82+
</Grid>
83+
{campaignEnd.value === CampaignEndTypes.DATE && (
84+
<Grid item xs={6} sx={{ paddingTop: 2 }}>
85+
<FormDatePicker name="application.campaign-end" label="" />
86+
</Grid>
87+
)}
88+
</FormControl>
89+
</Grid>
90+
</Grid>
91+
</Grid>
92+
</Grid>
93+
)
394
}

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

+103-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,105 @@
1+
import { useTranslation } from 'next-i18next'
2+
import { Grid, Typography } from '@mui/material'
3+
4+
import { StyledStepHeading } from '../helpers/campaignApplication.styled'
5+
import FormTextField from 'components/common/form/FormTextField'
6+
7+
import theme from 'common/theme'
8+
import FileUpload from 'components/common/file-upload/FileUpload'
9+
110
export default function CampaignApplicationDetails() {
2-
return <div>Campaign Application Details</div>
11+
const { t } = useTranslation('campaign-application')
12+
13+
return (
14+
<Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
15+
<Grid item container justifyContent="center">
16+
<StyledStepHeading variant="h4">{t('steps.details.title')}</StyledStepHeading>
17+
</Grid>
18+
<Grid item container spacing={6} justifyContent="space-between" direction="row">
19+
<Grid item xs={12}>
20+
<FormTextField
21+
type="text"
22+
name="details.description"
23+
label={t('steps.details.description')}
24+
multiline
25+
rows={3}
26+
/>
27+
</Grid>
28+
<Grid item xs={12}>
29+
<FormTextField
30+
type="text"
31+
name="details.currentStatus"
32+
label={t('steps.details.current-status.label')}
33+
placeholder={t('steps.details.current-status.placeholder')}
34+
multiline
35+
rows={5}
36+
/>
37+
</Grid>
38+
<Grid item xs={12}>
39+
<FormTextField
40+
type="text"
41+
name="details.cause"
42+
label={t('steps.details.cause')}
43+
multiline
44+
rows={3}
45+
/>
46+
</Grid>
47+
<Grid item xs={12}>
48+
<Typography sx={{ fontSize: theme.typography.pxToRem(16), paddingBottom: 2 }}>
49+
{t('steps.details.links.label')}
50+
</Typography>
51+
<Grid container item spacing={2} xs={12}>
52+
<Grid item xs={12}>
53+
<FormTextField
54+
type="text"
55+
name="details.links.website"
56+
label=""
57+
placeholder={t('steps.details.links.fields.website')}
58+
/>
59+
</Grid>
60+
<Grid item xs={12}>
61+
<FormTextField
62+
type="text"
63+
name="details.links.media"
64+
label=""
65+
placeholder={t('steps.details.links.fields.media')}
66+
/>
67+
</Grid>
68+
<Grid item xs={12}>
69+
<FormTextField
70+
type="text"
71+
name="details.links.facebook"
72+
label=""
73+
placeholder={t('steps.details.links.fields.facebook')}
74+
/>
75+
</Grid>
76+
<Grid item xs={12}>
77+
<FormTextField
78+
type="text"
79+
name="details.links.donationPlatform"
80+
label=""
81+
placeholder={t('steps.details.links.fields.donation-platforms')}
82+
/>
83+
</Grid>
84+
</Grid>
85+
</Grid>
86+
<Grid item xs={12}>
87+
<FileUpload
88+
buttonLabel={t('steps.details.photos')}
89+
onUpload={(files) => {
90+
return
91+
}}
92+
/>
93+
</Grid>
94+
<Grid item xs={12}>
95+
<FileUpload
96+
buttonLabel={t('steps.details.documents')}
97+
onUpload={(files) => {
98+
return
99+
}}
100+
/>
101+
</Grid>
102+
</Grid>
103+
</Grid>
104+
)
3105
}

0 commit comments

Comments
 (0)