Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 86212440 by Jyotsna
Options

vedor login form and thank you page

1 parent d452f150
Inline Side-by-side
Showing 20 changed files with 408 additions and 124 deletions
components/layout/Footer.js
......@@ -20,7 +20,7 @@ const Footer = () => {
<div className="footer-link">
<h3>VENDOR SIGN UP</h3>
<div className="">
<Button variant="light me-3">Log In</Button>
<Button href="/login/vendor" variant="light me-3">Log In</Button>
<Button href="/signup/vendor" variant="primary">Sign Up</Button>
</div>
</div>
......
components/layout/VendorDashboardSidebar.js 0 → 100644
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => {
const router = useRouter();
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}>
Toggle Sidebar
</button> */}
<ul>
<li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
<a href="/vendor/dashboard">
<Image alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
<span>Dashboard</span>
</a>
</li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}>
<a href="#">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<span>Orders</span>
</a>
</li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<a href="#">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span>
</a>
</li>
</ul>
</div>
);
};
export default Sidebar;
\ No newline at end of file
components/login/Login.js
......@@ -8,14 +8,11 @@ import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling";
const Login = (props) => {
console.log(props.type)
const loginValidationSchema = Yup.object().shape({
email: Yup.string()
.required("Email Id is Required")
.email("Please Enter An Valid Email Id"),
password: Yup.string()
.required("Password is Required")
email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters"),
});
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
......
components/signup/Signup.js
......@@ -214,7 +214,6 @@ const Signup = props => {
<span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
</label>
<br/>
{errors.termsConditions && touched.termsConditions && <span className="form-error">{errors.termsConditions}</span>}
</div>
<div className="input-group mb-0">
......@@ -230,34 +229,6 @@ const Signup = props => {
</div>
</div>
)}
{props.type && props.type == "vendor" && otpVerified && (
<div className="row">
<div className="col-12 col-lg-4 login-div">
<div className="thankyou-div">
<span className="image-container">
<Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
</span>
<h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
<p className="mb-4">Your Profile is been created successfully</p>
</div>
<div className="form-container">
<div className="input-group mb-2">
<Button
type="button"
className="btn btn-primary btn-submit"
// onClick={() => {
// router.push("/")
// }}
>
Proceed to Dashboard
</Button>
</div>
</div>
</div>
</div>
)}
</div>
</Fragment>
);
......
components/signup/ThankYou.js 0 → 100644
import Image from "next/image";
import React, { Fragment } from "react";
import { renderImage } from "../../services/imageHandling";
import { Button } from "react-bootstrap";
const ThankYou = () => {
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
<div className="row">
<div className="col-12 col-lg-4 login-div">
<div className="thankyou-div">
<span className="image-container">
<Image src={renderImage("/images/login/success.png")} layout="fill" className="image" />
</span>
<h2 className="mt-2 px-4 mb-0">Thank you for Signing Up with Us</h2>
<p className="mb-4">Your Profile is been created successfully</p>
</div>
<div className="form-container">
<div className="input-group mb-2">
<Button
type="button"
className="btn btn-primary btn-submit"
// onClick={() => {
// router.push("/")
// }}
>
Proceed to Dashboard
</Button>
</div>
</div>
</div>
</div>
</div>
</Fragment>
);
};
export default ThankYou;
\ No newline at end of file
components/vendor/ActivityDetails.js
import Image from "next/image";
import { Formik } from "formik";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
......@@ -51,7 +52,15 @@ const ActivityDetails = () => {
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Activity Details</h2>
<div className="d-flex align-items-center justify-content-between">
<h4 className="mb-0">Activity Details</h4>
<Button type="button" variant="" className="btnAdd m-0">
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
</span>
<span>Add Activity</span>
</Button>
</div>
<hr />
<div className="form-container">
<Formik
......@@ -92,13 +101,13 @@ const ActivityDetails = () => {
handleSubmit();
}}
>
<h4>Activity Name 1</h4>
<p className="textH">Activity Name 1</p>
<div>
<p>Basic Details</p>
<p className="textH">Basic Details</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<label>Category</label>
<select
id="category"
name="category"
......
pages/signup/[type]/thankyou.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import ThankYou from "../../../components/signup/ThankYou";
export default function ThankYouPage () {
return (
<Layout>
<ThankYou />
</Layout>
);
};
\ No newline at end of file
pages/test.js 0 → 100644
// AccordionForm.js
import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
items: Yup.array().of(
Yup.object().shape({
title: Yup.string().required('Title is required'),
content: Yup.string().required('Content is required'),
})
),
});
const initialValues = {
items: [{ title: '', content: '' }],
};
const AccordionForm = () => {
const [expandedIndex, setExpandedIndex] = useState(null);
const handleToggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
};
return (
<div>
<h1>Accordion Form</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log(values);
}}
>
{({ values }) => (
<form>
<FieldArray name="items">
{({ push, remove }) => (
<>
{values.items.map((_, index) => (
<div key={index}>
<div
style={{
border: '1px solid #ccc',
padding: '10px',
marginBottom: '10px',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleToggleAccordion(index)}
>
<h3>Accordion {index + 1}</h3>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
{expandedIndex === index && (
<div>
<div>
<label htmlFor={`items.${index}.title`}>Title</label>
<Field name={`items.${index}.title`} />
<ErrorMessage name={`items.${index}.title`} component="div" />
</div>
<div>
<label htmlFor={`items.${index}.content`}>Content</label>
<Field name={`items.${index}.content`} />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div>
</div>
))}
<button type="button" onClick={() => push({ title: '', content: '' })}>
Add Accordion
</button>
</>
)}
</FieldArray>
<button type="submit">Submit</button>
</form>
)}
</Formik>
</div>
);
};
export default AccordionForm;
\ No newline at end of file
pages/vendor/dashboard/index.js
import Image from "next/image";
import React, { Fragment, useRef, useState } from "react";
import { Badge, Button, Col, Container, Nav, Navbar, Overlay, OverlayTrigger, Popover, Row } from "react-bootstrap";
import React, { useState } from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import Layout from "../../../components/layout/Layout";
import { Button } from "react-bootstrap";
import { FaPlus } from "react-icons/fa";
const VendorDashboard = () => {
const [show, setShow] = useState(false);
const [target, setTarget] = useState(null);
const ref = useRef(null);
const handleClick = (event) => {
setShow(!show);
setTarget(event.target);
};
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
setCollapsed(!collapsed);
};
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#">Your Logo</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#">Home</Nav.Link>
<Nav.Link href="#">About</Nav.Link>
<Nav.Link href="#">Services</Nav.Link>
<Nav.Link href="#">Contact</Nav.Link>
</Nav>
<Nav>
<Nav.Link ref={ref}>
{/* <FaBell /> */}
<Badge variant="danger" onClick={handleClick}>5</Badge>
<Layout>
<div className="sidebarContainer">
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} />
<div className="content">
<div className="row">
<div className="col-12 offset-lg-2 col-lg-8">
<div className="infoSent">
<div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div>
<div className="px-3">
<p className="p1">Business information sent successfully.</p>
<p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
</div>
<div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</div>
</div>
</div>
<Overlay
show={show}
target={target}
placement="bottom"
container={ref}
containerPadding={0}
className="bottom"
>
<Popover id="popover-contained">
<Popover.Header as="h3">Popover bottom</Popover.Header>
<Popover.Body>
<strong>Holy guacamole!</strong> Check this info.
</Popover.Body>
</Popover>
</Overlay>
</Nav.Link>
</Nav>
</Navbar>
<Fragment>
<header className="header_wrap">
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#">
<div className="d-flex justify-content-center py-4">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/zango-logo.svg" />
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
</span>
</Navbar.Brand>
{/* <Navbar.Toggle aria-controls="navbarScroll" /> */}
{/* <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav>
</Navbar.Collapse> */}
</Container>
</Navbar>
</header>
<Container fluid>
<Row>
<Col xs={12} md={3} lg={2} className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<ul>
<li><img src="/images/vendor/orders.svg" className="me-1 img-fluid" /> Orders</li>
<li><img src="/images/vendor/activities.svg" className="me-1 img-fluid" /> Activities</li>
</ul>
</Col>
<Col className="content">
{/* <Button onClick={toggleSidebar} className="toggle-btn">
{collapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
</Button> */}
</Col>
</Row>
</Container>
</Fragment>
</>
</div>
<div className="text-center py-2 mb-5">
<p className="p3">No information is available right now</p>
<Button type="button" variant="" className="btnAdd" disabled>
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span>
{/* <FaPlus className="me-2" /> */}
<span>Add Activity</span>
</Button>
<Button type="button" variant="" className="btnAdd">
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span>
{/* <FaPlus className="me-2" /> */}
<span>Add Activity</span>
</Button>
</div>
</div>
</div>
</div>
</Layout>
);
};
......
pages/vendor/test.js 0 → 100644
File mode changed
public/fonts/Poppins-Regular.ttf 0 → 100644
No preview for this file type
public/images/vendor/icon-close.svg 0 → 100644
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.9997 5.5865L11.9495 0.636719L13.3637 2.05093L8.4139 7.0007L13.3637 11.9504L11.9495 13.3646L6.9997 8.4149L2.04996 13.3646L0.635742 11.9504L5.5855 7.0007L0.635742 2.05093L2.04996 0.636719L6.9997 5.5865Z" fill="#2B3642"/>
</svg>
public/images/vendor/icon-dashboard.svg 0 → 100644
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_293_1320)">
<path d="M-0.000107288 7.82227C0.00739288 7.83486 0.0180173 7.84687 0.0220799 7.86035C0.18958 8.44922 0.606143 8.75185 1.25645 8.75215C2.77177 8.75303 4.28708 8.75215 5.80239 8.75215C5.90646 8.75215 6.01083 8.75303 6.11489 8.75215C6.83458 8.74453 7.33021 8.28105 7.33521 7.60693C7.33864 7.1335 7.33583 6.65977 7.33583 6.18633C7.33583 4.56563 7.33583 2.94492 7.33583 1.32393C7.33583 0.547852 7.11802 0.257227 6.34364 0H0.968643C0.698643 0.0793945 0.43083 0.175781 0.270205 0.404883C0.156143 0.56748 0.0883303 0.759082 -0.000107288 0.9375V7.82227ZM0.999893 4.38135C0.999893 3.31729 0.999893 2.25352 0.999893 1.18945C0.999893 0.973828 1.03958 0.9375 1.27427 0.9375C2.87239 0.9375 4.47052 0.9375 6.06864 0.9375C6.28927 0.9375 6.33521 0.979102 6.33521 1.18389C6.33552 3.31172 6.33552 5.43955 6.33521 7.56738C6.33521 7.76982 6.28646 7.81465 6.06614 7.81465C4.46802 7.81494 2.86989 7.81494 1.27177 7.81465C1.04271 7.81465 0.99958 7.77363 0.99958 7.5583C0.99958 6.49922 0.99958 5.44014 0.99958 4.38105L0.999893 4.38135Z" fill="white"/>
<path d="M16 7.17771C15.9766 7.10828 15.9556 7.03796 15.9291 6.9697C15.7634 6.54226 15.3459 6.2531 14.8369 6.25076C13.1706 6.24373 11.5041 6.24167 9.83781 6.25076C9.14406 6.25457 8.66594 6.73914 8.66469 7.4074C8.66219 8.65222 8.66406 9.89705 8.66406 11.1419C8.66406 11.9815 8.66406 12.8212 8.66406 13.6608C8.66406 14.4524 8.87531 14.7375 9.65625 14.9994H15C15.3687 14.9171 15.6741 14.7486 15.8563 14.4252C15.9156 14.3194 15.9528 14.2028 16 14.0912C16 11.7864 16 9.48191 16 7.17712V7.17771ZM15 10.6145C15 11.6786 15 12.7424 15 13.8064C15 14.0253 14.9606 14.0625 14.73 14.0625C13.1319 14.0625 11.5338 14.0625 9.93563 14.0625C9.70781 14.0625 9.66437 14.0218 9.66437 13.8052C9.66437 11.6871 9.66437 9.56921 9.66437 7.45105C9.66437 7.22634 9.70781 7.18533 9.945 7.18533C11.5378 7.18533 13.1309 7.18533 14.7237 7.18533C14.9606 7.18533 15 7.224 15 7.45222C15 8.50632 15 9.56042 15 10.6148V10.6145Z" fill="white"/>
<path d="M9.65656 0C9.4625 0.0884766 9.24812 0.151465 9.07875 0.270996C8.78719 0.47666 8.66625 0.77959 8.66531 1.11885C8.66281 2.04141 8.65812 2.96396 8.66656 3.88652C8.6725 4.5293 9.16781 4.99717 9.85406 5.0001C11.5047 5.00713 13.155 5.00537 14.8056 5.00068C15.3931 4.99893 15.8263 4.66963 15.9716 4.13965C15.9778 4.1165 15.9903 4.09482 16 4.07227C16 3.01758 16 1.96289 16 0.908203C15.9809 0.858984 15.9603 0.810059 15.9428 0.760547C15.8369 0.463184 15.6356 0.243164 15.3328 0.10957C15.2356 0.0667969 15.1322 0.0360352 15.0316 0C13.24 0 11.4481 0 9.65656 0ZM12.3256 0.9375C13.1375 0.9375 13.9494 0.937207 14.7612 0.9375C14.9503 0.9375 15 0.984668 15 1.16367C15.0006 2.05166 15.0006 2.93965 15 3.82764C15 4.01572 14.9509 4.06406 14.7541 4.06406C13.1406 4.06465 11.5272 4.06465 9.91406 4.06406C9.71656 4.06406 9.665 4.01455 9.66469 3.82793C9.66375 2.94492 9.66375 2.06162 9.66469 1.17861C9.66469 0.982031 9.71313 0.937207 9.92094 0.937207C10.7225 0.936914 11.5241 0.937207 12.3253 0.937207L12.3256 0.9375Z" fill="white"/>
<path d="M6.34372 15C6.45528 14.9619 6.57247 14.9341 6.67747 14.8842C7.10122 14.683 7.32685 14.351 7.33185 13.9101C7.34216 12.9679 7.3456 12.0258 7.33122 11.0836C7.32153 10.4513 6.81341 10.0016 6.12997 9.9987C4.93247 9.99372 3.73466 9.99724 2.53716 9.99724C2.11028 9.99724 1.6831 9.99636 1.25622 9.99724C0.605596 9.9987 0.189657 10.3002 0.0221572 10.889C0.0184073 10.9025 0.00747013 10.9145 -3.00407e-05 10.9271V14.0619C0.0815325 14.2324 0.14247 14.4155 0.249657 14.5702C0.422157 14.8186 0.701532 14.93 0.99997 14.9994H6.34372V15ZM3.67091 14.0625C2.86935 14.0625 2.06778 14.0625 1.26653 14.0625C1.04278 14.0625 1.00028 14.0235 1.00028 13.8176C0.99997 12.9392 1.00028 12.0609 1.00028 11.1829C1.00028 10.979 1.04622 10.9356 1.26622 10.9356C2.86934 10.9353 4.47216 10.9353 6.07528 10.9356C6.28466 10.9356 6.3356 10.9825 6.33591 11.1756C6.33685 12.0586 6.33685 12.9419 6.33591 13.8249C6.33591 14.0182 6.28622 14.0625 6.0756 14.0628C5.27403 14.0631 4.47247 14.0628 3.67122 14.0628L3.67091 14.0625Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_293_1320">
<rect width="16" height="15" fill="white" transform="matrix(-1 0 0 1 16 0)"/>
</clipPath>
</defs>
</svg>
public/images/vendor/icon-plus.svg 0 → 100644
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6V0H8V6H14V8H8V14H6V8H0V6H6Z" fill="white"/>
</svg>
public/images/vendor/icon-tick.svg 0 → 100644
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.20969 8.83713L14.4345 0.612366L15.6998 1.87771L6.20969 11.3678L0.515625 5.67378L1.78098 4.40845L6.20969 8.83713Z" fill="white"/>
</svg>
styles/fonts.css
......@@ -203,4 +203,11 @@
font-style: normal;
font-weight: 700;
src: local('Sofia Pro Bold'), url('../public/fonts/SofiaPro-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Poppins Regular';
font-style: normal;
font-weight: 400;
src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype');
}
\ No newline at end of file
styles/globals.css
......@@ -1207,6 +1207,7 @@ span.form-error {
font-family: "Sofia Pro Bold";
margin-bottom: 1.5rem;
}
.business-details .textS {
font-size: 12px;
line-height: 12px;
......@@ -1269,6 +1270,136 @@ span.form-error {
}
/* vendor dashboar */
.sidebarContainer {
display: flex;
}
.sidebar {
width: 250px;
height: auto;
background-color: #242932;
color: #fff;
transition: width 0.3s ease;
margin-top: -20px;
padding-top: 3rem;
}
.sidebar.collapsed {
width: 50px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar ul li {
padding: 1rem 2rem;
}
.sidebar ul li.active {
background-color: #393E49;
}
.sidebar ul li a {
font-family: "Poppins Regular";
font-size: 14px;
line-height: 21px;
letter-spacing: 0em;
text-align: left;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
}
.sidebar ul li a span {
padding-left: 1rem;
padding-top: 5px;
}
.sidebarContainer .content {
flex: 1;
padding: 3rem 1rem;
}
/*-------------------------*/
.infoSent {
border: 1px solid #0070BD;
border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340;
background-color: #F0FAFF;
display: flex;
align-items: center;
padding: 1rem;
}
.bgCircleBlue {
width: 34px;
height: 34px;
background-color: #4979C1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.p1 {
font-family: "Poppins Regular";
font-size: 20px;
line-height: 27px;
letter-spacing: 0em;
text-align: left;
color: #000000;
}
.p2 {
font-family: "Poppins Regular";
font-size: 13px;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: #424242;
}
.p3 {
font-family: "Poppins Regular";
font-size: 26px;
line-height: 39px;
letter-spacing: 0em;
text-align: center;
color: #000000;
}
.btnAdd {
background-color: #0070BD !important;
/* border: 1px solid #0070BD; */
padding: 1rem 2rem !important;
border-radius: 10px !important;
font-family: "Sofia Pro Bold";
font-size: 16px !important;
line-height: 21px;
letter-spacing: 0em;
text-align: center;
color: #FFFFFF !important;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem auto;
}
.btnAdd:disabled {
background-color: #A4AFB7 !important;
color: #FFFFFF;
border: none;
}
.btnAdd:hover, .btnAdd:focus, .btnAdd:active {
border: 1px solid #0070BD;
}
/*--------------------------*/
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!