From 53f8858a54537dbeb888ecc00c71f14a466c3011 Mon Sep 17 00:00:00 2001 From: nikita Date: Mon, 4 Dec 2023 11:54:59 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BF=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E?= =?UTF-8?q?=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=BB=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D0=B6=D0=B0=20=D0=B8=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=B1=D0=B0=D0=B3-=D1=80=D0=B5=D0=BF=D0=BE=D1=80=D1=82=D0=BE?= =?UTF-8?q?=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/__title/details-card__title.css | 1 - src/components/DetailsCard/svg/PlusMinus.css | 4 +-- src/modules/Faq/Faq.css | 1 + src/modules/HelpToShelter/ApiHelpToShelter.js | 24 +++++++++++++++++ src/modules/HelpToShelter/HelpToShelter.jsx | 24 +++++++++++++++-- .../AddShelterPage/components/ShelterStep.jsx | 10 +++++-- .../add-shelter-form__time-input.scss | 2 +- src/pages/RegisterPage/RegisterPage.scss | 1 + src/ui/AddPhotoBlock/AddPhotoBlock.jsx | 20 +++++++++++++- .../__label/add-photo-block__label.scss | 7 ++++- src/ui/Tooltip/Tooltip.scss | 27 ++++++++++++------- 11 files changed, 102 insertions(+), 19 deletions(-) create mode 100644 src/modules/HelpToShelter/ApiHelpToShelter.js diff --git a/src/components/DetailsCard/styles/__title/details-card__title.css b/src/components/DetailsCard/styles/__title/details-card__title.css index 2ffd6809..2dfbec25 100644 --- 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 index f65b1564..bdcf8992 100644 --- 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 index e40e81c6..5f177836 100644 --- 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 new file mode 100644 index 00000000..f5e51478 --- /dev/null +++ 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 index 64e8e513..60cd70c0 100644 --- 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 (
{ !isOwner && ( @@ -26,7 +40,13 @@ const HelpToShelter = () => { placeholder='1000' /> )} - + )}
diff --git a/src/pages/AddShelterPage/components/ShelterStep.jsx b/src/pages/AddShelterPage/components/ShelterStep.jsx index e5740f2a..75208ef2 100644 --- 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/src/pages/AddShelterPage/styles/add-shelter-form/__time-input/add-shelter-form__time-input.scss b/src/pages/AddShelterPage/styles/add-shelter-form/__time-input/add-shelter-form__time-input.scss index 16006b60..097097d5 100644 --- a/src/pages/AddShelterPage/styles/add-shelter-form/__time-input/add-shelter-form__time-input.scss +++ b/src/pages/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 index 2cebdd46..cfbdd6fb 100644 --- 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 index 8937b1fa..3bf1692e 100644 --- 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 (
- +