feat: add remark in the stepper (#1861)

podkrepi-bg · Jun 24, 2024 · cb28fcb · cb28fcb
1 parent b1b2036
commit cb28fcb
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git 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 (
-    <GenericForm<Record<string, string>> onSubmit={handleSubmit} initialValues={initialValues}>
-      <StyledCampaignApplicationStepper activeStep={activeStep} connector={<StyledStepConnector />}>
-        {steps.map((step) => (
-          <StyledCampaignApplicationStep key={step.title}>
-            <StepLabel StepIconComponent={CampaignApplicationStepperIcon} />
-          </StyledCampaignApplicationStep>
-        ))}
-      </StyledCampaignApplicationStepper>
-      <ActionsContainer container spacing={5}>
-        <Grid container item xs={12}>
-          {activeStep < steps.length && steps[activeStep].component}
-        </Grid>
-        <Grid container item spacing={3}>
-          <CampaignApplicationFormActions activeStep={activeStep} onBack={handleBack} />
-        </Grid>
-      </ActionsContainer>
-    </GenericForm>
+    <>
+      <GenericForm<Record<string, string>> onSubmit={handleSubmit} initialValues={initialValues}>
+        <StyledCampaignApplicationStepper
+          activeStep={activeStep}
+          connector={<StyledStepConnector />}>
+          {steps.map((step) => (
+            <StyledCampaignApplicationStep key={step.title}>
+              <StepLabel StepIconComponent={CampaignApplicationStepperIcon} />
+            </StyledCampaignApplicationStep>
+          ))}
+        </StyledCampaignApplicationStepper>
+        <ActionsContainer container spacing={5}>
+          <Grid container item xs={12}>
+            {activeStep < steps.length && steps[activeStep].component}
+          </Grid>
+          <Grid container item spacing={3}>
+            <CampaignApplicationFormActions activeStep={activeStep} onBack={handleBack} />
+          </Grid>
+        </ActionsContainer>
+      </GenericForm>
+      {(activeStep === Steps.ORGANIZER || activeStep === Steps.CAMPAIGN) && (
+        <CampaignApplicationRemark />
+      )}
+    </>
   )
 }
diff --git a/src/components/client/campaign-application/CampaignApplicationRemark.tsx 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 (
+    <StyledRemark>
+      {t('remark.part-one')}
+      <Link href={routes.termsOfService} target="_blank">
+        {t('remark.links.terms')}
+      </Link>
+      {t('remark.part-two')}
+      <Link href={routes.faq} target="_blank">
+        {t('remark.links.faq')}
+      </Link>
+    </StyledRemark>
+  )
+}