feat: add terms of service checkbox to students registry

client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.test.tsx

@@ -1,8 +1,14 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Form } from 'antd';
-import { ERROR_MESSAGES, LABELS, PLACEHOLDERS } from 'modules/Registry/constants';
-import { PersonalInfo } from './PersonalInfo';
+import {
+  DATA_PROCESSING_TEXT,
+  ERROR_MESSAGES,
+  LABELS,
+  PLACEHOLDERS,
+  TERMS_OF_SERVICE_TEXT,
+} from 'modules/Registry/constants';
 import usePlacesAutocomplete from 'use-places-autocomplete';
+import { PersonalInfo } from './PersonalInfo';
 
 jest.mock('use-places-autocomplete');
 
@@ -138,7 +144,14 @@ describe('PersonalInfo', () => {
   test('should render data processing checkbox on student form', async () => {
     renderPersonalInfo(mockValues, true);
 
-    const checkbox = await screen.findByRole('checkbox');
+    const checkbox = await screen.findByLabelText(DATA_PROCESSING_TEXT);
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  test('should render terms of service checkbox on student form', async () => {
+    renderPersonalInfo(mockValues, true);
+
+    const checkbox = await screen.findByLabelText(TERMS_OF_SERVICE_TEXT);
     expect(checkbox).toBeInTheDocument();
   });
 

client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.tsx

@@ -1,7 +1,7 @@
 import { Form, Input, Typography } from 'antd';
 import { Dispatch, SetStateAction } from 'react';
 import { Location } from 'common/models';
-import { DataProcessingCheckbox, FormButtons, FormCard } from 'modules/Registry/components';
+import { DataProcessingCheckbox, TermsOfServiceCheckbox, FormButtons, FormCard } from 'modules/Registry/components';
 import { emailPattern, englishNamePattern, epamEmailPattern } from 'services/validators';
 import { CARD_TITLES, ERROR_MESSAGES, EXTRAS, LABELS, PLACEHOLDERS, TOOLTIPS } from 'modules/Registry/constants';
 import { LocationSelect } from 'components/Forms';
@@ -67,6 +67,7 @@ export function PersonalInfo({ location, setLocation, isStudentForm }: Props) {
       {isStudentForm ? (
         <>
           <DataProcessingCheckbox isStudentForm />
+          <TermsOfServiceCheckbox isStudentForm />
           <FormButtons />
         </>
       ) : null}

client/src/modules/Registry/components/TermsOfServiceCheckbox/TermsOfServiceCheckbox.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Form } from 'antd';
+import { ERROR_MESSAGES } from 'modules/Registry/constants';
+import { TermsOfServiceCheckbox } from './TermsOfServiceCheckbox';
+
+enum Checkbox {
+  notChecked,
+  checked,
+}
+
+const renderCheckbox = (checked = Checkbox.notChecked) =>
+  render(
+    <Form initialValues={{ termsOfService: checked }}>
+      <TermsOfServiceCheckbox />
+    </Form>,
+  );
+
+describe('TermsOfServiceCheckbox', () => {
+  const user = userEvent.setup();
+
+  test('should render checkbox', async () => {
+    renderCheckbox();
+
+    const checkbox = await screen.findByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  test('should not render error message when checkbox is selected', async () => {
+    renderCheckbox(Checkbox.checked);
+
+    const checkbox = await screen.findByRole('checkbox');
+    const errorMessage = screen.queryByText(ERROR_MESSAGES.shouldAgreeTerms);
+    expect(checkbox).toBeChecked();
+    expect(errorMessage).not.toBeInTheDocument();
+  });
+
+  test('should render error message when checkbox is not selected', async () => {
+    renderCheckbox(Checkbox.checked);
+
+    const checkbox = await screen.findByRole('checkbox');
+
+    await user.click(checkbox);
+
+    const errorMessage = await screen.findByText(ERROR_MESSAGES.shouldAgreeTerms);
+    expect(checkbox).not.toBeChecked();
+    expect(errorMessage).toBeInTheDocument();
+  });
+});

client/src/modules/Registry/components/TermsOfServiceCheckbox/TermsOfServiceCheckbox.tsx

@@ -0,0 +1,28 @@
+import { Form, Checkbox, Typography } from 'antd';
+import { ERROR_MESSAGES, TERMS_OF_SERVICE_TEXT, TAIL_FORM_ITEM_LAYOUT } from 'modules/Registry/constants';
+
+const { Text } = Typography;
+
+type Props = {
+  isStudentForm?: boolean;
+};
+
+export function TermsOfServiceCheckbox({ isStudentForm }: Props) {
+  return (
+    <Form.Item
+      {...TAIL_FORM_ITEM_LAYOUT(!isStudentForm)}
+      name="termsOfService"
+      valuePropName="checked"
+      rules={[
+        {
+          validator: (_, value) =>
+            value ? Promise.resolve() : Promise.reject(new Error(ERROR_MESSAGES.shouldAgreeTerms)),
+        },
+      ]}
+    >
+      <Checkbox>
+        <Text type="secondary">{TERMS_OF_SERVICE_TEXT}</Text>
+      </Checkbox>
+    </Form.Item>
+  );
+}

client/src/modules/Registry/components/index.tsx

@@ -11,6 +11,7 @@ export * from './Cards/Preferences/Preferences';
 export * from './Cards/CourseDetails/CourseDetails';
 export * from './Footer/Footer';
 export * from './DataProcessingCheckbox/DataProcessingCheckbox';
+export * from './TermsOfServiceCheckbox/TermsOfServiceCheckbox';
 export * from './LanguagesMentoring/LanguagesMentoring';
 export * from './CourseLabel/CourseLabel';
 export * from './NoCourses/NoCourses';

client/src/modules/Registry/constants/index.ts

@@ -3,6 +3,8 @@ import { Rule } from 'antd/lib/form';
 const RSSCHOOL_BOT_LINK = 'https://t.me/rsschool_bot?start';
 const DATA_PROCESSING_TEXT =
   'I agree to the processing of my personal data contained in the application and sharing it with companies only for students employment purposes.';
+const TERMS_OF_SERVICE_TEXT =
+  'I agree to familiarize myself with the documentation and regularly read the announcements channel to stay informed about updates and important information.';
 const SUCCESS_TEXT = (courseName?: string) =>
   courseName
     ? `You have successfully registered for the ${courseName} course.`
@@ -11,6 +13,7 @@ const SUCCESS_TEXT = (courseName?: string) =>
 const ERROR_MESSAGES = {
   chooseAtLeastOne: 'Should choose at least one',
   shouldAgree: 'Should agree to the data processing',
+  shouldAgreeTerms: 'Should agree to the terms',
   inEnglish: (prop: string) => `${prop} should be in English`,
   email: 'Invalid email',
   epamEmail: 'Please enter a valid EPAM email',
@@ -138,6 +141,7 @@ const DEFAULT_FORM_ITEM_LAYOUT = {
 export {
   RSSCHOOL_BOT_LINK,
   DATA_PROCESSING_TEXT,
+  TERMS_OF_SERVICE_TEXT,
   ERROR_MESSAGES,
   TOOLTIPS,
   FORM_TITLES,