Merge pull request #703 from ita-social-projects/#638TermsOfServicesR…

…emoveCookiePolicyPageFromTheWebsite #638 terms of services remove cookie policy page from the website
ita-social-projects · Jul 31, 2024 · ea46a3f · ea46a3f
2 parents 77f1583 + 4e2d388
commit ea46a3f
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 15 deletions.
diff --git a/FrontEnd/src/components/CookiesPolicyPage/LinkContainer.jsx b/FrontEnd/src/components/CookiesPolicyPage/LinkContainer.jsx
@@ -13,9 +13,6 @@ const LinkContainer = () => {
       <NavLink to="/terms-and-conditions/" className={getClassName}>
         Умови користування
       </NavLink>
-      <NavLink to="/cookies-policy/" className={getClassName}>
-        Cookie Policy
-      </NavLink>
       <NavLink to="/contact/" className={getClassName}>
         Contact
       </NavLink>

diff --git a/FrontEnd/src/components/CookiesPolicyPage/RenderingTextContainer.jsx b/FrontEnd/src/components/CookiesPolicyPage/RenderingTextContainer.jsx
@@ -45,7 +45,7 @@ const RenderingTextContainer = ({ item, styles }) => {
 
 RenderingTextContainer.propTypes = {
   item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     type: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
     level: PropTypes.number,

diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.jsx b/FrontEnd/src/components/HeaderFooter/footer/top/FooterPolicy.jsx
@@ -12,11 +12,6 @@ const POLICY_LINKS = [
         title: 'Умови користування',
         link: 'terms-and-conditions/'
     },
-    {
-        id: 'i2',
-        title: 'Cookie Policy',
-        link: 'cookies-policy/'
-    },
     {
         id: 'i3',
         title: 'Contact',

diff --git a/FrontEnd/src/components/HeaderFooter/footer/top/FooterTop.module.css b/FrontEnd/src/components/HeaderFooter/footer/top/FooterTop.module.css
@@ -13,5 +13,5 @@
 .footer-top-content {
     display: flex;
     align-items: flex-start;
-    gap: 80px;
+    gap: 180px;
 }
diff --git a/FrontEnd/src/components/cookieacception/CookieMod.jsx b/FrontEnd/src/components/cookieacception/CookieMod.jsx
@@ -2,9 +2,12 @@ import { Link } from 'react-router-dom';
 import { useCookies } from 'react-cookie';
 import styles from './CookieMod.module.css';
 import cookiesimage from './cookieimg/homecookies.png';
+import { useState } from 'react';
 
 const CookieMod = ({ active, setActive }) => {
   const [cookies, setCookie] = useCookies();
+  const [detailsVisible, setDetailsVisible] = useState(false);
+
   const accessCookie = () => {
     const d = new Date();
     const cookieLifeTime = 30 * 24 * 60 * 60 * 1000;
@@ -20,21 +23,47 @@ const CookieMod = ({ active, setActive }) => {
     setCookie('first', false, { expires: d, sameSite: 'lax' });
     setActive(false);
   };
+
+  const toggleDetails = (event) => {
+    event.preventDefault();
+    setDetailsVisible(!detailsVisible);
+  };
+
   return cookies.first ? null : (
     <div
       className={`${styles['modal-window']} ${active && styles['active']}`}
       onClick={() => setActive(false)}
     >
-      <div className={styles['modal-content']} data-testid="cookiemodal">
+      <div className={styles['modal-content']} data-testid="cookiemodal" onClick={(e) => e.stopPropagation()}>
         <p className={styles['cookie-text']}>
           Наш веб-сайт використовує файли cookie, щоб покращити ваш досвід. Ви
           можете відмовитися, якщо хочете. Дізнатися більше{' '}
           {
-            <Link to="/cookies-policy" className={styles['cookie-link']}>
+            <Link className={styles['cookie-link']} onClick={toggleDetails}>
               про кукі-файли
             </Link>
           }
+
         </p>
+        {detailsVisible && (
+          <div className={styles['cookie-details']}>
+            <p><b>Використання файлів &quot;cookies&quot;</b></p>
+            <p>
+              1. Файли &quot;cookies&quot; є невеликими текстовими файлами, які можуть бути розміщені на пристрої
+              користувача під час відвідування Сайту. Вони дозволяють збирати та зберігати певну інформацію про
+              відвідувачів, таку як налаштування мови, історія перегляду, дані автентифікації та інші деталі.
+              Використання файлів &quot;cookies&quot; на Сайті сприяє поліпшенню зручності та персоналізації досвіду
+              користувачів, дозволяючи зберігати інформацію про їхній вибір та взаємодію з різними елементами Сайту.
+            </p>
+            <p>
+              2. Користувач має можливість керувати використанням файлів &quot;cookies&quot; у налаштуваннях свого
+              веб-браузера. Відключення файлів &quot;cookies&quot; може бути здійснено користувачем у будь-який
+              момент. Проте важливо зауважити, що відключення &quot;cookies&quot; може призвести до обмеження
+              функціональності Сайту, а також до втрати певних персоналізованих налаштувань та зручностей, які вони
+              забезпечують.
+            </p>
+          </div>
+        )}
         <img src={cookiesimage} alt="" className={styles['cookie-image']} />
         <button className={styles['green-btn']} onClick={accessCookie}>
           Погоджуюсь

diff --git a/FrontEnd/src/components/cookieacception/CookieMod.module.css b/FrontEnd/src/components/cookieacception/CookieMod.module.css
@@ -19,7 +19,7 @@
   padding: 20px;
   border-radius: 12px;
   background-color: white;
-  width: 300px;
+  width: 400px;
 }
 
 .green-btn {
@@ -32,6 +32,8 @@
   margin: 14px;
   margin-right: 50px;
   padding: 4px;
+  margin-left: 64px;
+  cursor: pointer;
 }
 
 .red-btn {
@@ -44,10 +46,11 @@
   margin: 10px;
   margin-left: 20px;
   padding: 4px;
+  cursor: pointer;
 }
 
 .cookie-image {
-  margin-left: 95px;
+  margin-left: 150px;
   margin-right: 50px;
   width: 100px;
   height: 70px;
@@ -57,3 +60,9 @@
   text-align: justify;
   color: #187860;
 }
+
+.cookie-details {
+  text-align: justify;
+  color: #187860;
+  padding-top: 8px;
+}
diff --git a/FrontEnd/src/tests/CookieModal.test.js b/FrontEnd/src/tests/CookieModal.test.js
@@ -35,7 +35,6 @@ describe('CookieMod component unit tests', () => {
 
     const linkElement = screen.getByText(/про кукі-файли/i);
     expect(linkElement).toBeInTheDocument();
-    expect(linkElement).toHaveAttribute('href', '/cookies-policy');
   });
 
   test('renders hidden cookie modal window', () => {