From 4fd057924294e76675fdff149eb4a33d789a9c5f Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Thu, 11 Jan 2024 14:37:51 +0300 Subject: [PATCH] feat: add PaymentResults page --- src/{pages => components}/payment/index.tsx | 0 src/data/constants.ts | 5 ++ src/pages/payment-results/index.tsx | 78 +++++++++++++++++++ src/pages/payment/payment-bad/index.tsx | 29 ------- .../payment-bad/payment-bad.module.scss | 52 ------------- src/pages/payment/payment-good/index.tsx | 34 -------- .../payment-good/payment-good.module.scss | 52 ------------- src/pages/payment/payment.module.scss | 33 -------- 8 files changed, 83 insertions(+), 200 deletions(-) rename src/{pages => components}/payment/index.tsx (100%) create mode 100644 src/pages/payment-results/index.tsx delete mode 100644 src/pages/payment/payment-bad/index.tsx delete mode 100644 src/pages/payment/payment-bad/payment-bad.module.scss delete mode 100644 src/pages/payment/payment-good/index.tsx delete mode 100644 src/pages/payment/payment-good/payment-good.module.scss delete mode 100644 src/pages/payment/payment.module.scss diff --git a/src/pages/payment/index.tsx b/src/components/payment/index.tsx similarity index 100% rename from src/pages/payment/index.tsx rename to src/components/payment/index.tsx diff --git a/src/data/constants.ts b/src/data/constants.ts index c767dc23..986682c6 100644 --- a/src/data/constants.ts +++ b/src/data/constants.ts @@ -39,3 +39,8 @@ export const popupInfoText = { selectAgreement: 'Для оформления заказа необходимо согласие с условиями обработки персональных данных и условиями продажи.', }; + +export const textIfOrderPaid = + 'Пока вы ждёте заказ, можете ознакомиться с рецептами из нашего блога'; +export const textIfOrderNotPaid = + 'Пока решается проблема с оплатой, вы можете ознакомиться с рецептами из нашего блога'; diff --git a/src/pages/payment-results/index.tsx b/src/pages/payment-results/index.tsx new file mode 100644 index 00000000..fc69e5c0 --- /dev/null +++ b/src/pages/payment-results/index.tsx @@ -0,0 +1,78 @@ +import { useEffect, useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import api from '@services/api'; +import successIcon from '@images/circle-ok-min.svg'; +import { textIfOrderPaid, textIfOrderNotPaid } from '@data/constants'; +import Payment from '../../components/payment'; +import OrderStatusTracker from '@components/order-status-tracker'; +import PaymentButton from '@components/payment-button'; +import Preloader from '@components/preloader'; +import failIcon from '@images/circle-not-ok.svg'; +import { useAuth } from '@hooks/use-auth'; +import styles from './payment-results.module.scss'; + +type PaymentResultsProps = { + isPaid: boolean; +}; + +const PaymentResults: React.FC = ({ isPaid }) => { + const { isLoggedIn } = useAuth(); + const [paimentInfo, setPaymentInfo] = useState({ + order_id: '', + order_number: '', + stripe_session_id: '', + }); + const textToShow = isPaid ? textIfOrderPaid : textIfOrderNotPaid; + const location = useLocation(); + const paymentSessionIid = location.search.split('=')[1]; + + useEffect(() => { + const data = { + stripe_session_id: paymentSessionIid, + }; + + api.paymentCheck(data).then(setPaymentInfo); + }, [paymentSessionIid]); + + if (!paimentInfo.order_number) return ; + + return ( + + {isPaid ? ( +
+ +

Успешно!

+ {isLoggedIn ? ( +

+ Ваш платеж по заказу {paimentInfo.order_number} принят в обработку. + Отслеживать его вы можете в личном кабинете +

+ ) : ( +

+ Ваш платеж по заказу {paimentInfo.order_number} принят в обработку. История + заказов доступна для зарегистрированных пользователей. +

+ )} + +
+ ) : ( +
+ +

+ Ваш платеж по заказу {paimentInfo.order_number} отменён +

+

+ Возможно это был временный сбой — просто попробуйте снова +

+ +
+ )} + + ); +}; + +export default PaymentResults; diff --git a/src/pages/payment/payment-bad/index.tsx b/src/pages/payment/payment-bad/index.tsx deleted file mode 100644 index 573763eb..00000000 --- a/src/pages/payment/payment-bad/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import Payment from '..'; -import PaymentButton from '@components/payment-button'; -import failIcon from '@images/circle-not-ok.svg'; -import styles from './payment-bad.module.scss'; - -const PaymentBad = () => { - const text = - 'Пока решается проблема с оплатой, вы можете ознакомиться с рецептами из нашего блога'; - - return ( - -
- -

Платеж не прошел

-

- Возможно это был временный сбой — просто попробуйте снова -

- -
- - ); -}; - -export default PaymentBad; diff --git a/src/pages/payment/payment-bad/payment-bad.module.scss b/src/pages/payment/payment-bad/payment-bad.module.scss deleted file mode 100644 index a006a8b2..00000000 --- a/src/pages/payment/payment-bad/payment-bad.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use '@scss/variables' as *; - -.image { - width: 66px; - height: 66px; -} - -.container { - padding: 108px 128px 100px; - max-width: 1024px; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-family: $ubuntu-font; - - @media screen and (width <= 768px) { - padding: 40px 20px; - } -} - -.title { - color: $active-text-color; - font-size: 36px; - font-style: normal; - font-weight: 700; - line-height: 140%; - text-align: center; - padding-top: 12px; - - @media screen and (width <= 768px) { - font-size: 24px; - } -} - -.info { - color: $active-text-color; - text-align: center; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 140%; - margin: 0; - padding: 20px 0 40px; - max-width: 340px; - - @media screen and (width <= 768px) { - font-size: 14px; - max-width: 225px; - } -} diff --git a/src/pages/payment/payment-good/index.tsx b/src/pages/payment/payment-good/index.tsx deleted file mode 100644 index a03a9386..00000000 --- a/src/pages/payment/payment-good/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Link } from 'react-router-dom'; -import Payment from '..'; -import OrderStatusTracker from '@components/order-status-tracker'; -import { useAuth } from '@hooks/use-auth'; -import successIcon from '@images/circle-ok-min.svg'; -import styles from './payment-good.module.scss'; - -const PaymentGood = () => { - const { isLoggedIn } = useAuth(); - const text = 'Пока вы ждёте заказ, можете ознакомиться с рецептами из нашего блога'; - - return ( - -
- -

Успешно!

- {isLoggedIn ? ( -

- Ваш платеж принят в обработку. Отслеживать его вы можете в - личном кабинете -

- ) : ( -

- Ваш платеж принят в обработку. История заказов доступна для зарегистрированных - пользователей. -

- )} - -
- - ); -}; - -export default PaymentGood; diff --git a/src/pages/payment/payment-good/payment-good.module.scss b/src/pages/payment/payment-good/payment-good.module.scss deleted file mode 100644 index 62ff02cf..00000000 --- a/src/pages/payment/payment-good/payment-good.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use '@scss/variables' as *; - -.image { - width: 66px; - height: 66px; -} - -.container { - padding: 108px 128px 100px; - max-width: 1024px; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-family: $ubuntu-font; - - @media screen and (width <= 768px) { - padding: 40px 20px; - } -} - -.title { - color: $active-text-color; - font-size: 36px; - font-style: normal; - font-weight: 700; - line-height: 140%; - text-align: center; - padding-top: 12px; - - @media screen and (width <= 768px) { - font-size: 24px; - } -} - -.info { - color: $active-text-color; - text-align: center; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 140%; - margin: 0; - padding: 20px 0 40px; - max-width: 450px; - - @media screen and (width <= 768px) { - font-size: 14px; - max-width: 225px; - } -} diff --git a/src/pages/payment/payment.module.scss b/src/pages/payment/payment.module.scss deleted file mode 100644 index 66982e7e..00000000 --- a/src/pages/payment/payment.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use '@scss/variables' as *; - -.payment { - display: flex; - flex-direction: column; - font-family: $ubuntu-font; -} - -.payment__ourBlock { - padding: 100px 128px 0; - max-width: 1024px; - - @media screen and (width <= 768px) { - padding: 40px 20px 0; - } - - @media screen and (width <= 550px) { - padding-right: 0; - } -} - -.payment__advice { - padding: 0 0 44px; - margin: 0; - font-size: 30px; - font-weight: 700; - line-height: 140%; - - @media screen and (width <= 768px) { - padding: 0 0 16px; - font-size: 18px; - } -}