Feature/online payment button

src/components/making-order-btn/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './making-order-btn.module.scss';
-import Button from '@components/Button';
-import type { ButtonProps } from '@components/Button';
+import Button from '@components/button';
+import type { ButtonProps } from '@components/button';
 
 interface MakingOrderBtnProps extends Pick<ButtonProps, 'disabled' | 'onClick'> {}
 

src/components/payment-button/index.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import api from '@services/api';
+import Button from '@components/button';
+import styles from './payment-button.module.scss';
+
+type PaymentButtonProps = {
+	orderId: number;
+	isCheckoutPage?: boolean;
+};
+
+const PaymentButton: React.FC<PaymentButtonProps> = ({ orderId, isCheckoutPage }) => {
+	const [isDisabled, setIsDisabled] = useState(false);
+	const [paymentError, setPaymentError] = useState('');
+
+	const handlePayment = () => {
+		setIsDisabled(true);
+
+		if (orderId === 0) return;
+
+		api
+			.usersOrderPay(orderId)
+			.then(({ checkout_session_url }) => {
+				window.location.assign(checkout_session_url);
+			})
+			.catch(({ errors }) => {
+				setPaymentError(errors[0].detail);
+			})
+			.finally(() => setIsDisabled(false));
+	};
+
+	return (
+		<div className={isCheckoutPage ? styles.buttonContainer : ''}>
+			<Button
+				onClick={handlePayment}
+				buttonText="Оплатить онлайн"
+				buttonStyle="green-button"
+				disabled={isDisabled}
+				classNames={styles['green-button__type_narrow']}
+			/>
+			<span className={styles.errorText}>{paymentError}</span>
+		</div>
+	);
+};
+
+export default PaymentButton;

src/components/payment-button/payment-button.module.scss

@@ -0,0 +1,28 @@
+@use '@scss/variables' as *;
+
+.errorText {
+	padding-top: 10px;
+	min-height: 25px;
+	text-align: center;
+	color: $error-color;
+	font-size: 13px;
+	font-weight: 300;
+	line-height: 140%;
+
+	@media screen and (width <= 768px) {
+		font-size: 12px;
+		padding-top: 3px;
+		min-height: 17px;
+	}
+}
+
+.green-button__type_narrow {
+	max-width: 140px;
+}
+
+.buttonContainer {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: max-content;
+}

src/components/product-card/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import Button from '@components/Button';
+import Button from '@components/button';
 import styles from './product-card.module.scss';
 import { BASE_URL } from '@data/constants.ts';
 import LikeIcon from '@images/like-icon.svg?react';

src/components/profile-components/profile-order-mobile/index.tsx

@@ -1,8 +1,8 @@
+import clsx from 'clsx';
 import ProductCard from '@components/product-card';
-import styles from './profile-order-mobile.module.scss';
+import PaymentButton from '@components/payment-button';
 import OrderStatus from '../order-status';
-import clsx from 'clsx';
-// import { OrderList } from '@services/generated-api/data-contracts';
+import styles from './profile-order-mobile.module.scss';
 
 type OrderStatusType =
 	| 'Ordered'
@@ -29,6 +29,7 @@ type Product = {
 
 type CommonOrder = {
 	id: number;
+	is_paid: boolean;
 	order_number?: string;
 	ordering_date?: string;
 	total_price?: string;
@@ -114,7 +115,11 @@ const ProfileOrderMobile = ({
 			</div>
 			<div className={styles.status}>
 				<p className={styles.price}>{`${total_price} руб.`}</p>
-				<OrderStatus status={status} />
+				{order.is_paid ? (
+					<OrderStatus status={status} />
+				) : (
+					<PaymentButton orderId={order.id} />
+				)}
 			</div>
 		</button>
 	);

src/components/profile-components/profile-order/index.tsx

@@ -1,6 +1,7 @@
-import styles from './profile-order.module.scss';
-import OrderStatus from '../order-status';
 import clsx from 'clsx';
+import PaymentButton from '@components/payment-button';
+import OrderStatus from '../order-status';
+import styles from './profile-order.module.scss';
 
 type OrderStatusType =
 	| 'Ordered'
@@ -27,6 +28,7 @@ type Product = {
 
 type CommonOrder = {
 	id: number;
+	is_paid: boolean;
 	order_number?: string;
 	ordering_date?: string;
 	total_price?: string;
@@ -57,7 +59,6 @@ const ProfileOrder = ({
 		products,
 	} = order;
 
-	console.log(status);
 	let payment_method_ru =
 		payment_method === 'Payment at the point of delivery'
 			? 'Банковской картой'
@@ -130,7 +131,11 @@ const ProfileOrder = ({
 						<p className={styles.text}>{`Способ получения: ${delivery_method_ru}`}</p>
 					</div>
 					<div className={styles.status}>
-						<OrderStatus status={status} />
+						{order.is_paid ? (
+							<OrderStatus status={status} />
+						) : (
+							<PaymentButton orderId={order.id} />
+						)}
 					</div>
 				</div>
 			</button>

src/components/top-selling-this-week/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import api from '@services/api';
 import type { Product } from '@services/generated-api/data-contracts';
-import Button from '@components/Button';
+import Button from '@components/button';
 import ProductCard from '@components/product-card';
 import styles from './top-selling-this-week.module.scss';
 

src/pages/agreement/agreement.module.scss

@@ -37,4 +37,4 @@
 
 .agreement_p {
 	width: 100%;
-}
+}