From 6121132034da32c82af3932a79963cc4cb2a32ca Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Sat, 22 Jun 2024 20:33:44 +0300 Subject: [PATCH 01/13] feat: add remark in the stepper --- .../CampaignApplicationForm.tsx | 42 +++++++++++-------- .../CampaignApplicationRemark.tsx | 27 ++++++++++++ 2 files changed, 52 insertions(+), 17 deletions(-) create mode 100644 src/components/client/campaign-application/CampaignApplicationRemark.tsx diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index d24a6c0d9..3461ee2da 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -10,6 +10,7 @@ import CampaignApplicationOrganizer from './steps/CampaignApplicationOrganizer' import CampaignApplicationDetails from './steps/CampaignApplicationDetails' import CampaignApplication from './steps/CampaignApplication' import CampaignApplicationFormActions from './CampaignApplicationFormActions' +import CampaignApplicationRemark from './CampaignApplicationRemark' import stepsHandler from './helpers/stepsHandler' import { @@ -48,22 +49,29 @@ export default function CampaignApplicationForm() { }, []) return ( - > onSubmit={handleSubmit} initialValues={initialValues}> - }> - {steps.map((step) => ( - - - - ))} - - - - {activeStep < steps.length && steps[activeStep].component} - - - - - - + <> + > onSubmit={handleSubmit} initialValues={initialValues}> + }> + {steps.map((step) => ( + + + + ))} + + + + {activeStep < steps.length && steps[activeStep].component} + + + + + + + {(activeStep === Steps.ORGANIZER || activeStep === Steps.CAMPAIGN) && ( + + )} + ) } diff --git a/src/components/client/campaign-application/CampaignApplicationRemark.tsx b/src/components/client/campaign-application/CampaignApplicationRemark.tsx new file mode 100644 index 000000000..82f95c872 --- /dev/null +++ b/src/components/client/campaign-application/CampaignApplicationRemark.tsx @@ -0,0 +1,27 @@ +import { Typography, Link, styled } from '@mui/material' +import { useTranslation } from 'next-i18next' +import { routes } from 'common/routes' + +const StyledRemark = styled(Typography)(() => ({ + textAlign: 'center', + maxWidth: '80%', + margin: '100px auto', + fontSize: '12px', +})) + +export default function CampaignApplicationRemark() { + const { t } = useTranslation('campaign-application') + + return ( + + {t('remark.part-one')} + + {t('remark.links.terms')} + + {t('remark.part-two')} + + {t('remark.links.faq')} + + + ) +} From 9d3bddbb3778fc724769ba3f563e83f8d89eb2de Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 00:26:49 +0300 Subject: [PATCH 02/13] add translations for step one --- public/locales/bg/campaign-application.json | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/public/locales/bg/campaign-application.json b/public/locales/bg/campaign-application.json index 4d10e1170..57af778b3 100644 --- a/public/locales/bg/campaign-application.json +++ b/public/locales/bg/campaign-application.json @@ -1,6 +1,23 @@ { + "steps": { + "organizer": { + "title": "Организатор", + "first-name": "Вашето име", + "last-name": "Вашата фамилия", + "phone": "Телефон за връзка", + "email": "Email" + } + }, "cta": { "next": "Запазете и продължете", "back": "Назад" + }, + "remark": { + "part-one": "*Допълнителна информация за процеса на кандидатстване и неговите етапи можете да намерите в нашите ", + "part-two": "и в секцията ", + "links": { + "terms": "Общи условия ", + "faq": "Често задавани въпроси" + } } } From 2e891a88609682ce8f787443c5015d0cf17fe754 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 00:27:39 +0300 Subject: [PATCH 03/13] refactor action buttons styles --- .../campaign-application/CampaignApplicationForm.tsx | 7 +++---- .../CampaignApplicationFormActions.tsx | 4 ++-- .../helpers/campaignApplicationFormActions.styled.tsx | 6 +++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 3461ee2da..8e2f5077c 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -14,7 +14,6 @@ import CampaignApplicationRemark from './CampaignApplicationRemark' import stepsHandler from './helpers/stepsHandler' import { - ActionsContainer, StyledCampaignApplicationStep, StyledCampaignApplicationStepper, StyledStepConnector, @@ -60,14 +59,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..f30b7a475 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -26,7 +26,7 @@ export default function CampaignApplicationFormActions({ return ( - + {activeStep === 0 ? ( )} - + } diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx index 4fea44c25..5ab70db42 100644 --- a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx @@ -17,7 +17,7 @@ export const ActionLinkButton = styled(LinkButton)(() => ({ padding: theme.spacing(1, 5), borderRadius: theme.borders.round, color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), + fontSize: theme.typography.pxToRem(15), width: theme.spacing(50), fontWeight: 800, })) @@ -28,7 +28,7 @@ export const ActionButton = styled(Button)(() => ({ padding: theme.spacing(1, 5), borderRadius: theme.borders.round, color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), + fontSize: theme.typography.pxToRem(15), width: theme.spacing(50), fontWeight: 800, })) @@ -39,7 +39,7 @@ export const ActionSubmitButton = styled(SubmitButton)(() => ({ padding: theme.spacing(1, 5), borderRadius: theme.borders.round, color: theme.palette.common.black, - fontSize: theme.typography.pxToRem(20), + fontSize: theme.typography.pxToRem(15), width: theme.spacing(50), fontWeight: 800, })) From 3093849e4c3bcc8ba1497b8ea37d481ef51a64f9 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 00:28:10 +0300 Subject: [PATCH 04/13] create CampaignApplicationOrganizer component --- .../helpers/campaignApplication.styled.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx index c4f5d7b16..b4278d0cc 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,14 @@ 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)(() => ({ + alignSelf: 'center', + fontWeight: 600, + paddingTop: theme.spacing(5), + paddingBottom: theme.spacing(10), +})) + +export const StyledFormTextField = styled(FormTextField)(() => ({ + borderRadius: theme.borders.round, + height: theme.spacing(5), })) From 619d5286e468fb97654eeaf21f50b8459171c41d Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 00:29:37 +0300 Subject: [PATCH 05/13] edit CampaignApplicationOrganizer --- .../steps/CampaignApplicationOrganizer.tsx | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx index e533999c0..6cd2f46b9 100644 --- a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx +++ b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx @@ -1,3 +1,51 @@ +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')} + + + + + + + + + + + + + + + + + + ) } From a852547468f14c38265a5d3eecf6a692fddb1025 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 14:09:44 +0300 Subject: [PATCH 06/13] add yup validation to campaign application organizer form --- .../CampaignApplicationForm.tsx | 22 ++++++++++++-- .../helpers/campaignApplication.types.ts | 18 +++++++++++ .../helpers/validation-schema.ts | 30 +++++++++++++++++++ .../steps/CampaignApplicationOrganizer.tsx | 19 +++++++----- 4 files changed, 78 insertions(+), 11 deletions(-) create mode 100644 src/components/client/campaign-application/helpers/validation-schema.ts diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 8e2f5077c..67c87cb88 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,13 +17,22 @@ import CampaignApplicationFormActions from './CampaignApplicationFormActions' import CampaignApplicationRemark from './CampaignApplicationRemark' import stepsHandler from './helpers/stepsHandler' +import { validationSchema } from './helpers/validation-schema' + import { StyledCampaignApplicationStep, StyledCampaignApplicationStepper, StyledStepConnector, } from './helpers/campaignApplication.styled' -const initialValues: Record = {} +const initialValues: CampaignApplicationFormData = { + organizer: { + firstName: '', + lastName: '', + phone: '', + email: '', + }, +} const steps: StepType[] = [ { @@ -49,7 +62,10 @@ export default function CampaignApplicationForm() { return ( <> - > onSubmit={handleSubmit} initialValues={initialValues}> + + onSubmit={handleSubmit} + initialValues={initialValues} + validationSchema={validationSchema[activeStep]}> }> diff --git a/src/components/client/campaign-application/helpers/campaignApplication.types.ts b/src/components/client/campaign-application/helpers/campaignApplication.types.ts index bd03de13d..2958eba68 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,19 @@ export enum Steps { CAMPAIGN = 1, CAMPAIGN_DETAILS = 2, } + +export type CampaignApplicationOrganizer = Pick< + Person, + 'firstName' | 'lastName' | 'phone' | 'email' +> + +export type CampaignApplicationFormData = { + organizer: CampaignApplicationOrganizer +} + +export type CampaignApplicationFormDataSteps = { + [Steps.NONE]: never + [Steps.ORGANIZER]: { + organizer: CampaignApplicationOrganizer + } +} 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..f8b6394aa --- /dev/null +++ b/src/components/client/campaign-application/helpers/validation-schema.ts @@ -0,0 +1,30 @@ +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({ + firstName: name.required(), + lastName: 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 6cd2f46b9..a842d594b 100644 --- a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx +++ b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx @@ -8,15 +8,18 @@ export default function CampaignApplicationOrganizer() { const { t } = useTranslation('campaign-application') return ( - - {t('steps.organizer.title')} - + + + {t('steps.organizer.title')} + + @@ -24,17 +27,17 @@ export default function CampaignApplicationOrganizer() { label={t('steps.organizer.last-name')} type="text" name="organizer.lastName" - required + autoComplete="family-name" /> - + @@ -42,7 +45,7 @@ export default function CampaignApplicationOrganizer() { label={t('steps.organizer.email')} type="email" name="organizer.email" - required + autoComplete="email" /> From 989c83902f23a0ff31d9e82d518f44d50a27dbec Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 14:10:23 +0300 Subject: [PATCH 07/13] fix styles to be responsive --- .../CampaignApplicationFormActions.tsx | 7 ++++++- .../campaign-application/CampaignApplicationPage.tsx | 2 +- .../helpers/campaignApplication.styled.tsx | 4 +--- .../helpers/campaignApplicationFormActions.styled.tsx | 3 --- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx index f30b7a475..5c3f8cdae 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -29,19 +29,24 @@ export default function CampaignApplicationFormActions({ {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 b4278d0cc..40e25d7f1 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx @@ -56,10 +56,8 @@ export const StyledCampaignApplicationStepperIcon = styled(Grid)(() => ({ })) export const StyledStepHeading = styled(Heading)(() => ({ - alignSelf: 'center', fontWeight: 600, - paddingTop: theme.spacing(5), - paddingBottom: theme.spacing(10), + paddingBlock: theme.spacing(5), })) export const StyledFormTextField = styled(FormTextField)(() => ({ diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx index 5ab70db42..ed2457270 100644 --- a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx @@ -18,7 +18,6 @@ export const ActionLinkButton = styled(LinkButton)(() => ({ borderRadius: theme.borders.round, color: theme.palette.common.black, fontSize: theme.typography.pxToRem(15), - width: theme.spacing(50), fontWeight: 800, })) @@ -29,7 +28,6 @@ export const ActionButton = styled(Button)(() => ({ borderRadius: theme.borders.round, color: theme.palette.common.black, fontSize: theme.typography.pxToRem(15), - width: theme.spacing(50), fontWeight: 800, })) @@ -40,6 +38,5 @@ export const ActionSubmitButton = styled(SubmitButton)(() => ({ borderRadius: theme.borders.round, color: theme.palette.common.black, fontSize: theme.typography.pxToRem(15), - width: theme.spacing(50), fontWeight: 800, })) From 6c29886902a962d83b8ee70b7ba4a7d55936afa0 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Mon, 24 Jun 2024 17:26:17 +0300 Subject: [PATCH 08/13] fix: adjust spacing between fields and buttons to be the same --- .../campaign-application/CampaignApplicationFormActions.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx index 5c3f8cdae..a92d13c90 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -25,8 +25,8 @@ export default function CampaignApplicationFormActions({ const { t } = useTranslation('campaign-application') return ( - - + + {activeStep === 0 ? ( )} - + Date: Mon, 24 Jun 2024 21:44:24 +0300 Subject: [PATCH 09/13] refactor organizer step form according to endpoint schema --- public/locales/bg/campaign-application.json | 3 +-- .../CampaignApplicationForm.tsx | 3 +-- .../helpers/campaignApplication.types.ts | 9 +++++---- .../helpers/validation-schema.ts | 3 +-- .../steps/CampaignApplicationOrganizer.tsx | 17 ++++------------- 5 files changed, 12 insertions(+), 23 deletions(-) diff --git a/public/locales/bg/campaign-application.json b/public/locales/bg/campaign-application.json index 57af778b3..84e07d74e 100644 --- a/public/locales/bg/campaign-application.json +++ b/public/locales/bg/campaign-application.json @@ -2,8 +2,7 @@ "steps": { "organizer": { "title": "Организатор", - "first-name": "Вашето име", - "last-name": "Вашата фамилия", + "name": "Вашите име и фамилия", "phone": "Телефон за връзка", "email": "Email" } diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 67c87cb88..29b6ebfbe 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -27,8 +27,7 @@ import { const initialValues: CampaignApplicationFormData = { organizer: { - firstName: '', - lastName: '', + name: '', phone: '', email: '', }, diff --git a/src/components/client/campaign-application/helpers/campaignApplication.types.ts b/src/components/client/campaign-application/helpers/campaignApplication.types.ts index 2958eba68..bd7bab7bb 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.types.ts +++ b/src/components/client/campaign-application/helpers/campaignApplication.types.ts @@ -12,10 +12,11 @@ export enum Steps { CAMPAIGN_DETAILS = 2, } -export type CampaignApplicationOrganizer = Pick< - Person, - 'firstName' | 'lastName' | 'phone' | 'email' -> +export type CampaignApplicationOrganizer = { + name: string + phone: string + email: string +} export type CampaignApplicationFormData = { organizer: CampaignApplicationOrganizer diff --git a/src/components/client/campaign-application/helpers/validation-schema.ts b/src/components/client/campaign-application/helpers/validation-schema.ts index f8b6394aa..12b46930e 100644 --- a/src/components/client/campaign-application/helpers/validation-schema.ts +++ b/src/components/client/campaign-application/helpers/validation-schema.ts @@ -11,8 +11,7 @@ import { const organizer: yup.SchemaOf = yup .object() .shape({ - firstName: name.required(), - lastName: name.required(), + name: name.required(), phone: phone.required(), email: email.required(), }) diff --git a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx index a842d594b..350bbe8e7 100644 --- a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx +++ b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx @@ -13,21 +13,12 @@ export default function CampaignApplicationOrganizer() { {t('steps.organizer.title')} - - - - + From 53abcdef8a7c8a654d04d523a39647d38d2c4955 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 25 Jun 2024 13:32:26 +0300 Subject: [PATCH 10/13] refactor action buttons styles --- .../campaignApplicationFormActions.styled.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx index ed2457270..2da86fc7e 100644 --- a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx @@ -6,37 +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(15), - 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(15), - 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(15), - fontWeight: 800, })) From c037f6f0b2f6d97d34b8a7175808c10020c0b80c Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 25 Jun 2024 17:11:20 +0300 Subject: [PATCH 11/13] add checkboxes for accepting general terms and gdpr --- public/locales/bg/campaign-application.json | 3 +- public/locales/bg/validation.json | 2 +- .../CampaignApplicationForm.tsx | 3 ++ .../CampaignApplicationFormActions.tsx | 2 +- .../helpers/campaignApplication.types.ts | 3 ++ .../steps/CampaignApplicationOrganizer.tsx | 30 ++++++++++++++++--- 6 files changed, 36 insertions(+), 7 deletions(-) diff --git a/public/locales/bg/campaign-application.json b/public/locales/bg/campaign-application.json index 84e07d74e..50abcf78e 100644 --- a/public/locales/bg/campaign-application.json +++ b/public/locales/bg/campaign-application.json @@ -4,7 +4,8 @@ "title": "Организатор", "name": "Вашите име и фамилия", "phone": "Телефон за връзка", - "email": "Email" + "email": "Email", + "transparencyTerms": "Потвърждавам, че кампанията отговаря на основните принципи за публикуване на платформата: да е законна, да е морална, да не е с бизнес насоченост." } }, "cta": { diff --git a/public/locales/bg/validation.json b/public/locales/bg/validation.json index 990cce8f1..ffc4e1361 100644 --- a/public/locales/bg/validation.json +++ b/public/locales/bg/validation.json @@ -15,7 +15,7 @@ "agree-with": "Съгласявам се с", "informed-agree-with": "Запознат съм и се съгласявам с", "terms-and-conditions": "общите условия", - "gdpr": "политиката за защита на личните данни.", + "gdpr": "политиката за защита на личните данни", "newsletter": "Моля дайте своето съгласие", "legal-entity": "Юридическо лице", "unique-field-violation": "Полето `{1}` със тази стойност вече съществува в платформата.", diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index 29b6ebfbe..7389f3a71 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -30,6 +30,9 @@ const initialValues: CampaignApplicationFormData = { name: '', phone: '', email: '', + acceptTermsAndConditions: false, + transparencyTermsAccepted: false, + personalInformationProcessingAccepted: false, }, } diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx index a92d13c90..d77341094 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -25,7 +25,7 @@ export default function CampaignApplicationFormActions({ const { t } = useTranslation('campaign-application') return ( - + {activeStep === 0 ? ( {t('steps.organizer.title')} - + - + - + + + + + + + + {t('steps.organizer.transparencyTerms')} + } + /> + + + + + + ) } From 2a1b4475fce60154b7885ebdea98685af33a0a35 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 25 Jun 2024 17:13:49 +0300 Subject: [PATCH 12/13] rename checkbox values correctly --- .../steps/CampaignApplicationOrganizer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx index bbdaafea2..5a975dc94 100644 --- a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx +++ b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx @@ -46,12 +46,12 @@ export default function CampaignApplicationOrganizer() { - + {t('steps.organizer.transparencyTerms')} } @@ -59,7 +59,7 @@ export default function CampaignApplicationOrganizer() { - + From a27de466a6118f8643ef94b1f7a520ded200e897 Mon Sep 17 00:00:00 2001 From: teodorazhelyazkova Date: Tue, 25 Jun 2024 17:14:29 +0300 Subject: [PATCH 13/13] remove not used import --- .../campaign-application/helpers/campaignApplication.types.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/client/campaign-application/helpers/campaignApplication.types.ts b/src/components/client/campaign-application/helpers/campaignApplication.types.ts index f1a5ed129..cf6713e7a 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.types.ts +++ b/src/components/client/campaign-application/helpers/campaignApplication.types.ts @@ -1,5 +1,3 @@ -import { Person } from 'gql/person' - export type Step = { title: string component: JSX.Element