From bdb41c78ba335a239455d3b5e7ca60a60bd03882 Mon Sep 17 00:00:00 2001
From: Ilya Shcherbakov <86749581+LikeKugi@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:25:43 +0300
Subject: [PATCH 1/5] fix: refetch problems

---
 e-commerce-app/package-lock.json                     | 12 ------------
 .../ProductsQuery/ProductsQuery.tsx                  |  9 ++++++++-
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/e-commerce-app/package-lock.json b/e-commerce-app/package-lock.json
index 710ff2c..74e9da4 100644
--- a/e-commerce-app/package-lock.json
+++ b/e-commerce-app/package-lock.json
@@ -14,7 +14,6 @@
         "@mui/icons-material": "^5.14.3",
         "@mui/material": "^5.14.4",
         "@reduxjs/toolkit": "^1.9.5",
-        "@types/react-redux": "^7.1.26",
         "classnames": "^2.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -4703,17 +4702,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-redux": {
-      "version": "7.1.26",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.26.tgz",
-      "integrity": "sha512-UKPo7Cm7rswYU6PH6CmTNCRv5NYF3HrgKuHEYTK8g/3czYLrUux50gQ2pkxc9c7ZpQZi+PNhgmI8oNIRoiVIxg==",
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
-    },
     "node_modules/@types/react-router": {
       "version": "5.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
diff --git a/e-commerce-app/src/requestsComponents/ProductsQuery/ProductsQuery.tsx b/e-commerce-app/src/requestsComponents/ProductsQuery/ProductsQuery.tsx
index c3d3492..2987cbf 100644
--- a/e-commerce-app/src/requestsComponents/ProductsQuery/ProductsQuery.tsx
+++ b/e-commerce-app/src/requestsComponents/ProductsQuery/ProductsQuery.tsx
@@ -28,9 +28,12 @@ const ProductsQuery = (): JSX.Element => {
   const searchQueryLimit = useAppSelector(getQueryLimit);
   const searchQueryOffset = useAppSelector(getQueryOffset);
 
-  const [params, setParams] = useState<IBaseQueryParams>({});
+  const [params, setParams] = useState<IBaseQueryParams>({
+    limit: searchQueryLimit,
+  });
 
   useEffect(() => {
+    if (!searchQuerySort && !params.sort) return;
     if (searchQuerySort) {
       setParams((prevState) => ({
         ...prevState,
@@ -46,6 +49,7 @@ const ProductsQuery = (): JSX.Element => {
   }, [searchQuerySort]);
 
   useEffect(() => {
+    if (!searchQueryText && !params['text.en']) return;
     if (searchQueryText) {
       setParams((prevState) => ({
         ...prevState,
@@ -81,6 +85,7 @@ const ProductsQuery = (): JSX.Element => {
     }
 
     if (filterArr.length === 0) {
+      if (!params.filter?.length) return;
       setParams((prevState) => {
         const newState = {
           ...prevState,
@@ -97,6 +102,7 @@ const ProductsQuery = (): JSX.Element => {
   }, [searchQueryCentAmount, searchQueryCategories]);
 
   useEffect(() => {
+    if (searchQueryLimit === params.limit) return;
     if (searchQueryLimit) {
       setParams((prevState) => ({
         ...prevState,
@@ -114,6 +120,7 @@ const ProductsQuery = (): JSX.Element => {
   }, [searchQueryLimit]);
 
   useEffect(() => {
+    if (searchQueryOffset === params.offset || (!searchQueryOffset && !params.offset)) return;
     if (searchQueryOffset) {
       setParams((prevState) => ({
         ...prevState,

From 01f8759ae9cd6a759f53ea93c9ef100294ae46e0 Mon Sep 17 00:00:00 2001
From: Ilya Shcherbakov <86749581+LikeKugi@users.noreply.github.com>
Date: Thu, 14 Sep 2023 23:16:19 +0300
Subject: [PATCH 2/5] feat: add modifier for line items quantity in cart

---
 .../src/pages/BasketPage/BasketPage.tsx       |  7 +-
 .../src/pages/ProductPage/ProductPage.tsx     | 36 ++-------
 .../CartModifyQuantity/CartModifyQuantity.tsx | 78 +++++++++++++++++++
 3 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx

diff --git a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
index 1bad004..a67a205 100644
--- a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
+++ b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
@@ -11,6 +11,7 @@ import Paper from '@mui/material/Paper';
 import Divider from '@mui/material/Divider';
 import ButtonBase from '@mui/material/ButtonBase';
 import { styled } from '@mui/material/styles';
+import CartModifyQuantity from '../../requestsComponents/CartModifyQuantity/CartModifyQuantity';
 
 const Img = styled('img')({
   margin: 'auto',
@@ -93,11 +94,7 @@ export const BasketPage: FC = () => {
               </Typography>
             </Grid>
             <Grid item className="cart-product-quantity" xs={2.8} alignSelf="center" display="flex">
-              <Button sx={{ minWidth: 'min-content', backgroundColor: 'lightgrey' }}>-</Button>
-              <Typography className="count" padding="0.7rem  0">
-                1
-              </Typography>
-              <Button sx={{ minWidth: 'min-content', backgroundColor: 'lightgrey' }}>+</Button>
+              <CartModifyQuantity productId="we" />
             </Grid>
             <Grid item className="cart-product_total-price" xs={1.2} alignSelf="center">
               <Typography variant="subtitle1" component="div" fontWeight="700">
diff --git a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
index ecaac96..053bb4a 100644
--- a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
+++ b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
@@ -1,8 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import styles from './ProductPage.module.scss';
-import { Box, Typography, ButtonGroup, Button, Grid, Stack } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
+import { Box, Typography, Button, Grid, Stack } from '@mui/material';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import Modal from '@mui/material/Modal';
@@ -16,6 +14,8 @@ import { getAccessToken } from '../../store/slices/userSlice';
 import LoadingProgress from '../../components/LoadingProgress/LoadingProgress';
 import { getTaxes } from '../../store/slices/taxesSlice';
 import { ITaxApiResponse } from '../../types/slicesTypes/taxApiTypes';
+import CartAddLineItem from '../../requestsComponents/CartAddLineItem/CartAddLineItem';
+import CartModifyQuantity from '../../requestsComponents/CartModifyQuantity/CartModifyQuantity';
 
 const style = {
   bgcolor: 'background.paper',
@@ -54,7 +54,6 @@ export const ProductPage: FC = () => {
 
   const [selectedImg, setSelectedImg] = useState(0);
 
-  const [count, setCount] = useState(1);
 
   // Modal window
 
@@ -183,35 +182,12 @@ export const ProductPage: FC = () => {
             {description}
           </Typography>
 
-          <ButtonGroup className={styles.quantity}>
-            <Button
-              className={styles.quantity__btn}
-              aria-label="reduce"
-              onClick={() => {
-                setCount(Math.max(count - 1, 0));
-              }}
-            >
-              <RemoveIcon fontSize="small" />
-            </Button>
-
-            <Typography variant="h6">{count}</Typography>
-
-            <Button
-              className={styles.quantity__btn}
-              aria-label="increase"
-              onClick={() => {
-                setCount(count + 1);
-              }}
-            >
-              <AddIcon fontSize="small" />
-            </Button>
-          </ButtonGroup>
+          <CartModifyQuantity productId={productId as string} />
 
           <Box className={styles.btn}>
-            <Button>
+            <CartAddLineItem productId={productId as string}>
               <AddShoppingCartIcon />
-              ADD TO CART
-            </Button>
+            </CartAddLineItem>
           </Box>
 
           <Box className={styles.btn}>
diff --git a/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx b/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx
new file mode 100644
index 0000000..b1713ec
--- /dev/null
+++ b/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx
@@ -0,0 +1,78 @@
+import { FC, JSX } from 'react';
+import { Button, Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import { useAppSelector } from '../../store/hooks';
+import { getAccessToken } from '../../store/slices/userSlice';
+import { findProductInCart, selectCart, useUpdateCartMutation } from '../../api/cartApi';
+import { IAddLineItemCart, ICartApiResponse, IRemoveLineItemCart } from '../../types/slicesTypes/cart';
+import CartQuery from '../CartQuery/CartQuery';
+import { IUpdateCartApiObjectRequest } from '../../types/slicesTypes/cart/updateCartApiTypes';
+
+interface ICartModifyQuantityProps {
+  productId: string,
+}
+
+const CartModifyQuantity: FC<ICartModifyQuantityProps> = ({productId}): JSX.Element => {
+  const accessToken = useAppSelector(getAccessToken) as string;
+  const cartId = (useAppSelector(selectCart) as ICartApiResponse)?.id as string;
+  const cartVersion = (useAppSelector(selectCart) as ICartApiResponse)?.version as number;
+  const productInCart = useAppSelector((state) => findProductInCart(state, productId));
+
+  const [updateCart] = useUpdateCartMutation();
+
+  if (!cartId || !cartVersion) {
+    return <CartQuery />;
+  }
+
+  const decreaseQuantity = () => {
+    if (!productInCart?.quantity) return;
+    const actionObject: IRemoveLineItemCart = {
+      action: 'removeLineItem',
+      lineItemId: productInCart.id,
+      quantity: productInCart.quantity - 1,
+    };
+    const queryObj: IUpdateCartApiObjectRequest = {
+      cartId,
+      token: accessToken,
+      data: { version: cartVersion, actions: [actionObject] },
+    };
+    updateCart(queryObj);
+  };
+
+  const increaseQuantity = () => {
+    const actionObject: IAddLineItemCart = {
+      action: 'addLineItem',
+      productId,
+      quantity: 1,
+    };
+    const queryObj: IUpdateCartApiObjectRequest = {
+      cartId,
+      token: accessToken,
+      data: { version: cartVersion, actions: [actionObject] },
+    };
+    updateCart(queryObj);
+  };
+
+  return (
+    <Grid container spacing={1} alignItems={'center'}>
+      <Grid item>
+        <Button onClick={decreaseQuantity} sx={{ minWidth: 'min-content', backgroundColor: 'beige' }} variant="outlined" color="success" aria-label="reduce" disabled={!productInCart?.quantity}>
+          <RemoveIcon fontSize="inherit" />
+        </Button>
+      </Grid>
+      <Grid item>
+        <Typography className="count" padding="0.7rem  0">
+          {productInCart?.quantity || 0}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Button onClick={increaseQuantity} sx={{ minWidth: 'min-content', backgroundColor: 'beige' }} variant="outlined" color="success" aria-label="increase">
+          <AddIcon fontSize="inherit" />
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+export default CartModifyQuantity;

From d47dfcbb942fdd251109739da9787adcf0a6249e Mon Sep 17 00:00:00 2001
From: Ilya Shcherbakov <86749581+LikeKugi@users.noreply.github.com>
Date: Thu, 14 Sep 2023 23:31:18 +0300
Subject: [PATCH 3/5] feat: add cart icon in header

---
 e-commerce-app/src/api/cartApi.ts             |  5 ++++
 .../src/components/Header/Header.tsx          | 11 +++++++-
 .../src/components/UserCart/UserCart.tsx      | 23 ++++++++++++++++
 .../src/pages/ProductPage/ProductPage.tsx     |  1 -
 .../CartModifyQuantity/CartModifyQuantity.tsx | 27 +++++++++++++++----
 e-commerce-app/src/routes/navigation.ts       |  2 +-
 6 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 e-commerce-app/src/components/UserCart/UserCart.tsx

diff --git a/e-commerce-app/src/api/cartApi.ts b/e-commerce-app/src/api/cartApi.ts
index 0b548b5..0725ebb 100644
--- a/e-commerce-app/src/api/cartApi.ts
+++ b/e-commerce-app/src/api/cartApi.ts
@@ -82,3 +82,8 @@ export const findProductInCart = (state: RootStateType, productId: string) =>
   cartApi.endpoints.getMyActiveCart
     .select(state.user.access_token as string)(state)
     .data?.lineItems.find((item) => item.productId === productId);
+
+export const getTotalQuantityLineItemsInCart = (state: RootStateType) =>
+  cartApi.endpoints.getMyActiveCart
+    .select(state.user.access_token as string)(state)
+    .data?.totalLineItemQuantity;
diff --git a/e-commerce-app/src/components/Header/Header.tsx b/e-commerce-app/src/components/Header/Header.tsx
index 2fa27b0..ee5345f 100644
--- a/e-commerce-app/src/components/Header/Header.tsx
+++ b/e-commerce-app/src/components/Header/Header.tsx
@@ -13,6 +13,8 @@ import MenuLinks from '../MenuLinks/MenuLinks';
 import { navigationRoutes } from '../../routes/navigation';
 import UserMenu from '../UserMenu/UserMenu';
 import { Link } from 'react-router-dom';
+import UserCart from '../UserCart/UserCart';
+import { Grid } from '@mui/material';
 
 export const Header: React.FC = () => {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
@@ -107,7 +109,14 @@ export const Header: React.FC = () => {
             <NavLinks />
           </Box>
 
-          <UserMenu />
+          <Grid container spacing={1} sx={{maxWidth: 'max-content'}}>
+            <Grid item>
+              <UserCart />
+            </Grid>
+            <Grid item>
+              <UserMenu />
+            </Grid>
+          </Grid>
         </Toolbar>
       </Container>
     </AppBar>
diff --git a/e-commerce-app/src/components/UserCart/UserCart.tsx b/e-commerce-app/src/components/UserCart/UserCart.tsx
new file mode 100644
index 0000000..cab00ab
--- /dev/null
+++ b/e-commerce-app/src/components/UserCart/UserCart.tsx
@@ -0,0 +1,23 @@
+import { JSX } from 'react';
+import { useAppSelector } from '../../store/hooks';
+import { getTotalQuantityLineItemsInCart } from '../../api/cartApi';
+import { Badge, IconButton } from '@mui/material';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { useNavigate } from 'react-router-dom';
+
+const UserCart = (): JSX.Element => {
+  const totalQuantity = useAppSelector(getTotalQuantityLineItemsInCart);
+  const navigate = useNavigate();
+  const clickHandler = () => {
+    navigate('/basket');
+  };
+
+  return (
+    <IconButton aria-label="cart" onClick={clickHandler}>
+      <Badge badgeContent={totalQuantity} color="success" invisible={!totalQuantity}>
+        <ShoppingCartIcon />
+      </Badge>
+    </IconButton>
+  );
+};
+export default UserCart;
diff --git a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
index 053bb4a..9c722ff 100644
--- a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
+++ b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
@@ -54,7 +54,6 @@ export const ProductPage: FC = () => {
 
   const [selectedImg, setSelectedImg] = useState(0);
 
-
   // Modal window
 
   const [open, setOpen] = useState(false);
diff --git a/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx b/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx
index b1713ec..8ea5516 100644
--- a/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx
+++ b/e-commerce-app/src/requestsComponents/CartModifyQuantity/CartModifyQuantity.tsx
@@ -6,15 +6,19 @@ import RemoveIcon from '@mui/icons-material/Remove';
 import { useAppSelector } from '../../store/hooks';
 import { getAccessToken } from '../../store/slices/userSlice';
 import { findProductInCart, selectCart, useUpdateCartMutation } from '../../api/cartApi';
-import { IAddLineItemCart, ICartApiResponse, IRemoveLineItemCart } from '../../types/slicesTypes/cart';
+import {
+  IAddLineItemCart,
+  ICartApiResponse,
+  IRemoveLineItemCart,
+} from '../../types/slicesTypes/cart';
 import CartQuery from '../CartQuery/CartQuery';
 import { IUpdateCartApiObjectRequest } from '../../types/slicesTypes/cart/updateCartApiTypes';
 
 interface ICartModifyQuantityProps {
-  productId: string,
+  productId: string;
 }
 
-const CartModifyQuantity: FC<ICartModifyQuantityProps> = ({productId}): JSX.Element => {
+const CartModifyQuantity: FC<ICartModifyQuantityProps> = ({ productId }): JSX.Element => {
   const accessToken = useAppSelector(getAccessToken) as string;
   const cartId = (useAppSelector(selectCart) as ICartApiResponse)?.id as string;
   const cartVersion = (useAppSelector(selectCart) as ICartApiResponse)?.version as number;
@@ -58,7 +62,14 @@ const CartModifyQuantity: FC<ICartModifyQuantityProps> = ({productId}): JSX.Elem
   return (
     <Grid container spacing={1} alignItems={'center'}>
       <Grid item>
-        <Button onClick={decreaseQuantity} sx={{ minWidth: 'min-content', backgroundColor: 'beige' }} variant="outlined" color="success" aria-label="reduce" disabled={!productInCart?.quantity}>
+        <Button
+          onClick={decreaseQuantity}
+          sx={{ minWidth: 'min-content', backgroundColor: 'beige' }}
+          variant="outlined"
+          color="success"
+          aria-label="reduce"
+          disabled={!productInCart?.quantity}
+        >
           <RemoveIcon fontSize="inherit" />
         </Button>
       </Grid>
@@ -68,7 +79,13 @@ const CartModifyQuantity: FC<ICartModifyQuantityProps> = ({productId}): JSX.Elem
         </Typography>
       </Grid>
       <Grid item>
-        <Button onClick={increaseQuantity} sx={{ minWidth: 'min-content', backgroundColor: 'beige' }} variant="outlined" color="success" aria-label="increase">
+        <Button
+          onClick={increaseQuantity}
+          sx={{ minWidth: 'min-content', backgroundColor: 'beige' }}
+          variant="outlined"
+          color="success"
+          aria-label="increase"
+        >
           <AddIcon fontSize="inherit" />
         </Button>
       </Grid>
diff --git a/e-commerce-app/src/routes/navigation.ts b/e-commerce-app/src/routes/navigation.ts
index d682c41..2340cb0 100644
--- a/e-commerce-app/src/routes/navigation.ts
+++ b/e-commerce-app/src/routes/navigation.ts
@@ -12,10 +12,10 @@ export const navigationRoutes = {
   home: '/',
   products: '/products',
   about: '/about',
-  basket: '/basket',
 };
 
 export const unusedNavigation = {
+  basket: '/basket',
   product: '/product',
   products: '/products',
   user: '/user',

From bbc0570a154a5b2090a3ff7cb210841c0a3204dc Mon Sep 17 00:00:00 2001
From: Ilya Shcherbakov <86749581+LikeKugi@users.noreply.github.com>
Date: Fri, 15 Sep 2023 01:25:03 +0300
Subject: [PATCH 4/5] feat: add and fixed layout for each line item in cart

---
 e-commerce-app/src/api/cartApi.ts             |   9 +-
 .../components/BasketEmpty/BasketEmpty.tsx    |  35 ++++
 .../src/components/BasketFull/BasketFull.tsx  | 135 +++++++++++++
 .../BasketLineItem/BasketLineItem.tsx         |  89 +++++++++
 .../src/components/Header/Header.tsx          |   2 +-
 .../components/ProductCard/ProductCard.tsx    |   5 +-
 .../src/pages/BasketPage/BasketPage.tsx       | 183 ++----------------
 .../slicesTypes/cart/cartLineItemsTypes.ts    |   4 +-
 8 files changed, 287 insertions(+), 175 deletions(-)
 create mode 100644 e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
 create mode 100644 e-commerce-app/src/components/BasketFull/BasketFull.tsx
 create mode 100644 e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx

diff --git a/e-commerce-app/src/api/cartApi.ts b/e-commerce-app/src/api/cartApi.ts
index 0725ebb..02e7d82 100644
--- a/e-commerce-app/src/api/cartApi.ts
+++ b/e-commerce-app/src/api/cartApi.ts
@@ -84,6 +84,9 @@ export const findProductInCart = (state: RootStateType, productId: string) =>
     .data?.lineItems.find((item) => item.productId === productId);
 
 export const getTotalQuantityLineItemsInCart = (state: RootStateType) =>
-  cartApi.endpoints.getMyActiveCart
-    .select(state.user.access_token as string)(state)
-    .data?.totalLineItemQuantity;
+  cartApi.endpoints.getMyActiveCart.select(state.user.access_token as string)(state).data
+    ?.totalLineItemQuantity;
+
+export const getLineItemsInCart = (state: RootStateType) =>
+  cartApi.endpoints.getMyActiveCart.select(state.user.access_token as string)(state).data
+    ?.lineItems;
diff --git a/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx b/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
new file mode 100644
index 0000000..bc38da7
--- /dev/null
+++ b/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
@@ -0,0 +1,35 @@
+import { JSX } from 'react';
+import { Box } from '@mui/system';
+import Typography from '@mui/material/Typography';
+import { Button } from '@mui/material';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import EmptyBasket from '../../assets/images/BasketPageImg.png';
+import { useNavigate } from 'react-router-dom';
+import { lightGreen } from '@mui/material/colors';
+
+const BasketEmpty = (): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <Box className="cart-empty">
+        <Typography variant="h5" mt="5%">
+          Your cart is empty
+        </Typography>
+        <Button
+          className="start-shopping"
+          variant="outlined"
+          sx={{ backgroundColor: lightGreen[100], color: 'green', mt: '5%' }}
+          color="success"
+          onClick={() => navigate('/products')}
+        >
+          <KeyboardBackspaceIcon width="20" />
+          <Box component="span">
+            Start shopping
+          </Box>
+        </Button>
+      </Box>
+      <img src={EmptyBasket} alt="EmptyBasket" width={300} />
+    </>
+  );
+};
+export default BasketEmpty;
diff --git a/e-commerce-app/src/components/BasketFull/BasketFull.tsx b/e-commerce-app/src/components/BasketFull/BasketFull.tsx
new file mode 100644
index 0000000..4b0bda7
--- /dev/null
+++ b/e-commerce-app/src/components/BasketFull/BasketFull.tsx
@@ -0,0 +1,135 @@
+import { JSX } from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import { Box } from '@mui/system';
+import { Button, TextField } from '@mui/material';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import Paper from '@mui/material/Paper';
+import { useNavigate } from 'react-router-dom';
+import { lightGreen } from '@mui/material/colors';
+import { useAppSelector } from '../../store/hooks';
+import { getLineItemsInCart, selectCart } from '../../api/cartApi';
+import BasketLineItem from '../BasketLineItem/BasketLineItem';
+import { ICartApiResponse } from '../../types/slicesTypes/cart';
+
+
+
+const BasketFull = (): JSX.Element => {
+  const navigate = useNavigate();
+  const cartLineItems = useAppSelector(getLineItemsInCart);
+  const cart = useAppSelector(selectCart) as ICartApiResponse;
+
+  const totalCurrencyEUR = cart.totalPrice.currencyCode;
+  const totalNumberEUR =
+    cart.totalPrice.centAmount /
+    10 ** cart.totalPrice.fractionDigits;
+  const totalPriceEUR = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: totalCurrencyEUR,
+  }).format(totalNumberEUR);
+
+  return (
+    <Paper
+      sx={{
+        p: 2,
+        margin: 'auto',
+        maxWidth: 800,
+        flexGrow: 1,
+      }}
+    >
+      <Grid container className="titles" textAlign="start">
+        <Grid item xs={7}>
+          <Typography variant="h6">Product</Typography>
+        </Grid>
+        <Grid item xs={1.8}>
+          <Typography variant="h6">Price</Typography>
+        </Grid>
+        <Grid item xs={2.2}>
+          <Typography variant="h6">Quantity</Typography>
+        </Grid>
+        <Grid item xs={1}>
+          <Typography variant="h6">Total</Typography>
+        </Grid>
+      </Grid>
+      <Divider />
+
+      {cartLineItems && cartLineItems.map(lineItem => <BasketLineItem item={lineItem} key={lineItem.id} />)}
+
+      <Divider />
+
+      <Grid container justifyContent="space-between" mt="5%">
+        <Grid item xs={12} md={2} mb={3}>
+          <Button className="clear-cart" sx={{ height: '40px' }} variant="outlined" color="error">
+            Clear Cart
+          </Button>
+        </Grid>
+        <Grid item xs={12} md={7}>
+          <Grid container className="cart-checkout">
+            <Grid className="subtotal" container fontWeight={700} fontSize="large">
+              <Grid item xs={6} textAlign="left">
+                Subtotal
+              </Grid>
+              <Grid item xs={6} textAlign="right">
+                {totalPriceEUR}
+              </Grid>
+            </Grid>
+            <Typography mt="3px" fontSize="small">
+              Taxes and shipping calculated at checkout
+            </Typography>
+
+            <Grid container mt={4} height={30}>
+              <Grid item xs={9}>
+                <TextField fullWidth size="small" label="Promo Code" />
+              </Grid>
+              <Grid item xs={3}>
+                <Button sx={{ backgroundColor: 'beige', color: 'green' }}>Apply</Button>
+              </Grid>
+            </Grid>
+
+            <Grid
+              className="subtotal"
+              container
+              fontWeight={700}
+              fontSize="20px"
+              mt={3}
+              color="green"
+            >
+              <Grid item xs={9} textAlign="left">
+                Discounted Price
+              </Grid>
+              <Grid item xs={3} textAlign="right">
+                19.00
+              </Grid>
+            </Grid>
+
+            <Grid container mt={2}>
+              <Grid item xs={12} mb={5}>
+                <Button
+                  sx={{ width: '100%', backgroundColor: lightGreen[100], mt: '5%' }}
+                  variant="outlined"
+                  color="success"
+                >
+                  Check out
+                </Button>
+              </Grid>
+              <Grid item xs={12}>
+                <Button
+                  className="continue-shopping"
+                  sx={{ border: '1px solid grey', fontSize: '10px' }}
+                  color="success"
+                >
+                  <KeyboardBackspaceIcon width="20" />
+                  <Box component="span" onClick={() => navigate('/products')}>
+                    Continue shopping
+                  </Box>
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+};
+export default BasketFull;
diff --git a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx
new file mode 100644
index 0000000..415f949
--- /dev/null
+++ b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx
@@ -0,0 +1,89 @@
+import { FC } from 'react';
+import Grid from '@mui/material/Grid';
+import { Box } from '@mui/system';
+import { Divider, Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import CartAddLineItem from '../../requestsComponents/CartAddLineItem/CartAddLineItem';
+import CartModifyQuantity from '../../requestsComponents/CartModifyQuantity/CartModifyQuantity';
+import { styled } from '@mui/material/styles';
+import { ICartLineItem } from '../../types/slicesTypes/cart';
+import { Link } from 'react-router-dom';
+
+const Img = styled('img')({
+  margin: 'auto',
+  display: 'block',
+  maxWidth: '100%',
+  maxHeight: '100%',
+});
+
+interface IBasketLineItemProps {
+  item: ICartLineItem;
+}
+
+const BasketLineItem: FC<IBasketLineItemProps> = ({item}) => {
+
+  const currencyEUR = item.price.value.currencyCode;
+  const numberEUR =
+    item.price.value.centAmount /
+    10 ** item.price.value.fractionDigits;
+  const priceEUR = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: currencyEUR,
+  }).format(numberEUR);
+
+  const totalCurrencyEUR = item.totalPrice.currencyCode;
+  const totalNumberEUR =
+    item.totalPrice.centAmount /
+    10 ** item.totalPrice.fractionDigits;
+  const totalPriceEUR = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: totalCurrencyEUR,
+  }).format(totalNumberEUR);
+
+  return (
+    <>
+      <Grid container spacing={2} textAlign="start" my={4} >
+      <Grid item sx={{display: { xs: 'none', sm: 'block' }}}>
+        <Box sx={{ width: 128, height: 128 }}>
+          <Img alt="complex" src={item.variant.images[0].url} />
+        </Box>
+      </Grid>
+      <Grid item xs={12} sm>
+        <Stack spacing={5}>
+          <Grid container>
+            <Grid item xs={6} container direction="column" spacing={2} alignSelf="center" pl={2}>
+              <Stack spacing={2}>
+                <Typography gutterBottom variant="subtitle1" component="div">
+                  {item.name.en}
+                </Typography>
+                <Link to={`/products/${item.productId}`} style={{textDecoration: 'none'}}>
+                  <Typography variant="body2">More Details...</Typography>
+                </Link>
+              </Stack>
+            </Grid>
+
+            <Grid item xs={2} alignSelf="center">
+              <Typography variant="subtitle1" component="div">
+                {priceEUR}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={2.8} alignSelf="center" display="flex">
+              <CartModifyQuantity productId={item.productId} />
+            </Grid>
+
+            <Grid item xs={1.2} alignSelf="center">
+              <Typography variant="subtitle1" component="div" fontWeight="700">
+                {totalPriceEUR}
+              </Typography>
+            </Grid>
+          </Grid>
+          <CartAddLineItem productId={item.productId} props={{variant: 'text', color: 'warning'}} />
+        </Stack>
+      </Grid>
+    </Grid>
+      <Divider />
+    </>
+  );
+};
+export default BasketLineItem;
diff --git a/e-commerce-app/src/components/Header/Header.tsx b/e-commerce-app/src/components/Header/Header.tsx
index ee5345f..ed8b4f5 100644
--- a/e-commerce-app/src/components/Header/Header.tsx
+++ b/e-commerce-app/src/components/Header/Header.tsx
@@ -109,7 +109,7 @@ export const Header: React.FC = () => {
             <NavLinks />
           </Box>
 
-          <Grid container spacing={1} sx={{maxWidth: 'max-content'}}>
+          <Grid container spacing={2} sx={{ maxWidth: 'max-content' }} alignItems={'center'}>
             <Grid item>
               <UserCart />
             </Grid>
diff --git a/e-commerce-app/src/components/ProductCard/ProductCard.tsx b/e-commerce-app/src/components/ProductCard/ProductCard.tsx
index d2fc4fa..4ace9d8 100644
--- a/e-commerce-app/src/components/ProductCard/ProductCard.tsx
+++ b/e-commerce-app/src/components/ProductCard/ProductCard.tsx
@@ -16,10 +16,7 @@ export const ProductCard: FC<ICardProps> = ({ item }) => {
   const navigate = useNavigate();
 
   const clickOnCardHandler = (e: React.MouseEvent<HTMLDivElement>) => {
-    console.log(e.target instanceof HTMLButtonElement);
-    if (e.target instanceof HTMLButtonElement) {
-      console.log(`here, add to cart ${item.id}`);
-    } else {
+    if (!(e.target instanceof HTMLButtonElement)) {
       navigate(`/products/${item.id}`);
     }
   };
diff --git a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
index a67a205..8cac39c 100644
--- a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
+++ b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
@@ -1,175 +1,28 @@
 import { FC } from 'react';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/system';
-import { useNavigate } from 'react-router-dom';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
-import { Button, TextField } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import EmptyBasket from '../../assets/images/BasketPageImg.png';
-import Paper from '@mui/material/Paper';
-import Divider from '@mui/material/Divider';
-import ButtonBase from '@mui/material/ButtonBase';
-import { styled } from '@mui/material/styles';
-import CartModifyQuantity from '../../requestsComponents/CartModifyQuantity/CartModifyQuantity';
+import BasketEmpty from '../../components/BasketEmpty/BasketEmpty';
+import { useAppSelector } from '../../store/hooks';
+import { getTotalQuantityLineItemsInCart } from '../../api/cartApi';
+import BasketFull from '../../components/BasketFull/BasketFull';
+import CartQuery from '../../requestsComponents/CartQuery/CartQuery';
 
-const Img = styled('img')({
-  margin: 'auto',
-  display: 'block',
-  maxWidth: '100%',
-  maxHeight: '100%',
-});
 
 export const BasketPage: FC = () => {
-  const navigate = useNavigate();
+
+  const totalQuantity = useAppSelector(getTotalQuantityLineItemsInCart);
   return (
-    <Container className="container" sx={{ textAlign: 'center', mt: '5%' }}>
-      <Typography variant="h3" fontWeight="500" color="green">
-        Shopping cart
-      </Typography>
-      (
-      <Box className="cart-empty">
-        <Typography variant="h5" mt="5%">
-          Your cart is empty
+    <CartQuery>
+      <Container className="container"
+                 sx={{ textAlign: 'center', mt: '5%' }}>
+        <Typography variant="h3"
+                    fontWeight="500"
+                    color="green"
+                    mb={3}>
+          Shopping cart
         </Typography>
-        <Button
-          className="start-shopping"
-          sx={{ backgroundColor: 'yellowgreen', color: 'green', mt: '5%' }}
-        >
-          <KeyboardBackspaceIcon width="20" />
-          <Box component="span" onClick={() => navigate('/products')}>
-            Start shopping
-          </Box>
-        </Button>
-      </Box>
-      <img src={EmptyBasket} alt="EmptyBasket" width={300} />) : (
-      <Paper
-        sx={{
-          p: 2,
-          margin: 'auto',
-          maxWidth: 800,
-          flexGrow: 1,
-        }}
-      >
-        <Grid container className="titles" textAlign="start">
-          <Grid item xs={7}>
-            <Typography>Product</Typography>
-          </Grid>
-          <Grid item xs={1.8}>
-            <Typography>Price</Typography>
-          </Grid>
-          <Grid item xs={2.2}>
-            <Typography>Quantity</Typography>
-          </Grid>
-          <Grid item xs={1}>
-            <Typography>Total</Typography>
-          </Grid>
-        </Grid>
-        <Divider />
-        <Grid container className="cart-items" spacing={2} textAlign="start">
-          <Grid item>
-            <ButtonBase sx={{ width: 128, height: 128 }}>
-              <Img alt="complex" src={EmptyBasket} />
-            </ButtonBase>
-          </Grid>
-          <Grid item xs={12} sm container>
-            <Grid item xs={6} container direction="column" spacing={2} alignSelf="center">
-              <Grid item xs>
-                <Typography gutterBottom variant="subtitle1" component="div">
-                  Product name
-                </Typography>
-                <Typography variant="body2" gutterBottom>
-                  Short description
-                </Typography>
-              </Grid>
-              <Grid item>
-                <Typography sx={{ cursor: 'pointer' }} variant="body2" color="text.secondary">
-                  Remove
-                </Typography>
-              </Grid>
-            </Grid>
-            <Grid item className="cart-product-price" xs={2} alignSelf="center">
-              <Typography variant="subtitle1" component="div">
-                19.00
-              </Typography>
-            </Grid>
-            <Grid item className="cart-product-quantity" xs={2.8} alignSelf="center" display="flex">
-              <CartModifyQuantity productId="we" />
-            </Grid>
-            <Grid item className="cart-product_total-price" xs={1.2} alignSelf="center">
-              <Typography variant="subtitle1" component="div" fontWeight="700">
-                19.00
-              </Typography>
-            </Grid>
-          </Grid>
-        </Grid>
-        <Divider />
-        <Box className="cart-summary" display="flex" justifyContent="space-between" mt="5%">
-          <Button className="clear-cart" sx={{ height: '40px', border: '1px solid grey' }}>
-            Clear Cart
-          </Button>
-          <Grid container xs={5} className="cart-checkout">
-            <Grid className="subtotal" container fontWeight={700} fontSize="large">
-              <Grid item xs={6} textAlign="left">
-                Subtotal
-              </Grid>
-              <Grid item xs={6} textAlign="right">
-                19.00
-              </Grid>
-            </Grid>
-            <Typography mt="3px" fontSize="small">
-              Taxes and shipping calculated at checkout
-            </Typography>
-
-            <Grid container mt={4} height={30}>
-              <Grid item xs={9}>
-                <TextField fullWidth size="small" label="Promo Code" />
-              </Grid>
-              <Grid item xs={3}>
-                <Button sx={{ backgroundColor: 'beige', color: 'green' }}>Apply</Button>
-              </Grid>
-            </Grid>
-
-            <Grid
-              className="subtotal"
-              container
-              fontWeight={700}
-              fontSize="20px"
-              mt={3}
-              color="green"
-            >
-              <Grid item xs={9} textAlign="left">
-                Discounted Price
-              </Grid>
-              <Grid item xs={3} textAlign="right">
-                19.00
-              </Grid>
-            </Grid>
-
-            <Grid container mt={2}>
-              <Grid item xs={12} mb={5}>
-                <Button
-                  sx={{ width: '100%', backgroundColor: 'yellowgreen', color: 'green', mt: '5%' }}
-                >
-                  Check out
-                </Button>
-              </Grid>
-              <Grid item xs={12}>
-                <Button
-                  className="continue-shopping"
-                  sx={{ border: '1px solid grey', fontSize: '10px' }}
-                >
-                  <KeyboardBackspaceIcon width="20" />
-                  <Box component="span" onClick={() => navigate('/products')}>
-                    Continue shopping
-                  </Box>
-                </Button>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Box>
-      </Paper>
-      )
-    </Container>
+        {totalQuantity ? <BasketFull/> : <BasketEmpty/>}
+      </Container>
+    </CartQuery>
   );
 };
diff --git a/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts b/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
index 9b24b42..99572f1 100644
--- a/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
+++ b/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
@@ -1,5 +1,5 @@
 import { IBaseIdTypeResponse } from '../baseApiResponsesTypes';
-import { IImageProductApiResponse, IPriceProductApiResponse } from '../productsApiTypes';
+import { IImageProductApiResponse, IPriceProductApiResponse, IValuePriceProductApiResponse } from '../productsApiTypes';
 
 export interface IProductType extends IBaseIdTypeResponse {
   typeId: 'product-type';
@@ -46,6 +46,6 @@ export interface ICartLineItem {
   state: [];
   priceMode: string;
   lineItemMode: string;
-  totalPrice: IPriceProductApiResponse;
+  totalPrice: IValuePriceProductApiResponse;
   taxedPricePortions: [];
 }

From d3d17597f6b8995ac5dda58d70aa4e035725e177 Mon Sep 17 00:00:00 2001
From: Ilya Shcherbakov <86749581+LikeKugi@users.noreply.github.com>
Date: Fri, 15 Sep 2023 01:25:21 +0300
Subject: [PATCH 5/5] refactor: eslint fixes

---
 .../components/BasketEmpty/BasketEmpty.tsx    |  4 +-
 .../src/components/BasketFull/BasketFull.tsx  |  9 +-
 .../BasketLineItem/BasketLineItem.tsx         | 84 +++++++++----------
 .../src/pages/BasketPage/BasketPage.tsx       | 12 +--
 .../slicesTypes/cart/cartLineItemsTypes.ts    |  6 +-
 5 files changed, 53 insertions(+), 62 deletions(-)

diff --git a/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx b/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
index bc38da7..9393286 100644
--- a/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
+++ b/e-commerce-app/src/components/BasketEmpty/BasketEmpty.tsx
@@ -23,9 +23,7 @@ const BasketEmpty = (): JSX.Element => {
           onClick={() => navigate('/products')}
         >
           <KeyboardBackspaceIcon width="20" />
-          <Box component="span">
-            Start shopping
-          </Box>
+          <Box component="span">Start shopping</Box>
         </Button>
       </Box>
       <img src={EmptyBasket} alt="EmptyBasket" width={300} />
diff --git a/e-commerce-app/src/components/BasketFull/BasketFull.tsx b/e-commerce-app/src/components/BasketFull/BasketFull.tsx
index 4b0bda7..e8dc5f4 100644
--- a/e-commerce-app/src/components/BasketFull/BasketFull.tsx
+++ b/e-commerce-app/src/components/BasketFull/BasketFull.tsx
@@ -13,17 +13,13 @@ import { getLineItemsInCart, selectCart } from '../../api/cartApi';
 import BasketLineItem from '../BasketLineItem/BasketLineItem';
 import { ICartApiResponse } from '../../types/slicesTypes/cart';
 
-
-
 const BasketFull = (): JSX.Element => {
   const navigate = useNavigate();
   const cartLineItems = useAppSelector(getLineItemsInCart);
   const cart = useAppSelector(selectCart) as ICartApiResponse;
 
   const totalCurrencyEUR = cart.totalPrice.currencyCode;
-  const totalNumberEUR =
-    cart.totalPrice.centAmount /
-    10 ** cart.totalPrice.fractionDigits;
+  const totalNumberEUR = cart.totalPrice.centAmount / 10 ** cart.totalPrice.fractionDigits;
   const totalPriceEUR = new Intl.NumberFormat('en-IN', {
     style: 'currency',
     currency: totalCurrencyEUR,
@@ -54,7 +50,8 @@ const BasketFull = (): JSX.Element => {
       </Grid>
       <Divider />
 
-      {cartLineItems && cartLineItems.map(lineItem => <BasketLineItem item={lineItem} key={lineItem.id} />)}
+      {cartLineItems &&
+        cartLineItems.map((lineItem) => <BasketLineItem item={lineItem} key={lineItem.id} />)}
 
       <Divider />
 
diff --git a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx
index 415f949..d1f6628 100644
--- a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx
+++ b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx
@@ -20,21 +20,16 @@ interface IBasketLineItemProps {
   item: ICartLineItem;
 }
 
-const BasketLineItem: FC<IBasketLineItemProps> = ({item}) => {
-
+const BasketLineItem: FC<IBasketLineItemProps> = ({ item }) => {
   const currencyEUR = item.price.value.currencyCode;
-  const numberEUR =
-    item.price.value.centAmount /
-    10 ** item.price.value.fractionDigits;
+  const numberEUR = item.price.value.centAmount / 10 ** item.price.value.fractionDigits;
   const priceEUR = new Intl.NumberFormat('en-IN', {
     style: 'currency',
     currency: currencyEUR,
   }).format(numberEUR);
 
   const totalCurrencyEUR = item.totalPrice.currencyCode;
-  const totalNumberEUR =
-    item.totalPrice.centAmount /
-    10 ** item.totalPrice.fractionDigits;
+  const totalNumberEUR = item.totalPrice.centAmount / 10 ** item.totalPrice.fractionDigits;
   const totalPriceEUR = new Intl.NumberFormat('en-IN', {
     style: 'currency',
     currency: totalCurrencyEUR,
@@ -42,46 +37,49 @@ const BasketLineItem: FC<IBasketLineItemProps> = ({item}) => {
 
   return (
     <>
-      <Grid container spacing={2} textAlign="start" my={4} >
-      <Grid item sx={{display: { xs: 'none', sm: 'block' }}}>
-        <Box sx={{ width: 128, height: 128 }}>
-          <Img alt="complex" src={item.variant.images[0].url} />
-        </Box>
-      </Grid>
-      <Grid item xs={12} sm>
-        <Stack spacing={5}>
-          <Grid container>
-            <Grid item xs={6} container direction="column" spacing={2} alignSelf="center" pl={2}>
-              <Stack spacing={2}>
-                <Typography gutterBottom variant="subtitle1" component="div">
-                  {item.name.en}
-                </Typography>
-                <Link to={`/products/${item.productId}`} style={{textDecoration: 'none'}}>
-                  <Typography variant="body2">More Details...</Typography>
-                </Link>
-              </Stack>
-            </Grid>
+      <Grid container spacing={2} textAlign="start" my={4}>
+        <Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
+          <Box sx={{ width: 128, height: 128 }}>
+            <Img alt="complex" src={item.variant.images[0].url} />
+          </Box>
+        </Grid>
+        <Grid item xs={12} sm>
+          <Stack spacing={5}>
+            <Grid container>
+              <Grid item xs={6} container direction="column" spacing={2} alignSelf="center" pl={2}>
+                <Stack spacing={2}>
+                  <Typography gutterBottom variant="subtitle1" component="div">
+                    {item.name.en}
+                  </Typography>
+                  <Link to={`/products/${item.productId}`} style={{ textDecoration: 'none' }}>
+                    <Typography variant="body2">More Details...</Typography>
+                  </Link>
+                </Stack>
+              </Grid>
 
-            <Grid item xs={2} alignSelf="center">
-              <Typography variant="subtitle1" component="div">
-                {priceEUR}
-              </Typography>
-            </Grid>
+              <Grid item xs={2} alignSelf="center">
+                <Typography variant="subtitle1" component="div">
+                  {priceEUR}
+                </Typography>
+              </Grid>
 
-            <Grid item xs={2.8} alignSelf="center" display="flex">
-              <CartModifyQuantity productId={item.productId} />
-            </Grid>
+              <Grid item xs={2.8} alignSelf="center" display="flex">
+                <CartModifyQuantity productId={item.productId} />
+              </Grid>
 
-            <Grid item xs={1.2} alignSelf="center">
-              <Typography variant="subtitle1" component="div" fontWeight="700">
-                {totalPriceEUR}
-              </Typography>
+              <Grid item xs={1.2} alignSelf="center">
+                <Typography variant="subtitle1" component="div" fontWeight="700">
+                  {totalPriceEUR}
+                </Typography>
+              </Grid>
             </Grid>
-          </Grid>
-          <CartAddLineItem productId={item.productId} props={{variant: 'text', color: 'warning'}} />
-        </Stack>
+            <CartAddLineItem
+              productId={item.productId}
+              props={{ variant: 'text', color: 'warning' }}
+            />
+          </Stack>
+        </Grid>
       </Grid>
-    </Grid>
       <Divider />
     </>
   );
diff --git a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
index 8cac39c..1d4e8ac 100644
--- a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
+++ b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
@@ -7,21 +7,15 @@ import { getTotalQuantityLineItemsInCart } from '../../api/cartApi';
 import BasketFull from '../../components/BasketFull/BasketFull';
 import CartQuery from '../../requestsComponents/CartQuery/CartQuery';
 
-
 export const BasketPage: FC = () => {
-
   const totalQuantity = useAppSelector(getTotalQuantityLineItemsInCart);
   return (
     <CartQuery>
-      <Container className="container"
-                 sx={{ textAlign: 'center', mt: '5%' }}>
-        <Typography variant="h3"
-                    fontWeight="500"
-                    color="green"
-                    mb={3}>
+      <Container className="container" sx={{ textAlign: 'center', mt: '5%' }}>
+        <Typography variant="h3" fontWeight="500" color="green" mb={3}>
           Shopping cart
         </Typography>
-        {totalQuantity ? <BasketFull/> : <BasketEmpty/>}
+        {totalQuantity ? <BasketFull /> : <BasketEmpty />}
       </Container>
     </CartQuery>
   );
diff --git a/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts b/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
index 99572f1..6ee702c 100644
--- a/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
+++ b/e-commerce-app/src/types/slicesTypes/cart/cartLineItemsTypes.ts
@@ -1,5 +1,9 @@
 import { IBaseIdTypeResponse } from '../baseApiResponsesTypes';
-import { IImageProductApiResponse, IPriceProductApiResponse, IValuePriceProductApiResponse } from '../productsApiTypes';
+import {
+  IImageProductApiResponse,
+  IPriceProductApiResponse,
+  IValuePriceProductApiResponse,
+} from '../productsApiTypes';
 
 export interface IProductType extends IBaseIdTypeResponse {
   typeId: 'product-type';