user should be able to becomme a seller (#81)

atlp-rwanda · Aug 20, 2024 · 910ebf6 · 910ebf6
1 parent ab39a83
commit 910ebf6
Show file tree

Hide file tree

Showing 16 changed files with 483 additions and 52 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="./assets/images/logo.png" type="image/png" />
-    <title>E-Commerce Ninjas FrontEnd</title>
+    <title>E-Commerce Ninjas</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.scss b/src/App.scss
@@ -44,5 +44,5 @@
 @import "./assets//styles/UserProfile.scss";
 @import "./assets/styles/SellerSideProduct.scss";
 @import "./assets/styles/SellerDeleteItem.scss";
-@import "./assets/styles/ServicesPage.scss"
-
+@import "./assets/styles/ServicesPage.scss";
+@import "./assets/styles/Settings.scss";
diff --git a/src/assets/styles/Settings.scss b/src/assets/styles/Settings.scss
@@ -0,0 +1,99 @@
+.settings {
+    border: 1px solid $border-color;
+    width: 100%;
+    height: 100%;
+    background-color: $white-color;
+
+    h2 {
+        margin: 0;
+        padding: 2%;
+        font-size: 2.5rem;
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .menu-bar {
+        display: flex;
+        margin: 0 2.5rem;
+        border-bottom: 1px solid #ddd;
+
+
+        .menu-item {
+            cursor: pointer;
+            font-size: 1.3rem;
+            p{
+                margin-right: 1rem;
+                padding: 1rem;
+                &.active {
+                    background-color: $primary-color-light;
+                    color: $primary-color;
+                    padding: 1rem;
+                    border-bottom: 1px solid $primary-color;
+                    transition: padding .2s ease-in-out;
+                }
+            }
+
+        }
+    }
+
+
+    .section_container {
+        flex-grow: 1;
+        padding: 0 2.5rem;
+        .loading__spinner{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 50rem;
+
+        }
+
+        .section-content {
+            background-color: white;
+            padding: 20px;
+
+            .password_exp{
+                background-color: $border-color;
+                padding: 2rem 5rem;
+                border-radius: .5rem;
+
+                .form-group{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 20px;
+                    label{
+                        font-size: 2.5rem;
+                        font-weight: bold;
+                    }
+                    input{
+                        padding: 10px;
+                        border: 1px solid #ddd;
+                        border-radius: 5px;
+                        font-size: 1.4rem;
+                        width: 30%;
+                    }
+                }
+                .btn{
+                    padding: 10px 20px;
+                    background-color: $primary-color;
+                    color: $white-color;
+                    border: none;
+                    border-radius: 5px;
+                    font-size: 1.6rem;
+                    width: 8rem;
+                    cursor: pointer;
+                    transition: width 0.5s linear;
+
+                    &:hover{
+                        background-color: $primary-color-dark;
+                        width: 10rem;
+                        transition: width 0.5s linear;
+                    }
+                }
+            }
+        }
+    }
+
+}
diff --git a/src/assets/styles/adminDashboard.scss b/src/assets/styles/adminDashboard.scss
@@ -19,9 +19,7 @@
       flex-direction: column;
       height: 100%;
       width: 100%;
-      .dashboard,
-      .users,
-      .logout {
+      .menu__item,.logout {
         display: flex;
         align-items: center;
         padding-left: 1rem;
@@ -214,5 +212,17 @@
 .dropdown-item:hover {
   background-color: #f1f1f1;
 }
-@media only screen and (min-width: 76.8rem) {
+
+.password-expiration-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.password-expiration-input {
+  padding: 8px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
diff --git a/src/components/settings/AccountSettings.tsx b/src/components/settings/AccountSettings.tsx
@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react'
+
+export const AccountSettings = () => {
+  return (
+    <div className='section-content'>
+        <h2>Account Settings</h2>
+    </div>
+  )
+}
diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
@@ -0,0 +1,86 @@
+/* eslint-disable */
+import React, { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../store/store";
+import {
+  fetchPasswordExpiration,
+  updateUserPasswordExpiration,
+} from "../../store/features/admin/adminSlice";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { Bars } from "react-loader-spinner";
+import { LinearProgress } from "@mui/material";
+
+export const GeneralSettings = () => {
+  const dispatch = useAppDispatch();
+  const { users, isLoading, passwordExpiration } = useAppSelector(
+    (state) => state?.admin
+  );
+  const [minutes, setMinutes] = useState(passwordExpiration);
+  const [isDisabled, setIsDisabled] = useState(true);
+  const [isEdit, setIsEdit] = useState(true);
+
+  useEffect(() => {
+    dispatch(fetchPasswordExpiration());
+    setMinutes(passwordExpiration);
+  }, [dispatch, passwordExpiration]);
+
+  const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setMinutes(Number(e.target.value));
+  };
+
+  const handleSavePasswordExpiration = () => {
+    if (minutes) {
+      dispatch(updateUserPasswordExpiration({ minutes }));
+    }
+    setIsDisabled(true);
+    setIsEdit(true);
+  };
+
+  return (
+    <>
+        <div className="section-content">
+        {isLoading && (
+          <div className="table__spinner">
+            <Box sx={{ width: "100%" }}>
+              <LinearProgress
+                sx={{
+                  backgroundColor: "#fff",
+                  "& .MuiLinearProgress-bar": {
+                    backgroundColor: "#ff8a46",
+                  },
+                }}
+              />
+            </Box>
+          </div>
+        )}
+          <div className="password_exp">
+            <div className="form-group">
+              <label htmlFor="password">Password Expiration Time</label>
+              <input
+                type="text"
+                id="password"
+                value={minutes}
+                onChange={handleMinutesChange}
+                disabled={isDisabled}
+                onFocus={() => setIsEdit(false)}
+                placeholder="Enter password expiration period in minutes"
+              />
+            </div>
+            {isEdit ? (
+              <button
+                className="btn"
+                onClick={() => setIsDisabled(!isDisabled)}
+              >
+                Edit
+              </button>
+            ) : (
+              <button className="btn" onClick={handleSavePasswordExpiration}>
+                Save
+              </button>
+            )}
+          </div>
+        </div>
+    </>
+  );
+};
diff --git a/src/components/settings/Menu.tsx b/src/components/settings/Menu.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable */
+import React from 'react';
+
+interface Props {
+  selectedSection: string;
+  onSelectSection: (section: string) => void;
+}
+
+const Menu: React.FC<Props> = ({ selectedSection, onSelectSection }) => {
+  const menuItems = [
+    'General Settings',
+    'Account Settings',
+  ];
+
+  return (
+    <div className="menu-bar">
+      {menuItems.map(item => (
+        <div
+          key={item}
+          className={'menu-item'}
+          onClick={() => onSelectSection(item)}
+        >
+          <p className={`${selectedSection === item ? 'active' : ''}`}>{item}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Menu;
diff --git a/src/components/vertical stepper/VerticalStepper.tsx b/src/components/vertical stepper/VerticalStepper.tsx
@@ -0,0 +1,85 @@
+/* eslint-disable */
+import React, { useState } from 'react';
+import { Box, Stepper, Step, StepLabel, StepContent, Button, Paper, Typography } from '@mui/material';
+
+const steps = [
+  {
+    label: 'Eligibility Requirements',
+    description: 'Ensure you meet all the eligibility criteria to become a seller on our platform.',
+  },
+  {
+    label: 'Account Setup',
+    description: 'Create your seller account by providing your personal and business details.',
+  },
+  {
+    label: 'Seller Fees',
+    description: 'Understand the fees associated with selling on our platform, including listing and transaction fees.',
+  },
+  {
+    label: 'Product Listing',
+    description: 'Learn how to list your products, including setting prices, uploading images, and writing descriptions.',
+  },
+  {
+    label: 'Terms & Conditions',
+    description: 'Review and agree to the terms and conditions to start selling on our platform.',
+  },
+];
+
+const VerticalStepper = () => {
+  const [activeStep, setActiveStep] = useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+  };
+
+  return (
+    <Box sx={{ maxWidth: 400 }}>
+      <Stepper activeStep={activeStep} orientation="vertical">
+        {steps.map((step, index) => (
+          <Step key={step.label}>
+            <StepLabel>{step.label}</StepLabel>
+            <StepContent>
+              <Typography>{step.description}</Typography>
+              <Box sx={{ mb: 2 }}>
+                <div>
+                  <Button
+                    variant="contained"
+                    onClick={handleNext}
+                    sx={{ mt: 1, mr: 1 }}
+                  >
+                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                  </Button>
+                  <Button
+                    disabled={index === 0}
+                    onClick={handleBack}
+                    sx={{ mt: 1, mr: 1 }}
+                  >
+                    Back
+                  </Button>
+                </div>
+              </Box>
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+      {activeStep === steps.length && (
+        <Paper square elevation={0} sx={{ p: 3 }}>
+          <Typography>All steps completed - you&apos;re now a seller!</Typography>
+          <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
+            Reset
+          </Button>
+        </Paper>
+      )}
+    </Box>
+  );
+};
+
+export default VerticalStepper;
diff --git a/src/pages/SellerOnboarding.tsx b/src/pages/SellerOnboarding.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from "react";
+import VerticalStepper from "../components/vertical stepper/VerticalStepper";
+
+export const SellerOnboarding = () => {
+  return (
+    <div>
+        <h1>Become a seller</h1>
+       <VerticalStepper />
+    </div>
+  )
+}