Merge pull request #205 from Lapkipomoshi/dev_n1k

feat: подключение платежа и правки баг-репортов
Lapkipomoshi · Dec 4, 2023 · 8f3e8ed · 8f3e8ed
2 parents 50b776a + 53f8858
commit 8f3e8ed
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 19 deletions.
diff --git a/src/components/DetailsCard/styles/__title/details-card__title.css b/src/components/DetailsCard/styles/__title/details-card__title.css
@@ -1,5 +1,4 @@
 .details-card__title {
   margin: 0;
-  margin-bottom: 16px;
   padding: 0;
 }
diff --git a/src/components/DetailsCard/svg/PlusMinus.css b/src/components/DetailsCard/svg/PlusMinus.css
@@ -1,6 +1,6 @@
 .plus-minus {
-  width: 32px;
-  height: 32px;
+  width: 29px;
+  height: 29px;
 }
 
 .plus-minus line {

diff --git a/src/modules/Faq/Faq.css b/src/modules/Faq/Faq.css
@@ -22,6 +22,7 @@
 .faq__text {
   width: 100%;
   margin: -4px 0 0;
+  margin-top: 16px;
   padding: 0 240px 0 0;
   font-size: 18px;
   line-height: 28px;

diff --git a/src/modules/HelpToShelter/ApiHelpToShelter.js b/src/modules/HelpToShelter/ApiHelpToShelter.js
@@ -0,0 +1,24 @@
+import { baseUrl } from '../../utils/constants';
+
+// eslint-disable-next-line
+export const donateToShelter = async (id, amount) => {
+  try {
+    const response = await fetch(`${baseUrl}/v1/payments/shelters/${id}/donate/`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        amount
+      })
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return data.payment_confirm_url;
+    }
+    throw new Error('Ошибка при отправке запроса');
+  } catch (error) {
+    throw new Error('Ошибка:', error);
+  }
+};
diff --git a/src/modules/HelpToShelter/HelpToShelter.jsx b/src/modules/HelpToShelter/HelpToShelter.jsx
@@ -1,16 +1,30 @@
 import React from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext, useParams } from 'react-router-dom';
 import './HelpToShelter.css';
 import { Button } from '../../ui';
 import DeclarationInput from '../../ui/DeclarationInput/DeclarationInput';
 import * as regex from '../../utils/regex';
 import * as errorMessage from '../../utils/errorMessage';
 import useInput from '../../hooks/useInput';
+import { donateToShelter } from './ApiHelpToShelter';
 
 const HelpToShelter = () => {
+  const { id } = useParams();
   const materialAid = useInput('', { notEmpty: true, maxLength: 12, regex: regex.NUMBER }, errorMessage.DONATION_AMOUNT);
   const { isOwner, isAuth, isShelterOwner } = useOutletContext();
 
+  const handleDonate = async () => {
+    if (materialAid.value !== '') {
+      const donationAmount = parseInt(materialAid.value, 10);
+      try {
+        const paymentConfirmUrl = await donateToShelter(id, donationAmount);
+        window.open(paymentConfirmUrl, '_blank');
+      } catch (error) {
+        throw new Error(error.message);
+      }
+    }
+  };
+
   return (
     <section className='shelter-section help-to-shelter'>
       { !isOwner && (
@@ -26,7 +40,13 @@ const HelpToShelter = () => {
               placeholder='1000'
             />
           )}
-          <Button className='help-to-shelter__button' disabled={!isAuth && !isShelterOwner}>Пожертвовать деньги</Button>
+          <Button
+            className='help-to-shelter__button'
+            onClick={handleDonate}
+            disabled={(!isAuth && !isShelterOwner) || materialAid.value === ''}
+          >
+            Пожертвовать деньги
+          </Button>
         </div>
       )}
       <div className='help-to-shelter__nonmat'>

diff --git a/src/pages/AddShelterPage/components/ShelterStep.jsx b/src/pages/AddShelterPage/components/ShelterStep.jsx
@@ -63,9 +63,15 @@ const ShelterStep = ({ handleBack, setShelter }) => {
     }
   }, [isInvalid]);
 
-  // добавить маску для полей времени работы приюта
   useEffect(() => {
-    const maskOptions = { mask: '00:00' };
+    const maskOptions = {
+      mask: 'HH:MM',
+      blocks: {
+        HH: { mask: IMask.MaskedRange, from: 0, to: 23 },
+        MM: { mask: IMask.MaskedRange, from: 0, to: 59 }
+      }
+    };
+
     document.querySelectorAll('.add-shelter-form__time-input').forEach((el) => {
       IMask(el, maskOptions);
     });

diff --git a/...ges/AddShelterPage/styles/add-shelter-form/__time-input/add-shelter-form__time-input.scss b/...ges/AddShelterPage/styles/add-shelter-form/__time-input/add-shelter-form__time-input.scss
@@ -1,7 +1,7 @@
 .add-shelter-form__time-input {
   width: 77px;
   margin: 0;
-  padding: 10.5px 16px;
+  padding: 10.5px 15px;
   font-size: 16px;
   line-height: 19px;
   font-weight: 400;

diff --git a/src/pages/RegisterPage/RegisterPage.scss b/src/pages/RegisterPage/RegisterPage.scss
@@ -51,6 +51,7 @@
   margin-right: 12px;
   background-repeat: no-repeat;
   background-position: center;
+  background-color: var(--color-text-light);
 
   @media (min-width: 768px) {
     height: 20px;

diff --git a/src/ui/AddPhotoBlock/AddPhotoBlock.jsx b/src/ui/AddPhotoBlock/AddPhotoBlock.jsx
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
+import Question from '../../modules/NestedRoutesMenu/svg/Question';
+import Tooltip from '../Tooltip/Tooltip';
 import './AddPhotoBlock.scss';
 
 const AddPhotoBlock = ({ photo, setPhoto, name, sizeLimit, labelText }) => {
   const [errorText, setErrorText] = useState('');
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const handlePhoto = (e) => {
     const [loadingFile] = e.target.files;
@@ -26,7 +29,22 @@ const AddPhotoBlock = ({ photo, setPhoto, name, sizeLimit, labelText }) => {
 
   return (
     <div className='add-photo-block'>
-      <label className='add-photo-block__label' htmlFor={name}>{labelText}</label>
+      <label className='add-photo-block__label' htmlFor={name}>
+        {labelText}
+        <div
+          className='add-photo-block__label-tooltip'
+          onMouseEnter={() => {setShowTooltip(true); }}
+          onMouseLeave={() => {setShowTooltip(false); }}
+        >
+          <Question className='add-photo-block__label-tooltip-svg' />
+          {showTooltip && (
+            <Tooltip className='tooltip-content'>
+              <div>Размер: до 5 Мб</div>
+              <div>Форматы: jpg, jpeg, png, bmp.</div>
+            </Tooltip>
+          )}
+        </div>
+      </label>
       <div className='add-photo-block__photo-place'>
         <label>
           <input id={name} onChange={handlePhoto} type='file' name={name} accept='.jpg, .jpeg, .png, .bmp' multiple={false} />

diff --git a/src/ui/AddPhotoBlock/styles/__label/add-photo-block__label.scss b/src/ui/AddPhotoBlock/styles/__label/add-photo-block__label.scss
@@ -1,7 +1,12 @@
 .add-photo-block__label {
+  display: flex;
   margin: 0 0 8px;
   padding: 0;
   font-size: 16px;
   line-height: 19px;
   font-weight: 500;
-}
+
+  &-tooltop-svg {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/ui/Tooltip/Tooltip.scss b/src/ui/Tooltip/Tooltip.scss
@@ -1,11 +1,20 @@
 .tooltip-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 333px;
-    border-radius: 8px;
-    background: var(--color-background-additional);
-    box-shadow: 4px 4px 17px 0 rgba(23, 23, 23, 0.12);
-    padding: 12px;
-    position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 333px;
+  border-radius: 8px;
+  background: var(--color-background-additional);
+  box-shadow: 4px 4px 17px 0 rgba(23, 23, 23, 0.12);
+  padding: 12px;
+  position: absolute;
+}
+
+.tooltip-content {
+  gap: 4px;
+  padding: 8px;
+  width: auto;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
 }