feat(cookies): MIN-201 add initial cookie banner

Short description:

Added initial cookie banner

Approach:

Implemented a CookieBanner component to inform users about cookies. The component conditionally displays a banner with the option to accept cookies, read more about the policy, and automatically accepts cookies. Redux manages the state, and local storage persists user preferences.

cookiebanner

src/components/FunctionalArea/CookieBanner/CookieBanner.component.test.tsx

+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
+import { CookieBannerState } from '@/redux/cookieBanner/cookieBanner.types';
+import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
+import cookieBannerReducer from '@/redux/cookieBanner/cookieBanner.slice';
+import { act } from 'react-dom/test-utils';
+import { CookieBanner } from './CookieBanner.component';
+import {
+  USER_ACCEPTED_COOKIES_COOKIE_NAME,
+  USER_ACCEPTED_COOKIES_COOKIE_VALUE,
+} from './CookieBanner.constants';
+
+const renderComponent = (): { store: ToolkitStoreWithSingleSlice<CookieBannerState> } => {
+  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('cookieBanner', cookieBannerReducer);
+
+  return (
+    render(
+      <Wrapper>
+        <CookieBanner />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('CookieBanner component', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+  it('renders cookie banner correctly first time', () => {
+    renderComponent();
+    expect(localStorage.getItem).toHaveBeenCalledWith(USER_ACCEPTED_COOKIES_COOKIE_NAME);
+
+    const button = screen.getByLabelText(/accept cookies/i);
+    expect(button).toBeInTheDocument();
+  });
+
+  it('hides the banner after accepting cookies', () => {
+    renderComponent();
+    const button = screen.getByLabelText(/accept cookies/i);
+    act(() => {
+      button.click();
+    });
+
+    expect(button).not.toBeInTheDocument();
+    expect(localStorage.setItem).toHaveBeenCalledWith(
+      USER_ACCEPTED_COOKIES_COOKIE_NAME,
+      USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED,
+    );
+  });
+
+  it('does not render the cookies banner when cookies are accepted', () => {
+    renderComponent();
+
+    const button = screen.getByLabelText(/accept cookies/i);
+    expect(button).toBeInTheDocument();
+
+    act(() => {
+      button.click();
+    });
+
+    renderComponent();
+
+    expect(localStorage.getItem).toHaveBeenCalledWith(USER_ACCEPTED_COOKIES_COOKIE_NAME);
+    expect(button).not.toBeInTheDocument();
+  });
+});