Sprint3 Sales on catalog page

e-commerce-app/src/components/ProductCard/ProductCard.module.scss

@@ -14,6 +14,7 @@
         transition: box-shadow .3s ease-in-out;
     }
 
+
     &__text {
         height: 100%;
         display: flex;
@@ -33,5 +34,19 @@
         width: 50%;
         font-weight: 700;
         text-align: center;
+
+        &__marked {
+            color: rgb(221, 65, 65);
+            padding-top: 1rem;
+            width: 50%;
+            font-weight: 700;
+            text-align: center;
+        }
+
+        &__sale {
+            text-decoration: line-through;
+            text-decoration-color: gray;
+            padding-top: 1rem;
+        }
     }
 }

e-commerce-app/src/components/ProductCard/ProductCard.tsx

@@ -1,8 +1,11 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import styles from './ProductCard.module.scss';
 import { Box, Typography, Button, CardMedia, CardContent, CardActions, Card } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { IProductApiResponse } from '../../types/slicesTypes/productsApiTypes';
+import { getTaxes } from '../../store/slices/taxesSlice';
+import { useAppSelector } from '../../store/hooks';
+import { ITaxApiResponse } from '../../types/slicesTypes/taxApiTypes';
 
 interface ICardProps {
   item: IProductApiResponse;
@@ -14,25 +17,49 @@ export const ProductCard: FC<ICardProps> = ({ item }) => {
     navigate(`/products/${item.id}`);
   };
 
+  const taxesArray = useAppSelector(getTaxes);
+
+  const [tax, setTax] = useState(0);
+
+  useEffect(() => {
+    taxesArray
+      .filter((i) => i.id === item.taxCategory.id && i.key === 'sale')
+      .flatMap((elem) => elem.rates)
+      .filter((rate: ITaxApiResponse) => rate.country === 'DE')
+      .forEach((rate: ITaxApiResponse) => {
+        setTax(rate.amount);
+      });
+  }, [item]);
+
+
   const imgPath = item.masterData.current.masterVariant.images[0].url;
   const imgDescription = item.masterData.current.name.en;
 
-  const currencyCommon = item.masterData.current.masterVariant.prices[0].value.currencyCode;
-  const priceCommon = new Intl.NumberFormat('en-IN', {
-    style: 'currency',
-    currency: currencyCommon,
-  }).format(
+  const currencyEUR = item.masterData.current.masterVariant.prices[0].value.currencyCode;
+  const numberEUR =
     item.masterData.current.masterVariant.prices[0].value.centAmount /
-      10 ** item.masterData.current.masterVariant.prices[0].value.fractionDigits,
-  );
-  const currencySale = item.masterData.current.masterVariant.prices[1].value.currencyCode;
-  const priceSale = new Intl.NumberFormat('en-IN', {
+    10 ** item.masterData.current.masterVariant.prices[0].value.fractionDigits;
+  const priceEUR = new Intl.NumberFormat('en-IN', {
     style: 'currency',
-    currency: currencySale,
-  }).format(
+    currency: currencyEUR,
+  }).format(numberEUR);
+  const salePriceEUR = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: currencyEUR,
+  }).format(numberEUR - numberEUR * tax);
+
+  const currencyUSD = item.masterData.current.masterVariant.prices[1].value.currencyCode;
+  const numberUSD =
     item.masterData.current.masterVariant.prices[1].value.centAmount /
-      10 ** item.masterData.current.masterVariant.prices[1].value.fractionDigits,
-  );
+    10 ** item.masterData.current.masterVariant.prices[1].value.fractionDigits;
+  const priceUSD = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: currencyUSD,
+  }).format(numberUSD);
+  const salePriceUSD = new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: currencyUSD,
+  }).format(numberUSD - numberUSD * tax);
 
   return (
     <Card className={styles.card}>
@@ -43,12 +70,36 @@ export const ProductCard: FC<ICardProps> = ({ item }) => {
         <Typography className={styles.card__title} component="h2">
           {item.masterData.current.name.en}
         </Typography>
-        <Typography className={styles.card__price} component="h3">
-          {priceCommon}
-        </Typography>
-        <Typography className={styles.card__price} component="h3">
-          {priceSale}
-        </Typography>
+
+        {tax !== 0 ? (
+          <>
+            <Typography className={styles.card__price__marked} component="h3">
+              {salePriceEUR}
+            </Typography>
+            <Typography className={styles.card__price__sale} component="h3">
+              {priceEUR}
+            </Typography>
+          </>
+        ) : (
+          <Typography className={styles.card__price} component="h3">
+            {priceEUR}
+          </Typography>
+        )}
+
+        {tax !== 0 ? (
+          <>
+            <Typography className={styles.card__price__marked} component="h3">
+              {salePriceUSD}
+            </Typography>
+            <Typography className={styles.card__price__sale} component="h3">
+              {priceUSD}
+            </Typography>
+          </>
+        ) : (
+          <Typography className={styles.card__price} component="h3">
+            {priceUSD}
+          </Typography>
+        )}
       </CardContent>
       <CardActions>
         <Button onClick={handlerNavigation} color="success" variant="outlined">

e-commerce-app/src/components/ProductsList/EmptyProducts.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import styles from './ProductsList.module.scss';
+import { Box } from '@mui/material';
+import empty from '../../assets/images/EmptyCatalogPage.svg';
+
+export const EmptyProducts: FC = () => {
+  return (
+    <Box className={styles.empty__products}>
+      This is an empty product list. There are no products available!
+      <img src={empty} alt="home-icon" className={styles.img}/>
+    </Box>
+  );
+};

e-commerce-app/src/components/ProductsList/ProductsList.module.scss

@@ -4,3 +4,15 @@
     flex-wrap: wrap;
     gap: 1.5rem;
 }
+
+.empty__products {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: gray;
+    font-size: 25px;
+}
+
+.img {
+    margin-top: 50px;
+}

e-commerce-app/src/components/ProductsList/ProductsList.tsx

@@ -4,15 +4,18 @@ import styles from './ProductsList.module.scss';
 import { useAppSelector } from '../../store/hooks';
 import { getProducts } from '../../store/slices/productsSlice';
 import { FC } from 'react';
+import { EmptyProducts } from './EmptyProducts';
 
 export const ProductsList: FC = () => {
   const products = useAppSelector(getProducts);
 
   return (
     <Box className={styles.container}>
-      {products.map((item) => (
-        <ProductCard item={item} key={item.id} />
-      ))}
+      {products.length > 0 ? (
+        products.map((item) => <ProductCard item={item} key={item.id} />)
+      ) : (
+        <EmptyProducts />
+      )}
     </Box>
   );
 };

e-commerce-app/src/pages/ProductPage/ProductPage.tsx

@@ -43,7 +43,7 @@ export const ProductPage: FC = () => {
   useEffect(() => {
     if (isSuccess) {
       taxesArray
-        .filter((item) => item.id === data.taxCategory.id)
+        .filter((item) => item.id === data.taxCategory.id && item.key === 'sale')
         .flatMap((elem) => elem.rates)
         .filter((rate: ITaxApiResponse) => rate.country === 'DE')
         .forEach((rate: ITaxApiResponse) => {

e-commerce-app/src/types/slicesTypes/taxApiTypes.ts

@@ -2,12 +2,13 @@ import { CountriesType } from '../addressesTypes';
 import { IBaseGetAllQueryResponse } from './baseApiResponsesTypes';
 
 export interface ITaxApiResponse {
-  amount: number,
-  country: CountriesType
-  id: string
-  includedInPrice: boolean
-  name: string
-  rates: []
+  amount: number;
+  country: CountriesType;
+  id: string;
+  includedInPrice: boolean;
+  name: string;
+  rates: [];
+  key: string;
 }
 
 export interface IGetAllTaxesResponse extends IBaseGetAllQueryResponse<ITaxApiResponse> {