Merge branch 'test' into dev-shelter-pets-page

Lapkipomoshi · Jun 6, 2024 · ac017ac · ac017ac
2 parents 7212a08 + 810bc90
commit ac017ac
Show file tree

Hide file tree

Showing 36 changed files with 909 additions and 80 deletions.
diff --git a/.github/workflows/pr_closed.yml b/.github/workflows/pr_closed.yml
@@ -61,6 +61,8 @@ jobs:
             echo EMAIL_USE_TLS=${{ secrets.EMAIL_USE_TLS }} >> .env
             echo DEBUG=${{ secrets.DEBUG }} >> .env
             echo EMAIL_BACKEND_TYPE=${{ secrets.EMAIL_BACKEND_TYPE }} >> .env
+            echo YOOKASSA_CLIENT_ID=${{ secrets.YOOKASSA_CLIENT_ID }} >> .env
+            echo YOOKASSA_CLIENT_SECRET=${{ secrets.YOOKASSA_CLIENT_SECRET }} >> .env
             sudo docker-compose pull
             sudo docker-compose up -d
 

diff --git a/.github/workflows/pr_closed_test.yml b/.github/workflows/pr_closed_test.yml
@@ -62,6 +62,8 @@ jobs:
             echo DEBUG=${{ secrets.TEST_DEBUG }} >> .env
             echo EMAIL_BACKEND_TYPE=${{ secrets.EMAIL_BACKEND_TYPE }} >> .env
             echo REACT_APP_SERVER_TYPE=${{ secrets.REACT_APP_SERVER_TYPE_TEST }} >> .env
+            echo YOOKASSA_CLIENT_ID=${{ secrets.YOOKASSA_CLIENT_ID }} >> .env
+            echo YOOKASSA_CLIENT_SECRET=${{ secrets.YOOKASSA_CLIENT_SECRET }} >> .env
             sudo docker-compose pull
             sudo docker-compose up -d
 

diff --git a/src/components/ConfirmPopup/ConfirmPopup.jsx b/src/components/ConfirmPopup/ConfirmPopup.jsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './ConfirmPopup.scss';
+import { Button } from '../../ui';
+import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
+
+const ConfirmPopup = ({ isOpen, question, onClose, desc = '', confirmBtnText, rejectBtnText, iconBasket }) => {
+  const popup = useRef(null);
+  const navigate = useNavigate();
+
+  const handleOverlayClose = (e) => {
+    const confirmPopup = e.target.classList;
+    if (confirmPopup.contains('popup_opened') || confirmPopup.contains('popup__button-close')) {
+      onClose();
+    }
+  };
+
+  const handleEscClose = (e) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  const handleCloseToNews = () => {
+    navigate(-1);
+    onClose();
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscClose);
+    document.addEventListener('click', handleOverlayClose);
+    return () => {
+      document.removeEventListener('keydown', handleEscClose);
+      document.removeEventListener('click', handleOverlayClose);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`popup ${isOpen && 'popup_opened'}`}
+      ref={popup}
+    >
+      <div className='popup__content'>
+        <h3 className='popup__content-question standard-font standard-font_type_h3'>{question}</h3>
+
+        {desc !== '' && <p className='popup__content-descr' >{desc}</p>}
+
+        <Button
+          type='button'
+          className='popup__content-close'
+          onClick={onClose}
+        />
+        <div className='popup__content-btn-group'>
+          <Button
+            className='popup__content-btn-group-confirm'
+            type='button'
+            onClick={handleCloseToNews}
+          >
+            {iconBasket && <DeleteIcon />} {confirmBtnText}
+          </Button>
+          <Button
+            className='popup__content-btn-group-reject'
+            type='button'
+            onClick={onClose}
+            theme='transparent'
+          >
+            {rejectBtnText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmPopup;
diff --git a/src/components/ConfirmPopup/ConfirmPopup.scss b/src/components/ConfirmPopup/ConfirmPopup.scss
@@ -0,0 +1,89 @@
+$images-path: '../../images';
+
+.popup {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.36);
+  position: fixed;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.5s, opacity 0.5s ease-in-out;
+  z-index: 1;
+
+  &_opened {
+    display: flex;
+    visibility: visible;
+    opacity: 1;
+    z-index: 2;
+  }
+
+  &__content {
+    width: 100%;
+    max-width: 576px;
+    height: fit-content;
+    background-color: var(--color-background-additional);
+    border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    padding: 80px 106px 60px;
+
+    &-question,
+    &-descr {
+      text-align: center;
+      font-family: var(--font-family-title);
+      color: var(--color-text-base);
+    }
+
+    &-question {
+      font-weight: 600;
+      line-height: normal;
+      font-size: 40px;
+    }
+
+    &-descr {
+      font-weight: 500;
+      font-size: 24px;
+    }
+
+    &-close {
+      background-image: url('#{$images-path}/icons/ic_button_close.svg');
+      background-size: contain;
+      border: none;
+      width: 28px;
+      height: 28px;
+      background-color: rgba(0, 0, 0, 0);
+      padding: 0;
+      margin: 0;
+      transition: opacity 0.2s;
+      position: absolute;
+      top: 34px;
+      right: 80px;
+
+      &:hover {
+        opacity: 0.6;
+        cursor: pointer;
+      }
+    }
+
+    &-btn-group {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      margin-top: 20px;
+
+      &-confirm {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+  }
+
+}
diff --git a/src/components/ProfilePopup/ProfilePopup.scss b/src/components/ProfilePopup/ProfilePopup.scss
@@ -1,5 +1,5 @@
 .profile-popup {
-  width: 100vw;
+  width: -webkit-fill-available;
   height: 100vh;
   position: absolute;
   left: 963px;

diff --git a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './ProfileSheltersBlock.scss';
 import ShelterCard from '../ShelterCard/ShelterCard';
 import Button from '../../ui/Button/Button';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
 
 const ProfileSheltersBlock = ({ myShelters, sheltersTitle }) => {
+  const { own_shelter } = useContext(CurrentUserContext);
   const navigate = useNavigate();
-
   return (
     <div className='profile-shelters'>
-      {myShelters && myShelters.length !== 0 &&
+      {myShelters && myShelters.length !== 0 && (
         <div className='profile-shelters__container'>
           <h3 className='profile-shelters__title standard-font standard-font_type_h3'>{sheltersTitle}</h3>
           <div className='profile-shelters__shelters'>
@@ -31,12 +32,18 @@ const ProfileSheltersBlock = ({ myShelters, sheltersTitle }) => {
                 );
               })}
             </ul>
-            {myShelters && <Button onClick={
-              () => {return navigate('my-shelter');}
-            }>Перейти в приют</Button>}
+            {myShelters && (
+              <Button
+                onClick={() => {
+                  return navigate(`/shelters/${own_shelter.id}/about`);
+                }}
+              >
+                Перейти в приют
+              </Button>
+            )}
           </div>
         </div>
-      }
+      )}
     </div>
   );
 };

diff --git a/src/hooks/useValidation.js b/src/hooks/useValidation.js
@@ -8,6 +8,7 @@ const useValidation = (value, validations, errorValidateMessage) => {
   const [minLengthError, setMinLengthError] = useState(false);
   const [maxLengthError, setMaxLengthError] = useState(false);
   const [regexError, setRegexError] = useState(false);
+  const [isZeroError, setIsZeroError] = useState(false);
 
   useEffect(() => {
     if (!validations.notEmpty && !value) {
@@ -28,6 +29,9 @@ const useValidation = (value, validations, errorValidateMessage) => {
         case 'regex':
           validations[validation].test(value) ? setRegexError(false) : setRegexError(true);
           break;
+        case 'isZero':
+          parseInt(value, 10) === 0 ? setIsZeroError(true) : setIsZeroError(false);
+          break;
         default:
           break;
       }
@@ -43,10 +47,12 @@ const useValidation = (value, validations, errorValidateMessage) => {
       setErrorText(errorValidateMessage.TOO_LONG);
     } else if (regexError) {
       setErrorText(errorValidateMessage.INVALID);
+    } else if (isZeroError) {
+      setErrorText(errorValidateMessage.IS_ZERO);
     } else {
       setErrorText('');
     }
-  }, [emptyError, minLengthError, maxLengthError, regexError]);
+  }, [emptyError, minLengthError, maxLengthError, regexError, isZeroError]);
 
   return errorText;
 };

diff --git a/src/modules/AboutShelter/AboutShelter.jsx b/src/modules/AboutShelter/AboutShelter.jsx
@@ -9,19 +9,28 @@ import EditIcon from '../../images/EditIcon/EditIcon';
 import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 import ShelterOwnerStatistics from '../ShelterOwnerStatistics/ShelterOwnerStatistics';
 import petLogo from '../../images/pet.jpg';
+import { setPayment } from './api';
 
 // TODO переделать названия классов (объединить?), не совсем понятно, по какому принципу about-shelter, shelter-info
 
 const AboutShelter = () => {
   const { shelter, isOwner, isLoading } = useOutletContext();
-
   if (isLoading) {
     return null;
   }
 
   // TODO подключить рероутер на редактирование инфо о приюте (6.2.1.4 в фигме)
   // TODO сделать попап при удалении приюта (6.2.1.3 в фигме)
 
+  const handleSetPayment = async () => {
+    try {
+      const paymentConfirmUrl = await setPayment();
+      window.open(paymentConfirmUrl, '_blank');
+    } catch (error) {
+      throw new Error(error.message);
+    }
+  };
+
   return (
     <section className='shelter-section shelter-section__about'>
       <div className='shelter-section__top'>
@@ -100,7 +109,9 @@ const AboutShelter = () => {
           <h3 className='standard-font_type_h3 standard-font'>
             Подключить платежную систему
           </h3>
-          <Button>Подключить платеж</Button>
+          <Button
+            onClick={handleSetPayment}
+          >Подключить платеж</Button>
         </div>
       )}
     </section>

diff --git a/src/modules/AboutShelter/api.js b/src/modules/AboutShelter/api.js
@@ -0,0 +1,25 @@
+import { baseUrl, apiHeaders } from '../../utils/constants';
+
+
+// eslint-disable-next-line
+export const setPayment = async (id, amount) => {
+  try {
+    if (localStorage.getItem('access')) {
+      const token = localStorage.getItem('access');
+      apiHeaders.authorization = `Bearer ${token}`;
+    }
+    const response = await fetch(`${baseUrl}/v1/payments/get-partner-link/`, {
+      method: 'GET',
+      headers: apiHeaders,
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      delete apiHeaders.authorization;
+      return data.partner_link;
+    }
+    throw new Error('Ошибка при отправке запроса');
+  } catch (error) {
+    throw new Error('Ошибка:', error);
+  }
+};
diff --git a/src/modules/Header/styles/header/__logo/header__logo.scss b/src/modules/Header/styles/header/__logo/header__logo.scss
@@ -1,10 +1,10 @@
 .header__logo {
-  width: 24px;
-  height: 24px;
+  width: 132px;
+  height: 40px;
   cursor: pointer;
 
   @media (min-width: 768px) {
-    width: 40px;
-    height: 40px;
+    width: 145px;
+    height: 55px;
   }
 }
diff --git a/src/modules/Header/styles/header/header.scss b/src/modules/Header/styles/header/header.scss
@@ -1,7 +1,7 @@
 .header {
   display: flex;
   width: 100%;
-  height: 48px;
+  min-height: 56px;
   padding: 12px 16px;
   justify-content: space-between;
   align-items: center;
@@ -11,11 +11,11 @@
 
   @media (min-width: 768px) {
     padding: 28px 44px;
-    height: 97px;
+    min-height: 97px;
   }
 
   @media (min-width: 1440px) {
     padding: 18px 132px;
-    height: 88px;
+    min-height: 88px;
   }
 }
diff --git a/src/modules/Header/svg/Paw.css b/src/modules/Header/svg/Paw.css
@@ -1,9 +1,10 @@
-.paw path {
+.paw {
   transition-duration: .5s;
   fill: var(--color-accent-base);
 }
 
-.paw:hover path {
+.paw:hover path:nth-child(1),
+.paw:hover path:nth-child(3) {
   fill: var(--color-accent-hover);
 }