Add Cookie Management Feature for Visitor Privacy Preferences #963
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements the cookie management functionality, enabling visitors to manage their cookie preferences in compliance with the acceptance criteria outlined below:
Key Features:
Cookie Banner Visibility:
A cookie banner titled "Використання файлів 'Cookies'" (Use of Cookies) is displayed at the bottom of the screen for first-time visitors.
Ensures visibility and accessibility for visitors.
Cookie Information:
The banner provides a brief explanation of the types of cookies used on the site:
Necessary
Statistic
Preferences
Marketing
Includes clear descriptions of their purposes.
Action Buttons:
"Дозволити всі" (Allow All): Enables all types of cookies.
"Налаштувати" (Configure): Opens a detailed settings modal for cookie management.
Detailed Cookie Settings Modal:
Includes:
A list of cookie categories (Necessary, Statistic, Preferences, Marketing) with descriptions.
Checkboxes for enabling/disabling specific cookie categories.
Two action buttons:
"Дозволити обрані" (Allow Selected): Saves selected preferences.
"Назад" (Back): Returns to the main banner.
Responsiveness:
The banner and modal adapt to various screen sizes and resolutions to ensure usability on both desktop and mobile devices.
Cookie Preferences Storage:
Cookie preferences are stored locally and applied on future visits unless the browser cache is cleared.
Default State:
The "Necessary" category is pre-checked and disabled, as these cookies are essential for the site's functionality.
Implementation Details:
Component - CookieMod:
Main component handling the cookie banner and modal logic.
State Management:
Local state manages modal visibility and selected preferences.
Preferences are stored using the browser's localStorage via react-cookie.
Styling:
Fully responsive styling with appropriate adjustments for screen sizes (375px, 768px, etc.).
Testing:
Unit test for:
Button visibility and functionality.
All tests pass successfully.