import Image from "next/image"; import React, { useEffect, useState } from "react"; import Sidebar from "../../../components/layout/VendorDashboardSidebar"; import Layout from "../../../components/layout/Layout"; import { Button } from "react-bootstrap"; import { FaPlus } from "react-icons/fa"; import { useDispatch, useSelector } from "react-redux"; import { loadUser } from "../../../redux/actions/userActions"; import { wrapper } from "../../../redux/store"; import { useRouter } from "next/router"; import { GenericLayout } from "../../../components/layout/Generics/GenericLayout"; const VendorDashboard = () => { const { loadedUser, error } = useSelector(state => state.loadedUser); const router = useRouter(); console.log("user", loadedUser); const ApprovalStatus = () => { if (loadedUser) { switch (loadedUser.approved) { case "approved": return ( <> <div className="col-12 offset-lg-2 col-lg-8 "> <div className="alert alert-success alert-dismissible fade show text-center" role="alert"> <div className="text-center"> <p className="p1 text-center">Profile is approved!</p> <p className="p2 text-center">You can add activities.</p> </div> </div> </div> </> ); case "rejected": return ( <> <div className="col-12 offset-lg-2 col-lg-8 "> <div className="alert alert-danger alert-dismissible fade show text-center" role="alert"> <div className="text-center"> <p className="p1 text-center">Your profile has been rejected!</p> <p className="p2 text-center"> Please contact the admin for more details!</p> </div> </div> </div> </> ); case "pending": return ( <> <div className="col-12 offset-lg-2 col-lg-8 "> <div className="alert alert-warning alert-dismissible fade show text-center" role="alert"> <div className="text-center"> <p className="p1 text-center">Business information sent successfully.</p> <p className="p2 text-center">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p> </div> </div> </div> </> ); case "none": return <></>; default: break; } } }; return ( <GenericLayout> {/* <div className="sidebarContainer"> <Sidebar /> */} <div className="h-100 d-flex-align-items-center justify-content-center p-5"> <ApprovalStatus /> <div className="d-flex justify-content-center py-4"> <span className="image-container"> <Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" /> </span> </div> <div className="text-center py-2"> <p className="p3">No information is available right now</p> <Button onClick={() => { router.push("/vendor/activity-details"); }} type="button" variant="" className="btnAdd" disabled={loadedUser?.approved != "approved"} > <span className="image-container me-2"> <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" /> </span> {/* <FaPlus className="me-2" /> */} <span>Add Activity</span> </Button> </div> </div> {/* </div> */} </GenericLayout> ); }; export default VendorDashboard; /** For server side rendering */ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { // Get the menu data. // get the locations data. await store.dispatch(loadUser()); return { props: {} }; });