Merge payments into prod

src/components/DetailsCard/svg/PlusMinus.css

@@ -1,6 +1,6 @@
 .plus-minus {
-  width: 32px;
-  height: 32px;
+  width: 29px;
+  height: 29px;
 }
 
 .plus-minus line {

src/components/Modal/Modal.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import './Modal.scss';
+import DeclarationInput from '../../ui/DeclarationInput/DeclarationInput';
+import { Button } from '../../ui';
+import PrivacyCheckbox from '../PrivacyCheckbox/PrivacyCheckbox';
+import EscapeIcon from '../../images/EscapeIcon/EscapeIcon';
+
+const Modal = ({ descrText, onClose, handleTakePet }) => {
+  const createInputState = (initialValue = '', allowText = true) => {
+    const [inputState, setInputState] = useState({
+      value: initialValue,
+      onChange: (e) => {
+        let newValue = e.target.value;
+        if (!allowText) {
+          newValue = newValue.replace(/\D/g, '');
+        }
+
+        setInputState((prevState) => {
+          return {
+            ...prevState,
+            value: newValue,
+            dirty: true,
+            // invalidText: newValue.length >= 2 ? '' : 'Введите хотя бы 2 символа',
+          };
+        });
+      },
+      onBlur: () => {
+        // Здесь можно добавить дополнительную логику, если нужно
+      },
+      dirty: false,
+      invalidText: '',
+    });
+
+    return inputState;
+  };
+
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isPrivacyChecked, setIsPrivacyChecked] = useState(false);
+
+  const nameInputState = createInputState();
+  const phoneInputState = createInputState('', false);
+  const emailInputState = createInputState();
+
+  const handleTakeHomeButtonClick = () => {
+    setIsModalOpen(false);
+    handleTakePet();
+  };
+
+  const isSubmitButtonEnabled = () => {
+    return nameInputState.value.trim() !== '' && phoneInputState.value.trim() !== '' && emailInputState.value.trim() !== '' && isPrivacyChecked;
+  };
+
+  return (
+    isModalOpen && (
+      <div className='modal-overlay'>
+        <div className='wrapper'>
+          {/* <EscapeIcon onClick={handleTakeHomeButtonClick} /> */}
+          <EscapeIcon
+            onClick={() => {
+              setIsModalOpen(false);
+              onClose(); // Добавьте вызов onClose, чтобы установить isApplicationSent в true при закрытии по иконке
+            }}
+          />
+          <div className='modal'>
+            <div className='modal__title standard-font standard-font_type_h3'>Оставьте заявку и приют с вами свяжется</div>
+            <div className='modal__descr standard-font standard-font_type_small'>{descrText}</div>
+            <DeclarationInput caption='Имя' inputState={nameInputState} type='text' name='name' required showError={false} />
+            <DeclarationInput
+              caption='Номер телефона'
+              inputState={phoneInputState}
+              type='tel'
+              name='phone'
+              placeholder='+7 (999) 999-99-99'
+              required
+              showError={false}
+            />
+            <DeclarationInput
+              caption='E-mail'
+              inputState={emailInputState}
+              type='email'
+              name='email'
+              placeholder='email@email.com'
+              required
+              showError={false}
+            />
+            <PrivacyCheckbox
+              isChecked={isPrivacyChecked}
+              onChange={(isChecked) => {
+                setIsPrivacyChecked(isChecked);
+              }}
+            />
+          </div>
+          <div className='btn'>
+            <Button className='btn__modal' theme='accent' type='button' onClick={handleTakeHomeButtonClick} disabled={!isSubmitButtonEnabled()}>
+              Отправить заявку
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default Modal;

src/components/Modal/Modal.scss

@@ -0,0 +1,43 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.32);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.wrapper {
+  padding: 52px 32px;
+  width: 482px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  background-color: white;
+  border-radius: 30px;
+  position: relative;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+
+  &__title {
+    color: var(--color-text-base);
+  }
+
+  &__descr {
+    color: var(--color-text-additional);
+  }
+}
+
+.btn__modal {
+  font-size: 16px;
+  padding: 12px 24px;
+}

src/components/NewBigCard/NewBigCard.css

@@ -5,5 +5,5 @@
 @import url('./styles/__info-block/new-big-card__info-block.css');
 @import url('./styles/__icon/new-big-card__icon.css');
 @import url('./styles/__info/new-big-card__info.css');
-@import url('./styles/__header/new-big-card__header.css');
+@import url('./styles/__header/new-big-card__header.scss');
 @import url('./styles/__text/new-big-card__text.css');

src/components/NewBigCard/NewBigCard.jsx

@@ -21,7 +21,7 @@ const NewBigCard = ({
             <p className='new-big-card__info'>{shelter.name}</p>
           </div>
         </div>
-        <h3 className='new-big-card__header'>{header}</h3>
+        <h3 className='standard-font standard-font_type_h3 new-big-card__header'>{header}</h3>
         <p className='new-big-card__text'>{description}</p>
       </div>
     </Link>

src/components/NewBigCard/styles/__content/new-big-card__content.css

@@ -8,7 +8,8 @@
   background-image: linear-gradient(rgba(43,43,43,0), #2b2b2b); /* 43 = 2b */
   color: #fff;
   flex-direction: column;
-  justify-content: end;
+  /* justify-content: end; */
+  justify-content: flex-end;
   box-sizing: border-box;
   z-index: 2;
 }

src/components/NewBigCard/styles/__header/new-big-card__header.css → src/components/NewBigCard/styles/__header/new-big-card__header.scss

@@ -2,7 +2,4 @@
   width: 92%;
   margin: 0 0 12px;
   padding: 0;
-  font-size: 24px;
-  line-height: 29px;
-  font-weight: 500;
 }

src/components/NewCard/styles/__info/new-card__info.css

@@ -5,4 +5,5 @@
   font-size: 16px;
   line-height: 19px;
   font-weight: 300;
+  color: var(--color-text-additional)
 }

src/components/PetCard/PetCard.jsx

@@ -5,14 +5,14 @@ import maleIcon from '../../images/icons/ic_male.svg';
 import femaleIcon from '../../images/icons/ic_female.svg';
 
 const PetCard = ({
-  id, shelterId, name, age, sex, photo,
+  id, shelterId, name, age, sex, gallery,
 }) => {
   return (
     <Link
       className='pet-card'
       to={`/shelters/${shelterId}/pets/${id}`}
     >
-      <img className='pet-card__photo' src={photo} alt={name} />
+      <img className='pet-card__photo' src={gallery[0].image} alt={name} />
       <div className='pet-card__cover' />
       <img className='pet-card__icon' src={sex === 'male' ? maleIcon : femaleIcon} alt={sex === 'male' ? 'самец' : 'самка'} />
       <p className='pet-card__name'>{name}</p>

src/components/PrivacyCheckbox/PrivacyCheckbox.jsx

@@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
 
 import './PrivacyCheckbox.scss';
 
-const PrivacyCheckbox = ({ onClick }) => {
+const PrivacyCheckbox = ({ isChecked, onChange }) => {
+  const handleCheckboxChange = () => {
+    onChange(!isChecked);
+  };
+
   return (
     <div className='privacy-checkbox'>
       <label className='privacy-checkbox__container'>
-        <input className='privacy-checkbox__input' type='checkbox' onClick={onClick} />
+        <input
+          className='privacy-checkbox__input'
+          type='checkbox'
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
         <span className='privacy-checkbox__checkbox' />
       </label>
 

src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx

@@ -1,39 +1,39 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import './ProfileSheltersBlock.scss';
 import ShelterCard from '../ShelterCard/ShelterCard';
 import Button from '../../ui/Button/Button';
-import CardsSlider from '../CardsSlider/CardsSlider';
 
-const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
+const ProfileSheltersBlock = ({ myShelters, sheltersTitle }) => {
+  const navigate = useNavigate();
+
   return (
     <div className='profile-shelters'>
-      {shelters && shelters.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'>
-            <CardsSlider modifier='profile'>
-              <ul className='profile-shelters__shelters-container'>
-                {shelters.map((shelter) => {
-                  return (
-                    <li key={shelter.id}>
-                      <ShelterCard
-                        id={shelter.id}
-                        name={shelter.name}
-                        address={shelter.address}
-                        workingFromHour={shelter.working_from_hour}
-                        workingToHour={shelter.working_to_hour}
-                        workingHours={shelter.working_hours}
-                        logo={shelter.logo}
-                        profileImage={shelter.profile_image}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-            </CardsSlider>
-
-            {owner && <Button link to='/'>Перейти в приют</Button>}
+            <ul className='profile-shelters__shelters-container'>
+              {myShelters.map((shelter) => {
+                return (
+                  <li key={shelter.id}>
+                    <ShelterCard
+                      id={shelter.id}
+                      name={shelter.name}
+                      address={shelter.address}
+                      workingFromHour={shelter.working_from_hour}
+                      workingToHour={shelter.working_to_hour}
+                      workingHours={shelter.working_hours}
+                      logo={shelter.logo}
+                      profileImage={shelter.profile_image}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+            {myShelters && <Button onClick={
+              () => {return navigate('my-shelter');}
+            }>Перейти в приют</Button>}
           </div>
         </div>
       }

src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss

@@ -1,7 +1,6 @@
 .profile-shelters__shelters {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .profile-shelters__container {