Skip to content

Commit 910ebf6

Browse files
Aime-PatrickAime-Patrick
authored
user should be able to becomme a seller (#81)
1 parent ab39a83 commit 910ebf6

File tree

16 files changed

+483
-52
lines changed

16 files changed

+483
-52
lines changed

Diff for: ‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<link rel="icon" href="./assets/images/logo.png" type="image/png" />
8-
<title>E-Commerce Ninjas FrontEnd</title>
8+
<title>E-Commerce Ninjas</title>
99
</head>
1010
<body>
1111
<div id="root"></div>

Diff for: ‎src/App.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,5 @@
4444
@import "./assets//styles/UserProfile.scss";
4545
@import "./assets/styles/SellerSideProduct.scss";
4646
@import "./assets/styles/SellerDeleteItem.scss";
47-
@import "./assets/styles/ServicesPage.scss"
48-
47+
@import "./assets/styles/ServicesPage.scss";
48+
@import "./assets/styles/Settings.scss";

Diff for: ‎src/assets/styles/Settings.scss

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.settings {
2+
border: 1px solid $border-color;
3+
width: 100%;
4+
height: 100%;
5+
background-color: $white-color;
6+
7+
h2 {
8+
margin: 0;
9+
padding: 2%;
10+
font-size: 2.5rem;
11+
font-weight: bold;
12+
text-align: left;
13+
}
14+
15+
.menu-bar {
16+
display: flex;
17+
margin: 0 2.5rem;
18+
border-bottom: 1px solid #ddd;
19+
20+
21+
.menu-item {
22+
cursor: pointer;
23+
font-size: 1.3rem;
24+
p{
25+
margin-right: 1rem;
26+
padding: 1rem;
27+
&.active {
28+
background-color: $primary-color-light;
29+
color: $primary-color;
30+
padding: 1rem;
31+
border-bottom: 1px solid $primary-color;
32+
transition: padding .2s ease-in-out;
33+
}
34+
}
35+
36+
}
37+
}
38+
39+
40+
.section_container {
41+
flex-grow: 1;
42+
padding: 0 2.5rem;
43+
.loading__spinner{
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
width: 100%;
48+
height: 50rem;
49+
50+
}
51+
52+
.section-content {
53+
background-color: white;
54+
padding: 20px;
55+
56+
.password_exp{
57+
background-color: $border-color;
58+
padding: 2rem 5rem;
59+
border-radius: .5rem;
60+
61+
.form-group{
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
margin-bottom: 20px;
66+
label{
67+
font-size: 2.5rem;
68+
font-weight: bold;
69+
}
70+
input{
71+
padding: 10px;
72+
border: 1px solid #ddd;
73+
border-radius: 5px;
74+
font-size: 1.4rem;
75+
width: 30%;
76+
}
77+
}
78+
.btn{
79+
padding: 10px 20px;
80+
background-color: $primary-color;
81+
color: $white-color;
82+
border: none;
83+
border-radius: 5px;
84+
font-size: 1.6rem;
85+
width: 8rem;
86+
cursor: pointer;
87+
transition: width 0.5s linear;
88+
89+
&:hover{
90+
background-color: $primary-color-dark;
91+
width: 10rem;
92+
transition: width 0.5s linear;
93+
}
94+
}
95+
}
96+
}
97+
}
98+
99+
}

Diff for: ‎src/assets/styles/adminDashboard.scss

+14-4
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,7 @@
1919
flex-direction: column;
2020
height: 100%;
2121
width: 100%;
22-
.dashboard,
23-
.users,
24-
.logout {
22+
.menu__item,.logout {
2523
display: flex;
2624
align-items: center;
2725
padding-left: 1rem;
@@ -214,5 +212,17 @@
214212
.dropdown-item:hover {
215213
background-color: #f1f1f1;
216214
}
217-
@media only screen and (min-width: 76.8rem) {
215+
216+
.password-expiration-container {
217+
display: flex;
218+
justify-content: space-between;
219+
align-items: center;
220+
margin-bottom: 20px;
221+
}
222+
223+
.password-expiration-input {
224+
padding: 8px;
225+
font-size: 1rem;
226+
border: 1px solid #ccc;
227+
border-radius: 4px;
218228
}

Diff for: ‎src/components/settings/AccountSettings.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* eslint-disable */
2+
import React from 'react'
3+
4+
export const AccountSettings = () => {
5+
return (
6+
<div className='section-content'>
7+
<h2>Account Settings</h2>
8+
</div>
9+
)
10+
}

Diff for: ‎src/components/settings/GeneralSettings.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* eslint-disable */
2+
import React, { useEffect, useState } from "react";
3+
import { useAppDispatch, useAppSelector } from "../../store/store";
4+
import {
5+
fetchPasswordExpiration,
6+
updateUserPasswordExpiration,
7+
} from "../../store/features/admin/adminSlice";
8+
import CircularProgress from "@mui/material/CircularProgress";
9+
import Typography from "@mui/material/Typography";
10+
import Box from "@mui/material/Box";
11+
import { Bars } from "react-loader-spinner";
12+
import { LinearProgress } from "@mui/material";
13+
14+
export const GeneralSettings = () => {
15+
const dispatch = useAppDispatch();
16+
const { users, isLoading, passwordExpiration } = useAppSelector(
17+
(state) => state?.admin
18+
);
19+
const [minutes, setMinutes] = useState(passwordExpiration);
20+
const [isDisabled, setIsDisabled] = useState(true);
21+
const [isEdit, setIsEdit] = useState(true);
22+
23+
useEffect(() => {
24+
dispatch(fetchPasswordExpiration());
25+
setMinutes(passwordExpiration);
26+
}, [dispatch, passwordExpiration]);
27+
28+
const handleMinutesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
29+
setMinutes(Number(e.target.value));
30+
};
31+
32+
const handleSavePasswordExpiration = () => {
33+
if (minutes) {
34+
dispatch(updateUserPasswordExpiration({ minutes }));
35+
}
36+
setIsDisabled(true);
37+
setIsEdit(true);
38+
};
39+
40+
return (
41+
<>
42+
<div className="section-content">
43+
{isLoading && (
44+
<div className="table__spinner">
45+
<Box sx={{ width: "100%" }}>
46+
<LinearProgress
47+
sx={{
48+
backgroundColor: "#fff",
49+
"& .MuiLinearProgress-bar": {
50+
backgroundColor: "#ff8a46",
51+
},
52+
}}
53+
/>
54+
</Box>
55+
</div>
56+
)}
57+
<div className="password_exp">
58+
<div className="form-group">
59+
<label htmlFor="password">Password Expiration Time</label>
60+
<input
61+
type="text"
62+
id="password"
63+
value={minutes}
64+
onChange={handleMinutesChange}
65+
disabled={isDisabled}
66+
onFocus={() => setIsEdit(false)}
67+
placeholder="Enter password expiration period in minutes"
68+
/>
69+
</div>
70+
{isEdit ? (
71+
<button
72+
className="btn"
73+
onClick={() => setIsDisabled(!isDisabled)}
74+
>
75+
Edit
76+
</button>
77+
) : (
78+
<button className="btn" onClick={handleSavePasswordExpiration}>
79+
Save
80+
</button>
81+
)}
82+
</div>
83+
</div>
84+
</>
85+
);
86+
};

Diff for: ‎src/components/settings/Menu.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
4+
interface Props {
5+
selectedSection: string;
6+
onSelectSection: (section: string) => void;
7+
}
8+
9+
const Menu: React.FC<Props> = ({ selectedSection, onSelectSection }) => {
10+
const menuItems = [
11+
'General Settings',
12+
'Account Settings',
13+
];
14+
15+
return (
16+
<div className="menu-bar">
17+
{menuItems.map(item => (
18+
<div
19+
key={item}
20+
className={'menu-item'}
21+
onClick={() => onSelectSection(item)}
22+
>
23+
<p className={`${selectedSection === item ? 'active' : ''}`}>{item}</p>
24+
</div>
25+
))}
26+
</div>
27+
);
28+
};
29+
30+
export default Menu;

Diff for: ‎src/components/vertical stepper/VerticalStepper.tsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/* eslint-disable */
2+
import React, { useState } from 'react';
3+
import { Box, Stepper, Step, StepLabel, StepContent, Button, Paper, Typography } from '@mui/material';
4+
5+
const steps = [
6+
{
7+
label: 'Eligibility Requirements',
8+
description: 'Ensure you meet all the eligibility criteria to become a seller on our platform.',
9+
},
10+
{
11+
label: 'Account Setup',
12+
description: 'Create your seller account by providing your personal and business details.',
13+
},
14+
{
15+
label: 'Seller Fees',
16+
description: 'Understand the fees associated with selling on our platform, including listing and transaction fees.',
17+
},
18+
{
19+
label: 'Product Listing',
20+
description: 'Learn how to list your products, including setting prices, uploading images, and writing descriptions.',
21+
},
22+
{
23+
label: 'Terms & Conditions',
24+
description: 'Review and agree to the terms and conditions to start selling on our platform.',
25+
},
26+
];
27+
28+
const VerticalStepper = () => {
29+
const [activeStep, setActiveStep] = useState(0);
30+
31+
const handleNext = () => {
32+
setActiveStep((prevActiveStep) => prevActiveStep + 1);
33+
};
34+
35+
const handleBack = () => {
36+
setActiveStep((prevActiveStep) => prevActiveStep - 1);
37+
};
38+
39+
const handleReset = () => {
40+
setActiveStep(0);
41+
};
42+
43+
return (
44+
<Box sx={{ maxWidth: 400 }}>
45+
<Stepper activeStep={activeStep} orientation="vertical">
46+
{steps.map((step, index) => (
47+
<Step key={step.label}>
48+
<StepLabel>{step.label}</StepLabel>
49+
<StepContent>
50+
<Typography>{step.description}</Typography>
51+
<Box sx={{ mb: 2 }}>
52+
<div>
53+
<Button
54+
variant="contained"
55+
onClick={handleNext}
56+
sx={{ mt: 1, mr: 1 }}
57+
>
58+
{index === steps.length - 1 ? 'Finish' : 'Continue'}
59+
</Button>
60+
<Button
61+
disabled={index === 0}
62+
onClick={handleBack}
63+
sx={{ mt: 1, mr: 1 }}
64+
>
65+
Back
66+
</Button>
67+
</div>
68+
</Box>
69+
</StepContent>
70+
</Step>
71+
))}
72+
</Stepper>
73+
{activeStep === steps.length && (
74+
<Paper square elevation={0} sx={{ p: 3 }}>
75+
<Typography>All steps completed - you&apos;re now a seller!</Typography>
76+
<Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
77+
Reset
78+
</Button>
79+
</Paper>
80+
)}
81+
</Box>
82+
);
83+
};
84+
85+
export default VerticalStepper;

Diff for: ‎src/pages/SellerOnboarding.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* eslint-disable */
2+
import React from "react";
3+
import VerticalStepper from "../components/vertical stepper/VerticalStepper";
4+
5+
export const SellerOnboarding = () => {
6+
return (
7+
<div>
8+
<h1>Become a seller</h1>
9+
<VerticalStepper />
10+
</div>
11+
)
12+
}

0 commit comments

Comments
 (0)