add required GDPR consent checkbox to agent registration form

public/locales/de/translations.json

@@ -1985,7 +1985,11 @@
       "district": "Bezirk",
       "selectDistrict": "Bezirk auswählen…",
       "services": "Angebotene Leistungen",
-      "clientLanguages": "Von Bewohnenden gesprochene Sprachen"
+      "clientLanguages": "Von Bewohnenden gesprochene Sprachen",
+      "consent": {
+        "header": "Hiermit stimme ich zu:",
+        "and": "und"
+      }
     },
     "errors": {
       "passwordTooShort": "Das Passwort muss mindestens 8 Zeichen lang sein",

public/locales/en/translations.json

@@ -1606,7 +1606,11 @@
       "district": "District",
       "selectDistrict": "Select district…",
       "services": "Services provided",
-      "clientLanguages": "Languages spoken by residents"
+      "clientLanguages": "Languages spoken by residents",
+      "consent": {
+        "header": "I hereby agree to the:",
+        "and": "and"
+      }
     },
     "errors": {
       "passwordTooShort": "Password must be at least 8 characters",

src/components/AgentRegistration/helpers.ts

@@ -47,6 +47,7 @@ export function validateStep(
       errors.confirmPassword = t("agentRegistration.errors.passwordMismatch");
     if (!data.phone.trim()) errors.phone = required;
     else if (data.phone.trim().length < 7) errors.phone = t("agentRegistration.errors.phoneTooShort");
+    if (!data.consent) errors.consent = required;
   }
 
   return errors;

src/components/AgentRegistration/steps/AccountStep.tsx

@@ -2,7 +2,9 @@
 import { FormInput } from "@/components/core/common";
 import { useTranslation } from "react-i18next";
 import { AgentRegistrationData } from "../types";
-import { FieldLabel, FieldWrapper, StepDescription, StepTitle } from "../styled";
+import { FieldConsent, FieldLabel, FieldWrapper, StepDescription, StepTitle, StyledErrorMessage } from "../styled";
+import { Subpage } from "@/types";
+import { WarningCircle } from "@phosphor-icons/react";
 
 type Props = {
   data: AgentRegistrationData;
@@ -81,6 +83,30 @@ export function AccountStep({ data, onChange, errors }: Props) {
           errors={errors.phone ? [errors.phone] : []}
         />
       </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldConsent>
+          <input
+            id="consent"
+            type="checkbox"
+            checked={data.consent}
+            onChange={(e) => onChange({ consent: e.target.checked })}
+          />
+          <span>
+            {t("agentRegistration.fields.consent.header")}{" "}
+            <a href={`/${Subpage.DATA_PRIVACY}`}>{t("homepage.footer.legal.dataPrivacy")}</a>,{" "}
+            <a href={`/${Subpage.RAC_GUIDELINES}`}>{t("homepage.footer.legal.guidelines")}</a>{" "}
+            {t("agentRegistration.fields.consent.and")}{" "}
+            <a href={`/${Subpage.AGREEMENT}`}>{t("homepage.footer.legal.agreement")}</a>{" "}
+          </span>
+        </FieldConsent>
+        {errors.consent && (
+          <StyledErrorMessage>
+            <WarningCircle size={20} weight="regular" />
+            {errors.consent}
+          </StyledErrorMessage>
+        )}
+      </FieldWrapper>
     </div>
   );
 }

src/components/AgentRegistration/styled.ts

@@ -133,3 +133,29 @@ export const StyledTextarea = styled.textarea`
     border: var(--form-input-container-border-focus);
   }
 `;
+
+export const FieldConsent = styled.label`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    margin-top: 4px;
+    accent-color: var(--color-aubergine);
+    cursor: pointer;
+  }
+`;
+
+export const StyledErrorMessage = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--form-input-error-message-container-gap);
+  padding: var(--form-input-error-message-container-padding);
+  color: var(--form-input-error-message-color);
+  font-size: var(--form-input-error-message-fontSize);
+  font-weight: var(--form-input-error-message-fontWeight);
+  line-height: var(--form-input-error-message-lineHeight);
+`;

src/components/AgentRegistration/types.ts

@@ -31,6 +31,7 @@ export interface AgentRegistrationData {
   password: string;
   confirmPassword: string;
   phone: string;
+  consent: boolean;
 }
 
 export const defaultAgentRegistrationData: AgentRegistrationData = {
@@ -40,6 +41,7 @@ export const defaultAgentRegistrationData: AgentRegistrationData = {
   password: "",
   confirmPassword: "",
   phone: "",
+  consent: false,
 };
 
 export const TOTAL_STEPS = 1;