feature: checkout confirmation

package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",
 		"build": "tsc && vite build",
 		"lint:js": "eslint . --ext ts,tsx,js,jsx --report-unused-disable-directives --cache --max-warnings 0",
 		"lint:js:fix": "npm run lint:js -- --fix",

src/App.tsx

@@ -22,6 +22,7 @@ import NotFound from '@pages/not_found/not-found.tsx';
 import { CartProvider } from '@contexts/cart-context.tsx';
 import RecipeList from '@pages/recipe-list/index.tsx';
 import Agreement from '@pages/agreement/index.tsx';
+import CheckoutSuccess from '@pages/checkout/checkout-success/index.tsx';
 
 // импорт временных массивов для отображения каталогов и продуктов
 // временное решение для верстки, потом удалить
@@ -46,6 +47,7 @@ function App() {
 						<Route path="/catalog/:category/:id" element={<Product />} />
 						<Route path="/cart" element={<ShoppingCart />} />
 						<Route path="/cart/order" element={<Checkout />} />
+						<Route path="/cart/success" element={<CheckoutSuccess />} />
 						<Route path="/recipes" element={<RecipeList />} />
 						<Route path="/contacts" element={<Contacts />} />
 						<Route path="/recipes/:id" element={<Recipes />} />

src/components/order-status-tracker/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from './order-status-tracker.module.scss';
+import donePath from '@images/circle-ok-min.svg';
+import packagingPath from '@images/cart-add-min.svg';
+import deliveringPath from '@images/car-alt-min.svg';
+import deliveredPath from '@images/home-alt-min.svg';
+
+const OrderStatusTracker: React.FC = () => {
+	return (
+		<ul className={styles.orderStatusTracker}>
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={donePath}
+					alt="Заказ принят"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Заказ принят</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={packagingPath}
+					alt="Сборка заказа"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Сборка заказа</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={deliveringPath}
+					alt="Передан в доставку"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Передан в доставку</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={deliveredPath}
+					alt="Успешно доставлено"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Успешно доставлено</p>
+			</li>
+		</ul>
+	);
+};
+
+export default OrderStatusTracker;

src/components/order-status-tracker/order-status-tracker.module.scss

@@ -0,0 +1,72 @@
+@use '@scss/mixins' as *;
+@use '@scss/variables' as *;
+
+.orderStatusTracker {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	font-family: $ubuntu-font;
+	gap: 16px;
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 140%;
+
+	@media screen and (width <= 1024px) {
+		font-size: 14px;
+	}
+
+	@media screen and (width <= 768px) {
+		font-size: 14px;
+		flex-direction: column;
+		gap: 8px;
+	}
+}
+
+.orderStatusTracker__item {
+	max-width: 120px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	align-items: center;
+	text-align: center;
+
+	@media screen and (width <= 1024px) {
+		max-width: 80px;
+	}
+
+	@media screen and (width <= 768px) {
+		flex-direction: row;
+		gap: 16px;
+		max-width: 100%;
+	}
+}
+
+.orderStatusTracker__icon {
+	width: 80px;
+	aspect-ratio: 1;
+
+	@media screen and (width <= 1024px) {
+		width: 60px;
+	}
+
+	@media screen and (width <= 768px) {
+		width: 40px;
+	}
+}
+
+.orderStatusTracker__status {
+	padding: 0;
+	margin: 0;
+}
+
+.orderStatusTracker__spacer {
+	background: no-repeat center url('/src/assets/images/spacer-min.svg');
+	width: 64px;
+
+	@media screen and (width <= 768px) {
+		background: no-repeat center url('/src/assets/images/vspacer-min.svg');
+		width: 40px;
+		height: 20px;
+	}
+}

src/pages/checkout/checkout-success/checkout-success.module.scss

@@ -0,0 +1,79 @@
+@use '@scss/mixins' as *;
+@use '@scss/variables' as *;
+
+.checkoutSuccess {
+	display: flex;
+	flex-direction: column;
+	font-family: $ubuntu-font;
+}
+
+.checkoutSuccess__order {
+	padding: 108px 128px 100px;
+	max-width: 1024px;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (width <= 768px) {
+		align-items: stretch;
+		padding: 40px 20px;
+	}
+}
+
+.checkoutSuccess__title {
+	padding: 0 0 38px;
+
+	@media screen and (width <= 768px) {
+		text-align: left;
+		padding: 0 0 20px;
+		font-size: 24px;
+	}
+}
+
+.checkoutSuccess__paragraph {
+	padding: 0 0 74px;
+	margin: 0;
+	text-align: center;
+	font-size: 22px;
+	font-weight: 400;
+	line-height: 140%;
+
+	@media screen and (width <= 768px) {
+		padding: 0 0 32px;
+		text-align: left;
+		font-size: 14px;
+	}
+}
+
+.checkoutSuccess__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;
+	}
+}
+
+.checkoutSuccess__link {
+	color: var(--hint, #2180b6);
+	text-decoration: none;
+}
+
+.checkoutSuccess__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;
+	}
+}

src/pages/checkout/checkout-success/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import styles from './checkout-success.module.scss';
+import OurBlock from '@components/our-block';
+import { Link } from 'react-router-dom';
+import OrderStatusTracker from '@components/order-status-tracker';
+
+const CheckoutSuccess: React.FC = () => {
+	const [order, setOrder] = React.useState<string>('');
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	React.useEffect(
+		() =>
+			location.state?.order
+				? setOrder(location.state.order)
+				: navigate('/', { replace: true }),
+		[location, navigate]
+	);
+
+	return (
+		<div className={styles.checkoutSuccess}>
+			<section className={styles.checkoutSuccess__order}>
+				<h1 className={styles.checkoutSuccess__title}>
+					Заказ №{order} успешно оформлен!
+				</h1>
+				<p className={styles.checkoutSuccess__paragraph}>
+					Мы уже приступили к его сборке. <br />
+					За статусом заказа можно следить в{' '}
+					<Link className={styles.checkoutSuccess__link} to="/profile">
+						личном кабинете
+					</Link>
+					.
+				</p>
+				<OrderStatusTracker />
+			</section>
+			<section className={styles.checkoutSuccess__ourBlock}>
+				<p className={styles.checkoutSuccess__advice}>
+					Пока вы ждёте заказ, можете ознакомиться с рецептами из нашего блога
+				</p>
+				<OurBlock />
+			</section>
+		</div>
+	);
+};
+
+export default CheckoutSuccess;

src/pages/checkout/index.tsx

@@ -84,10 +84,9 @@ const Checkout: React.FC = () => {
 
 		api
 			.usersOrderCreate(formData)
-			.then(() => {
-				navigate('/cart');
+			.then((res) => {
+				navigate('/cart/success', { state: { order: res.order_number } });
 				loadCartData();
-				alert('заказ оформлен');
 			})
 			.catch((error) => {
 				if (error.response && error.response.data && error.response.data.errors) {