scroll to top when clicked for product details

src/components/common/ScrollToTop.js

@@ -4,7 +4,10 @@ import { withRouter } from "react-router-dom";
 function ScrollToTop({ history }) {
   useEffect(() => {
     const unlisten = history.listen(() => {
-      window.scrollTo(0, 0);
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
     });
     return () => {
       unlisten();

src/components/frontend/PublicRoutes.js

@@ -21,6 +21,7 @@ import TC from "./home/TC";
 import AboutUs from "./home/AboutUs";
 import Shipping from "./home/Shipping";
 import RC from "./home/RC";
+import Wishlist from "./wishlist/Wishlist";
 
 class PublicRoutes extends Component {
   render() {
@@ -35,6 +36,7 @@ class PublicRoutes extends Component {
           <Route exact path="/checkout/review" component={Review} />
           <Route exact path="/checkout/payment" component={Payment} />
           <Route exact path="/product/:productId" component={ProductDetails} />
+          <Route exact path="/wishlist" component={Wishlist} />
           <Route
             exact
             path="/category/:categoryId"

src/components/frontend/appbar/AppBar.js

@@ -5,7 +5,7 @@ import Toolbar from "@material-ui/core/Toolbar";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
-import { Search, Person, ShoppingCart } from "@material-ui/icons";
+import { Search, Person, ShoppingCart,FavoriteBorderIcon  } from "@material-ui/icons";
 import Grid from "@material-ui/core/Grid";
 import Hidden from "@material-ui/core/Hidden";
 import { Link, useHistory } from "react-router-dom";
@@ -198,11 +198,41 @@ function MyAppBar(props) {
                       </Badge>
                     </IconButton>
                     <Hidden smDown>
-                      <p>My Cart</p>
+                      {/* <p>My Cart</p> */}
                     </Hidden>
                   </div>
                 </Link>
               </Grid>
+
+              {/* my change in for adding wishlist */}
+              <Grid item>
+                <Link to="/wishlist" className={classes.link}>
+                  <div className={classes.actionDiv}>
+                    <IconButton aria-label="wishlist">
+                      {/* <Badge
+                        badgeContent={props.cart.length}
+                        color="primary"
+                        anchorOrigin={{
+                          vertical: "top",
+                          horizontal: "left",
+                        }}
+                      > */}
+                        <FavoriteBorderIcon
+                          onChange={handleSearchChange}
+                          onSubmit={handleSearch}
+                          value={searchText}
+                          className={classes.menuButton}
+                        />
+                      {/* </Badge> */}
+                    </IconButton>
+                    <Hidden smDown>
+                      {/* <p>My wislist</p> */}
+                    </Hidden>
+                  </div>
+                </Link>
+              </Grid>
+
+
             </Grid>
           </Grid>
         </Toolbar>

src/components/frontend/cart/Cart.js

@@ -82,7 +82,7 @@ function Cart(props) {
       <ScrollToTop />
       <Grid container spacing={3}>
         <Grid item xs={12} lg={8}>
-          {props.cart.length > 0 && (
+          {props.cart.length > 0 ? 
             <>
               <span className={classes.cartTitle}>
                 My Cart({props.cart.length})
@@ -94,36 +94,35 @@ function Cart(props) {
                   ))}
               </div>
             </>
-          )}
-          {props.cart.length === 0 && (
+            :
             <>
-              <Grid
-                container
-                justify="center"
-                className={classes.noItemsContainer}
-              >
-                <Grid item xs="auto">
-                  <div className={classes.noItemsTextHeading}>
-                    No Items in Cart
-                  </div>
-                  <div className={classes.noItemsText}>
-                    Explore the wide range of our products and have them
-                    delivered to your doorstep
-                  </div>
-                  <Button
-                    component={Link}
-                    className={classes.btn}
-                    to="/deals"
-                    variant="outlined"
-                    color="primary"
-                    alignItems="center"
-                  >
-                    Explore Our Products
-                  </Button>
-                </Grid>
+            <Grid
+              container
+              justify="center"
+              className={classes.noItemsContainer}
+            >
+              <Grid item xs="auto">
+                <div className={classes.noItemsTextHeading}>
+                  oops cart is empty
+                </div>
+                <div className={classes.noItemsText}>
+                  Explore the wide range of our products and have them
+                  delivered to your doorstep
+                </div>
+                <Button
+                  component={Link}
+                  className={classes.btn}
+                  to="/deals"
+                  variant="outlined"
+                  color="primary"
+                  alignItems="center"
+                >
+                  Explore Our Products
+                </Button>
               </Grid>
-            </>
-          )}
+            </Grid>
+          </>
+          }
         </Grid>
         <Grid item xs={12} lg={4}>
           <CheckoutStepper activeStep={0} />

src/components/frontend/product/ProductCard.js

@@ -13,6 +13,7 @@ import {
 import Skeleton from "@material-ui/lab/Skeleton";
 import { configs } from "../../../config/configs";
 import { titleToId } from "../../common/utils";
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -255,8 +256,9 @@ function ProductCard(props) {
       <div className={classes.change}>
         {count < 1 && productData.visibility && (
           <div className={classes.addBtn} onClick={handleAdd}>
-            <span>Add to My Cart</span>
+            <span>Add to Cart</span>
             <span className={classes.iconAddBtn}></span>
+            <span><FavoriteBorderIcon/></span>
           </div>
         )}
         {!productData.visibility && (

src/components/frontend/wishlist/Wishlist.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Wishlist = () => {
+  return (
+    <div>
+      your wishlist
+    </div>
+  )
+}
+
+export default Wishlist