16 | setShow((prev) => !prev)}>
17 | {show ? : }
18 |
19 |
20 | ),
21 | }}
22 | />
23 | );
24 | };
25 |
26 | export default InputPasswordField;
27 |
--------------------------------------------------------------------------------
/src/context/adminContext.js:
--------------------------------------------------------------------------------
1 | import { React, createContext, useState, useEffect } from "react";
2 |
3 | export const AdminContext = createContext();
4 |
5 | export const CurrentAdminProvider = (props) => {
6 | const localAdmin = JSON.parse(localStorage.getItem("bookshlf_admin"));
7 |
8 | const [admin, setAdmin] = useState({
9 | bookVerification: {
10 | data: [],
11 | totalPages: 0,
12 | isApproved: false,
13 | page: 1,
14 | noOfBooksInOnePage: 24,
15 | },
16 | order: {
17 | panel: 0,
18 | orderDetails: { data: [], page: 1, totalPages: 0 },
19 | },
20 | });
21 |
22 | useEffect(() => {
23 | if (localAdmin) {
24 | setAdmin(localAdmin);
25 | }
26 | }, []);
27 |
28 | return (
29 |
30 | {props.children}
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./app/app";
5 | import reportWebVitals from "./reportWebVitals";
6 | import { HelmetProvider } from "react-helmet-async";
7 | import { BrowserRouter } from "react-router-dom";
8 | // Context
9 | import { CurrentUserProvider } from "./context/userContext";
10 | import { CurrentAdminProvider } from "./context/adminContext";
11 |
12 | const root = ReactDOM.createRoot(document.getElementById("root"));
13 | root.render(
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | reportWebVitals();
27 |
--------------------------------------------------------------------------------
/src/components/home/NotFoundPage.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useNavigate } from "react-router-dom";
3 |
4 | // mui
5 | import { Button } from "@mui/material";
6 | import HomeIcon from "@mui/icons-material/Home";
7 |
8 | const NotFoundPage = () => {
9 | const navigate = useNavigate();
10 | return (
11 |
12 |
13 | 4
14 |
15 | 
16 |
17 | 4
18 |
19 |
Error: 404 page not found
20 |
Sorry, the page you're looking for cannot be accessed
21 |
22 |
}
24 | variant="contained"
25 | size="small"
26 | onClick={() => navigate("/")}
27 | >
28 | Home
29 |
30 |
Form
;
51 | };
52 | const Mail = (props) => {
53 | return (
54 |
55 | {props.type === "button" ? (
56 |
66 | ) : (
67 |
68 | )}
69 |
70 | );
71 | };
72 | export default Mail;
73 |
--------------------------------------------------------------------------------
/src/components/home/Categories.css:
--------------------------------------------------------------------------------
1 | .categories {
2 | padding-top: 10px;
3 | background-color: white;
4 | color: rgb(51, 51, 51);
5 | }
6 | .item {
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | align-items: center;
11 | padding: 10px;
12 | height: 230px;
13 | width: 100%;
14 | max-width: 350px;
15 | cursor: pointer;
16 | background-color: rgb(10, 37, 64);
17 | border-radius: 15px;
18 | box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
19 | position: relative;
20 | border: 0.5px solid rgba(255, 255, 255, 0);
21 | color: rgb(255, 151, 65);
22 | }
23 | .item:hover {
24 | background-color: rgb(255, 151, 65);
25 | transition: 0.3s;
26 | color: rgb(51, 51, 51);
27 | border: 0.5px solid rgba(255, 255, 255, 0.3);
28 | }
29 | .item-h6 {
30 | font-size: 1em;
31 | margin-top: 100px;
32 | font-family: "Montserrat", sans-serif;
33 | letter-spacing: 2px;
34 | text-align: center;
35 | }
36 |
37 | @media screen and (max-width: 768px) {
38 | .categories h4 {
39 | font-size: 24px;
40 | font-weight: bolder !important;
41 | }
42 | .categories h6 {
43 | font-size: 12px !important;
44 | font-weight: bolder !important;
45 | }
46 | .categories .MuiAvatar-root {
47 | height: 50px;
48 | width: 50px;
49 | }
50 | .categories .MuiTypography-caption {
51 | font-size: 9px;
52 | padding: 6px 0px;
53 | width: 50px;
54 | }
55 | .item {
56 | height: 125px;
57 | width: 125px;
58 | }
59 | .item-h6 {
60 | font-size: 12px !important;
61 | margin-top: 40px;
62 | }
63 | }
64 | @media screen and (max-width: 350px) {
65 | .categories h6 {
66 | font-size: 9px !important;
67 | }
68 | .categories .MuiAvatar-root {
69 | height: 35px;
70 | width: 35px;
71 | top: 5px;
72 | }
73 | .categories .MuiTypography-caption {
74 | font-size: 9px;
75 | padding: 6px 0px;
76 | width: 50px;
77 | }
78 | .item {
79 | height: 125px;
80 | width: 125px;
81 | }
82 | .item-h6 {
83 | font-size: 12px !important;
84 | margin-top: 40px;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/Order/tracking/trackprogress.js:
--------------------------------------------------------------------------------
1 | import { Stack, Typography, Skeleton, Divider } from "@mui/material";
2 |
3 | import { TimestampToDate } from "../../../assets/utils/date";
4 | import OrderCancelButton from "../../../assets/components/buttons/ordercancelbutton";
5 | import TrackingStepper from "./trackingstepper";
6 |
7 | const TrackProgress = ({ order = {}, loading }) => {
8 | const { date, dayName, monthName, year } = TimestampToDate(
9 | order.expectedDeliveryDate
10 | );
11 |
12 | const orderCurrentStatus = order.status
13 | ? order.status[order.status.length - 1]
14 | : "UnKnown";
15 |
16 | return (
17 |
18 | {loading && (
19 |
25 | )}
26 | {!loading && (
27 |
28 |
33 | Estimated Delivery Date
34 | {orderCurrentStatus === "Order placed" && (
35 |
39 | )}
40 |
41 |
42 | {dayName}
43 |
44 | {monthName + ", " + year}
45 |
46 | {date}
47 |
48 |
49 | {orderCurrentStatus}
50 |
51 |
52 |
53 |
54 | )}
55 |
56 | );
57 | };
58 |
59 | export default TrackProgress;
60 |
--------------------------------------------------------------------------------
/src/components/AdminPanel/Support/SupportSideBar.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | // MUI Components
4 | import { Stack, Typography } from "@mui/material";
5 |
6 | // Custom Components
7 | import ComposeMail from "./ComposeMail";
8 |
9 | // MUI Icons
10 | import InboxIcon from "@mui/icons-material/Inbox";
11 | import GeneralIcon from "@mui/icons-material/Info";
12 | import FeedbackIcon from "@mui/icons-material/Feedback";
13 | import OrderhelpIcon from "@mui/icons-material/LocalShipping";
14 |
15 | const SidebarBtn = ({ panel, setPanel, value, Icon, txt }) => {
16 | return (
17 | setPanel(value)}
27 | >
28 | {Icon}
29 |
30 | {txt}
31 |
32 |
33 | );
34 | };
35 |
36 | const SupportSideBar = ({ panel, setPanel }) => {
37 | return (
38 |
39 |
40 | }
45 | txt="Inbox"
46 | />
47 | }
52 | txt="General Query"
53 | />
54 | }
59 | txt="Order Help"
60 | />
61 | }
66 | txt="Feedback"
67 | />
68 |
69 | );
70 | };
71 |
72 | export default SupportSideBar;
73 |
--------------------------------------------------------------------------------
/src/components/About/AboutSocial.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // Mui Components
4 | import { Stack, IconButton } from "@mui/material";
5 |
6 | // Mui Icons
7 | import WebsiteIcon from "@mui/icons-material/Language";
8 | import GitHubIcon from "@mui/icons-material/GitHub";
9 | import FacebookIcon from "@mui/icons-material/Facebook";
10 | import YouTubeIcon from "@mui/icons-material/YouTube";
11 | import InstagramIcon from "@mui/icons-material/Instagram";
12 | import LinkedInIcon from "@mui/icons-material/LinkedIn";
13 |
14 | // Links
15 | const GITHUB_URL = "https://github.com/Bookshlf-in";
16 | const WEBSITE_URL = "https://bookshlf.in";
17 | const YOUTUBE_URL = "https://www.youtube.com/channel/UCvZJWq7cQ4-cGJFsCWIppGQ";
18 | const FACEBOOK_URL = "https://www.facebook.com/Bookshlf-109479771200918";
19 | const LINKEDIN_URL = "https://www.linkedin.com/in/bookshlf-by-aman-861073223/";
20 | const INSTAGRAM_URL = "https://instagram.com/_bookshlf";
21 |
22 | const AboutSocial = () => {
23 | // Opening Links
24 | const OpenLink = (link) => {
25 | window.open(link, "_blank").focus();
26 | };
27 |
28 | // Custom Icon Button Component
29 | const SocialLink = (props) => {
30 | return (
31 | OpenLink(props.url)}
34 | sx={{ color: "white" }}
35 | size="small"
36 | >
37 | {props.Icon}
38 |
39 | );
40 | };
41 |
42 | return (
43 |
47 |
48 | } />
49 | } />
50 | } />
51 |
52 |
53 | } />
54 | } />
55 | } />
56 |
57 |
58 | );
59 | };
60 | export default AboutSocial;
61 |
--------------------------------------------------------------------------------
/src/components/About/About.js:
--------------------------------------------------------------------------------
1 | import { React } from "react";
2 | import { Helmet } from "react-helmet-async";
3 | import "./About.css";
4 |
5 | // Components
6 | import { Box, Stack, Typography, Avatar } from "@mui/material";
7 |
8 | // About Components
9 | import AboutSocial from "./AboutSocial";
10 | import AboutTeam from "./AboutTeam";
11 |
12 | const Year = new Date().getFullYear();
13 | const About = () => {
14 | return (
15 | <>
16 |
17 | About | Bookshlf
18 |
22 |
23 |
24 |
29 |
35 |
45 | BOOKSHLF
46 |
47 |
48 |
55 | TEAM
56 |
57 |
58 |
63 | {Year}
64 |
65 |
66 |
67 |
68 | );
69 | };
70 | export default About;
71 |
--------------------------------------------------------------------------------
/src/components/SellerPanel/SellerPanel.css:
--------------------------------------------------------------------------------
1 | .sellerPanel-container .MuiTabs-flexContainer {
2 | height: 100% !important;
3 | }
4 | .seller-register-banner {
5 | width: 100%;
6 | min-height: calc(100vh - 48px);
7 | background-color: rgba(27, 16, 95, 255);
8 | color: aliceblue;
9 | padding: 16px 24px;
10 | }
11 | .seller-register-banner-img {
12 | height: auto;
13 | width: 500px;
14 | }
15 | .seller-register-banner h2 {
16 | font-family: "Staatliches", sans-serif;
17 | letter-spacing: 0.05em;
18 | }
19 | .seller-register-banner span {
20 | font-family: "Montserrat", sans-serif;
21 | text-transform: capitalize;
22 | color: rgb(255, 255, 255, 0.8);
23 | }
24 | .seller-register-form {
25 | padding: 16px 24px;
26 | position: relative;
27 | width: 100%;
28 | min-height: calc(100vh - 48px);
29 | background-color: rgba(27, 16, 95, 255);
30 | }
31 | .seller-register-form .MuiOutlinedInput-root,
32 | .seller-register-form .MuiFormHelperText-root,
33 | .seller-register-form .MuiInputLabel-root {
34 | color: rgb(219, 219, 219) !important;
35 | }
36 | .seller-register-form .MuiOutlinedInput-notchedOutline {
37 | border-color: inherit;
38 | }
39 | .seller-register-form-back {
40 | position: absolute !important;
41 | top: 0;
42 | left: 0;
43 | }
44 | .iframe-container {
45 | position: relative;
46 | overflow: hidden;
47 | width: 100%;
48 | padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
49 | }
50 | .responsive-iframe {
51 | position: absolute;
52 | top: 0;
53 | left: 0;
54 | bottom: 0;
55 | right: 0;
56 | width: 100%;
57 | height: 100%;
58 | }
59 | @media screen and (max-width: 850px) {
60 | .seller-register-banner-img {
61 | height: auto;
62 | width: 300px;
63 | }
64 | }
65 | @media screen and (max-width: 600px) {
66 | .seller-register-banner-img {
67 | height: auto;
68 | width: 300px;
69 | }
70 | .seller-register-banner h2 {
71 | font-size: 2em;
72 | }
73 | }
74 | @media screen and (max-width: 400px) {
75 | .seller-register-banner-img {
76 | height: auto;
77 | width: 150px;
78 | }
79 | .seller-register-banner h2 {
80 | font-size: 16px;
81 | }
82 | .seller-register-banner span {
83 | font-size: 9px;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/AdminPanel/Book/BookVerification/AdminBookDelete.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useContext } from "react";
2 | import { AdminContext } from "../../../../context/adminContext";
3 |
4 | // API
5 | import axios from "../../../../api/axios";
6 |
7 | // MUI Components
8 | import { IconButton, CircularProgress } from "@mui/material";
9 |
10 | // icons
11 | import DeleteIcon from "@mui/icons-material/Delete";
12 |
13 | const AdminBookDelete = ({ bookId }) => {
14 | // Admin Context
15 | const [admin, setAdmin] = useContext(AdminContext);
16 |
17 | // Loading States
18 | const [deleteLoad, setDeleteLoad] = useState(false);
19 |
20 | // Deleting Books
21 | const handelDeleteBook = () => {
22 | setDeleteLoad(true);
23 | axios
24 | .delete("/admin-deleteBook", {
25 | data: {
26 | bookId: bookId,
27 | message: "Book is not appropriate and have many unavoidable errors",
28 | },
29 | })
30 | .then((response) => {
31 | console.log(response.data);
32 | setDeleteLoad(false);
33 | setAdmin({
34 | ...admin,
35 | bookVerification: {
36 | ...admin.bookVerification,
37 | data: admin.bookVerification.data.filter(
38 | (book) => book._id !== bookId
39 | ),
40 | },
41 | });
42 | localStorage.setItem(
43 | "bookshlf_admin",
44 | JSON.stringify({
45 | ...admin,
46 | bookVerification: {
47 | ...admin.bookVerification,
48 | data: admin.bookVerification.data.filter(
49 | (book) => book._id !== bookId
50 | ),
51 | },
52 | })
53 | );
54 | })
55 | .catch((error) => {
56 | setDeleteLoad(false);
57 | console.log(error.response.data);
58 | });
59 | };
60 |
61 | return (
62 |
68 | {deleteLoad ? (
69 |
70 | ) : (
71 |
72 | )}
73 |
74 | );
75 | };
76 |
77 | export default AdminBookDelete;
78 |
--------------------------------------------------------------------------------
/src/components/search/searchbook.js:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | // Mui Components
4 | import { Box, Stack, Typography, Tooltip } from "@mui/material";
5 |
6 | // assets
7 | import BookButton from "../../assets/components/buttons/bookbutton";
8 | import WishlistButton from "../../assets/components/buttons/wishlistbutton";
9 | import CartButton from "../../assets/components/buttons/cartbutton";
10 |
11 | // services
12 | import { trimText } from "../../assets/utils/commons";
13 |
14 | const BookImage = ({ photo, title }) => {
15 | return (
16 |
17 |
18 | 
24 |
25 |
Orders to be made
67 | )}
68 |
69 | );
70 | };
71 | return (
72 |
73 |
74 |
75 | );
76 | };
77 |
78 | export default UserPanel;
79 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
18 |
22 |
23 |
24 |
28 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | Bookshlf
39 |
40 |
44 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/src/components/Checkout/CheckoutOrderReview.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { Stack, Typography, Divider, Chip } from "@mui/material";
3 | import RupeeIcon from "@mui/icons-material/CurrencyRupee";
4 |
5 | const CurrentAddress = ({ address, addressId }) => {
6 | const [currentAddress, setCurrentAddress] = useState(
7 | address.filter((adr) => adr._id === addressId)
8 | );
9 |
10 | useEffect(() => {
11 | setCurrentAddress(address.filter((adr) => adr._id === addressId));
12 | }, [address, addressId]);
13 | return (
14 |
23 |
24 |
25 |
26 | {currentAddress[0]?.address}
27 | {currentAddress[0]?.city}
28 | {currentAddress[0]?.state}
29 | {currentAddress[0]?.zipCode}
30 | {currentAddress[0]?.phoneNo}
31 |
32 |
33 | );
34 | };
35 |
36 | const CheckoutOrderReview = ({ address, addressId, checkout }) => {
37 | return (
38 |
39 | Shipping Address
40 |
41 | Payment Details
42 |
50 | Total Items :
51 |
52 | Order Total :
53 | }
55 | label={checkout.orderTotal}
56 | size="small"
57 | color="info"
58 | sx={{ width: 100 }}
59 | />
60 |
61 |
62 | );
63 | };
64 |
65 | export default CheckoutOrderReview;
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "website",
3 | "version": "2.0.0",
4 | "license": "MIT",
5 | "description": "Bookshlf frontend",
6 | "keywords": [
7 | "react",
8 | "html",
9 | "css",
10 | "javascript",
11 | "mui"
12 | ],
13 | "author": "Mrhb787",
14 | "private": true,
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/Bookshlf-in/Website.git"
18 | },
19 | "main": "app.js",
20 | "dependencies": {
21 | "@emotion/react": "^11.10.8",
22 | "@emotion/styled": "^11.10.8",
23 | "@mui/icons-material": "^5.11.6",
24 | "@mui/lab": "^5.0.0-alpha.131",
25 | "@mui/material": "^5.13.2",
26 | "@mui/x-data-grid": "^6.5.0",
27 | "apexcharts": "^3.36.3",
28 | "axios": "^1.3.5",
29 | "filepond": "^4.30.4",
30 | "react": "^18.2.0",
31 | "react-apexcharts": "^1.4.0",
32 | "react-dom": "^18.2.0",
33 | "react-filepond": "^7.1.1",
34 | "react-helmet-async": "^1.3.0",
35 | "react-router-dom": "^6.11.2",
36 | "web-vitals": "^3.3.1"
37 | },
38 | "scripts": {
39 | "start": "react-scripts start",
40 | "build": "react-scripts build",
41 | "test": "react-scripts test --passWithNoTests",
42 | "eject": "react-scripts eject",
43 | "prettier": "prettier --write ."
44 | },
45 | "eslintConfig": {
46 | "extends": [
47 | "react-app",
48 | "react-app/jest"
49 | ]
50 | },
51 | "browserslist": {
52 | "production": [
53 | ">0.2%",
54 | "not dead",
55 | "not op_mini all"
56 | ],
57 | "development": [
58 | "last 1 chrome version",
59 | "last 1 firefox version",
60 | "last 1 safari version"
61 | ]
62 | },
63 | "devDependencies": {
64 | "@blacklab/react-image-magnify": "^4.1.1",
65 | "@react-hook/resize-observer": "^1.2.6",
66 | "@svgr/plugin-svgo": "^8.0.1",
67 | "@svgr/webpack": "^8.0.1",
68 | "browser-image-compression": "^2.0.2",
69 | "css-select": "^5.1.0",
70 | "detect-it": "^4.0.1",
71 | "email-validator": "^2.0.4",
72 | "filepond-plugin-file-validate-type": "^1.2.6",
73 | "filepond-plugin-image-exif-orientation": "^1.0.11",
74 | "filepond-plugin-image-preview": "^4.6.10",
75 | "nth-check": "^2.1.1",
76 | "prettier": "2.8.8",
77 | "react-error-overlay": "^6.0.11",
78 | "react-otp-input": "^3.0.2",
79 | "react-popper": "^2.3.0",
80 | "react-scripts": "^5.0.1"
81 | },
82 | "overrides": {
83 | "@svgr/webpack": "$@svgr/webpack",
84 | "@svgr/plugin-svgo": "$@svgr/plugin-svgo"
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/assets/components/input/otpfield.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Stack, Typography, Button } from "@mui/material";
3 | import { Alert, CircularProgress } from "@mui/material";
4 | import OtpInput from "react-otp-input";
5 | import Counter from "../../counter";
6 | import { handelSendOtp } from "../../../service/auth/signup";
7 |
8 | const OtpField = ({
9 | otp,
10 | setOtp,
11 | otpLength = 6,
12 | email,
13 | time = 60,
14 | type = "EMAIL_VERIFICATION",
15 | }) => {
16 | const [counter, setCounter] = useState(time);
17 | const [loading, setLoading] = useState(false);
18 | const [alert, setAlert] = useState({
19 | show: false,
20 | type: "success",
21 | msg: "OTP Sent",
22 | });
23 |
24 | const hideAlert = () => {
25 | setTimeout(() => {
26 | setAlert({ show: false, type: "success", msg: "OTP Sent" });
27 | }, 60000);
28 | };
29 |
30 | const sendOtp = async () => {
31 | setLoading(true);
32 | const response = await handelSendOtp(type, { email: email });
33 | if (response.success) {
34 | setAlert({ show: true, type: "success", msg: "OTP Sent" });
35 | setCounter(60);
36 | hideAlert();
37 | } else {
38 | handleOtpSendError(
39 | response.data.errors
40 | ? response.data.errors[0].error
41 | : response.data.error
42 | );
43 | }
44 | setLoading(false);
45 | };
46 |
47 | const handleOtpSendError = (error) => {
48 | setAlert({ show: true, type: "error", msg: error });
49 | };
50 |
51 | return (
52 |
53 | Enter OTP
54 | (
59 |
60 | )}
61 | />
62 | {counter > 0 ? (
63 |
64 | ) : (
65 | }
70 | onClick={sendOtp}
71 | >
72 | Send OTP
73 |
74 | )}
75 | {alert.show && (
76 |
77 | {alert.msg}
78 |
79 | )}
80 |
81 | );
82 | };
83 |
84 | export default OtpField;
85 |
--------------------------------------------------------------------------------
/src/components/AdminPanel/Support/SupportContent.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | // API
4 | import axios from "../../../api/axios";
5 |
6 | // MUI Components
7 | import { Stack, Pagination, Alert } from "@mui/material";
8 | import { CircularProgress } from "@mui/material";
9 | import Message from "./Message";
10 |
11 | const SupportContent = ({ panel, setPanel, page, setPage }) => {
12 | // loading
13 | const [Loading, setLoading] = useState(false);
14 |
15 | // data states
16 | const [totalPages, setTotalPages] = useState(0);
17 | const [noOfMessagesInOnePage, setnoOfMessagesInOnePage] = useState(50);
18 | const [messagesList, setMessagesList] = useState([]);
19 |
20 | // fetch users messages
21 | const fetchMessages = () => {
22 | setLoading(true);
23 | const getURL = "/admin-getMessageList";
24 | let getParams = {
25 | page: page,
26 | noOfMessagesInOnePage: noOfMessagesInOnePage,
27 | };
28 | if (panel > 0) {
29 | getParams = {
30 | ...getParams,
31 | queryType:
32 | panel === 1 ? "GENERAL" : panel === 2 ? "ORDER_HELP" : "FEEDBACK",
33 | };
34 | }
35 |
36 | axios
37 | .get(getURL, {
38 | params: getParams,
39 | })
40 | .then((res) => {
41 | // console.log(res.data);
42 | setMessagesList(res.data.data);
43 | setTotalPages(res.data.totalPages);
44 | setLoading(false);
45 | })
46 | .catch((err) => {
47 | setLoading(false);
48 | console.log(err.response.data);
49 | });
50 | };
51 |
52 | useEffect(() => {
53 | fetchMessages();
54 | }, [panel, page]);
55 |
56 | return (
57 |
58 | setPage(pageNo)}
62 | color="primary"
63 | size="small"
64 | shape="rounded"
65 | />
66 |
70 | {Loading && }
71 | {!Loading && messagesList && messagesList.length ? (
72 | messagesList.map((message) => (
73 |
74 |
75 |
76 | ))
77 | ) : !Loading ? (
78 | No Messages Found
79 | ) : null}
80 |
81 |
82 | );
83 | };
84 |
85 | export default SupportContent;
86 |
--------------------------------------------------------------------------------
/src/components/Order/tracking/trackingstepper.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | import { Box, Typography } from "@mui/material";
4 | import { Step, Stepper, StepLabel, StepContent } from "@mui/material";
5 |
6 | const steps = [
7 | {
8 | id: "Order placed",
9 | label: "Order Placed",
10 | description:
11 | "Order has been placed and is currently pending the customer & seller confirmation",
12 | },
13 | {
14 | id: "Cancelled",
15 | label: "Order Cancelled",
16 | description: "Order has been cancelled",
17 | },
18 | {
19 | id: "Order Confirmed",
20 | label: "Order Confirmed",
21 | description:
22 | "Order is confirmed by customer and is pending from seller for packaging",
23 | },
24 | {
25 | id: "Packed",
26 | label: "Order Packed",
27 | description: "Order has been packed and is ready for shipment",
28 | },
29 | {
30 | id: "Shipped",
31 | label: "Order Shipped",
32 | description: "Shipement details manifested and order is being shipped",
33 | },
34 | {
35 | id: "enroute",
36 | label: "Order En Route",
37 | description: "Order has been shipped and is currently on the way",
38 | },
39 | {
40 | id: "Delivered",
41 | label: "Order Delivered",
42 | description: "Order has been successfully delivered",
43 | },
44 | {
45 | id: "RTO",
46 | label: "RTO",
47 | description:
48 | "Order has been Rejected and is currently being returned to seller",
49 | },
50 | {
51 | id: "Returned",
52 | label: "Returned",
53 | description: "Order has been Returned to seller",
54 | },
55 | ];
56 |
57 | const getActiveSteps = (status = []) => {
58 | return status.map((currentStatus) => {
59 | return steps.find((step) => step.id === currentStatus);
60 | });
61 | };
62 |
63 | const getActiveStep = (activeSteps = []) => {
64 | return activeSteps.length - 1;
65 | };
66 |
67 | const TrackingStepper = ({ status = ["Order placed"] }) => {
68 | const activeSteps = getActiveSteps(status);
69 | const [activeStep] = useState(getActiveStep(activeSteps));
70 |
71 | return (
72 |
73 |
74 | {activeSteps.map((step, index) => (
75 |
76 | {step.label}
77 |
78 |
79 | {step.description}
80 |
81 |
82 |
83 | ))}
84 |
85 |
86 | );
87 | };
88 | export default TrackingStepper;
89 |
--------------------------------------------------------------------------------
/src/components/Book/AddBook.css:
--------------------------------------------------------------------------------
1 | .add-book-form-lf fieldset,
2 | .add-book-form-rt fieldset {
3 | border-radius: 5px;
4 | padding: 12px 15px;
5 | }
6 |
7 | .add-book-form-rt {
8 | margin-top: 10px;
9 | }
10 |
11 | .add-book-form-lf fieldset legend {
12 | font-family: "Roboto", sans-serif;
13 | font-weight: bold;
14 | padding: 0px 5px;
15 | }
16 |
17 | .add-book-form-lf .MuiAlert-root {
18 | font-family: "pt sans";
19 | font-size: 0.65rem;
20 | padding: 0px 6px;
21 | justify-content: center;
22 | align-items: center;
23 | }
24 |
25 | .add-book-form-lf .searchTitleresult {
26 | position: absolute;
27 | left: 36px;
28 | top: 42px;
29 | background-color: rgba(255, 255, 255, 0.95);
30 | z-index: 200;
31 | max-height: 200px;
32 | width: 100%;
33 | max-width: 600px;
34 | overflow-y: auto;
35 | overflow-x: hidden;
36 | box-shadow: 6px 3px 3px rgba(0, 0, 0, 0.2);
37 | border-radius: 5px;
38 | }
39 |
40 | .add-book-form-lf .searchTagresult {
41 | position: absolute;
42 | left: 36px;
43 | top: 42px;
44 | background-color: rgba(255, 255, 255, 0.95);
45 | z-index: 200;
46 | max-height: 200px;
47 | width: 165px;
48 | overflow-y: auto;
49 | overflow-x: hidden;
50 | box-shadow: 6px 3px 3px rgba(0, 0, 0, 0.2);
51 | border-radius: 5px;
52 | }
53 |
54 | .searchTitleresult #result-title {
55 | padding: 6px;
56 | font-size: 12px;
57 | }
58 |
59 | .searchTagresult #result-tag {
60 | padding: 6px;
61 | }
62 |
63 | .add-book-bg .MuiAlert-message {
64 | font-family: "PT sans" !important;
65 | }
66 |
67 | /* ========= Filepond custom css =========== */
68 | .filepond--wrapper {
69 | width: 100% !important;
70 | }
71 |
72 | .filepond--drop-label {
73 | min-height: 4em !important;
74 | background-color: cornflowerblue;
75 | color: whitesmoke;
76 | border-radius: 5px;
77 | }
78 |
79 | .filepond--drop-label {
80 | color: whitesmoke !important;
81 | }
82 |
83 | .filepond--label-action {
84 | background-color: #333;
85 | padding: 6px 10px;
86 | text-decoration: none !important;
87 | border-radius: 5px;
88 | }
89 |
90 | .filepond--list.filepond--list {
91 | top: 10px !important;
92 | }
93 |
94 | @media (min-width: 30em) {
95 | .filepond--item {
96 | width: calc(50% - 0.5em);
97 | }
98 | }
99 |
100 | @media (min-width: 50em) {
101 | .filepond--item {
102 | width: calc(25% - 0.5em);
103 | }
104 | }
105 |
106 | /* ========= ============ =========== */
107 |
108 | @media screen and (max-width: 400px) {
109 |
110 | .add-book-form-lf,
111 | .add-book-form-rt {
112 | padding: 0px;
113 | }
114 | }
--------------------------------------------------------------------------------
/src/components/BookDetails/BookPurchaseAdmin.js:
--------------------------------------------------------------------------------
1 | // hooks
2 | import { useState } from "react";
3 |
4 | // MUI Components
5 | import { Button, Dialog, Stack, Typography } from "@mui/material";
6 | import { TextField, Alert, CircularProgress } from "@mui/material";
7 |
8 | // micro components
9 | import CopyableText from "../MicroComponents/customCopyText";
10 |
11 | // Methods
12 | import {
13 | handleOpen,
14 | handleClose,
15 | adminBookPurchase,
16 | } from "../../service/Book/AdminBookPurchase/purchaseOrder";
17 |
18 | const BookPurchaseAdmin = ({ bookId }) => {
19 | // states
20 | const [open, setOpen] = useState(false);
21 | const [orderId, setOrderId] = useState("");
22 | const [orderLoad, setOrderLoad] = useState(false);
23 | const [error, setError] = useState(false);
24 | const [success, setSuccess] = useState(false);
25 |
26 | // utitility function to call admin purchase
27 | const purchaseBook = (orderId) => {
28 | adminBookPurchase(
29 | orderId,
30 | setOrderId,
31 | setOrderLoad,
32 | bookId,
33 | setSuccess,
34 | setOpen,
35 | setError
36 | );
37 | };
38 |
39 | return (
40 |
41 |
48 |
80 |
{userData.name}
51 |
52 |
53 |
54 | Roles :
55 | {userData.roles.map((role, idx) => (
56 |
63 | ))}
64 |
65 |
66 |
67 | ID :
68 |
74 |
75 |
76 |
77 | Last Updated :
78 | {userData.updatedAt.substr(0, 10)}
79 |
80 |
81 |
82 | Joined :
83 | {userData.createdAt.substr(0, 10)}
84 |
85 |
86 |
87 | );
88 | };
89 | export default UserProfile;
90 |
--------------------------------------------------------------------------------
/src/components/AdminPanel/Order/Orders.js:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 | import { AdminContext } from "../../../context/adminContext";
3 |
4 | // custom Styling
5 | import "./Order.css";
6 |
7 | // MUI Components
8 | import { AppBar, Toolbar } from "@mui/material";
9 | import { Stack, Typography } from "@mui/material";
10 |
11 | // custom Components
12 | import AdminOrderList from "./AdminOrderList";
13 | import AdminFindOrder from "./AdminFindOrder";
14 | import AdminPlaceOrder from "./AdminPlaceOrder";
15 | const BookNavButton = ({ panel, setPanel, btnTxt, value, setAdmin, admin }) => {
16 | const handleClick = () => {
17 | setPanel(value);
18 | setAdmin({
19 | ...admin,
20 | order: {
21 | ...admin.order,
22 | panel: value,
23 | },
24 | });
25 | localStorage.setItem(
26 | "bookshlf_admin",
27 | JSON.stringify({
28 | ...admin,
29 | order: {
30 | ...admin.order,
31 | panel: value,
32 | },
33 | })
34 | );
35 | };
36 | return (
37 |
45 |
46 | {btnTxt}
47 |
48 |
49 | );
50 | };
51 |
52 | const BookNavBar = ({ panel, setPanel, setAdmin, admin }) => {
53 | return (
54 |
55 |
56 |
64 |
72 |
80 |
81 |
82 | );
83 | };
84 |
85 | const AdminBook = () => {
86 | // admin Context
87 | const [admin, setAdmin] = useContext(AdminContext);
88 | const [panel, setPanel] = useState(admin.order?.panel);
89 |
90 | return (
91 |
92 |
98 | {panel === 0 ? (
99 |
100 | ) : panel === 1 ? (
101 |
102 | ) : (
103 |
104 | )}
105 |
106 | );
107 | };
108 |
109 | export default AdminBook;
110 |
--------------------------------------------------------------------------------
/src/components/search/search.css:
--------------------------------------------------------------------------------
1 | .search-container {
2 | padding: 0px 100px;
3 | flex-grow: 1;
4 | width: 100%;
5 | }
6 |
7 | .search-filter {
8 | padding: 5px 0px;
9 | margin-bottom: 8px;
10 | }
11 |
12 | .search-filter .MuiInputLabel-root {
13 | font-family: "DM Sans", sans-serif !important;
14 | }
15 |
16 | .search-filter .MuiInputLabel-root.Mui-focused {
17 | color: #F4A946
18 | }
19 |
20 | .search-filter .MuiOutlinedInput-notchedOutline {
21 | border-color: #F4A946 !important;
22 | }
23 |
24 | .search-filter .MuiFormControl-root {
25 | max-width: 450px;
26 | }
27 |
28 | .search-filter .MuiOutlinedInput-root {
29 | border-radius: 15px;
30 | font-family: "DM Sans", sans-serif !important;
31 | border-color: #F4A946;
32 | }
33 |
34 | .search-book {
35 | width: 100%;
36 | height: 422px;
37 | background: #FDFDFD;
38 | box-shadow: 0px 4px 28px -2px rgba(0, 0, 0, 0.1);
39 | border-radius: 12px;
40 | padding: 8px;
41 | display: flex;
42 | align-items: center;
43 | flex-direction: column;
44 | gap: 8px;
45 | cursor: pointer;
46 | color: rgba(0, 0, 0);
47 | }
48 |
49 | .search-book-img-container {
50 | width: 100%;
51 | }
52 |
53 | .search-book-img {
54 | border-radius: 12px;
55 | width: 100%;
56 | height: 264px;
57 | object-fit: cover;
58 | }
59 |
60 | .search-book-title {
61 | min-height: 48px;
62 | }
63 |
64 | .search-book-cart-button.MuiButton-root {
65 | height: 30px;
66 | border-color: #F4A946;
67 | border-radius: 8px;
68 | color: #F4A946;
69 | }
70 |
71 | .search-book-cart-button.MuiButton-root:hover {
72 | border-color: rgb(244, 169, 70);
73 | background-color: rgb(244, 169, 70, 0.1);
74 | border-radius: 8px;
75 | color: #F4A946;
76 | }
77 |
78 | @media screen and (max-width:1200px) {
79 | .search-book {
80 | width: 100%;
81 | height: 380px;
82 | padding: 8px;
83 | gap: 8px;
84 | }
85 |
86 | .search-book-img {
87 | width: 100%;
88 | height: 220px;
89 | }
90 |
91 | .search-book-title.MuiTypography-root {
92 | font-size: 14px;
93 | min-height: 48px;
94 | }
95 | }
96 |
97 | @media screen and (max-width:900px) {
98 | .search-container {
99 | padding: 0px 24px;
100 | }
101 | }
102 |
103 | @media screen and (max-width:400px) {
104 | .search-container {
105 | padding: 0px;
106 | }
107 |
108 | .search-book {
109 | width: 100%;
110 | height: 100%;
111 | min-height: 320px;
112 | padding: 8px;
113 | }
114 |
115 | .search-book-img {
116 | width: 100%;
117 | height: 220px;
118 | }
119 |
120 | .searchbook-pricetag.MuiTypography-root {
121 | font-size: 14px;
122 | }
123 |
124 | .search-book-title.MuiTypography-root {
125 | font-size: 12px;
126 | min-height: 0;
127 | }
128 |
129 | .search-book-cart-button.MuiButton-root {
130 | height: 24px;
131 | }
132 | }
--------------------------------------------------------------------------------
/src/components/AdminPanel/Book/BookVerification/AdminBookApprove.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useContext } from "react";
2 | import { AdminContext } from "../../../../context/adminContext";
3 |
4 | // API
5 | import axios from "../../../../api/axios";
6 |
7 | // MUI Components
8 | import { Button, CircularProgress } from "@mui/material";
9 | import { Snackbar, Alert } from "@mui/material";
10 |
11 | // icons
12 | import CheckIcon from "@mui/icons-material/CheckCircle";
13 |
14 | const AdminBookApprove = ({ bookId }) => {
15 | // Admin Context
16 | const [admin, setAdmin] = useContext(AdminContext);
17 |
18 | // Loading States
19 | const [approveLoad, setApproveLoad] = useState(false);
20 | const [open, setOpen] = useState(false);
21 | const [approved, setApproved] = useState(false);
22 |
23 | // approving books
24 | const handleApproveBook = () => {
25 | setApproveLoad(true);
26 | axios
27 | .post("/admin-approveBook", {
28 | bookId: bookId,
29 | })
30 | .then((response) => {
31 | setApproveLoad(false);
32 | setOpen(true);
33 | setApproved(true);
34 | setAdmin({
35 | ...admin,
36 | bookVerification: {
37 | ...admin.bookVerification,
38 | data: admin.bookVerification.data.filter(
39 | (book) => book._id !== bookId
40 | ),
41 | },
42 | });
43 | localStorage.setItem(
44 | "bookshlf_admin",
45 | JSON.stringify({
46 | ...admin,
47 | bookVerification: {
48 | ...admin.bookVerification,
49 | data: admin.bookVerification.data.filter(
50 | (book) => book._id !== bookId
51 | ),
52 | },
53 | })
54 | );
55 | })
56 | .catch((error) => {
57 | setApproveLoad(false);
58 | setOpen(true);
59 | setApproved(false);
60 | console.log(error.response.data);
61 | });
62 | };
63 |
64 | const handleClose = (e, reason) => {
65 | if (reason === "clickaway") {
66 | return;
67 | }
68 | setOpen(false);
69 | };
70 |
71 | return (
72 |
73 |
83 | ) : (
84 |
85 | )
86 | }
87 | >
88 | Approve Book
89 |
90 |
91 | setOpen(false)}
93 | severity={approved ? "success" : "error"}
94 | sx={{ width: "100%", fontSize: "12px" }}
95 | variant="filled"
96 | >
97 | {approved ? "Book approved successfully" : "Some error occured"}
98 |
99 |
100 |
37 | {process.env.REACT_APP_NODE_ENV === "development" ? : null}
38 | {!location.pathname.startsWith("/admin") && }
39 |
40 | } />
41 | } />
42 | } />
43 | } />
44 | } />
45 | } />
46 | } />
47 | } />
48 | } />
49 | } />
50 | } />
51 | } />
52 | } />
53 | } />
54 | } />
55 | } />
56 | } />
57 | }
60 | />
61 | }
64 | />
65 | } status={404} />
66 |
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default App;
74 |
--------------------------------------------------------------------------------
/src/components/home/Categories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import "./Categories.css";
4 | // Components
5 | import { Stack, Avatar, Typography } from "@mui/material";
6 | const CategoryItem = (props) => {
7 | return (
8 |
9 |
23 |
24 | {props.label}
25 |
26 |
48 | Shop Now
49 |
50 |
51 | );
52 | };
53 | const Categories = () => {
54 | return (
55 |
56 |
57 |
62 | Featured Categories
63 |
64 |
65 |
66 |
72 |
77 |
82 |
87 |
88 |
94 |
99 |
104 |
109 |
110 |
111 |
112 | );
113 | };
114 | export default Categories;
115 |
--------------------------------------------------------------------------------
/src/components/auth/signup/verify.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useEffect } from "react";
2 | import { useNavigate, useParams } from "react-router-dom";
3 | import * as EmailValidator from "email-validator";
4 |
5 | // Components
6 | import { Stack, Typography, Alert } from "@mui/material";
7 |
8 | import Container from "../../../assets/components/container";
9 | import Textfield from "../../../assets/components/input/textfield";
10 | import LoadingButton from "../../../assets/components/buttons/loadingbutton";
11 | import Link from "../../../assets/components/links/link";
12 | import OtpField from "../../../assets/components/input/otpfield";
13 |
14 | // services
15 | import { handleVerify } from "../../../service/auth/signup";
16 |
17 | const Verify = () => {
18 | const navigate = useNavigate();
19 | const params = useParams();
20 | const [Otp, setOtp] = useState("");
21 | const [loading, setLoading] = useState(false);
22 | const [alert, setAlert] = useState({
23 | show: false,
24 | type: "success",
25 | msg: "OTP Sent",
26 | });
27 |
28 | const hideAlert = () => {
29 | setTimeout(() => {
30 | setAlert({ show: false, type: "success", msg: "OTP Sent" });
31 | }, 60000);
32 | };
33 |
34 | useEffect(() => {
35 | if (
36 | params.email === undefined ||
37 | params.email === "" ||
38 | !EmailValidator.validate(params.email)
39 | )
40 | navigate("/auth/signup");
41 | }, []);
42 |
43 | const handleVerifyEmail = async () => {
44 | setLoading(true);
45 | const response = await handleVerify({ email: params.email, otp: Otp });
46 | if (response.success) {
47 | setAlert({
48 | show: true,
49 | type: "success",
50 | msg: "Email Verified Successfully!",
51 | });
52 | setTimeout(() => {
53 | navigate(`/auth/login/${params.email}`);
54 | }, 3000);
55 | } else handleVerifyEmailError(response.data.errors);
56 | setLoading(false);
57 | };
58 |
59 | const handleVerifyEmailError = (errors) => {
60 | setAlert({ show: true, type: "error", msg: errors[0].error });
61 | hideAlert();
62 | };
63 |
64 | return (
65 |
66 |
67 | Account Verification
68 |
69 |
70 |
71 |
79 |
80 | Didn't Recieve OTP ? Check You Mail Spam!
81 |
82 |
83 |
89 | Verify
90 |
91 | {alert.show && {alert.msg}}
92 |
93 |
98 |
99 |
100 |
101 |
102 |
103 | );
104 | };
105 | export default Verify;
106 |
--------------------------------------------------------------------------------
/src/components/navbar/navbarsearch.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useCallback } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { debounce } from "../../api/debounce";
4 |
5 | // Components
6 | import { InputBase, MenuItem, ClickAwayListener } from "@mui/material";
7 | import { LinearProgress, Stack } from "@mui/material";
8 |
9 | // Icons
10 | import SearchIcon from "@mui/icons-material/Search";
11 |
12 | // Service
13 | import { BookSearchTitle } from "../../service/search/booksearch";
14 | import { trimText } from "../../assets/utils/commons";
15 |
16 | const NavProgress = () => {
17 | return (
18 |
19 |
20 |
21 | );
22 | };
23 |
24 | const NavIcon = ({ navigate, search }) => {
25 | return (
26 | navigate(`/search/${search}`)}
29 | >
30 |
31 |
32 | );
33 | };
34 |
35 | const Searchbar = () => {
36 | const navigate = useNavigate();
37 |
38 | // functionality states
39 | const [searchFieldChanges, setsearchFieldChanges] = useState(false);
40 | const [openTitleMenu, setOpenTitleMenu] = useState(false);
41 |
42 | // Data States
43 | const [Search, setSearch] = useState("");
44 | const [resultTitles, setresultTitles] = useState([]);
45 |
46 | // Search on Enter
47 | const handleKeyPress = (event) => {
48 | if (event.key === "Enter") {
49 | event.preventDefault();
50 | setOpenTitleMenu(false);
51 | navigate(`/search/${Search === "" ? "tag:ALL" : Search}`);
52 | }
53 | };
54 |
55 | // book title search on input
56 | const handelBookTitleSearch = async (title) => {
57 | const response = await BookSearchTitle(title);
58 | if (response.success) {
59 | setresultTitles(response.data);
60 | setsearchFieldChanges(false);
61 | }
62 | };
63 |
64 | const DebounceSearch = useCallback(debounce(handelBookTitleSearch), []);
65 |
66 | // Searching Title
67 | const handelTitleAdd = (title) => {
68 | setOpenTitleMenu(false);
69 | setSearch(title);
70 | navigate(`/search/${title}`);
71 | };
72 |
73 | // Handle Change
74 | const handleChange = (e) => {
75 | setsearchFieldChanges(true);
76 | setSearch(e.target.value);
77 | setOpenTitleMenu(true);
78 | DebounceSearch(e.target.value);
79 | };
80 |
81 | return (
82 |
83 | {searchFieldChanges && }
84 |
91 |
92 | setOpenTitleMenu(false)}>
93 | {openTitleMenu ? (
94 |
95 | {resultTitles.map((book, idx) => (
96 |
105 | ))}
106 |
107 | ) : (
108 | <>
109 | )}
110 |
111 |
112 | );
113 | };
114 | export default Searchbar;
115 |
--------------------------------------------------------------------------------
/src/components/Checkout/CheckoutOrderPlace.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { Stack, Divider, Chip, Button, CircularProgress } from "@mui/material";
4 | import { Alert, Typography, Checkbox, Collapse } from "@mui/material";
5 | import ArrowBackIcon from "@mui/icons-material/ArrowBack";
6 | import LocalShippingIcon from "@mui/icons-material/LocalShipping";
7 | import CheckCircleIcon from "@mui/icons-material/CheckCircle";
8 |
9 | const CheckoutOrderPlace = ({ orderLoad, orderPlaced, handlePlaceOrder }) => {
10 | const navigate = useNavigate();
11 | const [checked, setChecked] = useState(false);
12 |
13 | const handleChange = () => {
14 | setChecked((prev) => !prev);
15 | };
16 |
17 | const handleClick = () => {
18 | handlePlaceOrder();
19 | };
20 | return (
21 | }
24 | sx={{ width: "100%", maxWidth: 600 }}
25 | >
26 |
30 |
31 | {orderPlaced
32 | ? "Order Placed Successfully!"
33 | : "Your Order Ready for Final Confirmation"}
34 |
35 |
36 |
37 | {!orderPlaced && (
38 |
39 |
46 | {!checked && (
47 |
48 |
49 | Please Confirm Here
50 |
51 | )}
52 |
58 |
59 | )}
60 | {!orderPlaced && (
61 |
62 |
63 |
64 | Click on PLACE ORDER to place your order
65 |
66 |
72 | ) : (
73 |
74 | )
75 | }
76 | color="success"
77 | onClick={handleClick}
78 | >
79 | {orderLoad ? "Placing Order..." : "Place Order"}
80 |
81 |
82 |
83 | )}
84 |
85 |
86 |
87 |
95 |
96 |
97 |
98 | );
99 | };
100 |
101 | export default CheckoutOrderPlace;
102 |
--------------------------------------------------------------------------------
/src/components/BookDetails/Booksnaps.js:
--------------------------------------------------------------------------------
1 | import { React, useState } from "react";
2 | import ReactImageMagnify from "@blacklab/react-image-magnify";
3 |
4 | // Components
5 | import Stack from "@mui/material/Stack";
6 | import Avatar from "@mui/material/Avatar";
7 | import YouTubeIcon from "@mui/icons-material/YouTube";
8 |
9 | const Booksnaps = (props) => {
10 | // data States
11 | const [snap, setSnap] = useState(0);
12 | const [showvideo, setShowvideo] = useState(false);
13 |
14 | // changing Snaps
15 | const handelClick = (snapNo) => {
16 | setSnap(snapNo);
17 | setShowvideo(false);
18 | };
19 |
20 | return (
21 |
27 |
37 | {props.snaps
38 | ? props.snaps.length
39 | ? props.snaps.map((snap, index) => (
40 | handelClick(index)}
45 | className="book-snapshots"
46 | variant="rounded"
47 | />
48 | ))
49 | : null
50 | : null}
51 | {props.video.length ? (
52 | setShowvideo((prev) => !prev)}
57 | >
58 |
59 |
60 | ) : (
61 | <>
62 | )}
63 |
64 |
65 | {!showvideo ? (
66 |
91 | ) : null}
92 | {showvideo ? (
93 |
102 | ) : null}
103 |
104 |
105 | );
106 | };
107 | export default Booksnaps;
108 |
--------------------------------------------------------------------------------
/src/assets/components/buttons/cartbutton.js:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 | import { UserContext } from "../../../context/userContext";
3 |
4 | import {
5 | Tooltip,
6 | Button,
7 | Snackbar,
8 | Alert,
9 | CircularProgress,
10 | } from "@mui/material";
11 |
12 | import AddCartIcon from "@mui/icons-material/AddShoppingCart";
13 | import FilledCartIcon from "@mui/icons-material/ShoppingCart";
14 |
15 | import { addCart, deleteCart } from "../../../api/endpoints";
16 | import { DeleteRequest } from "../../../api/requests/deleteAPI";
17 | import { PostRequest } from "../../../api/requests/postAPI";
18 |
19 | const CartButton = ({ book }) => {
20 | const [user, setUser] = useContext(UserContext);
21 | const [loading, setLoading] = useState(false);
22 | const [cart, setCart] = useState(book.cart);
23 | const [alert, setAlert] = useState({
24 | type: "success",
25 | show: false,
26 | msg: "",
27 | });
28 |
29 | const isLoggedIn = () => {
30 | return Boolean(user);
31 | };
32 |
33 | const addToCart = async () => {
34 | const response = await PostRequest(addCart, { bookId: book._id });
35 | if (response.success) {
36 | setUser({ ...user, cartitems: user.cartitems + 1 });
37 | showAlert("success", "Book added to cart");
38 | book.cart = true;
39 | setCart(true);
40 | } else showAlert("error", response.data.error);
41 | setLoading(false);
42 | };
43 |
44 | const deleteFromCart = async () => {
45 | const response = await DeleteRequest(deleteCart, {
46 | bookId: book._id,
47 | });
48 | if (response.success) {
49 | setUser({ ...user, cartitems: user.cartitems - 1 });
50 | showAlert("success", "Book removed from cart");
51 | book.cart = false;
52 | setCart(false);
53 | } else showAlert("error", response.data.error);
54 | setLoading(false);
55 | };
56 |
57 | const showAlert = (type, msg) => {
58 | setAlert({
59 | show: true,
60 | type: type,
61 | msg: msg,
62 | });
63 | setTimeout(() => {
64 | setAlert((prev) => {
65 | return { ...prev, show: false };
66 | });
67 | }, 5000);
68 | };
69 |
70 | const handleClose = (event, reason) => {
71 | if (reason === "clickaway") {
72 | return;
73 | }
74 | setAlert((prev) => {
75 | return { ...prev, show: false };
76 | });
77 | };
78 |
79 | const handleCart = async (e) => {
80 | setLoading(true);
81 | e.stopPropagation();
82 | e.preventDefault();
83 | if (isLoggedIn()) {
84 | if (!book.cart) addToCart();
85 | else deleteFromCart();
86 | } else {
87 | showAlert("error", "please login to add item to cart");
88 | setLoading(false);
89 | }
90 | };
91 |
92 | return (
93 | <>
94 |
95 |
109 |
110 |
111 |
116 | {alert.msg}
117 |
118 |
119 |
120 | );
121 | };
122 |
123 | export default CartButton;
124 |
--------------------------------------------------------------------------------
/src/components/home/home.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | height: calc(100vh - 120px);
3 | background-color: #28282865;
4 | position: relative;
5 | }
6 | .slider__imageContainer {
7 | width: 100%;
8 | height: 100%;
9 | overflow-x: hidden;
10 | }
11 | .slider__image {
12 | background-size: cover;
13 | background-position: center;
14 | width: 100%;
15 | height: 100%;
16 | }
17 |
18 | .slider .MuiSvgIcon-root {
19 | color: white !important;
20 | height: 15px;
21 | width: 15px;
22 | }
23 | .slider .MuiIconButton-root {
24 | padding: 5px;
25 | }
26 |
27 | .slider__bulletContainer {
28 | width: max-content;
29 | position: absolute;
30 | bottom: 0;
31 | left: 0;
32 | right: 0;
33 | margin: auto;
34 | }
35 | .slider__bulletContainer:hover {
36 | background-color: rgba(0, 0, 0, 0.4);
37 | }
38 | .slider__title {
39 | position: absolute;
40 | top: 10px;
41 | text-align: center;
42 | width: 100%;
43 | font-family: "Staatliches";
44 | font-size: 6em;
45 | color: rgba(255, 255, 255, 0.96);
46 | }
47 | .slider__body {
48 | text-align: center;
49 | width: 100%;
50 | font-family: "Staatliches";
51 | font-size: 0.33em;
52 | letter-spacing: 1px;
53 | color: rgba(255, 255, 255, 0.96);
54 | }
55 | .slider__btn {
56 | position: absolute;
57 | top: 50%;
58 | left: 50%;
59 | transform: translate(-50%, -50%);
60 | color: rgba(255, 255, 255, 0.96);
61 | }
62 | .slider__btn a {
63 | width: 250px;
64 | font-family: "Staatliches" !important;
65 | font-size: 2em;
66 | letter-spacing: 1px;
67 | background-color: orangered;
68 | }
69 |
70 | .slider__rightNavigation,
71 | .slider__leftNavigation {
72 | position: absolute;
73 | top: 50%;
74 | transform: translateY(-50%);
75 | background-color: rgba(0, 0, 0, 0.3);
76 | border-radius: 50%;
77 | }
78 | .slider__leftNavigation:hover,
79 | .slider__rightNavigation:hover {
80 | background-color: rgba(0, 0, 0, 0.4);
81 | cursor: pointer;
82 | }
83 | .slider__leftNavigation {
84 | left: 10px;
85 | }
86 | .slider__rightNavigation {
87 | right: 10px;
88 | }
89 |
90 | @media screen and (max-width: 600px) {
91 | .slider {
92 | height: 40vh;
93 | }
94 | .slider__title {
95 | top: 10px;
96 | font-size: 2em;
97 | }
98 | .slider__body {
99 | font-size: 0.5em;
100 | }
101 | .slider__btn {
102 | bottom: 30px;
103 | }
104 | }
105 |
106 | .error-404 {
107 | background-color: #313942;
108 | font-family: "Staatliches", sans-serif;
109 | letter-spacing: 2px;
110 | }
111 |
112 | .error-404 {
113 | align-items: center;
114 | display: flex;
115 | flex-direction: column;
116 | height: 100vh;
117 | justify-content: center;
118 | text-align: center;
119 | }
120 |
121 | .error-404 h1 {
122 | color: #e7ebf2;
123 | font-size: 12.5rem;
124 | letter-spacing: 0.1em;
125 | margin: 0.025em 0;
126 | text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.25);
127 | white-space: nowrap;
128 | }
129 | @media (max-width: 30rem) {
130 | .error-404 h1 {
131 | font-size: 8.5rem;
132 | }
133 | .error-404 img {
134 | height: 150px;
135 | }
136 | }
137 | .error-404 h1 > span {
138 | -webkit-animation: spooky 2s alternate infinite linear;
139 | animation: spooky 2s alternate infinite linear;
140 | color: #528cce;
141 | display: inline-block;
142 | }
143 |
144 | .error-404 h2 {
145 | color: #e7ebf2;
146 | margin-bottom: 0.4em;
147 | }
148 |
149 | .error-404 p {
150 | color: #ccc;
151 | margin-top: 0;
152 | }
153 |
154 | @-webkit-keyframes spooky {
155 | from {
156 | transform: translatey(0.15em) scaley(0.95);
157 | }
158 | to {
159 | transform: translatey(-0.15em);
160 | }
161 | }
162 |
163 | @keyframes spooky {
164 | from {
165 | transform: translatey(0.15em) scaley(0.95);
166 | }
167 | to {
168 | transform: translatey(-0.15em);
169 | }
170 | }
171 |
--------------------------------------------------------------------------------
/src/components/AddressBook/AddressList.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useEffect } from "react";
2 | import axios from "../../api/axios";
3 |
4 | // Mui Components
5 | import { IconButton, Stack, Typography } from "@mui/material";
6 | import { CircularProgress } from "@mui/material";
7 |
8 | // Mui Icons
9 | import DeleteIcon from "@mui/icons-material/Delete";
10 | import HomeIcon from "@mui/icons-material/HomeRounded";
11 | import OfficeIcon from "@mui/icons-material/ApartmentRounded";
12 | import TempIcon from "@mui/icons-material/NotListedLocationRounded";
13 |
14 | // Address List Components
15 | import AddressDetails from "./AddressDetails";
16 |
17 | const AddressList = (props) => {
18 | const [adrList, setAdrList] = useState(props.address);
19 |
20 | useEffect(() => {
21 | setAdrList(props.address);
22 | }, [props.address]);
23 |
24 | const Address = (props) => {
25 | return (
26 |
40 |
45 | {props.value.label === "Home Address" ? (
46 |
47 | ) : props.value.label === "Office Address" ? (
48 |
49 | ) : (
50 |
51 | )}
52 |
53 |
54 |
55 | {props.value.label}
56 |
57 |
58 | {props.value.address.length > 50
59 | ? props.value.address.substr(0, 50) + "..."
60 | : props.value.address}
61 |
62 |
63 |
64 |
73 |
74 |
75 |
76 | );
77 | };
78 |
79 | // Component for deleting Addresses
80 | const DeleteAddress = (props) => {
81 | const [deleteLoad, setdeleteLoad] = useState(false);
82 | const addressId = props.addressId;
83 |
84 | const handelDeleteAddress = () => {
85 | setdeleteLoad(true);
86 | axios
87 | .delete("/deleteAddress", {
88 | data: { addressId: addressId },
89 | })
90 | .then((response) => {
91 | setAdrList(adrList.filter((address) => address._id !== addressId));
92 | setdeleteLoad(false);
93 | })
94 | .catch((error) => {
95 | setdeleteLoad(false);
96 | });
97 | };
98 |
99 | return (
100 |
101 | {deleteLoad ? (
102 |
103 | ) : (
104 |
105 | )}
106 |
107 | );
108 | };
109 |
110 | return (
111 |
112 | {adrList?.length &&
113 | adrList.map((address) => )}
114 |
115 | );
116 | };
117 |
118 | export default AddressList;
119 |
--------------------------------------------------------------------------------
/src/assets/components/buttons/wishlistbutton.js:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 | import { UserContext } from "../../../context/userContext";
3 |
4 | import {
5 | Tooltip,
6 | IconButton,
7 | Snackbar,
8 | Alert,
9 | CircularProgress,
10 | } from "@mui/material";
11 |
12 | // Icons
13 | import FilledWishlistIcon from "@mui/icons-material/Favorite";
14 | import WishlistIcon from "@mui/icons-material/FavoriteBorder";
15 |
16 | import { addWishlist, deleteWishlist } from "../../../api/endpoints";
17 | import { DeleteRequest } from "../../../api/requests/deleteAPI";
18 | import { PostRequest } from "../../../api/requests/postAPI";
19 |
20 | const WishlistButton = ({ book, size, fontSize }) => {
21 | const [user, setUser] = useContext(UserContext);
22 | const [loading, setLoading] = useState(false);
23 | const [wishlist, setWishlist] = useState(book.wishlist);
24 | const [alert, setAlert] = useState({
25 | type: "success",
26 | show: false,
27 | msg: "",
28 | });
29 |
30 | const isLoggedIn = () => {
31 | return Boolean(user);
32 | };
33 |
34 | const addToWishlist = async () => {
35 | const response = await PostRequest(addWishlist, { bookId: book._id });
36 | if (response.success) {
37 | setUser({ ...user, wishlist: user.wishlist + 1 });
38 | showAlert("success", "Book added to wishlist");
39 | book.wishlist = true;
40 | setWishlist(true);
41 | } else showAlert("error", response.data.error);
42 | setLoading(false);
43 | };
44 |
45 | const deleteFromWishlist = async () => {
46 | const response = await DeleteRequest(deleteWishlist, { bookId: book._id });
47 | if (response.success) {
48 | setUser({ ...user, wishlist: user.wishlist - 1 });
49 | showAlert("success", "Book removed from wishlist");
50 | book.wishlist = false;
51 | setWishlist(false);
52 | } else showAlert("error", response.data.error);
53 | setLoading(false);
54 | };
55 |
56 | const showAlert = (type, msg) => {
57 | setAlert({
58 | show: true,
59 | type: type,
60 | msg: msg,
61 | });
62 | setTimeout(() => {
63 | setAlert((prev) => {
64 | return { ...prev, show: false };
65 | });
66 | }, 5000);
67 | };
68 |
69 | const handleClose = (event, reason) => {
70 | if (reason === "clickaway") {
71 | return;
72 | }
73 | setAlert((prev) => {
74 | return { ...prev, show: false };
75 | });
76 | };
77 |
78 | const handelWishlist = async (e) => {
79 | e.stopPropagation();
80 | e.preventDefault();
81 | setLoading(true);
82 | if (isLoggedIn()) {
83 | if (!book.wishlist) addToWishlist();
84 | else deleteFromWishlist();
85 | } else {
86 | showAlert("error", "please login to add item to wishlist");
87 | setLoading(false);
88 | }
89 | };
90 |
91 | return (
92 | <>
93 |
94 |
95 | {loading ? (
96 |
97 | ) : wishlist ? (
98 |
103 | ) : (
104 |
105 | )}
106 |
107 |
108 |
109 |
114 | {alert.msg}
115 |
116 |
117 |
118 | );
119 | };
120 |
121 | export default WishlistButton;
122 |
--------------------------------------------------------------------------------
/src/components/Checkout/CheckoutStepper.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import { styled } from "@mui/material/styles";
3 | import { Typography } from "@mui/material";
4 |
5 | import { Stepper, Step, StepLabel, StepConnector } from "@mui/material";
6 | import { stepConnectorClasses } from "@mui/material/StepConnector";
7 |
8 | import PaymentIcon from "@mui/icons-material/Payment";
9 | import ReviewIcon from "@mui/icons-material/Grading";
10 | import ShippingIcon from "@mui/icons-material/LocalShipping";
11 | import CheckIcon from "@mui/icons-material/CheckCircle";
12 |
13 | const CheckoutStepper = ({ panel }) => {
14 | // Custom Stepper
15 | const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
16 | [`&.${stepConnectorClasses.alternativeLabel}`]: {
17 | top: 17,
18 | },
19 | [`&.${stepConnectorClasses.active}`]: {
20 | [`& .${stepConnectorClasses.line}`]: {
21 | backgroundImage:
22 | "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)",
23 | },
24 | },
25 | [`&.${stepConnectorClasses.completed}`]: {
26 | [`& .${stepConnectorClasses.line}`]: {
27 | backgroundImage:
28 | "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)",
29 | },
30 | },
31 | [`& .${stepConnectorClasses.line}`]: {
32 | height: 3,
33 | border: 0,
34 | backgroundColor:
35 | theme.palette.mode === "dark" ? theme.palette.grey[800] : "#eaeaf0",
36 | borderRadius: 1,
37 | },
38 | }));
39 |
40 | const ColorlibStepIconRoot = styled("div")(({ theme, ownerState }) => ({
41 | backgroundColor:
42 | theme.palette.mode === "dark" ? theme.palette.grey[700] : "#ccc",
43 | zIndex: 1,
44 | color: "#fff",
45 | width: 35,
46 | height: 35,
47 | display: "flex",
48 | borderRadius: "50%",
49 | justifyContent: "center",
50 | alignItems: "center",
51 | ...(ownerState.active && {
52 | backgroundImage:
53 | "linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)",
54 | boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)",
55 | }),
56 | ...(ownerState.completed && {
57 | backgroundImage:
58 | "linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)",
59 | }),
60 | }));
61 |
62 | const ColorlibStepIcon = (props) => {
63 | const { active, completed, className } = props;
64 |
65 | const icons = {
66 | 1: ,
67 | 2: ,
68 | 3: ,
69 | 4: ,
70 | };
71 |
72 | return (
73 |
77 | {icons[String(props.icon)]}
78 |
79 | );
80 | };
81 |
82 | ColorlibStepIcon.propTypes = {
83 | active: PropTypes.bool,
84 | className: PropTypes.string,
85 | completed: PropTypes.bool,
86 | icon: PropTypes.node,
87 | };
88 |
89 | const PanelTitle = [
90 | "Shipping Address",
91 | "Payment Details",
92 | "Review Order",
93 | "Place Order",
94 | ];
95 |
96 | return (
97 | }
102 | >
103 | {PanelTitle.map((label) => (
104 |
105 |
106 | {label}
107 |
108 |
109 | ))}
110 |
111 | );
112 | };
113 |
114 | export default CheckoutStepper;
115 |
--------------------------------------------------------------------------------
/src/components/search/searchfilter.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { useNavigate, useParams } from "react-router-dom";
3 | import { Stack, Typography, Divider } from "@mui/material";
4 | import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
5 |
6 | // Custom Components
7 | import Pagination from "./pagination";
8 |
9 | const FILTERS = [
10 | "sortByPrice=asc",
11 | "sortByPrice=desc",
12 | "sortByDate=desc",
13 | "sortByDate=asc",
14 | ];
15 |
16 | const isPresent = (arr, filter) => {
17 | return arr.includes(filter);
18 | };
19 |
20 | const deleteParam = (filterArray, param) => {
21 | return filterArray.filter((p) => p !== param);
22 | };
23 |
24 | const handleFilters = (filters) => {
25 | if (filters === undefined || filters === "") return ["default"];
26 | return filters.split("&");
27 | };
28 |
29 | const SearchFilter = ({ page, totalPages }) => {
30 | const navigate = useNavigate();
31 | const { query, filters } = useParams();
32 | const [filter, setFilter] = useState(handleFilters(filters));
33 |
34 | const resolveParam = async (param) => {
35 | if (
36 | (isPresent(param, "default") && !isPresent(filter, "default")) ||
37 | param.length === 0
38 | ) {
39 | param = ["default"];
40 | } else if (isPresent(param, "default") && isPresent(filter, "default")) {
41 | param = deleteParam(param, "default");
42 | }
43 |
44 | if (isPresent(param, FILTERS[0]) && isPresent(param, FILTERS[1])) {
45 | // when selecting price filter
46 | if (isPresent(filter, FILTERS[1])) param = deleteParam(param, FILTERS[1]);
47 | else param = deleteParam(param, FILTERS[0]);
48 | }
49 |
50 | if (isPresent(param, FILTERS[2]) && isPresent(param, FILTERS[3])) {
51 | // when selecting date filter
52 | if (isPresent(filter, FILTERS[2])) param = deleteParam(param, FILTERS[2]);
53 | else param = deleteParam(param, FILTERS[3]);
54 | }
55 |
56 | return param;
57 | };
58 |
59 | const handleChange = async (e) => {
60 | let param = e.target.value;
61 | const finalParam = await resolveParam(param);
62 | setFilter(finalParam);
63 | navigate(`/search/${query}/${finalParam.join("&")}`);
64 | };
65 |
66 | useEffect(() => {
67 | if (filters === undefined) navigate(`/search/${query}/default`);
68 | setFilter(handleFilters(filters));
69 | }, [query, filters]);
70 |
71 | return (
72 |
73 |
77 |
78 | Filter
79 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | );
110 | };
111 |
112 | export default SearchFilter;
113 |
--------------------------------------------------------------------------------
/src/assets/components/base.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 15px 24px;
3 | min-height: calc(100vh - 78px);
4 | width: 100%;
5 | background-color: #FDFDFD;
6 | align-items: center;
7 | justify-content: center;
8 | }
9 |
10 | .MuiTypography-root {
11 | font-family: 'DM Sans', sans-serif !important;
12 | }
13 |
14 | .MuiMenuItem-root {
15 | font-family: "DM Sans", sans-serif !important;
16 | }
17 |
18 | .bookshlf-input .MuiOutlinedInput-root {
19 | font-family: 'DM Sans', sans-serif;
20 | border-radius: 16px;
21 | }
22 |
23 | .bookshlf-input .MuiOutlinedInput-notchedOutline {
24 | border: 1px solid #8f8f8f;
25 | }
26 |
27 | .bookshlf-input .Mui-focused .MuiOutlinedInput-notchedOutline {
28 | border: 1px solid #F4A946 !important;
29 | }
30 |
31 | .bookshlf-input .Mui-focused.MuiInputLabel-root {
32 | color: #F4A946 !important;
33 | }
34 |
35 | .bookshlf-btn.MuiButton-root {
36 | font-family: 'DM Sans', sans-serif;
37 | color: #FFFFFF;
38 | background: #F4A946;
39 | border-radius: 57px;
40 | width: 160px;
41 | height: 48px;
42 | text-transform: capitalize;
43 | }
44 |
45 | .bookshlf-btn.MuiButton-root:hover {
46 | font-family: 'DM Sans', sans-serif;
47 | color: #FFFFFF;
48 | background: rgba(244, 169, 70, 0.85);
49 | border-radius: 57px;
50 | width: 160px;
51 | height: 48px;
52 | }
53 |
54 | .bookshlf-btn.MuiButton-root.Mui-disabled {
55 | background: rgba(0, 0, 0, 0.2);
56 | color: #FFFFFF;
57 | }
58 |
59 | .bookshlf-otp-container {
60 | position: relative;
61 | padding: 13px 15px;
62 | border: 1px solid rgba(0, 0, 0, 0.2);
63 | border-radius: 16px;
64 | width: 100%;
65 | justify-content: space-between;
66 | }
67 |
68 | .bookshlf-otp-label {
69 | position: absolute;
70 | font-size: 12px !important;
71 | top: -20px;
72 | }
73 |
74 | .bookshlf-otp-container>div {
75 | align-items: center;
76 | gap: 8px;
77 | }
78 |
79 | input.bookshlf-otp-input {
80 | height: 30px !important;
81 | width: 30px !important;
82 | border-radius: 8px;
83 | outline: none;
84 | border: 1px solid rgba(0, 0, 0, 0.2);
85 | }
86 |
87 | input.bookshlf-otp-input:focus {
88 | border: 2px solid #F4A946;
89 | }
90 |
91 | .otp-send-btn.MuiButton-root {
92 | color: #FFFFFF;
93 | font-family: 'DM Sans', sans-serif;
94 | background-color: #F4A946;
95 | padding: 5px 10px;
96 | border-radius: 16px;
97 | }
98 |
99 | .otp-send-btn.MuiButton-root:hover {
100 | background-color: rgba(244, 169, 70, 0.8);
101 | }
102 |
103 | .otp-send-btn.MuiButton-root.Mui-disabled {
104 | background: rgba(0, 0, 0, 0.2);
105 | color: #FFFFFF;
106 | }
107 |
108 | .otp-send-alert.MuiAlert-root {
109 | position: absolute;
110 | right: 10px;
111 | bottom: -30px;
112 | font-family: 'DM Sans', sans-serif;
113 | font-size: 10px;
114 | padding: 5px 10px;
115 | border-radius: 8px;
116 | }
117 |
118 | .otp-send-alert.MuiAlert-root .MuiAlert-icon {
119 | font-size: 12px;
120 | padding: 0;
121 | }
122 |
123 | .otp-send-alert.MuiAlert-root .MuiAlert-message {
124 | padding: 0;
125 | }
126 |
127 | .search-book-btn.MuiButton-root {
128 | height: 30px;
129 | background: #F4A946;
130 | border-radius: 8px;
131 | color: #000000;
132 | }
133 |
134 | .search-book-btn.MuiButton-root:hover {
135 | background: rgba(244, 169, 70, 0.7);
136 | }
137 |
138 | @media screen and (max-width:600px) {
139 | .container {
140 | padding: 10px 8px;
141 | }
142 |
143 | .bookshlf-otp-container.MuiStack-root {
144 | flex-direction: column;
145 | gap: 8px;
146 | justify-content: center;
147 | align-items: center;
148 | }
149 | }
150 |
151 | @media screen and (max-width:400px) {
152 | .search-book-btn.MuiButton-root {
153 | height: 24px;
154 |
155 | }
156 |
157 | .search-book-cart-button.MuiButton-root {
158 | height: 24px;
159 | }
160 |
161 | .search-book-cart-button.MuiButton-root svg {
162 | height: 16px;
163 | }
164 | }
--------------------------------------------------------------------------------
/src/components/navbar/navbarmenu.js:
--------------------------------------------------------------------------------
1 | import { React, useState, useContext } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { UserContext } from "../../context/userContext";
4 | import { AdminContext } from "../../context/adminContext";
5 |
6 | // Components
7 | import { Tooltip, Divider } from "@mui/material";
8 | import { Stack, IconButton, Menu, MenuItem } from "@mui/material";
9 |
10 | // Icons
11 | import UserIcon from "@mui/icons-material/AccountCircleOutlined";
12 | import AccountIcon from "@mui/icons-material/AccountCircleTwoTone";
13 | import OrderIcon from "@mui/icons-material/LocalShippingTwoTone";
14 | import AdminIcon from "@mui/icons-material/AdminPanelSettingsTwoTone";
15 | import BookIcon from "@mui/icons-material/MenuBookTwoTone";
16 | import SellBookIcon from "@mui/icons-material/ShoppingBag";
17 | import LogoutIcon from "@mui/icons-material/Logout";
18 | import { userRoleCheck } from "../../assets/utils/commons";
19 | import { Logout } from "../../service/auth/logout";
20 |
21 | const NavbarMenu = () => {
22 | const navigate = useNavigate();
23 |
24 | const [user, setUser] = useContext(UserContext);
25 | const [, setAdmin] = useContext(AdminContext);
26 |
27 | const [anchorEl, setAnchorEl] = useState(null);
28 |
29 | const handleClick = (event) => {
30 | setAnchorEl(event.currentTarget);
31 | };
32 |
33 | const handleClose = () => {
34 | setAnchorEl(null);
35 | };
36 |
37 | const handelNavigate = (path) => {
38 | setAnchorEl(null);
39 | navigate(path);
40 | };
41 |
42 | const handelLogout = async () => {
43 | const response = await Logout();
44 | if (response.success) {
45 | setUser(null);
46 | setAdmin(null);
47 | }
48 | };
49 |
50 | // Custom Menu Item
51 | const MenuStack = ({ Icon, label, path }) => {
52 | return (
53 |
65 | );
66 | };
67 |
68 | return (
69 |
70 |
71 |
72 |
73 |
74 |
75 |
125 |
126 | );
127 | };
128 | export default NavbarMenu;
129 |
--------------------------------------------------------------------------------
/src/components/home/Benefits.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // Mui Components
4 | import { Stack, Typography, Avatar } from "@mui/material";
5 |
6 | const Styles = {
7 | Container: {
8 | padding: "36px 10px",
9 | paddingTop: 0,
10 | backgroundColor: "whitsmoke",
11 | },
12 | Heading: {
13 | fontSize: "2.2em",
14 | fontFamily: "Staatliches",
15 | },
16 | Benefit: {
17 | padding: "6px",
18 | height: 100,
19 | width: "100%",
20 | maxWidth: 100,
21 | position: "relative",
22 | borderRadius: "15px",
23 | cursor: "pointer",
24 | },
25 | BenefitLabel: {
26 | fontFamily: "Staatliches",
27 | fontSize: "0.7em",
28 | letterSpacing: "0.08em",
29 | "@media screen and (max-width:600px)": {
30 | fontSize: "0.6em",
31 | },
32 | },
33 | BenefitLogo: {
34 | position: "absolute",
35 | top: 0,
36 | left: 0,
37 | height: "100%",
38 | width: "100%",
39 | "@media screen and (max-width:600px)": {
40 | paddingRight: 0,
41 | paddingBottom: 0,
42 | },
43 | },
44 | BenefitLogoImg: {
45 | height: 40,
46 | width: 40,
47 | marginTop: "-15px",
48 | marginLeft: "-15px",
49 | "@media screen and (max-width:600px)": {
50 | marginTop: "-15px",
51 | marginLeft: "25px",
52 | },
53 | },
54 | };
55 |
56 | const Backgrounds = [
57 | "rgb(229,126,37)",
58 | "rgb(206,172,154)",
59 | "rgb(117,132,242)",
60 | "rgb(232,184,0)",
61 | "rgb(139,155,169)",
62 | "rgb(255,65,85)",
63 | ];
64 | const Colors = ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff"];
65 | const Benefit = (props) => {
66 | return (
67 |
73 |
77 | {props.label}
78 |
79 |
84 |
90 |
91 |
92 | );
93 | };
94 | const Benefits = () => {
95 | return (
96 |
97 |
98 | Benefits
99 |
100 |
104 |
110 |
115 |
120 |
125 |
126 |
132 |
137 |
142 |
147 |
148 |
149 |
150 | );
151 | };
152 | export default Benefits;
153 |
--------------------------------------------------------------------------------
16 |