I 'm Include chat bot

db.json

@@ -0,0 +1,12 @@
+{
+  "posts": [
+    {
+      "Contact": {
+        "id": "Contact",
+        "message": "1234567890",
+        "value": "1234567890"
+      },
+      "id": 1
+    }
+  ]
+}

package.json

@@ -5,15 +5,22 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
+    "@iconify/icons-heroicons-solid": "^1.2.5",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@types/react-router": "^5.1.19",
     "axios": "^0.26.1",
     "firebase": "^9.6.8",
+    "font-awesome": "^4.7.0",
+    "heroicons-react": "^1.4.1",
+    "node-modules": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-simple-chatbot": "^0.6.1",
+    "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -11,6 +11,8 @@ import ProductDetail from './Pages/ProductDetail'
 import Cart from './Pages/Cart'
 import Favorites from './Pages/Favorites'
 
+
+
 function App() {
   return (
     <div className="container mx-auto">
@@ -24,7 +26,7 @@ function App() {
           <Route path="/favorites" element={<Favorites />} />
           <Route path="/signin" element={<Signin />} />
           <Route path="/signup" element={<Signup />} />
-          <Route path="*" element={<Error404 />} />
+          <Route path="*" element={<Error404 />} />         
         </Routes>
       </Container>
     </div>

src/Components/Card/index.js

@@ -2,16 +2,20 @@ import styles from './styles.module.css'
 import { StarIcon, ShoppingCartIcon, HeartIcon } from '@heroicons/react/solid'
 import { Link } from 'react-router-dom'
 
-const Card = ({
+const Card  = ({
   item,
   addToFavorite,
   findFavoriteItem,
   addToCart,
   findCartItem,
-}) => {
-
+}) =>
+{
+
   return (
     <div key={`${item.id}-item`} className={styles.card} title={item.title}>
+      {/* <h1>{item.title}</h1> */}
+
+
       <div className={styles.cardLink}>
         <button
           className={
@@ -91,6 +95,6 @@ const Card = ({
       </div>
     </div>
   )
-}
 
+            }  
 export default Card

src/Pages/Auth/Signin/index.js

@@ -8,7 +8,7 @@ const Signin = () => {
 
   const { currentUser, login, setCurrentUser, setIsSubmitting, loggedIn } = useAuth()
 
-  const [email, setEmail] = useState("")
+  const [email, setEmail] = useState("") 
   const [password, setPassword] = useState("")
 
   const emailRef = useRef()
@@ -35,7 +35,7 @@ const Signin = () => {
     <div className={styles.formGroupContainer}>
       <div className={styles.formGroup}>
         <div>
-          <h2 className={styles.title}>Login</h2>
+          <h2 className={styles.title}>Login</h2>           
         </div>
         <form
           autoComplete="off"

src/Pages/Auth/Signup/validations.js

@@ -1,4 +1,3 @@
-
 const validations = (currentUser, users) => {
   console.log(users)
   const isUser = users.some((item) => item.email === currentUser.email)

src/Pages/ProductDetail/index.js

@@ -6,6 +6,8 @@ import { useProduct } from "../../Context/ProductContext";
 import { useCart } from "../../Context/CartContext";
 import { useFavorite } from "../../Context/FavoriteContext";
 import styles from "./styles.module.css";
+import First from '../../chatbot/First'
+
 
 const ProductDetail = () => {
   const { addToCart, items } = useCart();
@@ -20,9 +22,8 @@ const ProductDetail = () => {
   useEffect(() => {
     setProductID(product_id);
   }, []);
-
   return (
-    <>
+    <>    
       {!loading && product?.id ? (
           <div className="flex flex-wrap max-w-7xl mx-auto my-4">
             <div className="w-full sm:w-2/2 md:w-2/2 xl:w-5/5 p-4 flex flex-wrap">
@@ -63,10 +64,12 @@ const ProductDetail = () => {
                   {product.description}
                 </p>
                 <div className="flex">
-                  <div className="my-auto">
+                  <div className="my-2">
                     <span className="font-extralight text-2xl inline-block align-middle mt-2 my-auto">
                       $ {product.price}
                     </span>
+
+
                   </div>
                   <div className="block ml-auto my-auto mt-0">
                     {" "}
@@ -79,7 +82,6 @@ const ProductDetail = () => {
                           className={styles.shoppingCartIcon}
                           aria-hidden="true"
                         />
-
                         <div className="flex flex-col self-center">
                           <span className={styles.buttonText}>
                             {findCartItem ? "Remove from cart" : "Add to Cart"}
@@ -101,11 +103,16 @@ const ProductDetail = () => {
                     >
                       <HeartIcon className={styles.heartIcon} />
                     </button>
+                    <div className='feed'>
+                   <span><First/></span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+
           </div>
+
       ) : (
         <Spinner />
       )}

src/Pages/ProductDetail/styles.module.css

@@ -14,7 +14,8 @@
   max-h-max 
   w-full 
   py-4 
-  my-auto 
+  mb-auto 
+  mt-0
   px-4
   object-scale-down 
   shadow-sm
@@ -138,4 +139,8 @@
 .emptyStarIcon {
   @apply 
   text-zinc-900/80 
+}
+.feedback{
+
+  color:blue
 }

src/Pages/Products/index.js

@@ -9,6 +9,7 @@ import Card from "../../Components/Card";
 
 const Products = () => {
   const {addToCart, items} = useCart()
+
   const {addToFavorite, favoriteItems} = useFavorite()
 
   const { productList, loading, setProductID, setCategory } = useProduct();

src/chatbot/App.css

@@ -0,0 +1,6 @@
+
+.btn img{
+    width:40px;
+    margin-top:20px;
+}
+

src/chatbot/First.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import SimpleForm from "./SimpleForm";
+import "./App.css";
+import { Link} from 'react-router-dom';
+import Logo from './Logo.png'
+
+
+const First = (props) => {
+  let [showChat, setShowChat] = useState(false);
+
+  const startChat = () => {
+    setShowChat(true);
+
+  };
+  const hideChat = () => {
+    setShowChat(false);
+  };
+
+  return (
+    <>
+      <div className="header">{/* <h2>My Application!!!</h2> */}</div>
+      <div className="main">
+        <div className="nav">{/* <h3>My Navigation</h3> */}</div>
+
+
+        <div className="content">
+          {/* <div style = {{padding:"20px"}}>
+            <h1>Content of my application will go here.....</h1>
+            <p>Sample content to fill the gap as much as possible. Sample content to fill the gap as much as possible.
+            Sample content to fill the gap as much as possible.Sample content to fill the gap as much as possible.</p>
+            <p>More content to fill the available area of the main contect. More content to fill the available area of the main contect.
+            More content to fill the available area of the main contect.More content to fill the available area of the main contect. </p>
+          </div> */}
+        </div>
+      </div>
+      {/* <div className = "footer">Footer</div> */}
+      <div className="bot">
+        <div style={{ display: showChat ? "" : "none" }}>
+          <SimpleForm/>
+          <Link to="/first" >
+    </Link>
+        </div>
+        {/* <div> {showChat ? <SimpleForm></SimpleForm> : null} </div> */}
+        <div>
+          {!showChat ? (
+           <button   className="btn" onClick={() => startChat()}>
+               <img src={Logo} alt='Logo.png' />{" "}
+            </button>
+          ) : (
+            <button className="btn" onClick={() => hideChat()}>
+             <img src={Logo} alt='Logo.png' />{""}
+            </button>
+          )}
+
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default First;

src/chatbot/Review.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+
+
+const Review = (props) => {
+  const [state, setState] = useState({ Product: "", gmail: "", Contact: "" });
+
+
+  useEffect(() => {
+    const { steps } = props;
+    const { Product, gmail, Contact } = steps;
+    setState({ Product, gmail, Contact })
+    axios.post(`http://localhost:3000/posts`,{
+      Contact,
+      gmail
+   })
+  }, []);
+
+  const { Product, gmail, Contact } = state;
+
+  return (
+    <div style={{ width: "100%" }}>
+      <h3>Summary</h3>
+      <table>
+        <tbody>
+          <tr>
+            <td>Product</td>
+            <td>{Product.value}</td>
+          </tr>
+          {/* <tr>
+              <td>Gmail</td>
+              <td>{gmail.value}</td>
+            </tr> */}
+          <tr>
+            <td>Contact Number</td>
+            <td>{Contact.value}</td>
+          </tr>
+        </tbody>
+      </table>
+      {/* <button type="submit" onClick={data}>submit</button> */}
+
+    </div>
+  );
+};
+
+Review.propTypes = {
+  steps: PropTypes.object
+};
+
+Review.defaultProps = {
+  steps: undefined
+};
+
+export default Review;