diff --git a/public/locales/bg/campaign-application.json b/public/locales/bg/campaign-application.json index 4d10e1170..84e07d74e 100644 --- a/public/locales/bg/campaign-application.json +++ b/public/locales/bg/campaign-application.json @@ -1,6 +1,22 @@ { + "steps": { + "organizer": { + "title": "Организатор", + "name": "Вашите име и фамилия", + "phone": "Телефон за връзка", + "email": "Email" + } + }, "cta": { "next": "Запазете и продължете", "back": "Назад" + }, + "remark": { + "part-one": "*Допълнителна информация за процеса на кандидатстване и неговите етапи можете да намерите в нашите ", + "part-two": "и в секцията ", + "links": { + "terms": "Общи условия ", + "faq": "Често задавани въпроси" + } } } diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 3461ee2da..29b6ebfbe 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -2,7 +2,11 @@ import { useCallback, useState } from 'react' import { Grid, StepLabel } from '@mui/material' -import { Step as StepType, Steps } from './helpers/campaignApplication.types' +import { + CampaignApplicationFormData, + Step as StepType, + Steps, +} from './helpers/campaignApplication.types' import GenericForm from 'components/common/form/GenericForm' import CampaignApplicationStepperIcon from './CampaignApplicationStepperIcon' @@ -13,14 +17,21 @@ import CampaignApplicationFormActions from './CampaignApplicationFormActions' import CampaignApplicationRemark from './CampaignApplicationRemark' import stepsHandler from './helpers/stepsHandler' +import { validationSchema } from './helpers/validation-schema' + import { - ActionsContainer, StyledCampaignApplicationStep, StyledCampaignApplicationStepper, StyledStepConnector, } from './helpers/campaignApplication.styled' -const initialValues: Record = {} +const initialValues: CampaignApplicationFormData = { + organizer: { + name: '', + phone: '', + email: '', + }, +} const steps: StepType[] = [ { @@ -50,7 +61,10 @@ export default function CampaignApplicationForm() { return ( <> - > onSubmit={handleSubmit} initialValues={initialValues}> + + onSubmit={handleSubmit} + initialValues={initialValues} + validationSchema={validationSchema[activeStep]}> }> @@ -60,14 +74,14 @@ export default function CampaignApplicationForm() { ))} - + {activeStep < steps.length && steps[activeStep].component} - + - + {(activeStep === Steps.ORGANIZER || activeStep === Steps.CAMPAIGN) && ( diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx index acab02d31..a92d13c90 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -25,23 +25,28 @@ export default function CampaignApplicationFormActions({ const { t } = useTranslation('campaign-application') return ( - - + + {activeStep === 0 ? ( }> {t('cta.back')} ) : ( - }> + }> {t('cta.back')} )} - + } /> diff --git a/src/components/client/campaign-application/CampaignApplicationPage.tsx b/src/components/client/campaign-application/CampaignApplicationPage.tsx index c9b7cacd3..6a70d1b95 100644 --- a/src/components/client/campaign-application/CampaignApplicationPage.tsx +++ b/src/components/client/campaign-application/CampaignApplicationPage.tsx @@ -3,7 +3,7 @@ import CampaignApplicationForm from './CampaignApplicationForm' export default function CampaignApplicationPage() { return ( - + ) diff --git a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx index c4f5d7b16..40e25d7f1 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx @@ -1,6 +1,7 @@ import { styled } from '@mui/material/styles' import { Grid, Step, StepConnector, Stepper } from '@mui/material' - +import Heading from 'components/common/Heading' +import FormTextField from 'components/common/form/FormTextField' import theme from 'common/theme' export const StyledCampaignApplicationStep = styled(Step)(() => ({ @@ -54,8 +55,12 @@ export const StyledCampaignApplicationStepperIcon = styled(Grid)(() => ({ fontSize: theme.typography.pxToRem(36), })) -export const ActionsContainer = styled(Grid)(() => ({ - display: 'flex', - justifyContent: 'center', - marginTop: theme.spacing(1), +export const StyledStepHeading = styled(Heading)(() => ({ + fontWeight: 600, + paddingBlock: theme.spacing(5), +})) + +export const StyledFormTextField = styled(FormTextField)(() => ({ + borderRadius: theme.borders.round, + height: theme.spacing(5), })) diff --git a/src/components/client/campaign-application/helpers/campaignApplication.types.ts b/src/components/client/campaign-application/helpers/campaignApplication.types.ts index bd03de13d..bd7bab7bb 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.types.ts +++ b/src/components/client/campaign-application/helpers/campaignApplication.types.ts @@ -1,3 +1,5 @@ +import { Person } from 'gql/person' + export type Step = { title: string component: JSX.Element @@ -9,3 +11,20 @@ export enum Steps { CAMPAIGN = 1, CAMPAIGN_DETAILS = 2, } + +export type CampaignApplicationOrganizer = { + name: string + phone: string + email: string +} + +export type CampaignApplicationFormData = { + organizer: CampaignApplicationOrganizer +} + +export type CampaignApplicationFormDataSteps = { + [Steps.NONE]: never + [Steps.ORGANIZER]: { + organizer: CampaignApplicationOrganizer + } +} diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx index 4fea44c25..2da86fc7e 100644 --- a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx @@ -6,40 +6,31 @@ import SubmitButton from 'components/common/form/SubmitButton' import theme from 'common/theme' +const commonButtonStyles = { + padding: theme.spacing(1, 5), + border: `1px solid ${theme.palette.common.black}`, + borderRadius: theme.borders.round, + color: theme.palette.common.black, + fontSize: theme.typography.pxToRem(15), + fontWeight: 800, +} + export const Root = styled(Grid)(() => ({ marginTop: theme.spacing(15), textAlign: 'center', })) export const ActionLinkButton = styled(LinkButton)(() => ({ + ...commonButtonStyles, backgroundColor: theme.palette.common.white, - border: `1px solid ${theme.palette.common.black}`, - padding: theme.spacing(1, 5), - borderRadius: theme.borders.round, - color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), - width: theme.spacing(50), - fontWeight: 800, })) export const ActionButton = styled(Button)(() => ({ + ...commonButtonStyles, backgroundColor: theme.palette.common.white, - border: `1px solid ${theme.palette.common.black}`, - padding: theme.spacing(1, 5), - borderRadius: theme.borders.round, - color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), - width: theme.spacing(50), - fontWeight: 800, })) export const ActionSubmitButton = styled(SubmitButton)(() => ({ + ...commonButtonStyles, backgroundColor: '#62C4FB', - border: `1px solid ${theme.palette.common.black}`, - padding: theme.spacing(1, 5), - borderRadius: theme.borders.round, - color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), - width: theme.spacing(50), - fontWeight: 800, })) diff --git a/src/components/client/campaign-application/helpers/validation-schema.ts b/src/components/client/campaign-application/helpers/validation-schema.ts new file mode 100644 index 000000000..12b46930e --- /dev/null +++ b/src/components/client/campaign-application/helpers/validation-schema.ts @@ -0,0 +1,29 @@ +import * as yup from 'yup' + +import { name, phone, email } from 'common/form/validation' + +import { + CampaignApplicationFormDataSteps, + CampaignApplicationOrganizer, + Steps, +} from './campaignApplication.types' + +const organizer: yup.SchemaOf = yup + .object() + .shape({ + name: name.required(), + phone: phone.required(), + email: email.required(), + }) + .defined() + +export const validationSchema: { + [key in Steps]?: + | yup.SchemaOf + | yup.SchemaOf +} = { + [Steps.NONE]: undefined, + [Steps.ORGANIZER]: yup.object().shape({ + organizer: organizer.required(), + }), +} diff --git a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx index e533999c0..350bbe8e7 100644 --- a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx +++ b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx @@ -1,3 +1,45 @@ +import { useTranslation } from 'next-i18next' + +import { Grid } from '@mui/material' + +import { StyledStepHeading, StyledFormTextField } from '../helpers/campaignApplication.styled' + export default function CampaignApplicationOrganizer() { - return
Campaign Application Organizer
+ const { t } = useTranslation('campaign-application') + + return ( + + + {t('steps.organizer.title')} + + + + + + + + + + + + + + + + ) }