Merge pull request #317 from healthy-food-and-dietary-products/develop

Develop

src/components/Button/index.tsx → src/components/button-default/index.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import styles from './button.module.scss';
 
-export type ButtonProps = {
+export type ButtonDefaultProps = {
 	buttonText: string;
 	buttonStyle:
 		| 'green-border-button'
@@ -15,15 +15,15 @@ export type ButtonProps = {
 	type?: 'button' | 'submit' | 'reset';
 };
 
-const Button = ({
+const ButtonDefault = ({
 	buttonText,
 	buttonStyle,
 	classNameActive,
 	onClick,
 	disabled,
 	classNames,
 	type,
-}: ButtonProps) => {
+}: ButtonDefaultProps) => {
 	return (
 		<button
 			type={type ? type : 'button'}
@@ -40,4 +40,4 @@ const Button = ({
 	);
 };
 
-export default Button;
+export default ButtonDefault;

src/components/energy-value/energy-value.module.scss

@@ -36,7 +36,7 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.energy-value {
 		width: calc(100% - 16px);
 		max-width: 100%;

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

@@ -1,9 +1,9 @@
 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-default';
+import type { ButtonDefaultProps } from '@components/button-default';
 
-interface MakingOrderBtnProps extends Pick<ButtonProps, 'disabled' | 'onClick'> {}
+interface MakingOrderBtnProps extends Pick<ButtonDefaultProps, 'disabled' | 'onClick'> {}
 
 const MakingOrderBtn: React.FC<MakingOrderBtnProps> = ({ onClick, disabled }) => {
 	return (

src/components/payment-button/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import api from '@services/api';
-import Button from '@components/Button';
+import Button from '@components/button-default';
 import styles from './payment-button.module.scss';
 
 type PaymentButtonProps = {

src/components/ratings-and-reviews-components/review-and-rating-post-form/index.tsx

@@ -2,7 +2,7 @@ import React, { SyntheticEvent, useEffect } from 'react';
 import api from '@services/api';
 import { useFormAndValidation } from '@hooks/use-form-and-validation';
 import RatingInput from '@components/ratings-and-reviews-components/rating-input';
-import Button from '@components/button';
+import Button from '@components/button-default';
 import { dateOptions } from '../utils/constants';
 import { IRatingsAndReviews, IReview, TRating, TReviewNullable } from '../utils/types';
 import styles from './review-and-rating-post-form.module.scss';

src/components/recipes-components/ingredients-list-popup/index.tsx

@@ -17,7 +17,7 @@ const IngredientsListPopup: React.FC<RecipeIngredientsProps> = ({
 								onClick={() => handleClick(ingredient.id)}
 								className={styles['popup-ingredients__name']}
 							>
-								{ingredient?.name}
+								{`${ingredient?.name}`}
 							</span>
 							<span className={styles['popup-ingredients__weight']}>
 								{ingredient.quantity_in_recipe_measure}

src/components/recipes-components/ingredients-list/index.tsx

@@ -33,7 +33,7 @@ const IngredientsList: React.FC<RecipeIngredientsProps> = ({
 						<p
 							onClick={() => handleClick(ingredient.id)}
 							className={styles.ingredient__name}
-						>{`${ingredient.name}, ${ingredient.amount + ingredient.measure_unit}`}</p>
+						>{`${ingredient.name}`}</p>
 						<p className={styles.ingredient__weight}>
 							{ingredient.quantity_in_recipe_measure}
 						</p>

src/components/recipes-components/ingredients-list/ingredients-list.module.scss

@@ -7,7 +7,7 @@
 	font-family: $ubuntu-font;
 	color: $active-text-color;
 
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		max-width: 100%;
 		width: 100%;
 	}
@@ -39,7 +39,7 @@
 		grid-column: span 3;
 		padding: 8px 0;
 
-		@media screen and (width <= 768px) {
+		@media screen and (width <= 1024px) {
 			// width: 100%;
 			display: flex;
 			justify-content: space-between;
@@ -48,7 +48,7 @@
 }
 
 .ingredient {
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		width: 100%;
 	}
 
@@ -99,9 +99,12 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.ingredients__list {
+		display: flex;
+		flex-direction: column;
 		gap: 16px;
-		margin: 8px;
+		padding: 8px;
+		margin: 0;
 	}
 }

src/components/recipes-components/products-list-popup/index.tsx

@@ -70,7 +70,7 @@ const ProductsListPopup: React.FC<RecipeIngredientsProps> = ({
 								<p
 									className={styles.product__name}
 									onClick={() => handleClick(product.id)}
-								>{`${product.name}`}</p>
+								>{`${product.name}, ${product.amount + product.measure_unit}`}</p>
 
 								<div className={clsx(styles.product__counter, styles.counter)}>
 									<button

src/components/recipes-components/products-list-popup/products-list-popup.module.scss

@@ -164,4 +164,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
+	align-items: center;
+	text-align: center;
 }

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-default';
 import ProductCard from '@components/product-card';
 import styles from './top-selling-this-week.module.scss';
 
@@ -77,7 +77,7 @@ const TopSellingThisWeek: React.FC = () => {
 		<div className={styles.topSellingThisWeek}>
 			<h2 className={styles.topSellingThisWeek__title}>Лидеры продаж этой недели</h2>
 			<div className={styles.topSellingThisWeek__scrollContainer}>
-				<ul className={styles.topSellingThisWeek__buttonContainers}>
+				<ul className={styles.topSellingThisWeek__buttonContainer}>
 					<li>
 						<Button
 							buttonText="Все категории"

src/components/top-selling-this-week/top-selling-this-week.module.scss

@@ -27,11 +27,11 @@
 	}
 }
 
-.topSellingThisWeek__buttonContainers {
+.topSellingThisWeek__buttonContainer {
 	margin: 0;
 	padding: 16px 0;
 	display: flex;
-	flex-wrap: wrap;
+	overflow-x: scroll;
 	justify-content: center;
 	gap: 16px;
 

src/components/ui/input/index.tsx

@@ -9,7 +9,7 @@ type InputProps = {
 } & React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input: React.FC<InputProps> = (props: InputProps) => {
-	const { inputNameSpan, error, isValid, withErrorSpan, ...inputProps } = props;
+	const { inputNameSpan, error, isValid, withErrorSpan, value, ...inputProps } = props;
 	const hasError = error && error[inputProps.name || ''];
 
 	return (
@@ -19,7 +19,7 @@ const Input: React.FC<InputProps> = (props: InputProps) => {
 				className={`${styles.input_type_normal} ${
 					hasError && !isValid ? `${styles.input_type_error}` : ''
 				}`}
-				value={inputProps.value !== undefined ? String(inputProps.value) : ''}
+				value={value ? String(value) : ''}
 				{...inputProps}
 			/>
 			{withErrorSpan && <span className={styles.spanAfter}>{hasError as string}</span>}

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/pages/product/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import styles from './product.module.scss';
-import Button from '@components/Button';
+import Button from '@components/button-default';
 import { useParams } from 'react-router';
 import api from '@services/api.ts';
 import Preloader from '@components/preloader';

src/pages/profile/profile-user/index.tsx

@@ -63,8 +63,9 @@ export default function ProfileUser() {
 				first_name: `${values.profile_firstName}`,
 				last_name: `${values.profile_lastName}`,
 				// city: `${values.profile_city}`,
-				birth_date:
-					values.profile_birthDate === '' ? null : `${values.profile_birthDate}`,
+				...(values.profile_birthDate !== null && {
+					birth_date: `${values.profile_birthDate}`,
+				}),
 				phone_number: `${values.profile_phoneNumber}`,
 			})
 			.then((data) => {
@@ -97,7 +98,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_firstName}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan="Фамилия"
@@ -109,7 +109,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_lastName}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan={`Email* (Почтовый адрес)`}
@@ -133,7 +132,6 @@ export default function ProfileUser() {
 					type="phone"
 					value={values.profile_phoneNumber}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan="Username"
@@ -157,7 +155,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_birthDate || ''}
 					withErrorSpan={true}
-					required
 				/>
 				{/* <Input
 					inputNameSpan="Город"

src/pages/recipe-list/receipt-list.module.scss

@@ -3,6 +3,11 @@
 	width: calc(100% - 128px * 2);
 	display: flex;
 	flex-direction: column;
+	padding: 48px 0;
+
+	@media screen and (width <= 768px) {
+		width: calc(100% - 50px * 2);
+	}
 }
 
 .recipelist__container {
@@ -21,4 +26,22 @@
 	columns: 20px;
 	grid-template-columns: repeat(3, calc(100% / 3 - 40px));
 	grid-auto-rows: 380px;
+
+	@media screen and (width <= 1100px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 768px) {
+		grid-auto-rows: 150px;
+		justify-items: center;
+		grid-template-columns: repeat(3, calc(30% - 20px));
+	}
+
+	@media screen and (width <= 500px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 350px) {
+		grid-template-columns: 1fr;
+	}
 }