From 9f60fd06b4d95cab4c5aecb9e201e81ce849588d Mon Sep 17 00:00:00 2001 From: Aime-Patrick Date: Thu, 8 Aug 2024 19:52:14 +0200 Subject: [PATCH 1/2] user should be able to becomme a seller --- .../vertical stepper/VerticalStepper.tsx | 85 +++++++++++++++++++ src/pages/SellerOnboarding.tsx | 12 +++ 2 files changed, 97 insertions(+) create mode 100644 src/components/vertical stepper/VerticalStepper.tsx create mode 100644 src/pages/SellerOnboarding.tsx diff --git a/src/components/vertical stepper/VerticalStepper.tsx b/src/components/vertical stepper/VerticalStepper.tsx new file mode 100644 index 00000000..56ad8135 --- /dev/null +++ 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 ( + + + {steps.map((step, index) => ( + + {step.label} + + {step.description} + +
+ + +
+ + + + ))} + + {activeStep === steps.length && ( + + All steps completed - you're now a seller! + + + )} + + ); +}; + +export default VerticalStepper; \ No newline at end of file diff --git a/src/pages/SellerOnboarding.tsx b/src/pages/SellerOnboarding.tsx new file mode 100644 index 00000000..62017738 --- /dev/null +++ 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 ( +
+

Become a seller

+ +
+ ) +} From 79f0a23c95acf7d1319c69fa1a2e85371d9eb7cf Mon Sep 17 00:00:00 2001 From: Aime-Patrick Date: Tue, 13 Aug 2024 02:58:07 +0200 Subject: [PATCH 2/2] user be able to become a seller --- package-lock.json | 228 ++++++++++----- package.json | 5 +- src/App.scss | 4 +- src/assets/styles/Colors.scss | 7 +- src/assets/styles/requests.scss | 54 ++++ src/assets/styles/verticalStepper.scss | 104 +++++++ src/components/ResendEmail.tsx | 22 +- .../TermsAndCondition/TermsAndCondition.tsx | 102 +++++++ .../eligibilityForm/eligibilityForm.tsx | 121 ++++++++ src/components/layout/Header.tsx | 226 ++++++++++----- .../paymentMethods/PaymentMethods.tsx | 124 +++++++++ src/components/table/Table.tsx | 5 +- src/components/user/SubmitSellerRequest.tsx | 31 +-- .../vertical stepper/VerticalStepper.tsx | 262 ++++++++++++++---- src/pages/SellerOnboarding.tsx | 22 +- src/pages/SignUp.tsx | 17 +- src/pages/UserEditProfile.tsx | 21 +- src/pages/VerifyEmail.tsx | 8 +- src/pages/admin/Dashboard.tsx | 23 +- src/pages/admin/OverView.tsx | 2 +- src/pages/admin/Requests.tsx | 102 +++++++ src/pages/admin/VewRequest.tsx | 13 + src/router.tsx | 12 +- src/store/features/admin/adminService.tsx | 13 +- src/store/features/admin/adminSlice.tsx | 60 +++- src/store/features/auth/authSlice.tsx | 17 +- src/store/features/user/userService.tsx | 12 +- src/store/features/user/userSlice.tsx | 49 ++-- src/utils/axios/axiosInstance.ts | 3 +- src/utils/types/store.d.ts | 55 +++- 30 files changed, 1411 insertions(+), 313 deletions(-) create mode 100644 src/assets/styles/requests.scss create mode 100644 src/assets/styles/verticalStepper.scss create mode 100644 src/components/TermsAndCondition/TermsAndCondition.tsx create mode 100644 src/components/eligibilityForm/eligibilityForm.tsx create mode 100644 src/components/paymentMethods/PaymentMethods.tsx create mode 100644 src/pages/admin/Requests.tsx create mode 100644 src/pages/admin/VewRequest.tsx diff --git a/package-lock.json b/package-lock.json index e837c0f3..2c2953b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,12 @@ "name": "e-commerce-ninjas-frontend", "version": "0.0.1", "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.2", "@mui/icons-material": "^5.16.4", + "@mui/joy": "^5.0.0-beta.48", "@mui/material": "^5.16.4", "@reduxjs/toolkit": "^2.2.5", "antd": "^5.19.2", @@ -2268,6 +2269,8 @@ }, "node_modules/@emotion/react": { "version": "11.13.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz", + "integrity": "sha512-WkL+bw1REC2VNV1goQyfxjx1GYJkcc23CRQkXX+vZNLINyfI7o+uUn/rTGPt/xJ3bJHd5GcljgnxHf4wRw5VWQ==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", @@ -2305,6 +2308,8 @@ }, "node_modules/@emotion/styled": { "version": "11.13.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz", + "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", @@ -2806,6 +2811,44 @@ "dev": true, "license": "MIT" }, + "node_modules/@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", + "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==", + "license": "MIT" + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.5.2", "hasInstallScript": true, @@ -3814,6 +3857,38 @@ "react": ">=16" } }, + "node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/core-downloads-tracker": { "version": "5.16.5", "license": "MIT", @@ -3846,22 +3921,20 @@ } } }, - "node_modules/@mui/material": { - "version": "5.16.5", + "node_modules/@mui/joy": { + "version": "5.0.0-beta.48", + "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.48.tgz", + "integrity": "sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.5", - "@mui/system": "^5.16.5", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.16.1", + "@mui/system": "^5.16.1", "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.5", - "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", + "@mui/utils": "^5.16.1", "clsx": "^2.1.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1", - "react-is": "^18.3.1", - "react-transition-group": "^4.4.5" + "prop-types": "^15.8.1" }, "engines": { "node": ">=12.0.0" @@ -3889,18 +3962,22 @@ } } }, - "node_modules/@mui/material/node_modules/@mui/system": { + "node_modules/@mui/material": { "version": "5.16.5", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.5", - "@mui/styled-engine": "^5.16.4", + "@mui/core-downloads-tracker": "^5.16.5", + "@mui/system": "^5.16.5", "@mui/types": "^7.2.15", "@mui/utils": "^5.16.5", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.3", - "prop-types": "^15.8.1" + "prop-types": "^15.8.1", + "react-is": "^18.3.1", + "react-transition-group": "^4.4.5" }, "engines": { "node": ">=12.0.0" @@ -3913,7 +3990,8 @@ "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3927,44 +4005,18 @@ } } }, - "node_modules/@mui/material/node_modules/@mui/utils": { - "version": "5.16.5", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/types": "^7.2.15", - "@types/prop-types": "^15.7.12", - "clsx": "^2.1.1", - "prop-types": "^15.8.1", - "react-is": "^18.3.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/material/node_modules/react-is": { "version": "18.3.1", "license": "MIT" }, "node_modules/@mui/private-theming": { - "version": "5.16.5", + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", + "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.5", + "@mui/utils": "^5.16.6", "prop-types": "^15.8.1" }, "engines": { @@ -3984,16 +4036,16 @@ } } }, - "node_modules/@mui/private-theming/node_modules/@mui/utils": { - "version": "5.16.5", + "node_modules/@mui/styled-engine": { + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", + "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/types": "^7.2.15", - "@types/prop-types": "^15.7.12", - "clsx": "^2.1.1", - "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "@emotion/cache": "^11.11.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" }, "engines": { "node": ">=12.0.0" @@ -4003,25 +4055,31 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", "react": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { - "@types/react": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { "optional": true } } }, - "node_modules/@mui/private-theming/node_modules/react-is": { - "version": "18.3.1", - "license": "MIT" - }, - "node_modules/@mui/styled-engine": { - "version": "5.16.4", + "node_modules/@mui/system": { + "version": "5.16.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", + "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", + "@mui/private-theming": "^5.16.6", + "@mui/styled-engine": "^5.16.6", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.6", + "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, @@ -4033,8 +4091,9 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@emotion/react": "^11.4.1", + "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { @@ -4043,6 +4102,9 @@ }, "@emotion/styled": { "optional": true + }, + "@types/react": { + "optional": true } } }, @@ -4058,6 +4120,42 @@ } } }, + "node_modules/@mui/utils": { + "version": "5.16.6", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", + "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/types": "^7.2.15", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "node_modules/@ndelangen/get-tarball": { "version": "3.0.9", "dev": true, diff --git a/package.json b/package.json index d13b0be5..9d6bc00d 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,12 @@ "build-storybook": "storybook build" }, "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.2", "@mui/icons-material": "^5.16.4", + "@mui/joy": "^5.0.0-beta.48", "@mui/material": "^5.16.4", "@reduxjs/toolkit": "^2.2.5", "antd": "^5.19.2", diff --git a/src/App.scss b/src/App.scss index fbf0a796..fe3cea0e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -43,4 +43,6 @@ @import "./assets/styles/liveChat.scss"; @import "./assets//styles/UserProfile.scss"; @import "./assets/styles/SellerSideProduct.scss"; -@import "./assets/styles/SellerDeleteItem.scss" +@import "./assets/styles/SellerDeleteItem.scss"; +@import "./assets/styles/verticalStepper.scss"; +@import "./assets/styles/requests.scss"; diff --git a/src/assets/styles/Colors.scss b/src/assets/styles/Colors.scss index 6aba0de3..36c32005 100644 --- a/src/assets/styles/Colors.scss +++ b/src/assets/styles/Colors.scss @@ -29,12 +29,13 @@ $border-color: #D9D9D9; $red-color:red; $grayColor:gray; $primary-color-half: rgb(248,244,244); -$red-color:red; +$red-color-light:rgb(250, 169, 169); +$red-color-dark:rgb(59, 1, 1); $menu-hover: #FE975B; -$green-color: rgb(3, 216, 3); +$green-color: rgb(15, 145, 3); $green-middle-color: rgba(3, 216, 3, 0.3); $red-middle-color: rgba(216, 8, 3, 0.3); - +$green-color-light:#97fa97; $toastify-color-light: #fff; $toastify-color-dark: #121212; diff --git a/src/assets/styles/requests.scss b/src/assets/styles/requests.scss new file mode 100644 index 00000000..fcb0085b --- /dev/null +++ b/src/assets/styles/requests.scss @@ -0,0 +1,54 @@ +.requests { + &__user{ + &__role{ + color: $green-color; + background-color: $green-color-light; + padding: .5rem 1rem; + border-radius: 2rem; + } + } + &__status { + padding: .5rem 1rem; + background-color: $primary-color-light; + border-radius: 2rem; + color: $primary-color; + + &__rejected { + padding: .5rem 1rem; + border-radius: 2rem; + background-color: $red-color-light; + color: $red-color; + } + + &__accepted { + padding: .5rem 1rem; + border-radius: 2rem; + background-color: $green-color-light; + color: $green-color; + } + } + &__view{ + display: flex; + gap: 1rem; + &__icon{ + padding: .5rem; + border-radius: 2rem; + color: $primary-color; + cursor: pointer; + } + &__icon:nth-child(2){ + color: $red-color; + &:hover{ + cursor: pointer; + background-color: $red-color-light; + } + } + } +} +.main{ + &__request{ + background-color: $white-color; + border-radius: 2rem; + width: 95%; + } +} \ No newline at end of file diff --git a/src/assets/styles/verticalStepper.scss b/src/assets/styles/verticalStepper.scss new file mode 100644 index 00000000..b7d24439 --- /dev/null +++ b/src/assets/styles/verticalStepper.scss @@ -0,0 +1,104 @@ + +.become-seller-container{ + display: flex; + align-items: center; + flex-direction: column; + height: 100vh; + background-color: $container-color; + padding: 20px; + + .horizontalStepper{ + padding: 1.5rem 0; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + background-color: $white-color; + border-radius: 1rem; + border: 1px solid $white-color; + box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); + transition: height 0.5s ease-in-out; + .MuiStepIcon-root.Mui-active{ + color: $primary-color; + } + .MuiStepIcon-root.Mui-completed{ + color: $primary-color; + } + .MuiButton-containedPrimary{ + background-color: $primary-color; + font-size: 1.5rem; + } + .MuiButton-textPrimary{ + color: $primary-color; + &:hover{ + background-color: $secondary-color-light; + } + } + .MuiStepLabel-label{ + font-size: 1.8rem; + color: $text-color; + margin-bottom: 1rem; + font-weight: bold; + + &.Mui-active{ + color: $primary-color; + } + &.Mui-completed{ + color: $primary-color; + } + } + .MuiFormControlLabel-label{ + font-size: 1.8rem; + font-weight: bold; + } + .MuiSvgIcon-root{ + color: $primary-color; + } + .MuiDialogTitle-root{ + font-size: 2.4rem !important; + font-weight: bold; + } + } + + .eligibility-form{ + padding-left: 0; + padding-right: 1rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + // flex: 1; + // flex-wrap: wrap; + + .eligibility-class-div{ + width: 100%; + display: flex; + gap: .5rem; + flex-direction: column; + label{ + font-size: 1.6rem; + color: $text-color; + } + input{ + width: 100%; + height: 3rem; + border: 1px solid $primary-color; + border-radius: 5px; + padding-left: 1rem; + font-size: 1.5rem; + color: $text-color; + } + + } + .desc{ + font-size: 1.5rem; + color: $text-color; + border: 1px solid $primary-color; + width: 100%; + height: 100%; + padding-left: 1rem; + border-radius: .5rem; + } + } + +} \ No newline at end of file diff --git a/src/components/ResendEmail.tsx b/src/components/ResendEmail.tsx index ab221e61..42ad6b92 100644 --- a/src/components/ResendEmail.tsx +++ b/src/components/ResendEmail.tsx @@ -14,7 +14,7 @@ const validationSchema = yup.object({ }) export const ResendEmail = () => { const dispatch = useAppDispatch(); - const { isSuccess, isError, isLoading, message } = useAppSelector((state) => state.auth) + const { isSuccess, isEmailResend, isLoading, message } = useAppSelector((state) => state?.auth) const initialValues = { email: "", }; @@ -22,20 +22,18 @@ export const ResendEmail = () => { initialValues, validationSchema, onSubmit: (values) => { - dispatch(resendVerificationEmail(values)).then(() => { - if(isSuccess) { - toast.success(message); - } - if (isError) { - toast.error(message) - } - }) + dispatch(resendVerificationEmail(values)) }, }) useEffect(() => { - dispatch(resetAuth()); - }, [dispatch]); - + dispatch(resetAuth()); + if(isSuccess) { + toast.success(message); + } + if (isEmailResend) { + toast.error(message) + } + }, [dispatch,isSuccess,isEmailResend,message]); return ( <> diff --git a/src/components/TermsAndCondition/TermsAndCondition.tsx b/src/components/TermsAndCondition/TermsAndCondition.tsx new file mode 100644 index 00000000..030bf41d --- /dev/null +++ b/src/components/TermsAndCondition/TermsAndCondition.tsx @@ -0,0 +1,102 @@ +/* eslint-disable */ +import React, { useEffect, useState } from "react"; +import { + Checkbox, + FormControlLabel, + Button, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Box, + Typography, +} from "@mui/material"; +interface TermsProps { + onNext: (data:{ + terms: boolean; + }) => void; +} +const TermsAndConditionsForm: React.FC = ({onNext}) => { + const [agreed, setAgreed] = useState(false); + const [open, setOpen] = useState(false); + + const handleCheckboxChange = (event: React.ChangeEvent) => { + setAgreed(event.target.checked); + }; + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + useEffect(()=>{ + onNext({terms:agreed}); + },[agreed,onNext]) + + return ( + + + } + label={ + + I agree to the{" "} + + + } + /> + + + + Terms and Conditions + + + + {/* Insert your Terms and Conditions content here */} +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + rhoncus, arcu id consectetur scelerisque, justo urna vehicula + eros, at laoreet elit nulla non ligula. Fusce bibendum sem vel + magna blandit volutpat. Ut feugiat lobortis neque at bibendum. + Pellentesque habitant morbi tristique senectus et netus et + malesuada fames ac turpis egestas. +

+

+ Quisque id lectus at dolor facilisis bibendum. Ut consequat velit + ac felis blandit, at tristique risus tempor. Nam id felis at odio + congue malesuada. Integer facilisis quam eu facilisis ullamcorper. + Praesent vitae diam nisl. +

+ + + + + + + + ); +}; + +export default TermsAndConditionsForm; diff --git a/src/components/eligibilityForm/eligibilityForm.tsx b/src/components/eligibilityForm/eligibilityForm.tsx new file mode 100644 index 00000000..ad3237fc --- /dev/null +++ b/src/components/eligibilityForm/eligibilityForm.tsx @@ -0,0 +1,121 @@ +/* eslint-disable */ +import React, { useState, ChangeEvent, FormEvent, useEffect } from 'react'; +import Modal from '@mui/joy/Modal'; +import ModalClose from '@mui/joy/ModalClose'; +import ModalDialog, { ModalDialogProps } from '@mui/joy/ModalDialog'; +import DialogTitle from '@mui/joy/DialogTitle'; +import DialogContent from '@mui/joy/DialogContent'; +import { Button } from '@mui/material'; + +interface EligibilityFormProps { + onNext: (data: { + businessName: string; + Tin: string; + rdbDocument: File | null; + businessDescription: string; // Added field + }) => void; +} + +interface FormData { + businessName: string; + Tin: string; + rdbDocument: File | null; + businessDescription: string; // Added field +} + +const EligibilityForm: React.FC = ({ onNext }) => { + const [variant, setVariant] = useState(undefined); + const [formData, setFormData] = useState({ + businessName: '', + Tin: '', + rdbDocument: null, + businessDescription: '', + }); + + const handleChange = (e: ChangeEvent) => { + const { name, value, type } = e.target; + + if (type === 'file') { + const fileInput = e.target as HTMLInputElement; + const file = fileInput.files && fileInput.files[0]; + if (file && file.type !== 'application/pdf') { + setVariant('plain'); + return; + } + setFormData({ + ...formData, + [name]: file || null, + }); + } else { + setFormData({ + ...formData, + [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value, + }); + } + }; + + + useEffect(() => { + onNext(formData); + }, [formData, onNext]); + + return ( + <> +
+
+ + +
+
+ + +
+
+ +