diff --git a/e-commerce-app/src/api/discountCodesApi.ts b/e-commerce-app/src/api/discountCodesApi.ts new file mode 100644 index 0000000..5339c91 --- /dev/null +++ b/e-commerce-app/src/api/discountCodesApi.ts @@ -0,0 +1,25 @@ +import { createApi } from '@reduxjs/toolkit/query/react'; +import { fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react'; +import { IGetDiscountCodesResponse } from '../types/slicesTypes/DiscountCodesTypes/DiscountCodesApiTypes'; + +export const discountCodesApi = createApi({ + reducerPath: 'discountCodesApi', + baseQuery: fetchBaseQuery({ + baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/discount-codes`, + }), + endpoints: (build) => ({ + getDiscountCodes: build.query({ + query(token) { + return { + url: '', + method: 'GET', + headers: { + Authorization: `Bearer ${token}`, + }, + }; + }, + }), + }), +}); + +export const { useGetDiscountCodesQuery, useLazyGetDiscountCodesQuery } = discountCodesApi; diff --git a/e-commerce-app/src/components/BasketDiscountForm/BasketDiscountForm.tsx b/e-commerce-app/src/components/BasketDiscountForm/BasketDiscountForm.tsx new file mode 100644 index 0000000..3049dcf --- /dev/null +++ b/e-commerce-app/src/components/BasketDiscountForm/BasketDiscountForm.tsx @@ -0,0 +1,65 @@ +import { JSX } from 'react'; +import { Box } from '@mui/system'; +import Grid from '@mui/material/Grid'; +import { Alert, Button, TextField } from '@mui/material'; +import { Controller, SubmitHandler, useForm } from 'react-hook-form'; +import { IAddDiscountCodeCart, ICartApiResponse } from '../../types/slicesTypes/cart'; +import { useAppSelector } from '../../store/hooks'; +import { getAccessToken } from '../../store/slices/userSlice'; +import { selectCart, useUpdateCartMutation } from '../../api/cartApi'; +import { IUpdateCartApiObjectRequest } from '../../types/slicesTypes/cart/updateCartApiTypes'; + +interface IDiscountForm { + discount: string; +} + +const BasketDiscountForm = (): JSX.Element => { + const { control, handleSubmit } = useForm(); + 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 [updateCart, { isLoading, isError, error }] = useUpdateCartMutation(); + const submitHandler: SubmitHandler = (data) => { + if (!data.discount) return; + const actionObject: IAddDiscountCodeCart = { + action: 'addDiscountCode', + code: data.discount.toUpperCase(), + }; + const queryObj: IUpdateCartApiObjectRequest = { + cartId, + token: accessToken, + data: { version: cartVersion, actions: [actionObject] }, + }; + updateCart(queryObj); + }; + return ( + + + + ( + + )} + name={'discount'} + control={control} + defaultValue={''} + /> + + + + + + {isError && error && This discount code is not available} + + ); +}; +export default BasketDiscountForm; diff --git a/e-commerce-app/src/components/BasketFull/BasketFull.tsx b/e-commerce-app/src/components/BasketFull/BasketFull.tsx index e8dc5f4..32d6dd2 100644 --- a/e-commerce-app/src/components/BasketFull/BasketFull.tsx +++ b/e-commerce-app/src/components/BasketFull/BasketFull.tsx @@ -3,7 +3,7 @@ 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 { Button } from '@mui/material'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; import Paper from '@mui/material/Paper'; import { useNavigate } from 'react-router-dom'; @@ -12,6 +12,8 @@ import { useAppSelector } from '../../store/hooks'; import { getLineItemsInCart, selectCart } from '../../api/cartApi'; import BasketLineItem from '../BasketLineItem/BasketLineItem'; import { ICartApiResponse } from '../../types/slicesTypes/cart'; +import CartClear from '../../requestsComponents/CartClear/CartClear'; +import BasketDiscountForm from '../BasketDiscountForm/BasketDiscountForm'; const BasketFull = (): JSX.Element => { const navigate = useNavigate(); @@ -19,6 +21,17 @@ const BasketFull = (): JSX.Element => { const cart = useAppSelector(selectCart) as ICartApiResponse; const totalCurrencyEUR = cart.totalPrice.currencyCode; + + const subTotalNumber = + cart.lineItems.reduce((accum, item) => { + return item.price.value.centAmount * item.quantity + accum; + }, 0) / + 10 ** cart.totalPrice.fractionDigits; + const subTotalPriceEUR = new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: totalCurrencyEUR, + }).format(subTotalNumber); + const totalNumberEUR = cart.totalPrice.centAmount / 10 ** cart.totalPrice.fractionDigits; const totalPriceEUR = new Intl.NumberFormat('en-IN', { style: 'currency', @@ -57,9 +70,7 @@ const BasketFull = (): JSX.Element => { - + @@ -68,21 +79,14 @@ const BasketFull = (): JSX.Element => { Subtotal - {totalPriceEUR} + {subTotalPriceEUR} Taxes and shipping calculated at checkout - - - - - - - - + { color="green" > - Discounted Price + EST. TOTAL: - 19.00 + {totalPriceEUR} diff --git a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.module.scss b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.module.scss new file mode 100644 index 0000000..2e6d70c --- /dev/null +++ b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.module.scss @@ -0,0 +1,9 @@ +.price { + &__sale { + text-decoration: line-through; + text-decoration-color: gray; + } + &__marked { + color: rgb(221, 65, 65); + } +} diff --git a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx index d1f6628..ab47501 100644 --- a/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx +++ b/e-commerce-app/src/components/BasketLineItem/BasketLineItem.tsx @@ -8,6 +8,7 @@ import CartModifyQuantity from '../../requestsComponents/CartModifyQuantity/Cart import { styled } from '@mui/material/styles'; import { ICartLineItem } from '../../types/slicesTypes/cart'; import { Link } from 'react-router-dom'; +import styles from './BasketLineItem.module.scss'; const Img = styled('img')({ margin: 'auto', @@ -28,7 +29,29 @@ const BasketLineItem: FC = ({ item }) => { currency: currencyEUR, }).format(numberEUR); + let discountedNumberEUR = numberEUR; + if (item.price.discounted) { + discountedNumberEUR = + item.price.discounted.value.centAmount / 10 ** item.price.discounted.value.fractionDigits; + } + if (item.discountedPrice) { + discountedNumberEUR = + item.discountedPrice.value.centAmount / 10 ** item.discountedPrice.value.fractionDigits; + } + const discountedPriceEUR = new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: currencyEUR, + }).format(discountedNumberEUR); + const totalCurrencyEUR = item.totalPrice.currencyCode; + + const subTotalNumberEUR = + (item.price.value.centAmount * item.quantity) / 10 ** item.price.value.fractionDigits; + const subTotalPriceEUR = new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: totalCurrencyEUR, + }).format(subTotalNumberEUR); + const totalNumberEUR = item.totalPrice.centAmount / 10 ** item.totalPrice.fractionDigits; const totalPriceEUR = new Intl.NumberFormat('en-IN', { style: 'currency', @@ -58,9 +81,30 @@ const BasketLineItem: FC = ({ item }) => { - - {priceEUR} - + {discountedNumberEUR !== numberEUR ? ( + <> + + {discountedPriceEUR} + + + {priceEUR} + + + ) : ( + + {priceEUR} + + )} @@ -68,9 +112,30 @@ const BasketLineItem: FC = ({ item }) => { - - {totalPriceEUR} - + {subTotalNumberEUR !== totalNumberEUR ? ( + <> + + {totalPriceEUR} + + + {subTotalPriceEUR} + + + ) : ( + + {totalPriceEUR} + + )} { return ( - + { About Us - We are RSdzen company, dedicated to providing the best service to our customers.{' '} -
Hanna Dziahonskaya CEO and Founder - ReactDreamTeam and RSdzen Company. + We are RS-School students, dedicated to providing the best service to our customers. +
Hanna Dziahonskaya is a Mentor + ReactDreamTeam and RSdzen Project. @@ -37,7 +37,7 @@ export const Footer: React.FC = () => { Contact Us - 123 Main Street, USA + 123 Example Street, EXAMPLE Email: info@example.com @@ -55,13 +55,18 @@ export const Footer: React.FC = () => { > Follow Us - + - + - + @@ -69,10 +74,10 @@ export const Footer: React.FC = () => { - - - + + + ); }; diff --git a/e-commerce-app/src/components/ProductCard/ProductCard.module.scss b/e-commerce-app/src/components/ProductCard/ProductCard.module.scss index 764ec12..1cb1bd4 100644 --- a/e-commerce-app/src/components/ProductCard/ProductCard.module.scss +++ b/e-commerce-app/src/components/ProductCard/ProductCard.module.scss @@ -34,14 +34,12 @@ padding-top: 1rem; 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 { diff --git a/e-commerce-app/src/components/ProductCard/ProductCard.tsx b/e-commerce-app/src/components/ProductCard/ProductCard.tsx index 4ace9d8..4737ef5 100644 --- a/e-commerce-app/src/components/ProductCard/ProductCard.tsx +++ b/e-commerce-app/src/components/ProductCard/ProductCard.tsx @@ -1,11 +1,8 @@ -import { FC, useEffect, useState } from 'react'; +import { FC } from 'react'; import styles from './ProductCard.module.scss'; import { Box, Typography, 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'; import CartAddLineItem from '../../requestsComponents/CartAddLineItem/CartAddLineItem'; interface ICardProps { @@ -21,20 +18,6 @@ export const ProductCard: FC = ({ item }) => { } }; - 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; @@ -42,6 +25,12 @@ export const ProductCard: FC = ({ item }) => { const numberEUR = item.masterData.current.masterVariant.prices[0].value.centAmount / 10 ** item.masterData.current.masterVariant.prices[0].value.fractionDigits; + let discountEUR = numberEUR; + if (item.masterData.current.masterVariant.prices[0].discounted) { + discountEUR = + item.masterData.current.masterVariant.prices[0].discounted.value.centAmount / + 10 ** item.masterData.current.masterVariant.prices[0].discounted.value.fractionDigits; + } const priceEUR = new Intl.NumberFormat('en-IN', { style: 'currency', currency: currencyEUR, @@ -49,20 +38,7 @@ export const ProductCard: FC = ({ item }) => { 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; - 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); + }).format(discountEUR); return ( clickOnCardHandler(e)}> @@ -74,7 +50,7 @@ export const ProductCard: FC = ({ item }) => { {item.masterData.current.name.en} - {tax !== 0 ? ( + {discountEUR !== numberEUR ? ( <> {salePriceEUR} @@ -88,21 +64,6 @@ export const ProductCard: FC = ({ item }) => { {priceEUR} )} - - {tax !== 0 ? ( - <> - - {salePriceUSD} - - - {priceUSD} - - - ) : ( - - {priceUSD} - - )} diff --git a/e-commerce-app/src/components/PromoCard/PromoCard.module.scss b/e-commerce-app/src/components/PromoCard/PromoCard.module.scss new file mode 100644 index 0000000..246e640 --- /dev/null +++ b/e-commerce-app/src/components/PromoCard/PromoCard.module.scss @@ -0,0 +1,11 @@ +.card { + &__avatar { + width: 56px; + height: 56px; + margin-left: 42%; + } + + &__code { + border: 2px green dotted; + } +} diff --git a/e-commerce-app/src/components/PromoCard/PromoCard.tsx b/e-commerce-app/src/components/PromoCard/PromoCard.tsx new file mode 100644 index 0000000..e15e631 --- /dev/null +++ b/e-commerce-app/src/components/PromoCard/PromoCard.tsx @@ -0,0 +1,35 @@ +import React, { FC, JSX } from 'react'; +import CardContent from '@mui/material/CardContent'; +import Avatar from '@mui/material/Avatar'; +import styles from './PromoCard.module.scss'; +import Typography from '@mui/material/Typography'; +import Card from '@mui/material/Card'; + +interface IPromoCardProps { + avatarSrc: string; + code: string; + description: string; +} + +const PromoCard: FC = ({ avatarSrc, code, description }): JSX.Element => { + return ( + + + + + Coupon Code #1 + + + {code} + + + Copy the code above and paste at checkout + + + {description} + + + + ); +}; +export default PromoCard; diff --git a/e-commerce-app/src/components/PromoCodes/PromoCodes.module.scss b/e-commerce-app/src/components/PromoCodes/PromoCodes.module.scss new file mode 100644 index 0000000..f70f495 --- /dev/null +++ b/e-commerce-app/src/components/PromoCodes/PromoCodes.module.scss @@ -0,0 +1,12 @@ +.promo { + background-color: beige; + padding: 5%; + + &__title { + padding-bottom: 3%; + font-weight: 600; + text-align: center; + } + + +} diff --git a/e-commerce-app/src/components/PromoCodes/PromoCodes.tsx b/e-commerce-app/src/components/PromoCodes/PromoCodes.tsx new file mode 100644 index 0000000..543c21b --- /dev/null +++ b/e-commerce-app/src/components/PromoCodes/PromoCodes.tsx @@ -0,0 +1,63 @@ +import React, { JSX, useEffect, useState } from 'react'; +import styles from './PromoCodes.module.scss'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Icon1 from '../../assets/HomePageImg/promoIcon1.png'; +import Icon2 from '../../assets/HomePageImg/promoIcon2.png'; +import Icon3 from '../../assets/HomePageImg/promoIcon3.png'; +import Container from '@mui/material/Container'; +import PromoCard from '../PromoCard/PromoCard'; +import { useLazyGetDiscountCodesQuery } from '../../api/discountCodesApi'; +import { useAppSelector } from '../../store/hooks'; +import { getAccessToken } from '../../store/slices/userSlice'; + +const initialData = { + code: 'XXX-XXX-XX', + description: 'Discount code will be here', +}; + +const icons = [Icon1, Icon2, Icon3]; + +const PromoCodes = (): JSX.Element => { + const accessToken = useAppSelector(getAccessToken) as string; + const [getDiscountCodes, { data, isSuccess }] = useLazyGetDiscountCodesQuery(); + + const [discounts, setDiscounts] = useState([initialData, initialData, initialData]); + + useEffect(() => { + if (accessToken) { + getDiscountCodes(accessToken); + } + }, [accessToken]); + + useEffect(() => { + if (isSuccess && data) { + const discountsArray = data.results.slice(0, 3).map((discount) => ({ + code: discount.code, + description: discount.description.en, + })); + console.log(discountsArray); + setDiscounts(discountsArray); + } + }, [isSuccess]); + + return ( + + + Active Promo Codes + + + {discounts.map((discount, idx) => ( + + + + ))} + + + ); +}; +export default PromoCodes; diff --git a/e-commerce-app/src/pages/HomePage/HomePage.module.scss b/e-commerce-app/src/pages/HomePage/HomePage.module.scss index b5b296a..6b38a86 100644 --- a/e-commerce-app/src/pages/HomePage/HomePage.module.scss +++ b/e-commerce-app/src/pages/HomePage/HomePage.module.scss @@ -1,69 +1,48 @@ .homePage { - display: block; - - .banner { - background-image: url(../../assets/HomePageImg/Banner.avif); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - position: relative; - display: flex; - justify-content: center; - padding-top: 10%; - height: 400px; - color: green; - - p { - font-weight: 600; - text-align: center; - } + display: block; + + .banner { + background-image: url(../../assets/HomePageImg/Banner.avif); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + position: relative; + display: flex; + justify-content: center; + padding-top: 10%; + height: 400px; + color: green; + + p { + font-weight: 600; + text-align: center; } - - .promoContainer{ - background-color: beige; - padding: 5%; - - .promoTitle { - padding-bottom: 3%; - font-weight: 600; - text-align: center; - } - - .avatar { - width: 56px; - height: 56px; - margin-left: 42%; - } - - .code { - border: 2px green dotted; - } + } + + .infoContainer { + padding: 7%; + display: flex; + justify-content: space-around; + align-items: center; + + .infoImage { + background-image: url(../../assets/HomePageImg/PlantsRoom.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + height: 460px; + position: relative; } - .infoContainer{ - padding: 7%; - display: flex; - justify-content: space-around; - align-items: center; - - .infoImage{ - background-image: url(../../assets/HomePageImg/PlantsRoom.png); - background-repeat: no-repeat; - background-size: contain; - background-position: center; - height: 460px; - position: relative; - } - - .info_title { - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 30px; - font-weight: 600; - color: green; - } + .info_title { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 30px; + font-weight: 600; + color: green; + } - .info_text { - margin-top: 3%; - } + .info_text { + margin-top: 3%; } -} \ No newline at end of file + } +} diff --git a/e-commerce-app/src/pages/HomePage/HomePage.tsx b/e-commerce-app/src/pages/HomePage/HomePage.tsx index 01faf59..cb0b6b7 100644 --- a/e-commerce-app/src/pages/HomePage/HomePage.tsx +++ b/e-commerce-app/src/pages/HomePage/HomePage.tsx @@ -5,12 +5,7 @@ import styles from './HomePage.module.scss'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import Avatar from '@mui/material/Avatar'; -import Icon1 from '../../assets/HomePageImg/promoIcon1.png'; -import Icon2 from '../../assets/HomePageImg/promoIcon2.png'; -import Icon3 from '../../assets/HomePageImg/promoIcon3.png'; +import PromoCodes from '../../components/PromoCodes/PromoCodes'; export const HomePage: React.FC = () => { const { email } = useAppSelector((state) => state.user); @@ -21,70 +16,7 @@ export const HomePage: React.FC = () => { Hello, {email ? email : 'Stranger.'}
Can I call you a Friend? - - - Active Promo Codes - - - - - - - - Coupon Code #1 - - - XXX-XXX-XX - - - Copy the code above and paste at checkout - - - 10% Discount - - - - - - - - - - Coupon Code #2 - - - XXX-XXX-XX - - - Copy the code above and paste at checkout - - - 30% Discount - - - - - - - - - - Coupon Code #3 - - - XXX-XXX-XX - - - Copy the code above and paste at checkout - - - 50% Discount - - - - - - + diff --git a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx index 9c722ff..29053e8 100644 --- a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx +++ b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react'; +import { FC, useState } from 'react'; import styles from './ProductPage.module.scss'; import { Box, Typography, Button, Grid, Stack } from '@mui/material'; import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; @@ -12,8 +12,6 @@ import { useParams } from 'react-router-dom'; import { useAppSelector } from '../../store/hooks'; 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'; @@ -31,27 +29,12 @@ const styleArrows = { export const ProductPage: FC = () => { const { productId } = useParams(); const authToken = useAppSelector(getAccessToken); - const taxesArray = useAppSelector(getTaxes); - const { data, isSuccess, isLoading, isFetching } = useGetProductByIdQuery({ + const { data, isLoading, isFetching } = useGetProductByIdQuery({ productId: productId as string, token: authToken as string, }); - const [tax, setTax] = useState(0); - - useEffect(() => { - if (isSuccess) { - taxesArray - .filter((item) => item.id === data.taxCategory.id && item.key === 'sale') - .flatMap((elem) => elem.rates) - .filter((rate: ITaxApiResponse) => rate.country === 'DE') - .forEach((rate: ITaxApiResponse) => { - setTax(rate.amount); - }); - } - }, [isSuccess]); - const [selectedImg, setSelectedImg] = useState(0); // Modal window @@ -72,6 +55,12 @@ export const ProductPage: FC = () => { const priceNumber = data.masterData.current.masterVariant.prices[0].value.centAmount / 10 ** data.masterData.current.masterVariant.prices[0].value.fractionDigits; + let discountNumber = priceNumber; + if (data.masterData.current.masterVariant.prices[0].discounted) { + discountNumber = + data.masterData.current.masterVariant.prices[0].discounted.value.centAmount / + 10 ** data.masterData.current.masterVariant.prices[0].discounted.value.fractionDigits; + } const priceCommon = new Intl.NumberFormat('en-IN', { style: 'currency', currency: currencyCommon, @@ -80,7 +69,12 @@ export const ProductPage: FC = () => { const discountPrice = new Intl.NumberFormat('en-IN', { style: 'currency', currency: currencyCommon, - }).format(priceNumber - priceNumber * tax); + }).format(discountNumber); + + const priceDiff = new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: currencyCommon, + }).format(priceNumber - discountNumber); return ( @@ -160,21 +154,21 @@ export const ProductPage: FC = () => { {title} - {tax !== 0 ? ( + {discountPrice !== priceCommon ? ( <> Discount price:{discountPrice} - Full price:{priceCommon} + Full price: {priceCommon} - Tax: {`${tax * 100} %`} + Discount: {priceDiff} ) : ( - Price:{priceCommon} + Price: {priceCommon} )} diff --git a/e-commerce-app/src/pages/RootPage/RootPage.tsx b/e-commerce-app/src/pages/RootPage/RootPage.tsx index c595e4f..4e3a9d1 100644 --- a/e-commerce-app/src/pages/RootPage/RootPage.tsx +++ b/e-commerce-app/src/pages/RootPage/RootPage.tsx @@ -3,16 +3,19 @@ import { Outlet } from 'react-router-dom'; import { Header } from '../../components/Header/Header'; import { Footer } from '../../components/Footer/Footer'; import Container from '@mui/material/Container'; +import { Box, Stack } from '@mui/material'; const RootPage = (): JSX.Element => { return ( - <> +
- - - + + + + +