feat: add promocode to checkout page

src/contexts/cart-context.tsx

@@ -30,6 +30,8 @@ type CartDataItem = {
 	count_of_products: number;
 	products: ProductItem[];
 	total_price: number;
+	coupon_code?: string;
+	discount_amount?: number;
 };
 
 type ResponseText = {

src/pages/checkout/checkout.module.scss

@@ -150,6 +150,21 @@
 	}
 }
 
+.summary__promoError {
+	font-family: $ubuntu-font;
+	min-height: 20px;
+	text-align: center;
+	color: $error-color;
+	font-size: 13px;
+	font-weight: 300;
+	line-height: 140%;
+
+	@media screen and (width <= 768px) {
+		font-size: 12px;
+		min-height: 17px;
+	}
+}
+
 .summary__sale {
 	max-height: 56px;
 	display: flex;

src/pages/checkout/index.tsx

@@ -46,6 +46,8 @@ const Checkout: React.FC = () => {
 	const [comment, setComment] = React.useState<string>('');
 	const [popupText, setPopupText] = useState('');
 	const [isAgreed, setIsAgreed] = useState(false);
+	const [promocodeError, setPromocodeError] = useState('');
+	const [inputPromoValue, setInputPromoValue] = useState('');
 
 	const openInfoPopup = (text: string) => {
 		setPopupText(text);
@@ -141,6 +143,25 @@ const Checkout: React.FC = () => {
 				}
 			});
 	};
+
+	const handleDiscount = (e: React.MouseEvent<HTMLButtonElement>) => {
+		api
+			.usersShoppingCartCouponApply({ code: inputPromoValue })
+			.then(() => {
+				setPromocodeError('');
+				loadCartData();
+			})
+			.catch((error) => {
+				setPromocodeError(error.errors[0].detail);
+				loadCartData();
+			});
+		e.preventDefault();
+	};
+
+	const handleInputPromoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputPromoValue(e.target.value);
+	};
+
 	const handlePaymentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		setSelectedPayment(event.target.value);
 	};
@@ -460,15 +481,32 @@ const Checkout: React.FC = () => {
 								</p>
 								<p className={`text_type_u ${styles.pricelist__price}`}>0 руб.</p>
 							</div>
+							<div className={styles.pricelist__item}>
+								<p className={`text_type_u ${styles.summary__title}`}>Скидка</p>
+								<p className={`text_type_u ${styles.pricelist__price}`}>
+									{cartData.coupon_code ? cartData.discount_amount : 0} руб.
+								</p>
+							</div>
 							<hr className={styles.pricelist__divider} />
 						</div>
 					</div>
 					<div className={styles.summary__promo}>
 						<p className={`text_type_u`}>Промокод</p>
 						<form className={styles.summary__sale} noValidate>
-							<input type="text" className={`${styles.summary__input_type_sale}`}></input>
-							<button className={`${styles.summary__btn_type_submit}`}>Применить</button>
+							<input
+								value={inputPromoValue}
+								onChange={handleInputPromoChange}
+								type="text"
+								className={`${styles.summary__input_type_sale}`}
+							></input>
+							<button
+								className={`${styles.summary__btn_type_submit}`}
+								onClick={(e) => handleDiscount(e)}
+							>
+								Применить
+							</button>
 						</form>
+						<span className={styles.summary__promoError}>{promocodeError}</span>
 					</div>
 					<div className={styles.orderse}>
 						<button

src/services/api.ts

@@ -21,6 +21,7 @@ import type {
 	ReviewCreate,
 	ReviewUpdate,
 	Payment,
+	Coupon,
 } from './generated-api/data-contracts';
 import { BACKEND_URL } from '@data/constants.ts';
 import Cookies from 'js-cookie';
@@ -330,6 +331,17 @@ class Api {
 		});
 	}
 
+	usersShoppingCartCouponApply(data: Coupon) {
+		return this._request(`shopping_cart/coupon_apply/`, {
+			method: 'POST',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(data),
+		});
+	}
+
 	/* ----------------------------- Products ----------------------------- */
 	productsList(slug: string) {
 		const headers: HeadersInit = {

src/services/generated-api/data-contracts.ts

@@ -1133,3 +1133,24 @@ export interface OrderCheck {
 export type Payment = {
 	stripe_session_id: string;
 };
+
+export interface Coupon {
+	code: string;
+}
+
+export type Promo = {
+	code: string;
+	conditions: string;
+	discount: number;
+	discount_amount: number;
+	end_time: null;
+	id: number;
+	image: null;
+	is_active: boolean;
+	is_constant: boolean;
+	name: string;
+	new_total_price: number;
+	promotion_type: string;
+	slug: string;
+	start_time: string;
+};