32 |
52 | );
53 | };
54 |
55 | export default CartItems;
56 |
--------------------------------------------------------------------------------
/client/src/components/check-out/check-out.components.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import CartItems from "./cart-items/cart-items";
3 | import "./check-out.scss";
4 | import SubTotal from "./sub-total/sub-total";
5 | import { useSelector } from "react-redux";
6 | import { getTotalBasketPrice } from "../../store/basket/basket";
7 | import { useLocation } from "react-router-dom";
8 |
9 | const CheckOutComponent = () => {
10 | // basketTotal
11 | const cart :any = useSelector((state: any) => state.basket);
12 | const basketItems:any = cart.basket;
13 | const {state}:any = useLocation()
14 | console.log(state);
15 |
16 | return (
17 |
33 | 
34 |
35 |
36 |
51 |
37 |
47 | {name}
38 |
39 |
46 | ${price}
40 |
41 |
42 |
45 | {quantity}
43 | 44 |
48 |
49 |
50 |
18 | {
19 | basketItems.length>0 ?
20 |
54 | );
55 | };
56 |
57 | export default CheckOutComponent;
58 |
--------------------------------------------------------------------------------
/client/src/components/check-out/check-out.scss:
--------------------------------------------------------------------------------
1 | .check-out {
2 | button:active, button:hover {
3 | transform: translateY(2px);
4 | }
5 | display: grid;
6 | @media only screen and (max-width: 768px) {
7 | display: flex;
8 | flex-direction: column;
9 | }
10 | grid-template-columns: repeat(5, minmax(0, 1fr));
11 | .left-div {
12 | margin-top: 30px;
13 | grid-column: span 3 / span 3;
14 | padding: 10px;
15 | .showCart {
16 | font-size: 19px;
17 | }
18 | .div-1 {
19 | p {
20 | font-weight: 600;
21 | }
22 | }
23 | .cart {
24 | margin-top: 30px;
25 | }
26 | }
27 | .right-div {
28 | margin-top: 30px;
29 | grid-column: span 2 / span 2;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/client/src/components/check-out/sub-total/sub-total.scss:
--------------------------------------------------------------------------------
1 | .sub-total {
2 | width: 80%;
3 | background-color: whitesmoke;
4 | margin: auto;
5 | margin-top: 10px;
6 | border-radius: 10px;
7 | padding: 10px;
8 | .div-1 {
9 | .text-1 {
10 | font-size: 20px;
11 | }
12 | .text-2 {
13 | display: flex;
14 | .span-1 {
15 | flex: 1;
16 | }
17 | }
18 | }
19 | button {
20 | padding: 5px;
21 | border-radius: 8px;
22 | border-color: beige;
23 | outline: none;
24 | background-color: black;
25 | cursor: pointer;
26 | color: white;
27 | text-transform: capitalize;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/client/src/components/check-out/sub-total/sub-total.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./sub-total.scss";
3 | import {createCheckoutPage} from '../../../rapyd-hooks/create-checkout';
4 |
5 | interface SubTypes {
6 | quantity: any;
7 | shipping: any;
8 | totalPrice: number;
9 | ewallet : string,
10 | items : Array
21 |
:
50 | window.location.pathname="/stores"
51 | }
52 |
53 |
22 |
40 | Checkout
23 |
24 |
26 | Proceed and Checkout
25 |
27 | {basketItems.map((item) => (
28 |
39 |
41 |
49 |
23 |
38 | );
39 | };
40 |
41 | export default SubTotal;
42 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/customer-item/customer-item.scss:
--------------------------------------------------------------------------------
1 | .div-1 {
2 | display: flex;
3 | font-size: small;
4 | color: #71717a;
5 | .customer {
6 | display: flex;
7 | width: 25%;
8 | align-items: center;
9 | .profile {
10 | width: 30px;
11 | height: 30px;
12 | margin-right: 5px;
13 | }
14 | }
15 | .email {
16 | width: 25%;
17 | display: flex;
18 | align-items: center;
19 | p {
20 | margin-left: 5px;
21 | }
22 | }
23 | .phone {
24 | width: 25%;
25 | display: flex;
26 | align-items: center;
27 | p {
28 | margin-left: 5px;
29 | }
30 | }
31 | .date {
32 | width: 25%;
33 | display: flex;
34 | align-items: center;
35 | p {
36 | margin-left: 5px;
37 | }
38 | }
39 | .country {
40 | width: 25%;
41 | display: flex;
42 | align-items: center;
43 | p {
44 | flex: 1;
45 | }
46 | .three-dots {
47 | margin-right: 10px;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/customer-item/customer-item.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./customer-item.scss";
3 | interface Customer {
4 | name: string;
5 | profile: string;
6 | email: string;
7 | contact: string;
8 | date: string;
9 | country: string;
10 | }
11 | const CustomerItem = ({ name, profile, email, contact, date, country }: Customer) => {
12 |
13 | return (
14 |
24 |
35 |
37 | Order Summary
25 |26 | Items ({quantity}) ${totalPrice} 27 |
28 |29 | Shipping & handling ${shipping} 30 |
31 |32 | Order total${totalPrice + shipping} 33 |
34 |
15 |
100 | );
101 | };
102 |
103 | export default CustomerItem;
104 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-create-products/dashboard-create.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //import relevant modules and file
5 | import React, { useState, useRef, useEffect } from "react";
6 | import "./dashboard-create.scss";
7 | import {
8 | UilShoppingBag,
9 | UilSortAmountDown,
10 | UilPricetagAlt,
11 | UilDollarAlt,
12 | UilImage,
13 | } from "@iconscout/react-unicons";
14 | import {
15 | storage,
16 | addProductDetails,
17 | } from "../../../firebase/firebase.utils";
18 | import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
19 | import { useDispatch, useSelector } from "react-redux";
20 | import { RootState } from "../../../store/store";
21 | import { alert, close } from "../../../store/alert/alert.modal.reducer";
22 | import { error,closeModal } from "../../../store/error-message/error-message.reducer";
23 |
24 | const DashboardCreateProducts = () => {
25 |
26 |
27 | const dispatch = useDispatch();
28 | const getUserUid: string | null = useSelector(
29 | (state: RootState) => state.currentUser.currentUser
30 | );
31 |
32 | const [values, setValues] = useState({
33 | product: "",
34 | stock: "default",
35 | price : "",
36 | imageLogo : "",
37 | imageUrl : ""
38 | });
39 |
40 | // handle onChange
41 | const handleChange = (e: any) => {
42 |
43 | const { name, value } = e.target;
44 | setValues({
45 | ...values,
46 | [name]: value,
47 | });
48 | };
49 |
50 | const uploadImage = async () => {
51 | try {
52 | const file = imagePicker.current.files[0];
53 | // if (!file) return;
54 | const storageRef = ref(storage, `files/${file.name}`);
55 | const uploadTask = uploadBytesResumable(storageRef, file);
56 |
57 | uploadTask.on("state_changed", () => {
58 | getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
59 | setValues({
60 | ...values,
61 | imageUrl: downloadURL,
62 | });
63 | });
64 | });
65 | } catch (eror) {
66 | console.log(eror);
67 | }
68 | };
69 |
70 | const imagePicker: React.MutableRefObject
16 | 
17 |
19 | {name}
18 |
20 |
39 |
21 |
36 |
37 | {email}
38 |
40 |
59 |
41 |
56 |
57 | {contact}
58 |
60 |
79 |
61 |
76 |
77 | {date}
78 |
80 |
99 | {country}
81 |
82 |
97 |
98 |
120 |
206 | );
207 | };
208 |
209 | export default DashboardCreateProducts;
210 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-create-products/dashboard-create.scss:
--------------------------------------------------------------------------------
1 | .create__products {
2 | display: flex;
3 | text-align: center;
4 | align-items: center;
5 | flex-direction: column;
6 | width: 80vw;
7 |
8 | h2 {
9 | padding-top: 20px;
10 | font-size: 19px;
11 | }
12 | .shopping {
13 | display: flex;
14 | flex-direction: row;
15 | padding-bottom: 15px;
16 | .shop {
17 | display: flex;
18 | position: absolute;
19 | margin-top: 10px;
20 | color: #A1A1AA;
21 | margin-left: 10px;
22 | width: 15px;
23 | }
24 | input {
25 | background: #FAFAFA;
26 | border: 1px solid #D4D4D8;
27 | border-radius: 5px;
28 | padding-left: 35px;
29 | width: 300px;
30 | height: 40px;
31 | outline: none;
32 | }
33 | }
34 | .price__tag {
35 | display: flex;
36 | flex-direction: row;
37 | padding-bottom: 15px;
38 | .price {
39 | display: flex;
40 | position: absolute;
41 | margin-top: 10px;
42 | color: #A1A1AA;
43 | margin-left: 10px;
44 | width: 15px;
45 | }
46 | input {
47 | background: #FAFAFA;
48 | border: 1px solid #D4D4D8;
49 | border-radius: 5px;
50 | padding-left: 35px;
51 | width: 300px;
52 | height: 40px;
53 | outline: none;
54 | -moz-appearance: textfield !important;
55 |
56 | }
57 | .dollar {
58 | cursor: pointer;
59 | position: relative;
60 | color: #A1A1AA;
61 | margin-left: -24px;
62 | margin-top: 10px;
63 | width: 20px;
64 | }
65 |
66 | }
67 | .stock__amount {
68 | display: flex;
69 | flex-direction: row;
70 | padding-bottom: 15px;
71 | .amount {
72 | display: flex;
73 | position: absolute;
74 | margin-top: 10px;
75 | color: #A1A1AA;
76 | margin-left: 10px;
77 | width: 15px;
78 | }
79 | select {
80 | background: #FAFAFA;
81 | border: 1px solid #D4D4D8;
82 | border-radius: 5px;
83 | padding-left: 32px;
84 | width: 338px;
85 | height: 40px;
86 | outline: none;
87 | -webkit-appearance: menulist-button;
88 | // color: grey;
89 |
90 | option {
91 | color: black ;
92 | }
93 | option:first-child{
94 | color: grey;
95 | }
96 | }
97 | }
98 | .sect_img {
99 | display: flex;
100 | flex-direction: row;
101 | justify-content: space-between;
102 | padding-top: 15px;
103 |
104 | .hd_img {
105 | width: 50px;
106 | height: 50px;
107 | overflow: hidden;
108 | display: flex;
109 | font-size: 20px;
110 | justify-content: center;
111 | align-items: center;
112 | margin-right: 30px;
113 | background: whitesmoke;
114 | border: 1px solid whitesmoke;
115 | border-radius: 5px;
116 |
117 | img {
118 | width: 100%;
119 | }
120 |
121 | }
122 | .upload_add_img{
123 | display: flex;
124 | cursor: pointer;
125 | text-transform: capitalize;
126 | background-color: whitesmoke;
127 | border: 1px solid whitesmoke;
128 | border-radius: 5px;
129 | padding: 0 10px 0 10px;
130 |
131 |
132 | }
133 | }
134 | button {
135 | display: flex;
136 | cursor: pointer;
137 | background: #18181B;
138 | width: 100%;
139 | justify-content: center;
140 | padding: 7px;
141 | border-radius: 10px;
142 | font-weight: bold;
143 | outline: none;
144 | color: #fff;
145 | -webkit-appearance: button;
146 | border: none;
147 | margin-top: 17px;
148 | height: 40px;
149 | align-items: center;
150 | align-content: center;
151 | }
152 | }
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-customers/dashboard-customers.scss:
--------------------------------------------------------------------------------
1 | .dashboard-customers {
2 | padding: 30px;
3 | width: 100%;
4 | color: #71717a;
5 | .head-div {
6 | width: 100%;
7 | height: 13vh;
8 | display: flex;
9 | justify-content: baseline;
10 | padding: 2px;
11 | .div-1 {
12 | .title {
13 | font-family: "Plus Jakarta Sans";
14 | font-style: normal;
15 | font-weight: 700;
16 | font-size: 21px;
17 | /* identical to box height, or 152% */
18 |
19 | /* gray/900 */
20 |
21 | color: #18181b;
22 | }
23 | .description {
24 | font-family: "Plus Jakarta Sans";
25 | font-style: normal;
26 | font-weight: 400;
27 | font-size: 13px;
28 | line-height: 22px;
29 | /* identical to box height, or 169% */
30 |
31 | /* gray/500 */
32 |
33 | color: #71717a;
34 | }
35 | flex: 1;
36 | display: flex;
37 | flex-direction: column;
38 | align-self: end;
39 | }
40 | .div-2 {
41 | display: flex;
42 | align-items: end;
43 | .container-1 {
44 | border: 1px solid;
45 | cursor: pointer;
46 | padding-left: 5px;
47 | padding-right: 5px;
48 | margin-right: 5px;
49 | border-radius: 8px;
50 | display: flex;
51 | font-size: small;
52 | .svg-export {
53 | font-size: 10px;
54 | margin-right: 4px;
55 | }
56 | }
57 | .container-2 {
58 | border: 1px solid;
59 | cursor: pointer;
60 | padding-left: 5px;
61 | padding-right: 5px;
62 | border-radius: 8px;
63 | .text-sort {
64 | font-size: small;
65 | margin-right: 4px;
66 | }
67 | .svg-sort {
68 | font-size: 12px;
69 | }
70 | display: flex;
71 | font-size: small;
72 | margin-left: 5px;
73 | align-items: end;
74 | }
75 | }
76 | }
77 | .div-type {
78 | border: 1px solid;
79 | display: flex;
80 | margin-top: 10px;
81 | border-top: none;
82 | border-left: none;
83 | padding: 10px;
84 | border-right: none;
85 | border-color: rgba($color: #000000, $alpha: 0.2);
86 | .customer {
87 | width: 25%;
88 | }
89 | .email {
90 | width: 25%;
91 | }
92 | .phone {
93 | width: 25%;
94 | }
95 | .date {
96 | width: 25%;
97 | }
98 | .country {
99 | width: 25%;
100 | }
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-customers/dashboard-customers.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import CustomerItem from "../customer-item/customer-item";
3 | import "./dashboard-customers.scss";
4 | const DashboardCustomers = () => {
5 | const profilePic = require("../../../assets/profile.png");
6 | return (
7 | Add Product
121 | 205 |
8 |
84 | );
85 | };
86 |
87 | export default DashboardCustomers;
88 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-navbar/dashboard-navbar.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //import relevant modules
5 |
6 | import React, { useState } from "react";
7 | import './dashboard-navbar.scss';
8 | import { useWindowSize } from "@react-hook/window-size";
9 | import MobileMenu from "./mobile-menu/mobile-menu";
10 |
11 |
12 | // import logo
13 | const isellLogo : string = require('../../../assets/isell-logo.png');
14 | const person : string = require('../../../assets/person.jpeg');
15 |
16 | const DashboardNavbar = ({businessDetails, displayName}) => {
17 | const [menubar, setmenuBar] = useState(false)
18 |
19 | const [width] = useWindowSize();
20 | return (
21 |
9 |
58 |
10 |
15 | Customers
11 |12 | Lorem ipsum dolor sit amet, consectetur adipis. 13 |
14 |
16 |
57 |
17 |
36 | 18 | 33 |
34 |Export to CSV
35 |
37 |
56 | Sort: Popularity
38 |39 | 54 |
55 |
59 |
75 |
60 |
62 | Customer
61 |
63 |
65 | Email Address
64 |
66 |
68 | Phone Number
67 |
69 |
71 | Join Date
70 |
72 |
74 | Country
73 |
22 |
72 |
73 | );
74 | }
75 |
76 | export default DashboardNavbar;
77 |
78 |
79 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-navbar/dashboard-navbar.scss:
--------------------------------------------------------------------------------
1 | .dashboard__navbar {
2 | // display: flex;
3 | // justify-content: space-between;
4 | // flex-direction: row;
5 | box-shadow: 0px 1px 0px rgba(18, 32, 59, 0.09);
6 | border-bottom: 1px solid #e4e4e7;
7 |
8 | display: grid;
9 | overflow-y: scroll;
10 | position: sticky;
11 | top: 0;
12 | grid-template-columns: repeat(5, minmax(0, 1fr));
13 | z-index: 10;
14 |
15 | .dashboard__sidebar {
16 | display: block;
17 | overflow: hidden;
18 | padding-left: 20px;
19 | grid-column: span 1 / span 1;
20 | position: sticky;
21 | // display: flex;
22 | // flex-direction: column;
23 | border-right: 1px solid #e4e4e7;
24 |
25 | padding-right: 130px;
26 | @media screen and (max-width: 768px) {
27 | border: none;
28 | }
29 | .dashboard__logo {
30 | padding: 20px 0px 20px 0px;
31 | width: 50px;
32 | height: 20px;
33 | // padding-right: 20px;
34 | }
35 | .sidebar {
36 | display: flex;
37 | flex-direction: column;
38 | }
39 | }
40 |
41 | .navbar__content {
42 | display: flex;
43 | flex-direction: row;
44 | margin-bottom: 4px;
45 | padding-top: 20px;
46 | padding-right: 20px;
47 | justify-self: flex-end;
48 | grid-column: span 4 / span 4;
49 | position: sticky;
50 |
51 | .menu-bars {
52 | // position: fixed;
53 | // top: 1rem;
54 | // right: 2rem;
55 | // z-index: 10;
56 | // display: inline;
57 | margin-top: 2px;
58 | /* margin-left: 20px; */
59 | background: whitesmoke;
60 | border: solid 1px grey;
61 | border-radius : 5px;
62 | margin-right: 6px;
63 | cursor: pointer;
64 | }
65 |
66 | .bar1,
67 | .bar2,
68 | .bar3 {
69 | width: 21px;
70 | height: 2px;
71 | background-color: black;
72 | margin: 5px 5px 5px 6px;
73 | transition: 0.4s;
74 | }
75 |
76 | /* Rotate first bar */
77 | .change .bar1 {
78 | transform: rotate(-45deg) translate(-6px, 5px);
79 | }
80 |
81 | /* Fade out the second bar */
82 | .change .bar2 {
83 | opacity: 0;
84 | }
85 |
86 | /* Rotate last bar */
87 | .change .bar3 {
88 | transform: rotate(45deg) translate(-5px, -4px);
89 | }
90 |
91 | .person__logo {
92 | height: 30px;
93 | width: 30px;
94 | border-radius: 100%;
95 | padding: 0 10px 0 10px;
96 | }
97 | .person__p {
98 | margin-top: 5px;
99 | font-size: 13px;
100 | padding: 0 10px 0 10px;
101 | }
102 | .angle__down {
103 | margin: 5px 0px 0px 0px;
104 | }
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-navbar/mobile-menu/mobile-menu.scss:
--------------------------------------------------------------------------------
1 | .desk__menubar{
2 | z-index: 1;
3 | position: fixed;
4 | top: 0;
5 | bottom: 0;
6 | left: 0;
7 | right: 0;
8 | background-color: rgba(0,0,0,0.2);
9 | opacity: 1;
10 | transition: opacity .2s ease-in-out;
11 | cursor: auto;
12 |
13 | .desk__menuitem{
14 | position: absolute;
15 | background-color: var(--on-settings-card);
16 | flex-direction: column;
17 | display: flex;
18 | border: solid 1px var(--on-settings-card);
19 | border-radius: 10px;
20 | width: 190px;
21 | // height: 100px;
22 | top: 64px;
23 | right: 232px;
24 | color: var(--wht);
25 |
26 | ul {
27 | display: flex;
28 | flex-direction: column;
29 | text-align: left;
30 |
31 | .desk {
32 | margin-left: 10px !important;
33 | margin: 10px;
34 | cursor: pointer;
35 | font-weight: bold;
36 |
37 | &:hover {
38 | // margin-left: -14px !important;
39 | border-right: solid 5px #3981C6 !important;
40 | background-color: var(--background--hover);
41 | color: #3981C6;
42 | }
43 |
44 | // &:hover{
45 | // .uil-arrow-up-right{
46 | // transition: 0.2s;
47 | // transform: translateX(10px);
48 | // }
49 |
50 | // }
51 | }
52 | }
53 | }
54 | }
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-navbar/mobile-menu/mobile-menu.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import './mobile-menu.scss';
3 |
4 | const MobileMenu = () => {
5 | return(
6 |
23 |
24 | 
25 |
26 |
27 |
28 | {/* {
29 | width <= 768 &&
30 | 
67 | }
68 |
69 |
71 |
31 |
64 | } */}
65 | {
66 | businessDetails && {setmenuBar(!menubar); console.log(menubar)}}
33 | style={{
34 | zIndex: menubar ? "1200" : "0"
35 | }}
36 | >
37 |
58 |
59 | {
60 | !menubar ? {displayName}
70 |
7 |
22 | )
23 | }
24 |
25 | export default MobileMenu
26 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-products/dashboard-products.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //import relevant modules
5 | import React, { useEffect, useState } from "react";
6 | import { useNavigate } from "react-router-dom";
7 | import './dashboard-products.scss';
8 | import {UilPlus} from '@iconscout/react-unicons';
9 | import { useSelector } from "react-redux";
10 | import { RootState } from "../../../store/store";
11 | import { db } from "../../../firebase/firebase.utils";
12 | import memoize from 'lodash.memoize';
13 | import { doc, getDoc } from "firebase/firestore";
14 | import Spinner from "../../spinner/spinner";
15 | import { Link } from "react-router-dom";
16 |
17 | //import logo
18 | const uploadImg = require('../../../assets/upload.png');
19 |
20 | //JSX Components
21 | const DashboardProducts = () => {
22 | const Navigate = useNavigate();
23 |
24 | const getUserUid: any = useSelector(
25 | (state: RootState) => state.currentUser.currentUser
26 | );
27 | const [products, setProducts]:any = useState([]);
28 | const [loading, setloading] = useState(false);
29 | const [name, setName] = useState("")
30 |
31 | const getVendorProducts = memoize(async () => {
32 | setloading(false);
33 | if(!getUserUid) {
34 | return Navigate('/login')
35 | }
36 | const getDocRef = doc(db, "users", getUserUid);
37 | if (!getDocRef) return
38 | const userSnapshot= await getDoc(getDocRef);
39 | if (userSnapshot?.data()?.verification) {
40 | setProducts(userSnapshot.data()?.products)
41 | setName(userSnapshot.data()?.businessDetails?.business_name)
42 | setloading(true);
43 | }
44 |
45 | })
46 |
47 |
48 | useEffect(() => {
49 | getVendorProducts()
50 | // eslint-disable-next-line
51 | }, [getUserUid])
52 | return(
53 |
8 |
20 |
21 | -
9 |
- 10 | 11 | Github 12 | 13 |
- 14 | Twitter 15 | 16 | 17 | 18 |
54 | {
55 | !loading ?
56 |
112 | );
113 | }
114 |
115 | export default DashboardProducts;
116 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-products/dashboard-products.scss:
--------------------------------------------------------------------------------
1 | .dashboard__upload {
2 | display: flex;
3 | flex-direction: column;
4 | grid-column: span 4 / span 4;
5 | width: 80vw;
6 | @media only screen and (max-width: 768px) {
7 | width: 100vw;
8 | }
9 |
10 | .vendor__products {
11 | display: flex;
12 | flex-direction: column;
13 | .add__products {
14 | display: flex;
15 | flex-direction: row;
16 | justify-content: space-between;
17 | .btn-add {
18 | padding-right: 20px;
19 | }
20 | .products__main {
21 | h2 {
22 | padding: 20px 0px 0px 30px;
23 | font-size: 18px;
24 | }
25 | p {
26 | font-size: 12px;
27 | margin: -10px 0px 0px 30px;
28 | color: #71717a;
29 | }
30 | }
31 | button {
32 | margin: 20px 5px 0px 5px;
33 | display: flex;
34 | cursor: pointer;
35 | background: #18181b;
36 | justify-content: center;
37 | padding: 5px;
38 | border-radius: 10px;
39 | font-weight: bold;
40 | outline: none;
41 | color: #fff;
42 | width: 100px;
43 | -webkit-appearance: button;
44 | border: none;
45 | margin-top: 30px;
46 | height: 40px;
47 | align-items: center;
48 | align-content: center;
49 | }
50 | }
51 |
52 | .products {
53 | display: grid;
54 | // grid-template-columns: 1fr 1fr 1fr 1fr;
55 | // grid-gap: 10px;
56 |
57 | // padding: 80px 10px 0px 10px;
58 | grid-template-columns: repeat(9, minmax(0, 1fr));
59 | width: 80vw;
60 | @media only screen and (max-width: 768px) {
61 | width: 100vw;
62 | grid-template-columns: repeat(8, minmax(0, 1fr));
63 | }
64 |
65 | .dash-pro {
66 | grid-column: span 3 / span 3;
67 | @media only screen and (max-width: 768px) {
68 | grid-column: span 4 / span 4;
69 | }
70 |
71 | .product {
72 | margin: 10px;
73 | background: whitesmoke;
74 | border: solid 1px whitesmoke;
75 | border-radius: 10px;
76 | display: flex;
77 | flex-direction: column;
78 | // justify-content: center;
79 | // align-content: center;
80 | // text-align: center;
81 | width: 20vw;
82 | @media only screen and (max-width: 768px) {
83 | width: fit-content;
84 | height: 250px;
85 | }
86 | height: 300px;
87 |
88 | & p {
89 | display: flex;
90 | text-align: center;
91 | justify-content: center;
92 | margin-top: 8px;
93 | background-color: #18181b;
94 | color: white;
95 | margin-left: 10px;
96 | width: 24px;
97 | border: solid 1px #18181b;
98 | border-radius: 10px;
99 | height: 18px;
100 | font-size: 12px;
101 | }
102 | img {
103 | display: flex;
104 | justify-content: center;
105 | margin: 10px 0px 0px 29px;
106 | height: 70%;
107 | width: 80%;
108 | border-radius: 5%;
109 | background-image: none !important;
110 | }
111 | }
112 | .product__details {
113 | width: 20vw;
114 | margin-top: 10px 10px 5px 10px;
115 | display: flex;
116 | justify-content: space-between;
117 | flex-direction: row;
118 |
119 | h2 {
120 | padding: 0px;
121 | font-size: 11px;
122 |
123 | margin: 0px;
124 | margin-left: 13px;
125 | // font-weight: bolder;
126 | }
127 | p {
128 | margin-top: 0px;
129 | font-size: 13px;
130 | }
131 | }
132 | }
133 | }
134 | }
135 |
136 | .dashboard-products {
137 | display: flex;
138 | padding-top: 100px;
139 | flex-direction: column;
140 | width: 80vw;
141 | text-align: center;
142 | justify-content: center;
143 | align-content: center;
144 | align-items: center;
145 |
146 | & img {
147 | width: 132px;
148 | height: 98px;
149 | }
150 | & h2 {
151 | font-size: 16px;
152 | margin-bottom: 1px;
153 | }
154 | & p {
155 | font-size: 14px;
156 | line-height: 20px;
157 | color: #667085;
158 | margin: auto;
159 | }
160 | & button {
161 | margin: 0px 5px 0px 5px;
162 | display: flex;
163 | cursor: pointer;
164 | background: #18181b;
165 | justify-content: center;
166 | padding: 5px;
167 | border-radius: 10px;
168 | font-weight: bold;
169 | outline: none;
170 | color: #fff;
171 | width: 20%;
172 | -webkit-appearance: button;
173 | border: none;
174 | margin-top: 17px;
175 | height: 40px;
176 | align-items: center;
177 | align-content: center;
178 | span {
179 | margin-top: -1px;
180 | text-transform: capitalize;
181 | }
182 | }
183 | }
184 | }
185 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-sales/dashboard-sales.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const DashboardSales = () => {
4 | return (
5 |
61 |
91 |
92 | :
93 |
62 |
71 |
72 |
63 |
66 |
67 |
68 |
69 |
70 | Products
64 |Store owned by {name}
65 |
73 |
74 | {
75 | products.map((product, i) =>
76 | (
77 |
90 |
78 |
87 | ))
88 | }
89 |
79 | 
81 |
82 | {product?.stock}
80 |
83 |
86 | {product?.product}
84 |{product?.price}
85 |
94 | 
95 |
107 | }
108 |
109 |
110 |
111 | Start by uploading a product
96 |Any product you upload on iSELL will live here.
97 |Start creating your Products.
98 | 99 | 105 | 106 |Sales
6 | ); 7 | } 8 | 9 | export default DashboardSales; -------------------------------------------------------------------------------- /client/src/components/dashboard/dashboard-sidebar/dashboard-sidebar.component.tsx: -------------------------------------------------------------------------------- 1 | // Copyright iSELL 💳 2022 2 | // 17 U.S.C §§ 101-1511 3 | 4 | //import relevant modules 5 | import React from "react"; 6 | import { Link } from "react-router-dom"; 7 | import { 8 | UilPlus, 9 | UilEstate, 10 | UilSignalAlt3, 11 | UilUserArrows, 12 | UilFolder, 13 | UilSignout, 14 | } from "@iconscout/react-unicons"; 15 | import "./dashboard-sidebar.scss"; 16 | 17 | //JSX Component 18 | const DashboardSidebar = () => { 19 | return ( 20 |
21 |
69 | );
70 | };
71 |
72 | export default DashboardSidebar;
73 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard-sidebar/dashboard-sidebar.scss:
--------------------------------------------------------------------------------
1 | .sidebar {
2 |
3 | display: block;
4 | overflow: hidden;
5 | grid-column: span 1 / span 1;
6 | position: sticky;
7 | @media only screen and (max-width: 768px) {
8 | display: none;
9 | }
10 | height: 90vh;
11 | top: 0px;
12 | bottom: 0px;
13 |
14 | .sidebar__component1 {
15 | padding-top: 10px;
16 |
17 | .product__button {
18 | margin: 0px 5px 0px 5px;
19 | display: flex;
20 | cursor: pointer;
21 | background: #18181b;
22 | justify-content: center;
23 | padding: 5px;
24 | border-radius: 10px;
25 | font-weight: bold;
26 | outline: none;
27 | color: #fff;
28 | width: 90%;
29 | -webkit-appearance: button;
30 | border: none;
31 | margin-top: 17px;
32 | height: 40px;
33 | align-items: center;
34 | align-content: center;
35 | span {
36 | margin-top: -1px;
37 | text-transform: capitalize;
38 | }
39 | }
40 |
41 | .sidebarsub__component {
42 | display: flex;
43 | flex-direction: column;
44 | padding: 20px 9px 10px 16px;
45 | width: 200px;
46 | .home__dashboard {
47 | display: flex;
48 | flex-direction: row;
49 | justify-content: space-between;
50 | width: 50%;
51 | cursor: pointer;
52 | .home__dash {
53 | // margin-top: 5px;
54 | width: 18px;
55 | color: #18181b;
56 | }
57 | .dashboard__paragraph {
58 | font-size: 14px;
59 | margin-top: 3px;
60 | color: #18181b;
61 | }
62 | }
63 | .analytics__dashboard {
64 | display: flex;
65 | width: 50%;
66 | flex-direction: column;
67 |
68 | .analytics {
69 | font-size: 11px;
70 | letter-spacing: 1px;
71 | font-weight: 500;
72 | text-transform: uppercase;
73 | color: #a1a1aa;
74 | padding-left: 5px;
75 | }
76 |
77 | .signals__dashboard {
78 | display: flex;
79 | flex-direction: row;
80 | justify-content: space-between;
81 | width: 65%;
82 | // padding: 10px 5px 10px 5px;
83 | cursor: pointer;
84 |
85 | .signal {
86 | width: 16px;
87 | // margin-right: 10px;
88 | }
89 | .sales {
90 | font-size: 14px;
91 | margin-top: 3px;
92 | }
93 | }
94 | }
95 | .support__dashboard {
96 | display: flex;
97 | width: 50%;
98 | flex-direction: column;
99 | .support {
100 | font-size: 11px;
101 | letter-spacing: 1px;
102 | font-weight: 500;
103 | text-transform: uppercase;
104 | color: #a1a1aa;
105 | padding-left: 5px;
106 | }
107 | .customers__dashboard {
108 | display: flex;
109 | flex-direction: row;
110 | justify-content: space-between;
111 | cursor: pointer;
112 |
113 | .customers {
114 | width: 16px;
115 | }
116 | .customer {
117 | font-size: 14px;
118 | margin-top: 3px;
119 | }
120 | }
121 | }
122 | .shop__dashboard {
123 | display: flex;
124 | width: 50%;
125 | flex-direction: column;
126 | & p {
127 | font-size: 11px;
128 | letter-spacing: 1px;
129 | font-weight: 500;
130 | text-transform: uppercase;
131 | color: #a1a1aa;
132 | padding-left: 5px;
133 | }
134 | & div {
135 | display: flex;
136 | flex-direction: row;
137 | justify-content: space-between;
138 | cursor: pointer;
139 | .products {
140 | width: 16px;
141 | }
142 | & p {
143 | color: black;
144 | text-transform: capitalize;
145 | font-size: 14px;
146 | margin-top: 3px;
147 | }
148 | }
149 | }
150 | }
151 | }
152 | .sidebar__component2 {
153 | margin-left: 15px;
154 | margin-top: 180px;
155 | display: flex;
156 | width: 39%;
157 | flex-direction: row;
158 | justify-content: space-between;
159 | cursor: pointer;
160 | .logout {
161 | width: 16px;
162 | margin-left: 3px;
163 | }
164 | & p {
165 | color: black;
166 | text-transform: capitalize;
167 | font-size: 14px;
168 | margin-top: 3px;
169 | }
170 | }
171 | }
172 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //import relevant modules and file
5 | import React, { useEffect, useState } from "react";
6 | import { doc, getDoc } from "firebase/firestore";
7 |
8 | import memoize from 'lodash.memoize';
9 | import { useSelector } from "react-redux";
10 | import "./dashboard.scss";
11 |
12 | //import sections of the dashboard
13 | import DashboardNavbar from "./dashboard-navbar/dashboard-navbar.component";
14 | import DashboardSidebar from "./dashboard-sidebar/dashboard-sidebar.component";
15 | import DashboardProducts from "./dashboard-products/dashboard-products.component";
16 | import DashboardSales from "./dashboard-sales/dashboard-sales.component";
17 | import DashboardCreateProducts from "./dashboard-create-products/dashboard-create.component";
18 | import { Route, Routes } from "react-router-dom";
19 | import { RootState } from "../../store/store";
20 | import { db } from "../../firebase/firebase.utils";
21 | // import DashboardCustomers from "./dashboard-customers/dashboard-customers";
22 |
23 | const Dashboard = () => {
24 |
25 | const getUserUid: any = useSelector(
26 | (state: RootState) => state.currentUser.currentUser
27 | );
28 |
29 | const [loading, setLoading] = useState(false);
30 | const [verified, setVerification]= useState(false);
31 | const [details, setDetails]:any = useState([]);
32 |
33 | const detailedObject= memoize(async () => {
34 | setLoading(false);
35 | if(!getUserUid) return
36 | const getDocRef = doc(db, "users", getUserUid);
37 | if (!getDocRef) return
38 | const userSnapshot:any = await getDoc(getDocRef);
39 | if (userSnapshot?.data()?.verification) {
40 | setDetails(userSnapshot?.data())
41 | setVerification(userSnapshot.data()?.verification)
42 | setLoading(true);
43 | }
44 |
45 | })
46 |
47 | useEffect(() => {
48 | detailedObject();
49 | // eslint-disable-next-line
50 | }, [getUserUid])
51 | return (
52 |
53 |
22 |
23 |
27 |
28 |
64 |
29 |
63 |
30 |
31 |
37 | Dashboard
34 | 35 | 36 |
38 |
44 | Analytics
39 |
40 |
43 | Sales
42 |
45 |
51 | Support
46 |
47 |
50 | Customers
49 |
52 |
62 | Shop
53 |
54 |
55 |
61 | Products
58 | 59 | 60 |
65 |
68 | Logout
67 |
54 |
65 | );
66 | };
67 |
68 | export default Dashboard;
69 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/dashboard.scss:
--------------------------------------------------------------------------------
1 | .dashboard {
2 | display: flex;
3 | flex-direction: column;
4 | background-color: #fff;
5 |
6 | .dashboard__main {
7 | // display: flex;
8 | // flex-direction: row;;
9 | display: grid;
10 | overflow-y: scroll;
11 | position: sticky;
12 | overflow-x: hidden;
13 | top: 0;
14 | height: 100vh;
15 | grid-template-columns: repeat(5, minmax(0, 1fr));
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/client/src/components/forgot-password/forgot-password.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | // relevant firebase imports
5 | import React, { useState } from "react";
6 | import './forgot.scss';
7 | import {UilEnvelope} from '@iconscout/react-unicons'
8 | import { Link } from "react-router-dom";
9 | import { resetPassword } from "../../firebase/firebase.utils";
10 | import { error, closeModal} from "../../store/error-message/error-message.reducer";
11 | import { alert , close} from "../../store/alert/alert.modal.reducer";
12 | import { useDispatch } from "react-redux";
13 |
14 | const ForgotPassword = () => {
15 | const dispatch = useDispatch()
16 | const [email, setEmail] = useState("");
17 | const isellLogo= require('../../assets/isell-logo.png');
18 |
19 | const handleSubmit = async (e: React.FormEvent
56 |
58 |
63 |
64 |
48 |
78 | );
79 | }
80 |
81 | export default ForgotPassword;
--------------------------------------------------------------------------------
/client/src/components/forgot-password/forgot.scss:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | .login {
5 | display: flex;
6 | background-color: #ffff;
7 | flex-direction: row;
8 | justify-content: space-between;
9 |
10 | @media screen and (max-width: 1000px) {
11 | text-align: center;
12 | justify-content: center;
13 | }
14 |
15 | .login__component1 {
16 | display: flex;
17 | flex-direction: column;
18 | padding: 50px;
19 |
20 | @media screen and (max-width: 1000px) {
21 | padding-left: 0px;
22 | padding-right: 0px;
23 |
24 | }
25 | img {
26 | width : 50px;
27 | padding: 20px;
28 | cursor: pointer;
29 |
30 | @media screen and (max-width: 1000px) {
31 | padding: 0px;
32 | position: absolute;
33 | left: 30px;
34 | }
35 | }
36 | .log__body {
37 | padding-top: 75px;
38 | display: flex;
39 | flex-direction: column;
40 |
41 | .email__address {
42 | display: flex;
43 | flex-direction: row;
44 |
45 |
46 | .envelope{
47 | display: flex;
48 | position: absolute;
49 | margin-top: 10px;
50 | color: #A1A1AA;
51 | margin-left: 10px;
52 | width: 15px;
53 | }
54 | input {
55 | background: #FAFAFA;
56 | border: 1px solid #D4D4D8;
57 | border-radius: 5px;
58 | padding-left: 35px;
59 | width: 300px;
60 | height: 40px;
61 | outline: none;
62 | }
63 |
64 | }
65 |
66 | button {
67 | display: flex;
68 | cursor: pointer;
69 | background: #18181B;
70 | width: 100%;
71 | justify-content: center;
72 | padding: 7px;
73 | border-radius: 10px;
74 | font-weight: bold;
75 | outline: none;
76 | color: #fff;
77 | -webkit-appearance: button;
78 | border: none;
79 | margin-top: 17px;
80 | height: 40px;
81 | align-items: center;
82 | align-content: center;
83 | }
84 |
85 | }
86 | }
87 | .forgot__component2 {
88 | position: relative;
89 | border-radius: 10px;
90 | display: flex;
91 | width: 50vw;
92 | height: 100vh;
93 | background: url('../../assets/forgot.jpeg');
94 | background-repeat: no-repeat;
95 | background-size: cover;
96 | @media screen and (max-width : 1000px) {
97 | display: none;
98 | }
99 | // .forgot__layer{
100 | // background: linear-gradient(90deg, #44BCFF -0.55%, #44B0FF 22.86%, #FF44EC 48.36%, #FF44EC 73.33%, #FF675E 99.34%);
101 | // opacity: 0.9;
102 | // filter: blur(70.333px);
103 | // transform: matrix(1, 0, 0, 1, 0, 0);
104 | // position: absolute;
105 | // height: 208.42px;
106 | // left: 0px;
107 | // top: 490.97px;
108 | // width: 50vw;
109 | // }
110 |
111 | }
112 | }
--------------------------------------------------------------------------------
/client/src/components/home/footer/footer.components.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./footer.scss";
3 | const Footer = () => {
4 | const iSELLlogo = require("../../../assets/isell-logo.png");
5 | return (
6 |
49 |
50 |
51 |
52 |
53 |
74 |
54 |
73 | Reset Password
55 | 71 | 72 |
75 |
76 |
77 |
7 |
24 | );
25 | };
26 |
27 | export default Footer;
28 |
--------------------------------------------------------------------------------
/client/src/components/home/footer/footer.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | width: 100%;
3 | height: 100vh;
4 | display: flex;
5 | @media only screen and (max-width: 768px) {
6 | flex-direction: column;
7 | }
8 | @media only screen and (max-width: 915px) {
9 | height: fit-content;
10 | flex-direction: column;
11 | margin-top: 10vh;
12 | }
13 | .title {
14 | font-family: "Plus Jakarta Sans";
15 | font-style: normal;
16 | font-weight: 600;
17 | font-size: 52px;
18 | line-height: 56px;
19 | /* or 108% */
20 |
21 | text-align: center;
22 | }
23 | .div-1 {
24 | width: 100%;
25 | display: flex;
26 | justify-content: center;
27 | button {
28 | background: #18181b;
29 | color: white;
30 | padding: 11px;
31 | border-radius: 3px;
32 | }
33 | }
34 | .div-2 {
35 | margin-top: 20vh;
36 | width: 100%;
37 | padding-top: 40px;
38 | padding-bottom: 40px;
39 | border: solid;
40 | border-color: rgba(0, 0, 0, 0.3);
41 | border-width: 1px;
42 | border-left: none;
43 | border-right: none;
44 | display: flex;
45 | align-items: center;
46 | .isell {
47 | width: 50px;
48 | height: 20px;
49 | }
50 | .isell-text {
51 | flex: 1;
52 | text-align: end;
53 | }
54 | }
55 | .copyright {
56 | text-align: center;
57 | margin-top: 15vh;
58 | margin-bottom: 10vh;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/client/src/components/home/hero-section/hero-section.components.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./hero-section.scss";
3 | const HeroSection = () => {
4 | const image1 = require("../../../assets/chart1.png");
5 | const image2 = require("../../../assets/chart12.png");
6 | const image3 = require("../../../assets/music.png");
7 | return (
8 |
8 | Online sales made easy
with the best tools
9 |
11 |
12 |
13 |
14 | 
15 |
20 | 16 | iSELL gives you the building blocks to build a truly profitable 17 | business. 18 |
19 |21 | © Copyright 2022, All Rights Reserved by iSELL 22 |
23 |
9 |
41 | );
42 | };
43 |
44 | export default HeroSection;
45 |
--------------------------------------------------------------------------------
/client/src/components/home/hero-section/hero-section.scss:
--------------------------------------------------------------------------------
1 | .hero-section {
2 | width: 90%;
3 | margin: auto;
4 | height: 100vh;
5 | @media only screen and (max-width: 918px) {
6 | height: fit-content;
7 | }
8 | .text-1 {
9 | height: 56px;
10 | @media only screen and (max-width: 768px) {
11 | font-weight: 600;
12 | font-size: 29px;
13 | }
14 | font-family: "Plus Jakarta Sans";
15 | font-style: normal;
16 | font-weight: 600;
17 | font-size: 45px;
18 | /* identical to box height, or 124% */
19 |
20 | text-align: center;
21 |
22 | /* Base/02 */
23 |
24 | color: #090914;
25 | }
26 | .text-2 {
27 | margin-top: -30px;
28 | text-align: center;
29 | @media only screen and (max-width: 768px) {
30 | margin-bottom: 6vh;
31 | }
32 | }
33 | .hero-0 {
34 | @media only screen and (max-width: 768px) {
35 | flex-wrap: wrap;
36 | height: fit-content;
37 | }
38 | @media only screen and (max-width: 918px) {
39 | height: fit-content;
40 | }
41 | display: flex;
42 | height: 40vh;
43 | padding: 50px;
44 | justify-content: space-around;
45 | align-items: center;
46 | .hero-1 {
47 | display: flex;
48 | flex-direction: column;
49 | align-items: center;
50 | width: 330px;
51 | margin: 10px;
52 | .hero-header {
53 | font-size: 18px;
54 | font-weight: 500;
55 | }
56 | .hero-description {
57 | width: 80%;
58 | font-size: 14px;
59 | }
60 | }
61 | .hero-2 {
62 | display: flex;
63 | flex-direction: column;
64 | align-items: center;
65 | width: 380px;
66 | margin: 10px;
67 | border-style: solid;
68 | border-width: 1px;
69 | border-top: none;
70 | border-bottom: none;
71 | border-color: rgba(0, 0, 0, 0.3);
72 | .hero-header {
73 | font-size: 18px;
74 | font-weight: 500;
75 | }
76 | .hero-description {
77 | width: 80%;
78 | font-size: 14px;
79 | }
80 | }
81 | .hero-3 {
82 | display: flex;
83 | flex-direction: column;
84 | align-items: center;
85 | width: 330px;
86 | margin: 10px;
87 | .hero-header {
88 | font-size: 18px;
89 | font-weight: 500;
90 | }
91 | .hero-description {
92 | width: 80%;
93 | font-size: 14px;
94 | }
95 | }
96 | }
97 | .btn-div {
98 | width: 100%;
99 | display: flex;
100 | justify-content: center;
101 | button {
102 | background: #18181b;
103 | color: white;
104 | padding: 8px;
105 | border-radius: 3px;
106 |
107 | @media only screen and (max-width: 768px) {
108 | margin-bottom: 6vh;
109 | }
110 |
111 | @media only screen and (max-width: 918px) {
112 | margin-bottom: 9vh;
113 | }
114 | }
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/client/src/components/home/home.component.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Footer from "./footer/footer.components";
3 | import HeroSection from "./hero-section/hero-section.components";
4 | import "./home.scss";
5 |
6 | //import sections of the landing page
7 | import Navbar from "./navbar/navbar.component";
8 | import SplashSection from "./splash-section/splash-section.component";
9 | import SubFooter from "./sub-footer/sub-footer.component";
10 | import SubSection from "./sub-section/sub-section.component";
11 |
12 | const Home = () => {
13 | return (
14 | What makes us special
10 |Why should you conduct your business on iSell
11 |
12 |
37 |
13 | 
14 |
20 | Support
15 |16 | We offer 24/7 Support to our Vendors. If you run into any issues 17 | with payment or customer orders, we’re only a chat away. 18 |
19 |
21 | 
22 |
28 | Sales
23 |24 | We provides the structure you need for you to grow your business 25 | sales, making you a more profitable vendor. 26 |
27 |
29 | 
30 |
36 | Easy Onboarding
31 |32 | It’s very easy to gets started as a vendor on iSELL, Create a free 33 | account to get started 34 |
35 |
38 |
39 |
40 |
15 |
22 | );
23 | };
24 |
25 | export default Home;
26 |
--------------------------------------------------------------------------------
/client/src/components/home/home.scss:
--------------------------------------------------------------------------------
1 | .homepage {
2 | button {
3 | text-transform: capitalize;
4 | cursor: pointer;
5 | border-radius: 10px !important;
6 | }
7 | background-color: #ffffff;
8 | display: flex;
9 | flex-direction: column;
10 | margin: 0 20px 0 20px;
11 |
12 | .navbar {
13 | padding-left: 30px;
14 | display: flex;
15 | justify-content: space-between;
16 | @media only screen and (max-width: 285px) {
17 | align-items: center;
18 | }
19 | border-bottom: solid 1px #a1a1aa;
20 | padding: 0 10px 0px 10px;
21 | img {
22 | width: 60px;
23 | height: 29px;
24 | margin-top: 10px;
25 | @media only screen and (max-width: 285px) {
26 | width: 40px;
27 | margin-right: 10px;
28 | height: 20px;
29 | flex: 1;
30 | }
31 | }
32 | .sign_in_and_login {
33 | display: flex;
34 | flex-direction: row;
35 |
36 | p {
37 | padding: 0 10px 0 5px;
38 | @media only screen and (max-width: 285px) {
39 | padding: 0px;
40 | width: 70px;
41 | }
42 | }
43 | button:last-child {
44 | cursor: pointer;
45 | background-color: #18181b;
46 | color: #ffffff;
47 | // padding: 5px;
48 | margin: 5px;
49 | @media only screen and (max-width: 285px) {
50 | font-size: 10px;
51 | }
52 | border-radius: 10px;
53 | }
54 | }
55 | }
56 | .splash {
57 | padding-top: 30px;
58 | display: flex;
59 | flex-direction: row;
60 | padding-left: 20px;
61 |
62 | // justify-content: space-between;
63 |
64 | .component__one {
65 | @media only screen and (max-width: 768px) {
66 | width: 100%;
67 | }
68 | width: 50vw;
69 | display: flex;
70 | flex-direction: column;
71 | .wave__component {
72 | width: 250px;
73 | @media only screen and (max-width: 285px) {
74 | width: 200px;
75 | top: 300px;
76 | padding: 5px;
77 | font-size: 13px;
78 | }
79 | padding: 10px;
80 | border-radius: 10px;
81 | color: #ffffff;
82 | background: linear-gradient(
83 | 90deg,
84 | #44bcff -0.55%,
85 | #44b0ff 22.86%,
86 | #ff44ec 48.36%,
87 | #ff44ec 73.33%,
88 | #ff675e 99.34%
89 | );
90 | .wave {
91 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
92 | animation-duration: 2.5s; /* Change to speed up or slow down */
93 | animation-iteration-count: infinite; /* Never stop waving :) */
94 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
95 | display: inline-block;
96 |
97 | @keyframes wave-animation {
98 | 0% {
99 | transform: rotate(0deg);
100 | }
101 | 10% {
102 | transform: rotate(14deg);
103 | } /* The following five values can be played with to make the waving more or less extreme */
104 | 20% {
105 | transform: rotate(-8deg);
106 | }
107 | 30% {
108 | transform: rotate(14deg);
109 | }
110 | 40% {
111 | transform: rotate(-4deg);
112 | }
113 | 50% {
114 | transform: rotate(10deg);
115 | }
116 | 60% {
117 | transform: rotate(0deg);
118 | } /* Reset for the last half to pause */
119 | 100% {
120 | transform: rotate(0deg);
121 | }
122 | }
123 | }
124 | }
125 | h2 {
126 | @media only screen and (max-width: 768px) {
127 | // line-height: 36px;
128 | margin-top: 10px;
129 | font-weight: 500;
130 | font-size: 35px;
131 | }
132 | @media only screen and (max-width: 285px) {
133 | // line-height: 22px;
134 | margin-top: 10px;
135 | font-weight: 500;
136 | font-size: 25px;
137 | }
138 | // line-height: 66px;
139 | margin-top: 10px;
140 | font-weight: 700;
141 | }
142 | button {
143 | margin-top: 20px;
144 | display: flex;
145 | cursor: pointer;
146 | padding: 10px;
147 | width: 10vw;
148 | text-transform: capitalize;
149 | text-align: center;
150 | justify-content: center;
151 | background-color: #18181b;
152 | font-size: 12px;
153 | color: white;
154 | @media only screen and (max-width: 768px) {
155 | width: fit-content;
156 | }
157 | @media only screen and (max-width: 285px) {
158 | font-size: 12px;
159 | }
160 | }
161 | .sponsor {
162 | display: flex;
163 | margin-top: 50px;
164 |
165 | p {
166 | padding: 30px;
167 | @media only screen and (max-width: 285px) {
168 | padding: 15px;
169 | }
170 | }
171 | img {
172 | width: 100px;
173 | height: 30px;
174 | padding-top: 43px;
175 | }
176 | }
177 | }
178 | .component__two {
179 | display: flex;
180 | flex-direction: column;
181 | width: 50vw;
182 | @media only screen and (max-width: 768px) {
183 | width: 100%;
184 | margin-bottom: 16vh;
185 | }
186 | margin-left: 20px;
187 | .coil {
188 | width: 150px;
189 | }
190 | .AA {
191 | @media only screen and (max-width: 768px) {
192 | width: 90%;
193 | margin-left: 10px;
194 | }
195 | width: 35vw;
196 | border-radius: 10px;
197 | margin-left: 74px;
198 | margin-top: -67px;
199 | }
200 | .products {
201 | z-index: 1;
202 | position: absolute;
203 | display: flex;
204 | flex-direction: row;
205 | .product-1 {
206 | @media only screen and (max-width: 768px) {
207 | width: 120px;
208 | top: 200px;
209 | left: -30px;
210 | }
211 | @media only screen and (max-width: 285px) {
212 | width: 80px;
213 | top: 120px;
214 | left: -40px;
215 | }
216 | @media only screen and (max-width: 920px) {
217 | top: 180px;
218 | left: 10px;
219 | }
220 | @media only screen and (max-width: 1024px) {
221 | top: 240px;
222 | left: 10px;
223 | }
224 | @media only screen and (max-width: 415px) {
225 | top: 180px;
226 | left: -40px;
227 | }
228 | position: relative;
229 | margin-left: 10px;
230 | top: 350px;
231 | display: flex;
232 | flex-direction: column;
233 | padding: 10px;
234 | width: 150px;
235 | border-radius: 10px;
236 | background-color: #ffffff;
237 | box-shadow: 193px 193px 109px rgba(0, 0, 0, 0.01),
238 | 109px 109px 92px rgba(0, 0, 0, 0.05),
239 | 48px 48px 68px rgba(0, 0, 0, 0.09),
240 | 12px 12px 38px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
241 | .product__subsection {
242 | display: flex;
243 | flex-direction: row;
244 | justify-content: space-between;
245 | padding: 5px;
246 |
247 | img {
248 | border: solid 1px #d0d5dd;
249 | width: 20px;
250 | height: 20px;
251 | padding: 10px;
252 | border-radius: 5px;
253 | }
254 | button {
255 | color: #ffffff;
256 | text-transform: capitalize;
257 | background-color: #18181b;
258 | @media only screen and (max-width: 768px) {
259 | padding: 0px;
260 | font-size: 12px;
261 | padding-left: 3px;
262 | padding-right: 3px;
263 | }
264 | border-radius: 5px;
265 | cursor: pointer;
266 | padding: 5px;
267 | // margin: 0 15px 0 15px;
268 | }
269 | }
270 | }
271 | }
272 | }
273 | }
274 | }
275 |
--------------------------------------------------------------------------------
/client/src/components/home/navbar/navbar.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //importing relevant files and modules
5 | import React from "react";
6 | // import styles
7 | import "./navbar.scss";
8 | import { useSelector } from "react-redux";
9 | import { Link, useNavigate } from "react-router-dom";
10 |
11 | // import logo
12 | const cartImage = require("../../../assets/Shape.png");
13 | const iSELLlogo = require("../../../assets/isell-logo.png");
14 | const shoppingLogo = require("../../../assets/shopping-cart.png")
15 |
16 | interface Active {
17 | isActive: boolean;
18 | }
19 | // JSX component
20 | const Navbar = (props) => {
21 | const cart = useSelector((state: any) => state.basket);
22 | const Navigate = useNavigate();
23 | console.log(props.state, 'props')
24 |
25 | const getVendorWallet = () => {
26 | Navigate('/checkout', {state: props.state})
27 | }
28 |
29 | return (
30 |
31 |
34 |
35 |
36 |
37 |
51 | );
52 | };
53 |
54 | export default Navbar;
55 |
--------------------------------------------------------------------------------
/client/src/components/home/navbar/navbar.scss:
--------------------------------------------------------------------------------
1 | .navbar {
2 | padding-left: 30px;
3 | display: flex;
4 | justify-content: space-between;
5 | border-bottom: solid 1px #a1a1aa;
6 | padding: 0 10px 0px 10px;
7 | img {
8 | width: 60px;
9 | height: 29px;
10 | margin-top: 10px;
11 | }
12 | .sign_in_and_login {
13 | display: flex;
14 | flex-direction: row;
15 |
16 | p {
17 | cursor: pointer;
18 | padding: 0 10px 0 5px;
19 | }
20 | .navbar-btn {
21 | cursor: pointer;
22 | background-color: #18181b;
23 | color: #ffffff;
24 | padding: 10px;
25 | // padding: 5px;
26 | margin: 5px;
27 | text-transform: capitalize;
28 | border-radius: 10px;
29 | }
30 | .navbar-cart {
31 | display: flex;
32 | border-radius: 100%;
33 | padding-left: 10px;
34 | padding-right: 10px;
35 | .cart {
36 | width: 30px;
37 | height: 30px;
38 | }
39 | .count {
40 | font-size: 13px;
41 | margin-top: 19px;
42 | margin-left: -25px;
43 | text-align: center;
44 | }
45 | }
46 | .navbar-nocart {
47 | display: none;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/client/src/components/home/splash-section/splash-section.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | //importing relevant files and modules
5 | import React from "react";
6 |
7 | // styles
8 | import "./splash-section.scss";
9 |
10 | // import logos
11 | const rapydLogo = require("../../../assets/rapyd-logo.png");
12 | const product1 = require("../../../assets/product-1.png");
13 | const product2 = require("../../../assets/product2.png");
14 | const cartLogo = require("../../../assets/Shape.png");
15 | const coilLogo = require("../../../assets/coil.png");
16 | const youngAAIMG = require("../../../assets/young-picture.png");
17 |
18 | //JSX component;
19 | const SplashSection = () => {
20 | return (
21 |
38 |
39 |
50 | Sign in
40 | 41 | 42 | 43 | 44 | 45 |
46 | 
47 |
49 | {cart.basket?.length}
48 |
22 |
68 | );
69 | };
70 |
71 | export default SplashSection;
72 |
--------------------------------------------------------------------------------
/client/src/components/home/splash-section/splash-section.scss:
--------------------------------------------------------------------------------
1 | .splash {
2 | padding-top: 30px;
3 | display: flex;
4 | flex-direction: row;
5 | padding-left: 20px;
6 | @media only screen and (max-width: 768px) {
7 | flex-wrap: wrap;
8 | }
9 |
10 | // justify-content: space-between;
11 |
12 | .component__one {
13 | @media only screen and (max-width: 768px) {
14 | width: 100%;
15 | }
16 | width: 50vw;
17 | display: flex;
18 | flex-direction: column;
19 | .wave__component {
20 | @media only screen and (max-width: 285px) {
21 | width: 100px;
22 | }
23 | width: 250px;
24 | padding: 10px;
25 | border-radius: 10px;
26 | color: #ffffff;
27 | background: linear-gradient(
28 | 90deg,
29 | #44bcff -0.55%,
30 | #44b0ff 22.86%,
31 | #ff44ec 48.36%,
32 | #ff44ec 73.33%,
33 | #ff675e 99.34%
34 | );
35 | .wave {
36 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
37 | animation-duration: 2.5s; /* Change to speed up or slow down */
38 | animation-iteration-count: infinite; /* Never stop waving :) */
39 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
40 | display: inline-block;
41 |
42 | @keyframes wave-animation {
43 | 0% {
44 | transform: rotate(0deg);
45 | }
46 | 10% {
47 | transform: rotate(14deg);
48 | } /* The following five values can be played with to make the waving more or less extreme */
49 | 20% {
50 | transform: rotate(-8deg);
51 | }
52 | 30% {
53 | transform: rotate(14deg);
54 | }
55 | 40% {
56 | transform: rotate(-4deg);
57 | }
58 | 50% {
59 | transform: rotate(10deg);
60 | }
61 | 60% {
62 | transform: rotate(0deg);
63 | } /* Reset for the last half to pause */
64 | 100% {
65 | transform: rotate(0deg);
66 | }
67 | }
68 | }
69 | }
70 | h2 {
71 | // line-height: 66px;
72 | margin-top: 10px;
73 | font-weight: 700;
74 | }
75 | button {
76 | margin-top: 20px;
77 | display: flex;
78 | cursor: pointer;
79 | padding: 10px;
80 | width: 10vw;
81 | border-radius: 10px;
82 | }
83 | .sponsor {
84 | display: flex;
85 | margin-top: 50px;
86 | p {
87 | padding: 30px;
88 | }
89 | img {
90 | width: 100px;
91 | height: 30px;
92 | padding-top: 43px;
93 | }
94 | }
95 | }
96 | .component__two {
97 | display: flex;
98 | flex-direction: column;
99 | width: 50vw;
100 | margin-left: 20px;
101 | @media only screen and (max-width: 768px) {
102 | width: 100%;
103 | }
104 | .coil {
105 | width: 150px;
106 | }
107 | .AA {
108 | width: 35vw;
109 | border-radius: 10px;
110 | margin-left: 74px;
111 | margin-top: -67px;
112 | }
113 | .products {
114 | z-index: 1;
115 | position: absolute;
116 | display: flex;
117 | flex-direction: row;
118 | .product-1 {
119 | position: relative;
120 | margin-left: 10px;
121 | top: 350px;
122 | display: flex;
123 | flex-direction: column;
124 | padding: 10px;
125 | width: 150px;
126 | border-radius: 10px;
127 | background-color: #ffffff;
128 | box-shadow: 193px 193px 109px rgba(0, 0, 0, 0.01),
129 | 109px 109px 92px rgba(0, 0, 0, 0.05),
130 | 48px 48px 68px rgba(0, 0, 0, 0.09), 12px 12px 38px rgba(0, 0, 0, 0.1),
131 | 0px 0px 0px rgba(0, 0, 0, 0.1);
132 | .product__subsection {
133 | display: flex;
134 | flex-direction: row;
135 | justify-content: space-between;
136 | padding: 5px;
137 |
138 | img {
139 | border: solid 1px #d0d5dd;
140 | width: 20px;
141 | height: 20px;
142 | padding: 10px;
143 | border-radius: 5px;
144 | }
145 | button {
146 | color: #ffffff;
147 |
148 | border-radius: 5px;
149 | cursor: pointer;
150 | padding: 5px;
151 | @media only screen and (max-width: 768px) {
152 | padding: 0px;
153 | }
154 | // margin: 0 15px 0 15px;
155 | }
156 | }
157 | }
158 | .product-2 {
159 | position: relative;
160 | margin-left: 10px;
161 | top: 520px;
162 | left: 280px;
163 | display: flex;
164 | @media only screen and (max-width: 768px) {
165 | width: 120px;
166 | top: 300px;
167 | left: 30px;
168 | }
169 | @media only screen and (max-width: 360px) {
170 | width: 120px;
171 | top: 300px;
172 | left: 10px;
173 | }
174 | @media only screen and (max-width: 920px) {
175 | top: 270px;
176 | left: 60px;
177 | }
178 | @media only screen and (max-width: 1024px) {
179 | top: 320px;
180 | left: 120px;
181 | }
182 | @media only screen and (max-width: 415px) {
183 | top: 290px;
184 | left: 40px;
185 | }
186 | @media only screen and (max-width: 285px) {
187 | width: 80px;
188 | top: 200px;
189 | left: -10px;
190 | }
191 | @media only screen and (max-width: 915px) {
192 | top: 290px;
193 | left: 22px;
194 | }
195 | flex-direction: column;
196 | padding: 10px;
197 | width: 150px;
198 | border-radius: 10px;
199 | background-color: #ffffff;
200 | box-shadow: 193px 193px 109px rgba(0, 0, 0, 0.01),
201 | 109px 109px 92px rgba(0, 0, 0, 0.05),
202 | 48px 48px 68px rgba(0, 0, 0, 0.09), 12px 12px 38px rgba(0, 0, 0, 0.1),
203 | 0px 0px 0px rgba(0, 0, 0, 0.1);
204 | .product__subsection {
205 | display: flex;
206 | flex-direction: row;
207 | justify-content: space-between;
208 | padding: 5px;
209 |
210 | img {
211 | border: solid 1px #d0d5dd;
212 | width: 20px;
213 | height: 20px;
214 | padding: 10px;
215 | border-radius: 5px;
216 | }
217 | button {
218 | background: #18181b;;
219 | color: #ffffff;
220 | @media only screen and (max-width: 768px) {
221 | padding: 0px;
222 | font-size: 12px;
223 | padding-left: 3px;
224 | padding-right: 3px;
225 | }
226 | border-radius: 5px;
227 | cursor: pointer;
228 | padding: 5px;
229 | // margin: 0 15px 0 15px;
230 | }
231 | }
232 | }
233 | }
234 | }
235 | }
236 |
--------------------------------------------------------------------------------
/client/src/components/home/sub-footer/sub-footer.component.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./sub-footer.scss";
3 | const SubFooter = () => {
4 | const woman = require("../../../assets/woman.png");
5 | const shadow = require("../../../assets/Shadow.png");
6 | return (
7 |
23 |
43 | 24 | {" "} 25 | Hello there 👋🏽, Welcome to isell 26 |
27 |The easiest way to sell and earn online
28 |33 | {" "} 34 | iSELL leverages on the world’s fastest and most secure payment portal 35 | to give you the best seling experience you can get. 36 |
37 | 38 |
39 | 
41 |
42 | Secure Payment by
40 |
44 | 
45 | 
46 |
67 |
47 |
66 |
48 | 
49 |
56 |
50 | 
51 |
54 |
55 |
57 | 
58 |
65 |
59 |
60 |
63 |
64 |
8 |
9 | 
13 |
46 | );
47 | };
48 |
49 | export default SubFooter;
50 |
--------------------------------------------------------------------------------
/client/src/components/home/sub-footer/sub-footer.scss:
--------------------------------------------------------------------------------
1 | .sub-footer {
2 | width: 100%;
3 | height: 100vh;
4 | display: flex;
5 | @media only screen and (max-width: 918px) {
6 | height: fit-content;
7 | margin-top: 10vh;
8 | }
9 | @media only screen and (max-width: 768px) {
10 | height: fit-content;
11 | margin-bottom: 7vh;
12 | }
13 | align-items: center;
14 | .mat {
15 | box-sizing: border-box;
16 |
17 | position: absolute;
18 | width: 339.05px;
19 | height: 349.25px;
20 | left: -121.66px;
21 | z-index: 1;
22 | opacity: 0.2;
23 | border-radius: 50%;
24 | /* blue-gray/100 */
25 |
26 | border: 7px solid #0071e1;
27 | transform: matrix(0.92, -0.77, 0.29, 0.83, 0, 0);
28 | }
29 | .woman {
30 | height: 70vh;
31 | position: absolute;
32 | margin-left: 280px;
33 | @media only screen and (max-width: 768px) {
34 | display: none;
35 | }
36 | @media only screen and (max-width: 918px) {
37 | height: 45vh;
38 | margin-left: 30px;
39 | }
40 | }
41 | .backg {
42 | height: 450px;
43 | width: 90%;
44 | margin-left: 60px;
45 | @media only screen and (max-width: 918px) {
46 | height: 40vh;
47 | }
48 | @media only screen and (max-width: 768px) {
49 | margin-left: 10px;
50 | height: 70vh;
51 | margin-bottom: 10vh;
52 | }
53 | margin-top: 75px;
54 | position: absolute;
55 | border-radius: 20px;
56 | background: #18181b;
57 | .shadow {
58 | width: 100%;
59 | margin-top: -58px;
60 | @media only screen and (max-width: 768px) {
61 | margin-top: 64.5vh;
62 | margin-bottom: 5vh;
63 | }
64 |
65 | @media only screen and (max-width: 918px) {
66 | margin-top: 18vh;
67 | margin-bottom: 5vh;
68 | }
69 | }
70 | }
71 | .sub-footer-1 {
72 | width: 60%;
73 | @media only screen and (max-width: 768px) {
74 | width: 100%;
75 | padding: 10%;
76 | }
77 | z-index: 1;
78 | margin-left: auto;
79 | display: flex;
80 | flex-wrap: wrap;
81 | flex-direction: column;
82 | align-items: center;
83 | .text-1 {
84 | margin-top: 50px;
85 | font-family: "Plus Jakarta Sans";
86 | font-style: normal;
87 | font-weight: 600;
88 | font-size: 40px;
89 |
90 | /* identical to box height, or 124% */
91 |
92 | text-align: center;
93 | color: #ffffff;
94 | }
95 | .text-2 {
96 | position: absolute;
97 | width: 485px;
98 | height: 56px;
99 | margin-top: 100px;
100 | font-family: "Inter";
101 | font-style: normal;
102 | font-weight: 400;
103 | font-size: 18px;
104 | line-height: 28px;
105 | @media only screen and (max-width: 768px) {
106 | width: fit-content;
107 | flex-wrap: wrap;
108 | padding-left: 40px;
109 | padding-right: 40px;
110 | }
111 | /* or 156% */
112 |
113 | text-align: center;
114 | color: white;
115 | mix-blend-mode: normal;
116 | }
117 | .sub-footer-2 {
118 | width: 80%;
119 | @media only screen and (max-width: 768px) {
120 | width: 100%;
121 | margin-top: 7vh;
122 | padding: 0px;
123 | }
124 | display: flex;
125 | flex-wrap: wrap;
126 | padding: 30px;
127 |
128 | .sub-footer1 {
129 | width: 39%;
130 | margin-right: 30px;
131 | background-color: white;
132 | border-radius: 14px;
133 | display: flex;
134 | align-items: center;
135 | padding-left: 8px;
136 | @media only screen and (max-width: 768px) {
137 | width: 100%;
138 | margin-bottom: 10px;
139 | margin-right: 0px;
140 | }
141 | .text1 {
142 | padding: 10px;
143 | font-weight: 700;
144 | border-radius: 5px;
145 | margin-right: 10px;
146 | background-color: black;
147 | color: white;
148 | }
149 | .text11 {
150 | flex: 1;
151 | }
152 | }
153 | .sub-footer2 {
154 | @media only screen and (max-width: 768px) {
155 | width: 100%;
156 | margin-bottom: 10px;
157 | margin-right: 0px;
158 | }
159 | width: 39%;
160 | background-color: white;
161 | border-radius: 14px;
162 | display: flex;
163 | align-items: center;
164 | padding: 8px;
165 |
166 | .text2 {
167 | padding: 10px;
168 | font-weight: 700;
169 | border-radius: 5px;
170 | margin-right: 10px;
171 | background-color: black;
172 | color: white;
173 | }
174 | .text12 {
175 | flex: 1;
176 | }
177 | }
178 | .sub-footer3 {
179 | @media only screen and (max-width: 768px) {
180 | width: 100%;
181 | margin-bottom: 10px;
182 | margin-right: 0px;
183 | margin-top: 0px;
184 | }
185 | width: 38%;
186 | background-color: white;
187 | border-radius: 14px;
188 | display: flex;
189 | align-items: center;
190 | padding: 8px;
191 | margin-top: 20px;
192 | margin-right: 30px;
193 | .text3 {
194 | padding: 10px;
195 | font-weight: 700;
196 | border-radius: 5px;
197 | margin-right: 10px;
198 | background-color: black;
199 | color: white;
200 | }
201 | .text13 {
202 | flex: 1;
203 | }
204 | }
205 | .sub-footer4 {
206 | @media only screen and (max-width: 768px) {
207 | width: 100%;
208 | width: 100%;
209 | margin-bottom: 10px;
210 | margin-right: 0px;
211 | margin-top: 0px;
212 | }
213 | width: 39%;
214 | background-color: white;
215 | border-radius: 14px;
216 | display: flex;
217 | align-items: center;
218 | padding: 10px;
219 | margin-top: 20px;
220 | .text4 {
221 | padding: 10px;
222 | font-weight: 700;
223 | border-radius: 5px;
224 | margin-right: 10px;
225 | background-color: black;
226 | color: white;
227 | }
228 | .text14 {
229 | flex: 1;
230 | }
231 | }
232 | }
233 | }
234 | }
235 |
--------------------------------------------------------------------------------
/client/src/components/home/sub-section/sub-section.component.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./sub-section.scss";
3 |
4 | const SubSection = () => {
5 | const profile = require("../../../assets/profile.png");
6 | const man = require("../../../assets/man.png");
7 | const vector1 = require("../../../assets/vector1.png");
8 | const vector2 = require("../../../assets/vector2.png");
9 | return (
10 |
10 | 
11 |
12 |
14 |
45 | How it works
15 |16 | It's very easy to create a store on iSell. Get started today 17 |
18 |
19 |
44 |
20 |
25 | 1
21 |22 | Sign up and create your first online store with ease. 23 |
24 |
26 |
31 | 2
27 |28 | Add your products to your store and their details. 29 |
30 |
32 |
37 | 3
33 |34 | Get realtime updates of your customer's activities. 35 |
36 |
38 |
43 | 4
39 |40 | Sell and earn as much as you can. Grow your business fast. 41 |
42 |
11 | 
76 | 
77 |
78 | );
79 | };
80 |
81 | export default SubSection;
82 |
--------------------------------------------------------------------------------
/client/src/components/home/sub-section/sub-section.scss:
--------------------------------------------------------------------------------
1 | .sub-section {
2 | height: 100vh;
3 | width: 100%;
4 | display: flex;
5 | align-items: center;
6 | @media only screen and (max-width: 768px) {
7 | flex-direction: column-reverse;
8 | padding: 20px;
9 | }
10 | @media only screen and (max-width: 918px) {
11 | width: 100%;
12 | height: fit-content;
13 | margin-top: 40px;
14 | padding: 20px;
15 | }
16 | .vector1 {
17 | position: absolute;
18 | right: 1px;
19 | margin-top: 150px;
20 | opacity: 0.1;
21 | width: 200px;
22 | }
23 | .vector2 {
24 | width: 170px;
25 | position: absolute;
26 | right: 10px;
27 | margin-top: -120px;
28 | opacity: 0.1;
29 | }
30 | .left-div {
31 | width: 50%;
32 | display: flex;
33 | justify-content: center;
34 | align-items: center;
35 | @media only screen and (max-width: 768px) {
36 | width: 100%;
37 | padding: 20px;
38 | margin-bottom: 7vh;
39 | }
40 | img {
41 | border-radius: 10px;
42 | width: 80%;
43 | }
44 | .details {
45 | position: absolute;
46 | width: 336.68px;
47 | height: 191px;
48 | margin-top: 220px;
49 | margin-left: 120px;
50 | /* Base/02 */
51 | @media only screen and (max-width: 768px) {
52 | margin-left: 20px;
53 | }
54 | @media only screen and (max-width: 918px) {
55 | margin-left: 20px;
56 | width: 236.68px;
57 | height: 181px;
58 | }
59 | background: #090914;
60 | box-shadow: 0px 30px 57px rgba(10, 7, 37, 0.14),
61 | 0px 4px 4px rgba(0, 0, 0, 0.03);
62 | border-radius: 10px;
63 | .first-details {
64 | color: white;
65 | display: flex;
66 | .profile-img {
67 | width: 40px;
68 | padding: 5px;
69 | height: 40px;
70 | }
71 | .text-2 {
72 | padding: 5px;
73 | padding-left: 20px;
74 | .manager-text {
75 | color: gray;
76 | }
77 | p {
78 | display: table-footer-group;
79 | }
80 | }
81 | }
82 | hr {
83 | margin-left: 10px;
84 | margin-right: 10px;
85 | }
86 | p {
87 | color: rgba(255, 252, 252, 0.875);
88 | padding-left: 10px;
89 | }
90 | }
91 | }
92 | .right-div {
93 | width: 50%;
94 | @media only screen and (max-width: 768px) {
95 | width: 100%;
96 | margin-bottom: 5vh;
97 | }
98 | @media only screen and (max-width: 918px) {
99 | margin-right: 20px;
100 | }
101 | .text-1 {
102 | color: #ff44ec;
103 | }
104 | .description {
105 | font-family: "Plus Jakarta Sans";
106 | font-style: normal;
107 | font-weight: 600;
108 | font-size: 45px;
109 | line-height: 56px;
110 | @media only screen and (max-width: 768px) {
111 | font-weight: 600;
112 | font-size: 35px;
113 | line-height: 46px;
114 | }
115 | /* or 124% */
116 |
117 | /* Base/02 */
118 |
119 | color: #090914;
120 | }
121 | .features {
122 | width: 100%;
123 | display: flex;
124 | div {
125 | width: 230px;
126 | padding: 10px;
127 | display: flex;
128 | margin-bottom: 20px;
129 | svg {
130 | padding: 4px;
131 | margin-top: 15px;
132 | }
133 | p {
134 | flex: 1;
135 | }
136 | }
137 | }
138 | button {
139 | background-color: #18181b;
140 | color: white;
141 | padding: 8px;
142 | border-radius: 3px;
143 | }
144 | }
145 | }
146 |
--------------------------------------------------------------------------------
/client/src/components/login/login.component.tsx:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | // relevant firebase imports
5 | import {
6 | signInWithGooglePopup,
7 | createUserDocumentFromAuth,
8 | checkverification,
9 | signInAuthUserWithEmailAndPassword
10 | } from "../../firebase/firebase.utils";
11 |
12 | //importing relevant modules
13 |
14 | import { useDispatch } from "react-redux";
15 | import React, { useEffect, useState } from "react";
16 | import validateInfo from "../../validation/validation2";
17 | import { Link } from "react-router-dom";
18 | import { setCurrentUser } from "../../store/user/user.reducer";
19 | import { UilEnvelope,
20 | UilLock , UilEye, UilEyeSlash } from '@iconscout/react-unicons'
21 | import { error ,closeModal} from "../../store/error-message/error-message.reducer";
22 |
23 | //importing styles
24 | import "./login.scss";
25 |
26 |
27 | //importing relevant assets
28 | const googleLogo = require("../../assets/google.png");
29 | const backgroundImage = require('../../assets/young-picture.png');
30 | const isellLogo = require('../../assets/isell-logo.png');
31 |
32 |
33 |
34 | //JSX login
35 | const Login = () => {
36 | const dispatch = useDispatch()
37 |
38 | //sign in with google
39 | const signInWithGoogle = async () => {
40 | const { user } = await signInWithGooglePopup();
41 | await createUserDocumentFromAuth(user);
42 | const verified = await checkverification(user.uid);
43 | dispatch(setCurrentUser(user.uid))
44 | if(verified) {
45 |
46 | return window.location.pathname = '/dashboard'
47 | }
48 | return window.location.pathname = '/setup'
49 | };
50 |
51 | // values of email and password initial state
52 | const [values, setValues] = useState({
53 | email: "",
54 | password: "",
55 | loginType : false
56 | });
57 |
58 | // getting the values
59 | const {email, password} = values
60 | ;
61 | // set initial error state and if there is submission
62 | const [errors, setErrors] = useState({});
63 | const [isSubmitting, setIsSubmitting] = useState(false);
64 |
65 | // handle onChange
66 | const handleChange = (e: React.ChangeEvent
12 | 
13 |
27 |
14 |
22 |
26 |
15 |
16 |
21 |
17 |
20 | Product Manager
18 |Albert Flores
19 |22 |
Customer ID
23 |Last Active
24 |Provided task
25 |
28 |
75 | Improve your sales
29 |
30 |
35 |
31 | Online sales made
easy with better tools.
32 |
36 |
73 |
74 |
37 |
52 |
54 | Get unlimited products uploads. Level up your sales.
53 |
55 |
70 |
72 | Collect payments manage your customers and many more.
71 |
156 |
228 | );
229 | };
230 |
231 | export default Login;
232 |
--------------------------------------------------------------------------------
/client/src/components/login/login.scss:
--------------------------------------------------------------------------------
1 | // Copyright iSELL 💳 2022
2 | // 17 U.S.C §§ 101-1511
3 |
4 | .login {
5 | display: flex;
6 | background-color: #ffff;
7 | flex-direction: row;
8 | justify-content: space-between;
9 |
10 | @media screen and (max-width: 1000px) {
11 | text-align: center;
12 | justify-content: center;
13 | }
14 |
15 | .login__component1 {
16 | display: flex;
17 | flex-direction: column;
18 | padding: 50px;
19 |
20 | @media screen and (max-width: 1000px) {
21 | padding-left: 0px;
22 | padding-right: 0px;
23 |
24 | }
25 | img {
26 | width : 50px;
27 | padding: 20px;
28 |
29 | @media screen and (max-width: 1000px) {
30 | padding: 0px;
31 | position: absolute;
32 | left: 30px;
33 | }
34 | }
35 | .log__body {
36 | padding-top: 75px;
37 | display: flex;
38 | flex-direction: column;
39 |
40 | .email__address {
41 | display: flex;
42 | flex-direction: row;
43 |
44 |
45 | .envelope{
46 | display: flex;
47 | position: absolute;
48 | margin-top: 10px;
49 | color: #A1A1AA;
50 | margin-left: 10px;
51 | width: 15px;
52 | }
53 | input {
54 | background: #FAFAFA;
55 | border: 1px solid #D4D4D8;
56 | border-radius: 5px;
57 | padding-left: 35px;
58 | width: 300px;
59 | height: 40px;
60 | outline: none;
61 | }
62 |
63 | }
64 | .password__tag {
65 | display: flex;
66 | flex-direction: row;
67 | padding-top: 15px;
68 |
69 | .password__lock {
70 | position: absolute;
71 | display: flex;
72 | margin-top: 10px;
73 | color: #A1A1AA;
74 | margin-left: 10px;
75 | width: 15px;
76 | }
77 | input {
78 | background: #FAFAFA;
79 | border: 1px solid #D4D4D8;
80 | border-radius: 5px;
81 | padding-left: 35px;
82 | width: 300px;
83 | height: 40px;
84 | outline: none;
85 | }
86 | .show__hide {
87 | cursor: pointer;
88 | position: relative;
89 | color: #A1A1AA;
90 | margin-left: -24px;
91 | margin-top: 10px;
92 | width: 20px;
93 |
94 | }
95 | }
96 | .forgot__password {
97 | display: flex;
98 | flex-direction: row;
99 | justify-content: space-between;
100 | .remember__me {
101 | display: flex;
102 | input {
103 | margin-top: 15px;
104 | cursor: pointer;
105 | width: 18px;
106 | height: 18px;
107 | }
108 |
109 | p{
110 | padding-left: 8px;
111 | font-size: 13px;
112 | margin-top: 17px;
113 | }
114 | }
115 | p {
116 | color : #18181B;
117 | cursor: pointer;
118 | font-size: 13px;
119 | margin-top: 17px;
120 | }
121 | }
122 | button {
123 | display: flex;
124 | cursor: pointer;
125 | background: #18181B;
126 | width: 100%;
127 | justify-content: center;
128 | padding: 7px;
129 | border-radius: 10px;
130 | font-weight: bold;
131 | outline: none;
132 | color: #fff;
133 | -webkit-appearance: button;
134 | border: none;
135 | margin-top: 17px;
136 | height: 40px;
137 | align-items: center;
138 | align-content: center;
139 | }
140 | .sign__in__google {
141 | display: flex;
142 | flex-direction: column;
143 | .conditionals {
144 | display: flex;
145 | text-align: center;
146 | justify-content: center;
147 | font-size: 13px;
148 | padding: 0px;
149 | }
150 | button {
151 |
152 | display: flex;
153 | flex-direction: row;
154 | width: 100%;
155 | text-align: center;
156 | justify-content: center;
157 | margin-top: 0px;
158 | background: rgb(72, 72, 150);
159 | .google__text {
160 | display: flex;
161 | text-transform: uppercase;
162 | }
163 | img {
164 | display: flex;
165 | width: 20px;
166 | margin-top: 2px;
167 | padding: 0px;
168 |
169 | @media screen and (max-width: 1000px) {
170 | padding: 0px;
171 | position: unset;
172 | left: unset;
173 | }
174 | }
175 | }
176 | }
177 | .signup__route {
178 | padding-top: 50px;
179 | font-size: 14px;
180 | .signup__link {
181 | cursor: pointer;
182 | padding-left: 5px;
183 | font-weight: 300;
184 | font-family: TT Firs Neue,'Courier New';
185 | }
186 | }
187 | }
188 | }
189 | .login__component2 {
190 | position: relative;
191 | border-radius: 10px;
192 | display: flex;
193 | width: 50vw;
194 | height: 100vh;
195 | background: url('../../assets/young-picture.png');
196 | background-repeat: no-repeat;
197 | background-size: cover;
198 | @media screen and (max-width : 1000px) {
199 | display: none;
200 | }
201 | .layer {
202 | background: linear-gradient(90deg, #44BCFF -0.55%, #44B0FF 22.86%, #FF44EC 48.36%, #FF44EC 73.33%, #FF675E 99.34%);
203 | opacity: 0.9;
204 | filter: blur(70.333px);
205 | transform: matrix(1, 0, 0, 1, 0, 0);
206 | position: absolute;
207 | height: 208.42px;
208 | left: 0px;
209 | top: 490.97px;
210 | width: 50vw;
211 | }
212 |
213 | }
214 | }
--------------------------------------------------------------------------------
/client/src/components/product/product-display/product-display.scss:
--------------------------------------------------------------------------------
1 | .display {
2 | width: 95%;
3 | display: grid;
4 | padding-top: 10px;
5 | margin-bottom: 10vh;
6 | margin-left: auto;
7 | margin-right: auto;
8 | grid-template-columns: repeat(5, minmax(0, 1fr));
9 | background-color: white;
10 | @media only screen and (max-width: 768px) {
11 | grid-template-columns: repeat(2, minmax(0, 1fr));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/client/src/components/product/product-display/product-display.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Item from "../product-item/product-item";
3 | import "./product-display.scss";
4 |
5 | interface Prop {
6 | products: Array
157 |
158 |
224 |
159 |
223 | Welcome back to iSELL
160 | 207 |
208 |
214 | or
209 | 213 |Don't have an account? 215 | 220 | Sign up now 221 |
222 |
225 |
226 |
227 |