extract CheckboxFieldsWrapper

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/CheckboxFieldsWrapper.module.scss

@@ -0,0 +1,11 @@
+.checkboxFieldsWrapper{
+    margin-block: 16px 8px;
+}
+
+.errorMessage {
+    font-family: Inter;
+    color: red;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/CheckboxFieldsWrapper.tsx

@@ -0,0 +1,48 @@
+import { ChangeEvent } from 'react';
+import c from './CheckboxFieldsWrapper.module.scss';
+import { Checkbox } from '../../Checkbox';
+import { UserDataFields } from '../../../types/user/user.dto';
+
+type UserData = {
+  newsletterEnabled: boolean;
+  companiesNewsEnabled: boolean;
+  termsAndConditionsEnabled: boolean;
+};
+type Props = {
+  userData: UserData;
+  updateUserData: (newData: Partial<UserData>) => void;
+};
+export const CheckboxFieldsWrapper = ({ userData, updateUserData }: Props) => {
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    updateUserData({ [name]: checked });
+  };
+
+  return (
+    <div className={c.checkboxFieldsWrapper}>
+      <Checkbox
+        label='Želim primati novosti o DUMP Days konferenciji.'
+        checked={userData.newsletterEnabled}
+        name={UserDataFields.NewsletterEnabled}
+        onChange={handleCheckboxChange}
+        key={1}
+      />
+      <Checkbox
+        label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
+        checked={userData.companiesNewsEnabled}
+        name={UserDataFields.CompaniesNewsEnabled}
+        onChange={handleCheckboxChange}
+        key={2}
+      />
+      <Checkbox
+        label='Slažem se s uvjetima i odredbama.'
+        checked={userData.termsAndConditionsEnabled}
+        name={UserDataFields.TermsAndConditionsEnabled}
+        onChange={handleCheckboxChange}
+        key={3}
+      />
+
+      <p className={c.errorMessage}></p>
+    </div>
+  );
+};

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/index.ts

@@ -0,0 +1,2 @@
+import { CheckboxFieldsWrapper } from './CheckboxFieldsWrapper';
+export { CheckboxFieldsWrapper };

apps/app/src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.module.scss

@@ -6,7 +6,5 @@
     width: 100%;
 }
 
-.checkboxFieldsWrapper{
-    margin-block: 16px 8px;
-}
+
 

apps/app/src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.tsx

@@ -1,11 +1,11 @@
 import { ChangeEvent, useEffect } from 'react';
 import { Input } from '../../Input';
 import c from './FirstStepRegistrationForm.module.scss';
-import { Checkbox } from '../../Checkbox';
 import { RegistrationFormErrors } from '../../../types/errors/errors.dto';
 import { validateField } from '../../../helpers/validateInput';
 import { UserDataFields } from '../../../types/user/user.dto';
 import { useRegistration } from '../../../providers/RegistrationContext';
+import { CheckboxFieldsWrapper } from '../CheckboxFieldsWrapper';
 
 type UserData = {
   firstName: string;
@@ -37,6 +37,8 @@ export const FirstStepRegistrationForm = ({
     UserDataFields.Email,
     UserDataFields.Password,
     UserDataFields.RepeatedPassword,
+    UserDataFields.NewsletterEnabled,
+    UserDataFields.CompaniesNewsEnabled,
     UserDataFields.TermsAndConditionsEnabled,
   ];
 
@@ -45,11 +47,6 @@ export const FirstStepRegistrationForm = ({
     updateUserData({ [name]: value });
   };
 
-  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, checked } = e.target;
-    updateUserData({ [name]: checked });
-  };
-
   const validateFirstStep = () => {
     const newErrors: Partial<RegistrationFormErrors> = {};
 
@@ -132,32 +129,10 @@ export const FirstStepRegistrationForm = ({
         />
       </div>
 
-      <div className={c.checkboxFieldsWrapper}>
-        <Checkbox
-          label='Želim primati novosti o DUMP Days konferenciji.'
-          checked={userData.newsletterEnabled}
-          name={UserDataFields.NewsletterEnabled}
-          onChange={handleCheckboxChange}
-          error={errors[1]?.newsletterEnabled}
-          key={1}
-        />
-        <Checkbox
-          label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
-          checked={userData.companiesNewsEnabled}
-          name={UserDataFields.CompaniesNewsEnabled}
-          onChange={handleCheckboxChange}
-          error={errors[1]?.companiesNewsEnabled}
-          key={2}
-        />
-        <Checkbox
-          label='Slažem se s uvjetima i odredbama.'
-          checked={userData.termsAndConditionsEnabled}
-          name={UserDataFields.TermsAndConditionsEnabled}
-          onChange={handleCheckboxChange}
-          error={errors[1]?.termsAndConditionsEnabled}
-          key={3}
-        />
-      </div>
+      <CheckboxFieldsWrapper
+        userData={userData}
+        updateUserData={updateUserData}
+      />
     </>
   );
 };

apps/app/src/components/RegistrationForms/GeneralRegistrationForm/GeneralRegistrationForm.module.scss

@@ -24,6 +24,10 @@
         }
     }
 
+    @media (max-width: $breakpoint-tablet) {
+        padding-inline: 24px;
+    }
+
     .buttonsWrapper{
         display: flex;
         flex-direction: column;

apps/app/src/components/RegistrationForms/SecondStepRegistrationForm/SecondStepRegistrationForm.module.tsx

@@ -7,12 +7,16 @@ import { validateField, validations } from '../../../helpers/validateInput';
 import { RegistrationFormErrors } from '../../../types/errors/errors.dto';
 import { UserDataFields } from '../../../types/user/user.dto';
 import { useRegistration } from '../../../providers/RegistrationContext';
+import { CheckboxFieldsWrapper } from '../CheckboxFieldsWrapper';
 
 type UserData = {
   phoneNumber: string;
   birthYear: number | null;
   educationDegree: string | null;
   occupation: string | null;
+  newsletterEnabled: boolean;
+  companiesNewsEnabled: boolean;
+  termsAndConditionsEnabled: boolean;
 };
 
 type Props = {
@@ -33,6 +37,9 @@ export const SecondStepRegistrationForm = ({
     UserDataFields.BirthYear,
     UserDataFields.EducationDegree,
     UserDataFields.Occupation,
+    UserDataFields.NewsletterEnabled,
+    UserDataFields.CompaniesNewsEnabled,
+    UserDataFields.TermsAndConditionsEnabled,
   ];
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -82,7 +89,8 @@ export const SecondStepRegistrationForm = ({
       userData.phoneNumber !== '' &&
       userData.birthYear !== null &&
       userData.educationDegree !== null &&
-      userData.occupation !== null
+      userData.occupation !== null &&
+      userData.termsAndConditionsEnabled !== null
     ) {
       return true;
     }
@@ -151,6 +159,11 @@ export const SecondStepRegistrationForm = ({
           )}
           errorLabel={errors[2]?.occupation}
         />
+
+        <CheckboxFieldsWrapper
+          userData={userData}
+          updateUserData={updateUserData}
+        />
       </div>
     </>
   );