feat: checkboxes for campaign application organizer step (Epic #1842) (…

…#1866) * feat: add remark in the stepper * add translations for step one * refactor action buttons styles * create CampaignApplicationOrganizer component * edit CampaignApplicationOrganizer * add yup validation to campaign application organizer form * fix styles to be responsive * fix: adjust spacing between fields and buttons to be the same * refactor organizer step form according to endpoint schema * refactor action buttons styles * add checkboxes for accepting general terms and gdpr * rename checkbox values correctly * remove not used import
podkrepi-bg · Jul 1, 2024 · 0b82795 · 0b82795
1 parent 14bf0b7
commit 0b82795
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -25,7 +25,7 @@ export default function CampaignApplicationFormActions({
  const { t } = useTranslation('campaign-application')
 
  return (
- <Root container item xs={12} spacing={6} justifyContent="space-between">
+ <Root container item xs={12} spacing={6} sx={{ marginTop: 1 }} justifyContent="space-between">
  <Grid item xs={12} md={6} flexWrap="nowrap">
  {activeStep === 0 ? (
  <ActionLinkButton

diff --git 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
@@ -16,6 +14,9 @@ export type CampaignApplicationOrganizer = {
  name: string
  phone: string
  email: string
+ acceptTermsAndConditions: boolean
+ transparencyTermsAccepted: boolean
+ personalInformationProcessingAccepted: boolean
 }
 
 export type CampaignApplicationFormData = {

diff --git a/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx b/src/components/client/campaign-application/steps/CampaignApplicationOrganizer.tsx
@@ -1,6 +1,10 @@
 import { useTranslation } from 'next-i18next'
 
-import { Grid } from '@mui/material'
+import { FormControl, Grid, Typography } from '@mui/material'
+
+import CheckboxField from 'components/common/form/CheckboxField'
+import AcceptTermsField from 'components/common/form/AcceptTermsField'
+import AcceptPrivacyPolicyField from 'components/common/form/AcceptPrivacyPolicyField'
 
 import { StyledStepHeading, StyledFormTextField } from '../helpers/campaignApplication.styled'
 
@@ -13,7 +17,7 @@ export default function CampaignApplicationOrganizer() {
  <StyledStepHeading variant="h4">{t('steps.organizer.title')}</StyledStepHeading>
  </Grid>
  <Grid item container spacing={6} justifyContent="space-between" direction="row">
- <Grid item xs={12} flexWrap="nowrap">
+ <Grid item xs={12}>
  <StyledFormTextField
  label={t('steps.organizer.name')}
  type="text"
@@ -23,15 +27,15 @@ export default function CampaignApplicationOrganizer() {
  </Grid>
  </Grid>
  <Grid item container spacing={6} justifyContent="space-between" direction="row">
- <Grid container item xs={12} md={6} flexWrap="nowrap">
+ <Grid container item xs={12} md={6}>
  <StyledFormTextField
  label={t('steps.organizer.phone')}
  type="phone"
  name="organizer.phone"
  autoComplete="tel"
  />
  </Grid>
- <Grid container item xs={12} md={6} flexWrap="nowrap">
+ <Grid container item xs={12} md={6}>
  <StyledFormTextField
  label={t('steps.organizer.email')}
  type="email"
@@ -40,6 +44,24 @@ export default function CampaignApplicationOrganizer() {
  />
  </Grid>
  </Grid>
+ <Grid item container spacing={2}>
+ <Grid item container xs={12}>
+ <AcceptTermsField name="organizer.acceptTermsAndConditions" />
+ </Grid>
+ <Grid item container xs={12}>
+ <FormControl component="fieldset">
+ <CheckboxField
+ name="organizer.transparencyTermsAccepted"
+ label={
+ <Typography variant="body2">{t('steps.organizer.transparencyTerms')}</Typography>
+ }
+ />
+ </FormControl>
+ </Grid>
+ <Grid item container xs={12}>
+ <AcceptPrivacyPolicyField name="organizer.personalInformationProcessingAccepted" />
+ </Grid>
+ </Grid>
  </Grid>
  )
 }