From cdb80de286224a84d7b97c1337f8c54959dc8541 Mon Sep 17 00:00:00 2001
From: jsapro <77.3.77@mail.ru>
Date: Thu, 11 Jan 2024 14:20:49 +0300
Subject: [PATCH] feat: add payment api request

---
 src/App.tsx                                   | 22 ++++----
 src/components/payment/payment.module.scss    | 33 ++++++++++++
 .../payment-results.module.scss               | 54 +++++++++++++++++++
 src/services/api.ts                           | 12 +++++
 src/services/generated-api/data-contracts.ts  |  4 ++
 5 files changed, 112 insertions(+), 13 deletions(-)
 create mode 100644 src/components/payment/payment.module.scss
 create mode 100644 src/pages/payment-results/payment-results.module.scss

diff --git a/src/App.tsx b/src/App.tsx
index 6071a0e0..83428602 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,17 +24,7 @@ import RecipeList from '@pages/recipe-list/index.tsx';
 import Agreement from '@pages/agreement/index.tsx';
 import DeliveryConditions from '@pages/delivery-conditions/index.tsx';
 import CheckoutSuccess from '@pages/checkout/checkout-success/index.tsx';
-import PaymentBad from '@pages/payment/payment-bad/index.tsx';
-import PaymentGood from '@pages/payment/payment-good/index.tsx';
-
-// импорт временных массивов для отображения каталогов и продуктов
-// временное решение для верстки, потом удалить
-
-// import { mainPageBlockLinks, products } from './data/dataExamples.ts';
-
-// примеры рендера каталогов
-// <CardCatalogLink title="Каталог" type="bento-grid" array={mainPageBlockLinks} />
-// <CardCatalogLink title="Овощи" type="single-row" array={products} />
+import PaymentResults from '@pages/payment-results/index.tsx';
 
 function App() {
 	const { isLoggedIn } = useAuth();
@@ -65,8 +55,14 @@ function App() {
 						</Route>
 						<Route path={URLS.AGREEMENT} element={<Agreement />} />
 						<Route path={URLS.DELIVERY_COND} element={<DeliveryConditions />} />
-						<Route path={'payment-bad'} element={<PaymentBad />} />
-						<Route path={'payment-good'} element={<PaymentGood />} />
+						<Route
+							path={'payment-is-processing'}
+							element={<PaymentResults isPaid={true} />}
+						/>
+						<Route
+							path={'payment-cancelled'}
+							element={<PaymentResults isPaid={false} />}
+						/>
 						<Route path="*" element={<NotFound />} />
 					</Routes>
 				</Layout>
diff --git a/src/components/payment/payment.module.scss b/src/components/payment/payment.module.scss
new file mode 100644
index 00000000..66982e7e
--- /dev/null
+++ b/src/components/payment/payment.module.scss
@@ -0,0 +1,33 @@
+@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;
+	}
+}
diff --git a/src/pages/payment-results/payment-results.module.scss b/src/pages/payment-results/payment-results.module.scss
new file mode 100644
index 00000000..1372d32d
--- /dev/null
+++ b/src/pages/payment-results/payment-results.module.scss
@@ -0,0 +1,54 @@
+@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;
+	max-width: 450px;
+
+	@media screen and (width <= 768px) {
+		font-size: 24px;
+		max-width: 225px;
+	}
+}
+
+.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/services/api.ts b/src/services/api.ts
index 96c6aeff..25364268 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -20,6 +20,7 @@ import type {
 	OrderPostAdd,
 	ReviewCreate,
 	ReviewUpdate,
+	Payment,
 } from './generated-api/data-contracts';
 import { BACKEND_URL } from '@data/constants.ts';
 import Cookies from 'js-cookie';
@@ -671,6 +672,17 @@ class Api {
 			method: 'GET',
 		});
 	}
+
+	/* ----------------------------- Payment ------------------------------- */
+	paymentCheck(data: Payment) {
+		return this._request('order/successful_pay/', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(data),
+		});
+	}
 }
 
 const api = new Api(BACKEND_URL);
diff --git a/src/services/generated-api/data-contracts.ts b/src/services/generated-api/data-contracts.ts
index e1d99bf9..94c407ba 100644
--- a/src/services/generated-api/data-contracts.ts
+++ b/src/services/generated-api/data-contracts.ts
@@ -1129,3 +1129,7 @@ export interface OrderCheck {
 	user: number;
 	ordered: boolean;
 }
+
+export type Payment = {
+	stripe_session_id: string;
+};