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>
   )
 }