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';
-
-// примеры рендера каталогов
-//
-//
+import PaymentResults from '@pages/payment-results/index.tsx';
function App() {
const { isLoggedIn } = useAuth();
@@ -65,8 +55,14 @@ function App() {
} />
} />
- } />
- } />
+ }
+ />
+ }
+ />
} />
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;
+};