50% complete cart functionality

package-lock.json

@@ -21,6 +21,7 @@
         "react-redux": "^8.0.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
+        "react-toastify": "^8.1.0",
         "redux-thunk": "^2.4.1",
         "sass": "^1.51.0",
         "web-vitals": "^2.1.4"
@@ -5445,6 +5446,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14589,6 +14598,18 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
+      "integrity": "sha512-M+Q3rTmEw/53Csr7NsV/YnldJe4c7uERcY7Tma9mvLU98QT2VhIkKwjBzzxZkJRk/oBKyUAtkyMjMgO00hx6gQ==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -21287,6 +21308,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -27748,6 +27774,14 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-toastify": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
+      "integrity": "sha512-M+Q3rTmEw/53Csr7NsV/YnldJe4c7uERcY7Tma9mvLU98QT2VhIkKwjBzzxZkJRk/oBKyUAtkyMjMgO00hx6gQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^8.1.0",
     "redux-thunk": "^2.4.1",
     "sass": "^1.51.0",
     "web-vitals": "^2.1.4"

src/App.js

@@ -9,7 +9,7 @@ function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={<Home/>} />
+        <Route path="/" element={<Home />} />
       </Routes>
     </>
   );

src/Components/Card.js/Card.js

 import React from "react";
 import { Card } from "antd";
-import style from "./Card.module.scss"
+import style from "./Card.module.scss";
+import { addCart } from "../../store/Reducers/cartReducer";
+import { useDispatch } from "react-redux";
 
 const { Meta } = Card;
 
-const MainCard = ({ data }) => {
+const MainCard = ({ data, openNotification }) => {
+  const dispatch = useDispatch();
   const firstLatter = data?.title?.charAt(0)?.toUpperCase();
   return (
     <div>
       <Card
-        // hoverable
-        // style={{ width: 240, height: "500px" }}
-        cover={<img alt="example" src={data?.image} style={{height: 280}} />}
+        cover={<img alt="example" src={data?.image} style={{ height: 280 }} />}
       >
-        <Meta
-          title={firstLatter + data?.title?.substring(1)}
-        //   description={data?.price}
-        />
+        <Meta title={firstLatter + data?.title?.substring(1)} />
         <div className={style.priceAndButton}>
           <p>RS: {data?.price}</p>
-        <button>Add To Cart</button>
-
+          <button onClick={() => dispatch(addCart({data, openNotification}))}>Add To Cart</button>
         </div>
       </Card>
     </div>

src/Components/Drawer/Drawer.js

+import React, { useState } from "react";
+import { Drawer, Button, Space, Radio } from "antd";
+import { useSelector } from "react-redux";
+import style from "./Drawer.module.scss";
+import mobileImg from "../../assets/images/infinix.jpeg";
+import { AiFillPlusCircle, AiFillMinusCircle } from "react-icons/ai";
+
+const MainDrawer = ({ visible, setVisible }) => {
+  const { item } = useSelector((state) => state.cart);
+
+  console.log(item);
+
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  console.log(window.innerWidth);
+
+  // window.innerWidth
+
+  return (
+    <>
+      <Drawer
+        title="Check Out"
+        placement="right"
+        width={500}
+        onClose={onClose}
+        visible={visible}
+        // extra={
+        //   <Space>
+        //     <Button onClick={onClose}>Cancel</Button>
+        //     <Button type="primary" onClick={onClose}>
+        //       OK
+        //     </Button>
+        //   </Space>
+        // }
+      >
+        {item?.map((item, index) => {
+          return (
+            <>
+              <div className={style.mainContainer}>
+                <div className={style.imageContainer}>
+                  <img src={item?.image} alt="" />
+                </div>
+                <div className={style.rightContainer}>
+                  <p>{item?.title}</p>
+                  <p className={style.productPrice}>Rs: {item?.price}</p>
+                  <div className={style.countingDiv}>
+                    <span>
+                      <AiFillMinusCircle />
+                    </span>
+                    <p>0</p>
+                    <span>
+                      <AiFillPlusCircle />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </>
+          );
+        })}
+        <div className={style.subTotalContainer}>
+          <p>Sub Total:</p>
+          <p>RS: 1200</p>
+        </div>
+        <button className={style.submitBtn}>Submit</button>
+      </Drawer>
+    </>
+  );
+};
+
+export default MainDrawer;

src/Components/Drawer/Drawer.module.scss

+// .mainContainer {
+//     width: 100%;
+//     display: flex;
+//     justify-content: center;
+//     background-color: orange;
+//     .innerMainContainer{
+//         width: 90%;
+//         height: 140px;
+//         background-color: red;
+//     }
+// }
+
+.mainContainer {
+  width: 100%;
+  min-height: 150px;
+  //   height: 100%;
+  background-color: white;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  border: 1px solid black;
+  .imageContainer {
+    width: 30%;
+    height: 80%;
+    object-fit: contain;
+    margin-left: 20px;
+    margin-right: 20px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .rightContainer {
+    margin-left: 0px;
+    margin-right: 20px;
+    width: 70%;
+    p {
+      margin: 2px;
+    }
+    p:nth-child(1) {
+        font-family: "Poppin-Medium";
+
+    }
+    .productPrice {
+      font-family: "Poppin-SemiBold";
+    }
+
+    .countingDiv {
+      //   background-color: red;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+
+      span {
+        font-size: 30px;
+        color: #56a514;
+        cursor: pointer;
+        padding: 0px 10px;
+        &:hover {
+          color: #3c750e;
+        }
+      }
+      p {
+        font-size: 22px;
+        margin: 0px;
+      }
+    }
+  }
+}
+
+.subTotalContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  p {
+    margin: 0px;
+  }
+
+  p:nth-child(1) {
+    font-size: 18px;
+    font-family: "Poppin-SemiBold";
+}
+  p:nth-child(2) {
+    font-size: 18px;
+    font-family: "Poppin-SemiBold";
+    letter-spacing: 0.2px;
+  }
+}
+
+.submitBtn {
+  width: 100%;
+  background-color: #56a514;
+  outline: none;
+  border: none;
+  padding: 8px 0px;
+  margin-top: 10px;
+  color: white;
+  font-size: 16px;
+  &:hover {
+    background-color: #3c750e;
+  }
+}

src/Components/Navbar/Navbar.js

@@ -5,10 +5,13 @@ import logo from "../../assets/images/logo.png";
 import { Input } from "antd";
 import { IoCartOutline } from "react-icons/io5";
 import { headerData } from "../../Helper/dummyData";
+import { useSelector } from "react-redux";
 
 const { Search } = Input;
 
-const MainNavbar = () => {
+const MainNavbar = ({ setVisible }) => {
+  const { item } = useSelector((state) => state.cart);
+
   return (
     <>
       <div className={style.mainCOntainer}>
@@ -44,10 +47,13 @@ const MainNavbar = () => {
                   <Nav.Link href="#pricing">Pricing</Nav.Link> */}
                 </Nav>
                 <Nav>
-                  <Nav.Link href="#deets">
-                    <div className={style.cartContianer}>
+                  <Nav.Link>
+                    <div
+                      className={style.cartContianer}
+                      onClick={() => setVisible(true)}
+                    >
                       <IoCartOutline className={style.cartIcon} />
-                      <p className={style.cartCount}>0</p>
+                      <p className={style.cartCount}>{item.length}</p>
                     </div>
                   </Nav.Link>
                 </Nav>
@@ -64,7 +70,9 @@ const MainNavbar = () => {
                     <a
                       href={item?.link}
                       className={
-                        headerData?.length - 1 !== index ? style.borderRight : ""
+                        headerData?.length - 1 !== index
+                          ? style.borderRight
+                          : ""
                       }
                     >
                       {item?.link}

src/Components/NotificationBox/NotificationBox.js

+import React from "react"
+import { Button, notification } from 'antd';
+
+const Context = React.createContext({ name: 'Default' });
+
+const NotificationBox = () => {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = placement => {
+    api.info({
+      message: `Notification ${placement}`,
+      description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
+      placement,
+    });
+  };
+
+  return (
+    <Context.Provider value={{ name: 'Ant Design' }}>
+      {contextHolder}
+        <Button type="danger" onClick={() => openNotification('bottomLeft')}>
+          bottomLeft
+        </Button>
+    </Context.Provider>
+  );
+};
+
+export default NotificationBox;
\ No newline at end of file

src/Screens/Home/Home.js

-import React from "react";
+import React, { useState } from "react";
 import MainNavbar from "../../Components/Navbar/Navbar";
 import MainCarousel from "../../Components/Carousel/Carousel";
 import style from "./Home.module.scss";
@@ -11,13 +11,28 @@ import CategoriesCard from "../../Components/Card.js/CategoriesCard";
 import { cardData, categoriesCardData } from "../../Helper/dummyData";
 import Footer from "../../Components/Footer/Footer";
 import { useDispatch, useSelector } from "react-redux";
-import { addCart } from "../../store/Reducers/cartReducer";
+
+import MainDrawer from "../../Components/Drawer/Drawer";
+import NotificationBox from "../../Components/NotificationBox/NotificationBox";
+import { notification } from "antd";
 
 const Home = () => {
   const dispatch = useDispatch();
   const count = useSelector((state) => state.cart.item);
 
-  console.log(count);
+  const [visible, setVisible] = useState(false);
+
+  const openNotification = () => {
+    notification.success({
+      message: "HUM MART",
+      description: " Item Added in to Cart Successfully",
+      className: "custom-class",
+      placement: "bottomLeft",
+      duration: 2.5,
+    });
+  };
+
+  // console.log(count);
 
   return (
     <>
@@ -25,7 +40,7 @@ const Home = () => {
         <Container fluid className="p-0">
           <Row>
             <div>
-              <MainNavbar />
+              <MainNavbar setVisible={setVisible} />
             </div>
             <div>
               <Container className={style.carouselContainer}>
@@ -62,9 +77,11 @@ const Home = () => {
                         md={4}
                         sm={12}
                         className={style.cardCol}
-                        onClick={() => dispatch(addCart(item))}
+                        // onClick={() => {
+                        //   openNotification();
+                        // }}
                       >
-                        <MainCard data={item} />
+                        <MainCard data={item} openNotification={openNotification} />
                       </Col>
                     );
                   })}
@@ -126,6 +143,7 @@ const Home = () => {
             </div>
           </Row>
         </Container>
+        <MainDrawer visible={visible} setVisible={setVisible} />
       </section>
     </>
   );

src/Screens/Home/Home.module.scss

@@ -18,7 +18,7 @@
 }
 
 .thirdContainer{
-    margin-top: 120px;
+    margin-top: 20px;
     padding-top: 20px;
     background-color: rgb(243, 243, 243);
     margin-bottom: 100px;

src/index.js

@@ -6,7 +6,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { Provider } from "react-redux";
 import store from "./store/store";
 import { BrowserRouter } from "react-router-dom";
-import 'antd/dist/antd.css';
+import "antd/dist/antd.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

src/store/Reducers/cartReducer.js

@@ -8,7 +8,8 @@ export const cartSlice = createSlice({
   reducers: {
     addCart(state, action) {
       console.log(action);
-      state.item.push(action.payload);
+      state.item.push(action.payload.data);
+      action.payload.openNotification()
     },
   },
 });