Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 56893155 by Ravindra Kanojiya
Options

css conflict merge

2 parents 4e17bce3 3f5e62d5
Expand all
Inline Side-by-side
Showing 29 changed files with 815 additions and 121 deletions
components/layout/Header.js
......@@ -6,13 +6,14 @@ import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
const Header = () => {
const { user, error } = useSelector(state => state.loadedUser);
const dispatch = useDispatch();
// console.log("user", user);
const [isSticky, setIsSticky] = useState(false);
const router = useRouter();
useEffect(() => {
const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold
......@@ -66,8 +67,10 @@ const Header = () => {
</div>
<p>{user.phone}</p>
<Button
onClick={() => {
onClick={async () => {
signOut({ redirect: false });
await router.push("/")
window.location.reload()
}}
className="me-3"
variant="primary"
......@@ -77,10 +80,14 @@ const Header = () => {
</div>
) : (
<div>
<Button className="me-3" variant="primary">
<Button onClick={()=> {
router.push("/signup/user")
}} className="me-3" variant="primary">
Sign Up
</Button>
<Button className="" variant="primary">
<Button onClick={()=> {
router.push("/login/user")
}} className="" variant="primary">
Log In
</Button>
</div>
......
components/layout/Layout.js
......@@ -5,7 +5,7 @@ import Footer from "./Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => {
const dispatch = useDispatch();
......
components/layout/VendorDashboardSidebar.js
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useState } from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => {
const Sidebar = () => {
const router = useRouter();
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}>
......@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => {
</a>
</li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}>
<a href="#">
<a href="/vendor/orders">
<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="#">
<a href="/vendor/activities">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span>
</a>
......
components/signup/Signup.js
import React, { useState, useRef } from "react";
import React, { useState, useRef, useEffect } from "react";
import { Formik } from "formik";
import Link from "next/link";
import { Fragment } from "react";
......@@ -18,14 +18,12 @@ import { Loader } from "react-bootstrap-typeahead";
const Signup = props => {
console.log(props.type);
const router = useRouter();
const [otp, setOtp] = useState(new Array(4).fill(""));
const [isOtpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
const [loading, setLoading] = useState();
const dispatch = useDispatch();
const router = useRouter()
const otpValue = useRef();
const changeOtpRef = value => {
console.log(otpValue);
......@@ -76,7 +74,6 @@ const Signup = props => {
}
};
// console.log("otp", otp);
return (
<Fragment>
......@@ -252,7 +249,7 @@ const Signup = props => {
)}
<div className="input-group mb-0">
<Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}>
{loading ? <Loader/> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
{loading ? <Loader /> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
</Button>
</div>
</Form>
......
components/vendor/ActivityListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Activities</h2>
<p>View all the Activities</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Category</th>
<th>Sub Category</th>
<th>Name</th>
<th>Location</th>
<th>Price</th>
<th>Place</th>
<th>Gift</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Adventure</td>
<td>Ice-Skating</td>
<td>Ice-Skating in NY</td>
<td>North Avenue</td>
<td>$ 479</td>
<td>Outdoor</td>
<td>Allowed</td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={10}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default ActivityListing;
components/vendor/OrderListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Orders</h2>
<p>View all the orders</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Order ID</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>ID_8797878</td>
<td>29 Jan 2024</td>
<td>Edge City Climb <span>+3more</span></td>
<td>$ 499</td>
<td><div className="statusDiv processing">Processing</div></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default OrderListing;
package.json
......@@ -27,6 +27,7 @@
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3",
"react-loading-icons": "^1.1.0",
"react-multi-carousel": "^2.8.2",
"react-otp-input": "^3.1.1",
"react-owl-carousel": "^2.3.3",
......@@ -34,6 +35,7 @@
"react-player": "^2.11.0",
"react-rating": "^2.0.5",
"react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0",
......
pages/test.js
// 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: '' }],
};
import { Formik, Form, Field, FieldArray } from 'formik';
const AccordionForm = () => {
const [expandedIndex, setExpandedIndex] = useState(null);
const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const handleToggleAccordion = (index) => {
const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
};
return (
<div>
<h1>Accordion Form</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
initialValues={{
items: [{ title: '', content: '' }]
}}
onSubmit={(values) => {
console.log(values);
}}
>
{({ values }) => (
<form>
<Form>
<FieldArray name="items">
{({ push, remove }) => (
<>
<div>
{values.items.map((_, index) => (
<div key={index}>
<div
style={{
border: '1px solid #ccc',
padding: '10px',
marginBottom: '10px',
}}
<AccordionItem
index={index}
expanded={expandedIndex === index}
toggleAccordion={() => toggleAccordion(index)}
remove={() => remove(index)}
>
<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>
)}
<Field name={`items.${index}.title`} placeholder="Title" />
<Field name={`items.${index}.content`} placeholder="Content" />
</div>
</AccordionItem>
</div>
))}
<button type="button" onClick={() => push({ title: '', content: '' })}>
Add Accordion
<button
type="button"
onClick={() => {
push({ title: '', content: '' });
setExpandedIndex(values.items.length);
}}
>
Add Item
</button>
</>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</form>
</Form>
)}
</Formik>
</div>
);
};
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<button type="button" onClick={toggleAccordion}>
{expanded ? '-' : '+'}
</button>
<button type="button" onClick={remove}>Remove</button>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default AccordionForm;
pages/vendor/activities/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityListing from "../../../components/vendor/ActivityListing";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
pages/vendor/business-details/index.js
......@@ -21,17 +21,16 @@ export default function BusinessDetailsPage () {
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
await store.dispatch(loadUser());
return {
props: {},
props: {}
};
});
\ No newline at end of file
pages/vendor/dashboard/index.js
import Image from "next/image";
import React, { useState } from "react";
import React, { useEffect, 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";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
import { useRouter } from "next/router";
const VendorDashboard = () => {
const { user, error } = useSelector(state => state.loadedUser);
const router = useRouter();
console.log("user", user);
const [collapsed, setCollapsed] = useState(false);
const ApprovalStatus = () => {
if (user) {
switch (user.approved) {
case "approved":
return <></>;
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
case "rejected":
return (
<>
<div class="alert alert-danger" role="alert">
Your profile has been rejected! Please contact the admin for more details!
</div>
</>
);
case "pending":
return (
<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="col-12 offset-lg-2 col-lg-8 ">
<div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
{/* <div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div> */}
<div className="text-center">
<p className="p1 text-center">Business information sent successfully.</p>
<p className="p2 text-center">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
</div>
{/* <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> */}
</div>
{/* <div className="infoSent">
<div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div>
......@@ -31,9 +55,27 @@ const VendorDashboard = () => {
<div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</div>
</div> */}
</div>
</div>
</>
);
case "none":
return <></>;
default:
break;
}
}
};
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<div className="row">
<ApprovalStatus />
<div className="d-flex justify-content-center py-4">
<span className="image-container">
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
......@@ -41,14 +83,15 @@ const VendorDashboard = () => {
</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">
<Button
onClick={() => {
router.push("/vendor/activity-details");
}}
type="button"
variant=""
className="btnAdd"
disabled={user?.approved != "approved"}
>
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span>
......@@ -64,3 +107,15 @@ const VendorDashboard = () => {
};
export default VendorDashboard;
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
await store.dispatch(loadUser());
return {
props: {}
};
});
pages/vendor/orders/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import OrderListing from "../../../components/vendor/OrderListing";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function OrderListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<OrderListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
public/fonts/Poppins-SemiBold.ttf 0 → 100644
No preview for this file type
public/images/vendor/icon-filter.svg 0 → 100644
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.17071 16C4.58254 14.8348 5.69378 14 7 14C8.3062 14 9.4175 14.8348 9.8293 16H20V18H9.8293C9.4175 19.1652 8.3062 20 7 20C5.69378 20 4.58254 19.1652 4.17071 18H0V16H4.17071ZM10.1707 9C10.5825 7.83481 11.6938 7 13 7C14.3062 7 15.4175 7.83481 15.8293 9H20V11H15.8293C15.4175 12.1652 14.3062 13 13 13C11.6938 13 10.5825 12.1652 10.1707 11H0V9H10.1707ZM4.17071 2C4.58254 0.83481 5.69378 0 7 0C8.3062 0 9.4175 0.83481 9.8293 2H20V4H9.8293C9.4175 5.16519 8.3062 6 7 6C5.69378 6 4.58254 5.16519 4.17071 4H0V2H4.17071Z" fill="white"/>
</svg>
public/images/vendor/icon-img.svg 0 → 100644
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2H2V16L11.2923 6.70649C11.6828 6.31595 12.3159 6.31591 12.7065 6.70641L18 12.0104V2ZM0 0.9934C0 0.44476 0.45531 0 0.9918 0H19.0082C19.556 0 20 0.44495 20 0.9934V17.0066C20 17.5552 19.5447 18 19.0082 18H0.9918C0.44405 18 0 17.5551 0 17.0066V0.9934ZM6 8C4.89543 8 4 7.1046 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6C8 7.1046 7.10457 8 6 8Z" fill="black"/>
</svg>
public/images/vendor/icon-more-vertical.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8Z" fill="#686767"/>
</svg>
public/images/vendor/icon-view.svg 0 → 100644
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0003 0C16.3924 0 20.8784 3.87976 21.8189 9C20.8784 14.1202 16.3924 18 11.0003 18C5.60812 18 1.12215 14.1202 0.181641 9C1.12215 3.87976 5.60812 0 11.0003 0ZM11.0003 16C15.2359 16 18.8603 13.052 19.7777 9C18.8603 4.94803 15.2359 2 11.0003 2C6.7646 2 3.14022 4.94803 2.22278 9C3.14022 13.052 6.7646 16 11.0003 16ZM11.0003 13.5C8.51498 13.5 6.50026 11.4853 6.50026 9C6.50026 6.51472 8.51498 4.5 11.0003 4.5C13.4855 4.5 15.5003 6.51472 15.5003 9C15.5003 11.4853 13.4855 13.5 11.0003 13.5ZM11.0003 11.5C12.381 11.5 13.5003 10.3807 13.5003 9C13.5003 7.6193 12.381 6.5 11.0003 6.5C9.6196 6.5 8.50026 7.6193 8.50026 9C8.50026 10.3807 9.6196 11.5 11.0003 11.5Z" fill="black"/>
</svg>
public/images/vendor/minus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 11H5V13H19V11Z" fill="black"/>
</svg>
public/images/vendor/plus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="black"/>
</svg>
redux/actions/activityAction.js 0 → 100644
import axios from "axios";
import { getSession } from "next-auth/react";
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS } from "../constants/activitiesConstants";
export const createActivity = data => async dispatch => {
const session = await getSession();
try {
if (!session) {
return "You are not authenticated, please log in.";
}
dispatch({
type: CREATE_ACTIVITY_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
let activityData = {
data: {
...data
}
};
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences`);
dispatch({
type: CREATE_ACTIVITY_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: CREATE_ACTIVITY_FAIL,
payload: error.response.data
});
}
};
redux/actions/userActions.js
......@@ -381,3 +381,26 @@ export const finishEndUserOtpVerification = async verificationData => {
return await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-users/finish-otp-verification`, verificationData, config);
};
export const updateUserApprovalStatus = async ({ status }) => {
const session = await getSession();
if (!session) {
console.log("You are not authorized, please login");
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const response = await axios.put(
`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/users/${session.id}`,
{
approved: status
},
config
);
return response;
};
redux/constants/activitiesConstants.js 0 → 100644
export const CREATE_ACTIVITY_REQUEST = "CREATE_ACTIVITY_REQUEST"
export const CREATE_ACTIVITY_SUCCESS = "CREATE_ACTIVITY_SUCCESS"
export const CREATE_ACTIVITY_FAIL = "CREATE_ACTIVITY_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/activitiesReducer.js 0 → 100644
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS } from "../constants/activitiesConstants";
import { CLEAR_ERRORS } from "../constants/vendorConstants";
export const createActivityReducer = (state = {}, action) => {
switch (action.type) {
case CREATE_ACTIVITY_REQUEST:
return { loading: true };
case CREATE_ACTIVITY_SUCCESS:
return {
loading: false,
activityData: action.payload
};
case CREATE_ACTIVITY_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file
redux/reducers/reducers.js
......@@ -5,6 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed
import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer } from "./activitiesReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -22,6 +23,7 @@ const reducers = combineReducers({
loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
activityData: createActivityReducer,
});
export default reducers;
styles/fonts.css
......@@ -211,3 +211,9 @@
font-weight: 400;
src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Poppins SemiBold';
font-style: normal;
font-weight: 600;
src: local('Poppons SemiBold'), url('../public/fonts/Poppins-SemiBold.ttf') format('truetype');
}
\ No newline at end of file
styles/globals.css
......@@ -598,7 +598,8 @@ p {
line-height: 20px;
}
span.form-error {
span.form-error,
.form-error {
color: red;
font-size: 0.8rem;
font-family: "Sofia Pro Light";
......@@ -671,10 +672,12 @@ span.form-error {
font-size: 15px;
line-height: normal;
margin-bottom: 10px;
width: 100%;
}
.form-container input,
.form-container select {
.form-container select,
.form-container textarea {
width: 100%;
border-radius: 10px !important;
border: 0.814px solid #000;
......@@ -682,14 +685,14 @@ span.form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
}
.form-container input:focus,
.form-container select:focus {
.form-container select:focus,
.form-container textarea {
box-shadow: none;
outline: unset;
}
......@@ -699,6 +702,11 @@ span.form-error {
background-color: transparent;
}
.form-container textarea {
resize: none;
height: auto;
}
.contact-number {
width: 100%;
display: flex;
......@@ -820,23 +828,23 @@ span.form-error {
}
.check-container .checkmark:after {
left: 7px;
top: 0px;
width: 4px;
height: 11px;
left: 6px;
top: 1px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkmark:after {
.check-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-container input {
position: absolute;
/* position: absolute; */
opacity: 0;
cursor: pointer;
height: 0;
......@@ -847,7 +855,7 @@ span.form-error {
background-color: #fff;
}
.checkmark {
.check-container .checkmark {
position: absolute;
top: 0;
left: 0;
......@@ -931,7 +939,6 @@ span.form-error {
.uploadProfileImage p {
font-family: "Sofia Pro Bold";
font-size: 20px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0em;
color: #fff;
......@@ -1157,17 +1164,17 @@ span.form-error {
/*----- vendor business details -------*/
.content-div {
padding: 2rem 3rem 1rem;
padding: 2rem 2rem 1rem;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340;
position: relative;
min-height: 600px;
}
.content-div h2 {
font-family: "Sofia Pro Bold";
font-size: 36px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1176,7 +1183,6 @@ span.form-error {
.content-div h4 {
font-family: "Sofia Pro Light";
font-size: 30px;
font-weight: 300;
line-height: 37px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1234,7 +1240,7 @@ span.form-error {
.business-details .textS {
font-size: 12px;
line-height: 12px;
line-height: 13px;
margin-top: 10px;
margin-bottom: 5px;
}
......@@ -1269,7 +1275,6 @@ span.form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
......@@ -1298,13 +1303,13 @@ span.form-error {
}
.sidebar {
width: 250px;
width: 210px;
height: auto;
background-color: #242932;
color: #fff;
transition: width 0.3s ease;
margin-top: -20px;
padding-top: 3rem;
padding-top: 2rem;
}
.sidebar.collapsed {
......@@ -1318,7 +1323,7 @@ span.form-error {
}
.sidebar ul li {
padding: 1rem 2rem;
padding: 0.85rem 2rem;
}
.sidebar ul li.active {
......@@ -1344,7 +1349,7 @@ span.form-error {
.sidebarContainer .content {
flex: 1;
padding: 3rem 1rem;
padding: 2rem 1rem;
}
/*-------------------------*/
......@@ -1398,7 +1403,7 @@ span.form-error {
.btnAdd {
background-color: #0070bd !important;
/* border: 1px solid #0070BD; */
padding: 1rem 2rem !important;
padding: 0.75rem 2rem !important;
border-radius: 10px !important;
font-family: "Sofia Pro Bold";
font-size: 16px !important;
......@@ -1411,6 +1416,7 @@ span.form-error {
justify-content: center;
margin: 1rem auto;
}
.btnAdd:disabled {
background-color: #a4afb7 !important;
color: #ffffff;
......@@ -1422,6 +1428,286 @@ span.form-error {
border: 1px solid #0070bd;
}
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
border: 1px solid #0070BD;
}
.activityDetails .accordionItem {
padding: 1rem;
border-bottom: 1px solid #ECECEC;
}
.activityDetails .accordionItem:last-child {
border-bottom: none;
}
/* The radioContainer */
.radioContainer {
display: block;
position: relative;
cursor: pointer;
padding-left: 25px;
font-family: "Sofia Pro Regular";
font-size: 15px;
line-height: 15px;
letter-spacing: 0em;
text-align: left;
color: #000;
margin-top: 5px;
}
/* Hide the browser's default radio button */
.radioContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.form-container .radioContainer input {
height: 0;
width: 0;
}
/* Create a custom radio button */
.radioContainer .checkmark {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-55%);
height: 20px;
width: 20px;
background-color: #FFF;
border-radius: 50%;
border: 1px solid #75777B;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
background-color: #FFF;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
color: #0070BD;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radioContainer .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #0070BD;
transform: translate(-50%, -50%);
}
/*--------- multiselect dropdown --------*/
.css-b62m3t-container {
width: 100%;
}
.select__control {
border: 0.81px solid #000 !important;
border-radius: 10px !important;
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
min-height: 45px !important;
height: 45px !important;
}
.select__value-container.select__value-container--is-multi,
.select__input-container {
height: 45px !important;
}
.select__input-container {
margin: 0 !important;
}
.select__control.select__control--is-focused {
border-color: #000 !important;
box-shadow: unset !important;
}
.select__menu {
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
}
.select__indicator.select__dropdown-indicator svg {
fill: #000 !important;
stroke: #000 !important;
}
/*---- activity images upload----*/
.customUploadImage {
position: relative;
display: inline-block;
border: .81px solid #000;
border-radius: 10px;
width: 51px;
height: 51px;
margin-right: 1rem;
padding: 8px;
cursor: pointer;
}
.customUploadImage label {
margin: 0 auto !important;
padding: 0;
}
.customUploadImage img {
min-width: 20px !important;
min-height: 18px !important;
}
.customUploadImage input[type="file"] {
position: absolute;
z-index: 2;
margin: 0;
opacity: 0;
top: 0;
left: 0;
}
.removeImage {
position: absolute;
top: -5px;
right: -5px;
cursor: pointer;
}
.textAdd {
font-family: "Sofia Pro Light";
font-size: 15px !important;
line-height: 15.17px !important;
text-align: left;
color: #0070BD;
text-decoration: underline;
text-wrap: nowrap;
margin-top: 10px;
cursor: pointer;
}
/*--------- orders listing -----------*/
.rightContent h2 {
font-family: "Sofia Pro Bold";
font-size: 32px;
line-height: 40px;
letter-spacing: 0em;
margin-bottom: 0;
}
.rightContent .btn {
padding: 10px 15px !important;
}
.listingTable {
padding: 0 10px;
border-collapse: separate;
border-spacing: 0 12px;
}
.listingTable thead tr th {
background-color: #E9EEF0;
padding: 12px;
color: #1C1C1E;
font-family: "Poppins SemiBold";
font-size: 16px;
line-height: 25px;
}
.listingTable thead tr th:first-child {
border-radius: 12px 0 0 0;
}
.listingTable thead tr th:last-child {
border-radius: 0 12px 0 0;
}
.listingTable .check-container .checkmark {
top: 5px;
border: 1px solid rgba(218, 220, 224, 1)
}
.listingTable .check-container .checkmark:after {
left: 7px;
top: 2px;
}
.listingTable tbody tr {
box-shadow: 0px 4px 4px 0px rgba(156, 156, 156, 0.15);
}
.listingTable tbody tr:last-child {
border-radius: 0 0 12px 12px;
}
.listingTable tbody tr:last-child td {
color: rgba(178, 178, 182, 1);
}
.listingTable tbody tr td {
padding: 12px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
color: #1C1C1E;
}
.listingTable tbody tr td span {
color: Blue;
text-decoration: underline;
}
.statusDiv {
border-radius: 50px;
padding: 5px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.statusDiv.processing {
background-color: #DFF3FB;
border: 1px solid #01A7DB;
color: #3198F3;
}
.statusDiv.completed {
background-color: #F1FFEB;
border: 1px solid #5ED028;
color: #5ED028;
}
/*--------------------------*/
.let-discover-carousal a {
......@@ -2283,6 +2569,7 @@ footer hr {
.faqs-session {
padding: 5rem 0;
}
.subscribe label .btn {
font-size: 16px;
padding-left: 1rem;
......@@ -2838,6 +3125,12 @@ footer hr {
font-size: 32px;
line-height: 40px;
margin-bottom: 2rem;
input:disabled {
cursor: not-allowed;
background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)) !important;
color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
border-color: rgba(118, 118, 118, 0.3) !important;
}
@media (min-width: 992px) {
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!