Compare commits
46 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 06186b3c0f | |||
| bddbe6ceb4 | |||
| dd802ab22e | |||
| 8c363765ae | |||
| f597c207fa | |||
| dc07cff959 | |||
| 38766c9cb7 | |||
| fc04855d3f | |||
| 56cb956482 | |||
| 2f5abc8931 | |||
| 026dbb1a0a | |||
| efd464ba8a | |||
| 8c400c7ce1 | |||
| d3d2b3cb5a | |||
| 3054a5eb9a | |||
| 670f4bbf1a | |||
| ae73f10c42 | |||
| de477f32ed | |||
| 2c6e36aea9 | |||
| dc3aa1470e | |||
| 9029953432 | |||
| fa47de7292 | |||
| d0a2b804b9 | |||
| aa48529dca | |||
| ad2745dfce | |||
| b6ab3a6ee7 | |||
| f968cc5a50 | |||
| 1ddb2fd903 | |||
| 70f6ac4e24 | |||
| 3d30481852 | |||
| 63c0b07f61 | |||
| 60568c42e8 | |||
| 77ac52820d | |||
| 240e075305 | |||
| bea41d8181 | |||
| 6268d68b67 | |||
| f96b16b373 | |||
| 9fb6a4db86 | |||
| 1aa3c79666 | |||
| ecc2360dc4 | |||
| ca9bb1c211 | |||
| 2f756d189a | |||
| d7acea769c | |||
| 7ff5e2b6e0 | |||
| 2f90c4a6c2 | |||
| 29e0345e1c |
@@ -98,4 +98,14 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
|
|||||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
|
|
||||||
|
# Displays the new family dashboard with boxes
|
||||||
|
REACT_APP_SHOW_NEW_FAMILY_DASH=1
|
||||||
|
|
||||||
|
# Displays the account dashboard
|
||||||
|
REACT_APP_SHOW_ACCOUNT_DASH=1
|
||||||
+11
-1
@@ -66,4 +66,14 @@ REACT_APP_FAMILY_MINIMUM_AGE=4
|
|||||||
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
REACT_APP_FAMILY_MAXIMUM_AGE=18
|
||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
|
|
||||||
|
# Displays the new family dashboard with boxes
|
||||||
|
REACT_APP_SHOW_NEW_FAMILY_DASH=1
|
||||||
|
|
||||||
|
# Displays the account dashboard
|
||||||
|
REACT_APP_SHOW_ACCOUNT_DASH=1
|
||||||
@@ -73,3 +73,13 @@ REACT_APP_FAMILY_MAXIMUM_AGE=18
|
|||||||
|
|
||||||
#CHANGE LOGIN LAYOUT
|
#CHANGE LOGIN LAYOUT
|
||||||
REACT_APP_NEW_LOGIN_LAYOUT=1
|
REACT_APP_NEW_LOGIN_LAYOUT=1
|
||||||
|
|
||||||
|
#APP DOWNLOAD LINKS
|
||||||
|
REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
|
||||||
|
REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
|
||||||
|
|
||||||
|
# Displays the new family dashboard with boxes
|
||||||
|
REACT_APP_SHOW_NEW_FAMILY_DASH=0
|
||||||
|
|
||||||
|
# Displays the account dashboard
|
||||||
|
REACT_APP_SHOW_ACCOUNT_DASH=0
|
||||||
@@ -17,6 +17,9 @@
|
|||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
<title>WrenchBoard</title>
|
<title>WrenchBoard</title>
|
||||||
|
|
||||||
|
<!-- FONT AWESOME -->
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
+16
-16
@@ -1,22 +1,22 @@
|
|||||||
import Toaster from "./components/Helpers/Toaster";
|
|
||||||
import Routers from "./Routers";
|
|
||||||
import Default from "./components/Partials/Default";
|
|
||||||
import { Navigate, useLocation } from "react-router-dom";
|
import { Navigate, useLocation } from "react-router-dom";
|
||||||
|
import Routers from "./Routers";
|
||||||
|
import Toaster from "./components/Helpers/Toaster";
|
||||||
|
import Default from "./components/Partials/Default";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const {pathname} = useLocation()
|
const { pathname } = useLocation();
|
||||||
return (
|
return (
|
||||||
<Default>
|
<Default>
|
||||||
<>
|
<>
|
||||||
{pathname.startsWith('/@') ?
|
{pathname.startsWith("/@") ? (
|
||||||
<Navigate to="/app" replace={true} />
|
<Navigate to="/app" replace={true} />
|
||||||
:
|
) : (
|
||||||
<Routers />
|
<Routers />
|
||||||
}
|
)}
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</>
|
</>
|
||||||
</Default>
|
</Default>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
|
<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
|
||||||
<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
|
<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 452 B After Width: | Height: | Size: 448 B |
@@ -22,7 +22,7 @@ export default function LoginLayout({ slogan, children }) {
|
|||||||
>
|
>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
|
<div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
|
||||||
<div className="py-10 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
|
<div className="py-5 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
|
||||||
<div className="w-full flex justify-center items-center">
|
<div className="w-full flex justify-center items-center">
|
||||||
{children && children}
|
{children && children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
|
|||||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import linkedInLogo from "../../../assets/images/Linkedin.png";
|
import linkedInLogo from "../../../assets/images/Linkedin.png";
|
||||||
import appleLogo from "../../../assets/images/apple-black.svg";
|
import appleLogo from "../../../assets/images/apple-black.svg";
|
||||||
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
import facebookLogo from "../../../assets/images/facebook.svg";
|
||||||
import googleLogo from "../../../assets/images/google-logo.svg";
|
import googleLogo from "../../../assets/images/google-logo.svg";
|
||||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||||
import usersService from "../../../services/UsersService";
|
import usersService from "../../../services/UsersService";
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
|
|||||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import linkedInLogo from "../../../assets/images/Linkedin.png";
|
import linkedInLogo from "../../../assets/images/Linkedin.png";
|
||||||
import appleLogo from "../../../assets/images/apple-black.svg";
|
import appleLogo from "../../../assets/images/apple-black.svg";
|
||||||
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
import facebookLogo from "../../../assets/images/facebook.svg";
|
||||||
import googleLogo from "../../../assets/images/google-logo.svg";
|
import googleLogo from "../../../assets/images/google-logo.svg";
|
||||||
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
|
||||||
import usersService from "../../../services/UsersService";
|
import usersService from "../../../services/UsersService";
|
||||||
@@ -520,11 +520,36 @@ export default function Login() {
|
|||||||
}
|
}
|
||||||
{/* END of login component */}
|
{/* END of login component */}
|
||||||
|
|
||||||
|
{/* APP DOWNLOAD STORE */}
|
||||||
|
<div className="w-full mt-4">
|
||||||
|
<div className="w-full flex justify-center items-center gap-4">
|
||||||
|
<div className='w-28 lg:w-32'>
|
||||||
|
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
|
||||||
|
<i className="fa-brands fa-apple text-3xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">App Store</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className='w-28 lg:w-32'>
|
||||||
|
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
|
||||||
|
<i className="fa-brands fa-google-play text-2xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">Google Play</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{loginType == "full" && (
|
{loginType == "full" && (
|
||||||
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
<>
|
||||||
This site is protected by a Captcha. Our Privacy Policy and
|
<div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
|
||||||
Terms of Service apply.
|
This site is protected by a Captcha. Our Privacy Policy and
|
||||||
</div>
|
Terms of Service apply.
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,19 +9,21 @@ export default function SignUp() {
|
|||||||
// eslint-disable-next-line no-restricted-globals
|
// eslint-disable-next-line no-restricted-globals
|
||||||
const queryParams = new URLSearchParams(location?.search);
|
const queryParams = new URLSearchParams(location?.search);
|
||||||
const country = queryParams.get("cnt")?.toUpperCase();
|
const country = queryParams.get("cnt")?.toUpperCase();
|
||||||
|
|
||||||
const {pathname} = useLocation()
|
const { pathname } = useLocation();
|
||||||
const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
|
const currentPath = country
|
||||||
|
? `${pathname}?cnt=${country.toLowerCase()}`
|
||||||
|
: pathname; // Determines the new pathname is country query params exist
|
||||||
|
|
||||||
const [signUpLoading, setSignUpLoading] = useState(false);
|
const [signUpLoading, setSignUpLoading] = useState(false);
|
||||||
const [checked, setValue] = useState(false);
|
const [checked, setValue] = useState(false);
|
||||||
// for the catch error
|
// for the catch error
|
||||||
const [msgError, setMsgError] = useState("");
|
const [msgError, setMsgError] = useState("");
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [countries, setCountries] = useState({loading:true, data:[]});
|
const [countries, setCountries] = useState({ loading: true, data: [] });
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
country: country? country : "",
|
country: country ? country : "",
|
||||||
first_name: "",
|
first_name: "",
|
||||||
last_name: "",
|
last_name: "",
|
||||||
email: "",
|
email: "",
|
||||||
@@ -47,22 +49,23 @@ export default function SignUp() {
|
|||||||
|
|
||||||
// Get Country Api
|
// Get Country Api
|
||||||
const getCountryList = useCallback(async () => {
|
const getCountryList = useCallback(async () => {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await userApi.getSignupCountryData();
|
const res = await userApi.getSignupCountryData();
|
||||||
if (res.status === 200 && res.data.internal_return >= 0) {
|
if (res.status === 200 && res.data.internal_return >= 0) {
|
||||||
const { result_list } = await res.data;
|
const { result_list } = await res.data;
|
||||||
if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
|
if (country) {
|
||||||
let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
|
// IF LINK/PATHNAME HAS CNT QUERY VALUE
|
||||||
if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
|
let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
|
||||||
setFormData(prev => ({...prev, country: ''}))
|
if (!cnt.length) {
|
||||||
return setCountries({loading: false, data: result_list});
|
// IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
|
||||||
|
setFormData((prev) => ({ ...prev, country: "" }));
|
||||||
|
return setCountries({ loading: false, data: result_list });
|
||||||
}
|
}
|
||||||
return setCountries({loading: false, data: cnt});
|
return setCountries({ loading: false, data: cnt });
|
||||||
}
|
}
|
||||||
setCountries({loading: false, data:result_list});
|
setCountries({ loading: false, data: result_list });
|
||||||
} else if (res.data.result !== 100) {
|
} else if (res.data.result !== 100) {
|
||||||
setCountries({loading: false, data:[]});
|
setCountries({ loading: false, data: [] });
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new Error(error);
|
throw new Error(error);
|
||||||
@@ -113,9 +116,7 @@ export default function SignUp() {
|
|||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
const { data } = res;
|
const { data } = res;
|
||||||
if (data && data.acc === "DULPICATE") {
|
if (data && data.acc === "DULPICATE") {
|
||||||
setMsgError(
|
setMsgError("Duplicate username. Please try another email.");
|
||||||
"Unable to use this username. Please try another username."
|
|
||||||
);
|
|
||||||
setSignUpLoading(false);
|
setSignUpLoading(false);
|
||||||
}
|
}
|
||||||
if (data && data.status === "1") {
|
if (data && data.status === "1") {
|
||||||
@@ -124,6 +125,11 @@ export default function SignUp() {
|
|||||||
setSignUpLoading(false);
|
setSignUpLoading(false);
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (data && data.status === "5") {
|
||||||
|
setMsgError("Something went wrong. Please try another email.");
|
||||||
|
setSignUpLoading(false);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
setSignUpLoading(false);
|
setSignUpLoading(false);
|
||||||
setMsgError("An error occurred");
|
setMsgError("An error occurred");
|
||||||
@@ -187,7 +193,9 @@ export default function SignUp() {
|
|||||||
name="country"
|
name="country"
|
||||||
value={formData.country}
|
value={formData.country}
|
||||||
inputHandler={handleInputChange}
|
inputHandler={handleInputChange}
|
||||||
disable={country && countries?.data?.length <= 1 ? true : false}
|
disable={
|
||||||
|
country && countries?.data?.length <= 1 ? true : false
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
|
<div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
|
||||||
<div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
|
<div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
|
||||||
@@ -325,7 +333,7 @@ export default function SignUp() {
|
|||||||
disabled={countries.loading}
|
disabled={countries.loading}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleSignUp}
|
onClick={handleSignUp}
|
||||||
className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
className={`rounded-full text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||||
>
|
>
|
||||||
{signUpLoading ? (
|
{signUpLoading ? (
|
||||||
<div className="signup btn-loader"></div>
|
<div className="signup btn-loader"></div>
|
||||||
@@ -335,6 +343,44 @@ export default function SignUp() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* APP DOWNLOAD STORE */}
|
||||||
|
<div className="w-full mt-4">
|
||||||
|
<div className="w-full flex justify-center items-center gap-4">
|
||||||
|
<div className="w-28 lg:w-32">
|
||||||
|
<a
|
||||||
|
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
|
||||||
|
target="_blank"
|
||||||
|
href={process.env.REACT_APP_APPLE_APP}
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<i className="fa-brands fa-apple text-3xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">
|
||||||
|
App Store
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="w-28 lg:w-32">
|
||||||
|
<a
|
||||||
|
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
|
||||||
|
target="_blank"
|
||||||
|
href={process.env.REACT_APP_ANDROID_APP}
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<i className="fa-brands fa-google-play text-2xl"></i>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[11px]">Available on the</span>
|
||||||
|
<span className="text-[12px] lg:text-base">
|
||||||
|
Google Play
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -350,7 +396,7 @@ const SelectOption = ({
|
|||||||
inputHandler,
|
inputHandler,
|
||||||
value,
|
value,
|
||||||
data, // passing the data from parent
|
data, // passing the data from parent
|
||||||
disable
|
disable,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="input-com mb-7">
|
<div className="input-com mb-7">
|
||||||
@@ -364,39 +410,33 @@ const SelectOption = ({
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<select
|
<select
|
||||||
disabled={disable}
|
disabled={disable}
|
||||||
name={name}
|
name={name}
|
||||||
id={name}
|
id={name}
|
||||||
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
|
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
|
||||||
onChange={inputHandler}
|
onChange={inputHandler}
|
||||||
value={value}
|
value={value}
|
||||||
>
|
>
|
||||||
{data?.data?.length > 1 ?
|
{data?.data?.length > 1 ? (
|
||||||
<>
|
<>
|
||||||
<option value={""}>Select your Country</option>
|
<option value={""}>Select your Country</option>
|
||||||
{data?.data?.map((item) => (
|
{data?.data?.map((item) => (
|
||||||
<option value={item.code} key={item.uid}>
|
<option value={item.code} key={item.uid}>
|
||||||
{item.country}
|
{item.country}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
:
|
) : data?.data?.length == 1 ? (
|
||||||
data?.data?.length == 1 ?
|
|
||||||
data?.data?.map((item) => (
|
data?.data?.map((item) => (
|
||||||
<option value={item.code} key={item.uid}>
|
<option value={item.code} key={item.uid}>
|
||||||
{item.country}
|
{item.country}
|
||||||
</option>
|
</option>
|
||||||
))
|
))
|
||||||
:
|
) : data?.data?.length < 1 && data.loading ? (
|
||||||
data?.data?.length < 1 && data.loading ?
|
<option value="">Loading...</option>
|
||||||
<option value=''>
|
) : (
|
||||||
Loading...
|
<option value="">No Country Found!</option>
|
||||||
</option>
|
)}
|
||||||
:
|
|
||||||
<option value=''>
|
|
||||||
No Country Found!
|
|
||||||
</option>
|
|
||||||
}
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -51,8 +51,7 @@ export default function VerifyLink() {
|
|||||||
localStorage.setItem("member_id", `${data?.member_id}`);
|
localStorage.setItem("member_id", `${data?.member_id}`);
|
||||||
localStorage.setItem("session_token", `${data?.session}`);
|
localStorage.setItem("session_token", `${data?.session}`);
|
||||||
localStorage.setItem("session", `${data?.session}`);
|
localStorage.setItem("session", `${data?.session}`);
|
||||||
localStorage.setItem("uid", data?.uid)
|
localStorage.setItem("uid", data?.uid);
|
||||||
|
|
||||||
|
|
||||||
navigate("/", { replace: true });
|
navigate("/", { replace: true });
|
||||||
setLinkLoader(false);
|
setLinkLoader(false);
|
||||||
@@ -80,19 +79,19 @@ export default function VerifyLink() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// for verifying the incoming verification link and render the correct component
|
// for verifying the incoming verification link and render the correct component
|
||||||
const verifyEmail = useCallback(async (code) => {
|
const verifyEmail = async (code) => {
|
||||||
try {
|
try {
|
||||||
const verifyRes = await userApi.verifyEmail(code);
|
const verifyRes = await userApi.verifyEmail(code);
|
||||||
if (verifyRes.status === 200) {
|
if (verifyRes.status === 200) {
|
||||||
let { data } = verifyRes;
|
let { data } = verifyRes;
|
||||||
console.log('TESTING VERIFY',data)
|
console.log("TESTING VERIFY", data);
|
||||||
if (
|
if (
|
||||||
data &&
|
data &&
|
||||||
data.internal_return >= 0 &&
|
data.internal_return >= 0 &&
|
||||||
data.status == 0 &&
|
data.status == 0 &&
|
||||||
data.pending_id != '' &&
|
data.pending_id != "" &&
|
||||||
data.pending_uid != '' &&
|
data.pending_uid != "" &&
|
||||||
data.username != '' &&
|
data.username != "" &&
|
||||||
data.status_text === "Link Verified"
|
data.status_text === "Link Verified"
|
||||||
) {
|
) {
|
||||||
setPageLoader(false);
|
setPageLoader(false);
|
||||||
@@ -106,12 +105,13 @@ export default function VerifyLink() {
|
|||||||
setLinkSuccess(false);
|
setLinkSuccess(false);
|
||||||
throw new Error(error);
|
throw new Error(error);
|
||||||
}
|
}
|
||||||
}, []);
|
};
|
||||||
|
|
||||||
// delay verify requests by 10000ms
|
// delay verify requests by 10000ms
|
||||||
const debouncedEmail = debounce(verifyEmail, 1000);
|
const debouncedEmail = debounce(verifyEmail, 1000);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setEmail("")
|
||||||
debouncedEmail(token);
|
debouncedEmail(token);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -171,53 +171,57 @@ const SuccessfulComponent = ({
|
|||||||
handleEmail,
|
handleEmail,
|
||||||
msgErr,
|
msgErr,
|
||||||
loader,
|
loader,
|
||||||
}) => (
|
}) => {
|
||||||
<div className="input-area">
|
return (
|
||||||
{/* INPUT */}
|
<div className="input-area">
|
||||||
<div className="mb-5">
|
{/* INPUT */}
|
||||||
<InputCom
|
<div className="mb-5">
|
||||||
fieldClass="px-6"
|
<InputCom
|
||||||
value={email}
|
fieldClass="px-6"
|
||||||
inputHandler={handleEmail}
|
value={email}
|
||||||
placeholder="support@mermsemr.com"
|
inputHandler={handleEmail}
|
||||||
label="Email"
|
placeholder="support@mermsemr.com"
|
||||||
name="email"
|
label="Email"
|
||||||
type="email"
|
name="email"
|
||||||
iconName="message"
|
type="email"
|
||||||
/>
|
iconName="message"
|
||||||
</div>
|
autoComplete="off"
|
||||||
<div className="mb-5">
|
/>
|
||||||
<InputCom
|
</div>
|
||||||
fieldClass="px-6"
|
<div className="mb-5">
|
||||||
value={password}
|
<InputCom
|
||||||
inputHandler={handlePassword}
|
fieldClass="px-6"
|
||||||
placeholder="● ● ● ● ● ●"
|
value={password}
|
||||||
label="Password"
|
inputHandler={handlePassword}
|
||||||
name="password"
|
placeholder="● ● ● ● ● ●"
|
||||||
type="password"
|
label="Password"
|
||||||
iconName="password"
|
name="password"
|
||||||
/>
|
type="password"
|
||||||
</div>
|
iconName="password"
|
||||||
{msgErr && (
|
autoComplete="off"
|
||||||
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
|
/>
|
||||||
{msgErr}
|
</div>
|
||||||
|
{msgErr && (
|
||||||
|
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
|
||||||
|
{msgErr}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="signin-area mb-3.5">
|
||||||
|
<button
|
||||||
|
onClick={onSubmit}
|
||||||
|
type="button"
|
||||||
|
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
|
||||||
|
>
|
||||||
|
{loader ? (
|
||||||
|
<div className="signup btn-loader"></div>
|
||||||
|
) : (
|
||||||
|
<span>Continue</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
<div className="signin-area mb-3.5">
|
|
||||||
<button
|
|
||||||
onClick={onSubmit}
|
|
||||||
type="button"
|
|
||||||
className={`btn-login rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
|
|
||||||
>
|
|
||||||
{loader ? (
|
|
||||||
<div className="signup btn-loader"></div>
|
|
||||||
) : (
|
|
||||||
<span>Continue</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
const ErrorComponent = ({ onClick }) => (
|
const ErrorComponent = ({ onClick }) => (
|
||||||
<div className="input-area">
|
<div className="input-area">
|
||||||
|
|||||||
@@ -51,8 +51,7 @@ export default function VerifyLink() {
|
|||||||
localStorage.setItem("member_id", `${data?.member_id}`);
|
localStorage.setItem("member_id", `${data?.member_id}`);
|
||||||
localStorage.setItem("session_token", `${data?.session}`);
|
localStorage.setItem("session_token", `${data?.session}`);
|
||||||
localStorage.setItem("session", `${data?.session}`);
|
localStorage.setItem("session", `${data?.session}`);
|
||||||
localStorage.setItem("uid", data?.uid)
|
localStorage.setItem("uid", data?.uid);
|
||||||
|
|
||||||
|
|
||||||
navigate("/", { replace: true });
|
navigate("/", { replace: true });
|
||||||
setLinkLoader(false);
|
setLinkLoader(false);
|
||||||
@@ -85,16 +84,17 @@ export default function VerifyLink() {
|
|||||||
const verifyRes = await userApi.verifyEmail(code);
|
const verifyRes = await userApi.verifyEmail(code);
|
||||||
if (verifyRes.status === 200) {
|
if (verifyRes.status === 200) {
|
||||||
let { data } = verifyRes;
|
let { data } = verifyRes;
|
||||||
console.log('TESTING VERIFY',data)
|
console.log("TESTING VERIFY", data);
|
||||||
if (
|
if (
|
||||||
data &&
|
data &&
|
||||||
data.internal_return >= 0 &&
|
data.internal_return >= 0 &&
|
||||||
data.status == 0 &&
|
data.status == 0 &&
|
||||||
data.pending_id != '' &&
|
data.pending_id != "" &&
|
||||||
data.pending_uid != '' &&
|
data.pending_uid != "" &&
|
||||||
data.username != '' &&
|
data.username != "" &&
|
||||||
data.status_text === "Link Verified"
|
data.status_text === "Link Verified"
|
||||||
) {
|
) {
|
||||||
|
setEmail(data.username);
|
||||||
setPageLoader(false);
|
setPageLoader(false);
|
||||||
} else {
|
} else {
|
||||||
setPageLoader(false);
|
setPageLoader(false);
|
||||||
@@ -184,6 +184,7 @@ const SuccessfulComponent = ({
|
|||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
iconName="message"
|
iconName="message"
|
||||||
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
@@ -196,6 +197,7 @@ const SuccessfulComponent = ({
|
|||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
iconName="password"
|
iconName="password"
|
||||||
|
autoComplete="off"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{msgErr && (
|
{msgErr && (
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
|
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
|
||||||
|
|
||||||
export default function AvailableJobsCard({
|
export default function AvailableJobsCard({
|
||||||
className,
|
className,
|
||||||
datas,
|
datas,
|
||||||
|
key,
|
||||||
hidden = false,
|
hidden = false,
|
||||||
contentDisplay,
|
contentDisplay,
|
||||||
image_server,
|
image_server,
|
||||||
@@ -19,10 +20,10 @@ export default function AvailableJobsCard({
|
|||||||
datas?.currency
|
datas?.currency
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
|
// const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
|
||||||
setImageUrl(imagePath);
|
// setImageUrl(imagePath);
|
||||||
}, []);
|
// }, []);
|
||||||
|
|
||||||
const image = localStorage.getItem("session_token")
|
const image = localStorage.getItem("session_token")
|
||||||
? `${image_server}${localStorage.getItem("session_token")}/job/${
|
? `${image_server}${localStorage.getItem("session_token")}/job/${
|
||||||
@@ -37,6 +38,7 @@ export default function AvailableJobsCard({
|
|||||||
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||||
className || ""
|
className || ""
|
||||||
}`}
|
}`}
|
||||||
|
key={key}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@@ -75,34 +77,16 @@ export default function AvailableJobsCard({
|
|||||||
<div
|
<div
|
||||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url('${imageUrl}')`,
|
backgroundImage: `url('${image}')`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex justify-center">{datas.description}</div>
|
<div className="flex justify-center bg-slate-100 p-2 rounded-md">
|
||||||
|
{datas.description}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="details-area">
|
<div className="details-area">
|
||||||
<div className="product-two-options flex justify-between mb-5 relative">
|
<div className="product-two-options flex justify-between mb-5 relative"></div>
|
||||||
{/* <div className="status">*/}
|
|
||||||
{/* {datas.isActive && (*/}
|
|
||||||
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
|
|
||||||
{/* Active*/}
|
|
||||||
{/*</span>*/}
|
|
||||||
{/* )}*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
|
|
||||||
{/*<div className=" review flex space-x-2">*/}
|
|
||||||
{/* <button*/}
|
|
||||||
{/* onClick={favoriteHandler}*/}
|
|
||||||
{/* type="button"*/}
|
|
||||||
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
|
|
||||||
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
|
|
||||||
{/* }`}*/}
|
|
||||||
{/* >*/}
|
|
||||||
{/* <Icons name="star" />*/}
|
|
||||||
{/* </button>*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export default function HomeBannerOffersCard(props) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let { banner, banner_location } = props?.itemData;
|
let { banner, banner_location } = props?.itemData;
|
||||||
if (banner_location === "LOCAL") {
|
if (banner_location === "LOCAL") {
|
||||||
const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
|
const imagePath = require(`../../assets/images/${banner}`);
|
||||||
setImageUrl(imagePath);
|
setImageUrl(imagePath);
|
||||||
} else if (banner_location === "URL") setImageUrl(banner);
|
} else if (banner_location === "URL") setImageUrl(banner);
|
||||||
else return null;
|
else return null;
|
||||||
|
|||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const AccountDashboard = ({ className }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
|
||||||
|
<TopBanner />
|
||||||
|
<TopBanner />
|
||||||
|
<TopBanner />
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
|
||||||
|
<LowerBanner />
|
||||||
|
<LowerBanner />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AccountDashboard;
|
||||||
|
|
||||||
|
const TopBanner = () => {
|
||||||
|
let Image = require(`../../assets/images/offer.jpg`);
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col shadow-md rounded-xl">
|
||||||
|
<div className="h-[12rem] rounded-t-xl">
|
||||||
|
<img
|
||||||
|
src={Image}
|
||||||
|
alt="banner-img"
|
||||||
|
className="w-full h-full rounded-t-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="h-[7rem] rounded-b-xl bg-white">
|
||||||
|
<div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
|
||||||
|
<h3 className="font-bold text-lg">Banner Title</h3>
|
||||||
|
<p>Banner description text will come follow</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between w-full px-2 items-center">
|
||||||
|
<span className="text-slate-300 font-semibold">follow up text</span>
|
||||||
|
<button className="flex items-center justify-center gap-2">
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const LowerBanner = () => {
|
||||||
|
let Image = require(`../../assets/images/offer.jpg`);
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col bg-white shadow-md h-full rounded-xl">
|
||||||
|
<div className="w-full flex justify-between border-b border-slate-300 p-2">
|
||||||
|
<div className="h-[130px] flex justify-between items-center">
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-lg font-bold">Banner Title</h3>
|
||||||
|
<p className="text-sm">Banner description text will come follow</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[150px] h-[100px]">
|
||||||
|
<img
|
||||||
|
src={Image}
|
||||||
|
alt="banner-img"
|
||||||
|
className="w-full h-full rounded-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between w-full px-2 items-center">
|
||||||
|
<span className="text-slate-300 font-semibold">follow up text</span>
|
||||||
|
<button className="flex items-center justify-center gap-2">
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function FamilyParentDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-500 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function HomeDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function JobOwnerDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-800 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||||
|
import heroUser from "../../assets/images/hero-user.png";
|
||||||
|
import CountDown from "../Helpers/CountDown";
|
||||||
|
// import HomeSliders from "./HomeSliders";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import HomeSliders from "../Home/HomeSliders";
|
||||||
|
|
||||||
|
export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
|
||||||
|
const settings = {
|
||||||
|
autoplay: true,
|
||||||
|
dots: true,
|
||||||
|
arrows: false,
|
||||||
|
infinite: true,
|
||||||
|
swipe: true,
|
||||||
|
};
|
||||||
|
const sildeData = null;
|
||||||
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
let loginDate = userDetails?.last_login.split(" ")[0];
|
||||||
|
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||||
|
let userEmail = email.split("@")[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-900 ${
|
||||||
|
className || ""
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
// background: `url(${heroBg})`,
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
|
||||||
|
{/* heading */}
|
||||||
|
<div>
|
||||||
|
<h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
|
||||||
|
Welcome
|
||||||
|
</h1>
|
||||||
|
<span className="text-[18px] font-thin tracking-wide text-white">
|
||||||
|
Last Login : {loginDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* user */}
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
|
||||||
|
<img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xl tracking-wide font-bold antise text-white">
|
||||||
|
{`${firstname} ${lastname}`}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm tracking-wide text-white">@{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* countdown */}
|
||||||
|
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||||
|
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-white tracking-wide">
|
||||||
|
{nextDueTask.next_due.price * 0.01} Naira
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||||
|
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||||
|
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||||
|
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* action */}
|
||||||
|
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||||
|
<Link to="/mytask" className="text-white text-base">
|
||||||
|
<span className=" border-b dark:border-[#5356fb29] border-white">
|
||||||
|
{" "}
|
||||||
|
View All Task(s)
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HomeSliders
|
||||||
|
settings={settings}
|
||||||
|
sideData={sildeData}
|
||||||
|
bannerList={bannerList}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import FamilyParentDashboard from "./FamilyParentDashboard";
|
||||||
|
import HomeDashboard from "./HomeDashboard";
|
||||||
|
import JobOwnerDashboard from "./JobOwnerDashboard";
|
||||||
|
import WorkerDashboard from "./WorkerDashboard";
|
||||||
|
import AccountDashboard from "./AccountDashboard";
|
||||||
|
|
||||||
|
export {
|
||||||
|
FamilyParentDashboard,
|
||||||
|
HomeDashboard,
|
||||||
|
JobOwnerDashboard,
|
||||||
|
WorkerDashboard,
|
||||||
|
AccountDashboard
|
||||||
|
};
|
||||||
@@ -27,6 +27,7 @@ export default function InputCom({
|
|||||||
direction,
|
direction,
|
||||||
tabIndex,
|
tabIndex,
|
||||||
error,
|
error,
|
||||||
|
autoComplete="on"
|
||||||
}) {
|
}) {
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
// Entry Validation
|
// Entry Validation
|
||||||
@@ -107,6 +108,7 @@ export default function InputCom({
|
|||||||
readOnly={disable}
|
readOnly={disable}
|
||||||
onBlur={blurHandler}
|
onBlur={blurHandler}
|
||||||
dir={direction}
|
dir={direction}
|
||||||
|
autoComplete={autoComplete}
|
||||||
/>
|
/>
|
||||||
{iconName && (
|
{iconName && (
|
||||||
<div className="absolute right-6 bottom-3 z-10 flex gap-2">
|
<div className="absolute right-6 bottom-3 z-10 flex gap-2">
|
||||||
|
|||||||
@@ -1,16 +1,129 @@
|
|||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import usersService from "../../services/UsersService";
|
||||||
import ParentWaiting from "../MyOffers/ParentWaiting";
|
import ParentWaiting from "../MyOffers/ParentWaiting";
|
||||||
import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
|
import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
|
||||||
import FamilyActiveLSlde from "./FamilyActiveLSlde";
|
import FamilyActiveLSlde from "./FamilyActiveLSlde";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { tableReload } from "../../store/TableReloads";
|
||||||
|
|
||||||
export default function FamilyDash({ familyOffers, MyActiveJobList }) {
|
export default function FamilyDash({ familyOffers, MyActiveJobList }) {
|
||||||
// console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
|
// console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const userApi = new usersService();
|
||||||
|
|
||||||
const trending = MyActiveJobList;
|
const trending = MyActiveJobList;
|
||||||
|
|
||||||
|
const { familyBannersList } = useSelector((state) => state.familyBannersList);
|
||||||
|
|
||||||
|
let [reloadBanner, setReloadBanner] = useState(0)
|
||||||
|
|
||||||
|
// DO NOT UNCOMMENT THE CODE BELOW
|
||||||
|
|
||||||
|
// let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
|
||||||
|
// const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
|
||||||
|
// setFamilyBannersList({loading:true, result:[]});
|
||||||
|
// try {
|
||||||
|
// const res = await userApi.getFamilyBannersList();
|
||||||
|
// setFamilyBannersList({loading:false, result:res.data});
|
||||||
|
// console.log('TEST RESPONSE', res.data)
|
||||||
|
// } catch (error) {
|
||||||
|
// setFamilyBannersList({loading:false, result:[]});
|
||||||
|
// console.log("Error getting tasks");
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useEffect(()=>{
|
||||||
|
// getFamilyBanners()
|
||||||
|
// },[])
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(reloadBanner >= 2){
|
||||||
|
dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS
|
||||||
|
setReloadBanner(0)
|
||||||
|
}
|
||||||
|
const timer = setInterval(()=>{
|
||||||
|
setReloadBanner(prev => prev+1)
|
||||||
|
},300000)
|
||||||
|
|
||||||
|
return ()=>{
|
||||||
|
clearInterval(timer)
|
||||||
|
}
|
||||||
|
},[reloadBanner])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="home-page-wrapper">
|
<div className="home-page-wrapper">
|
||||||
{/* <CommonHead commonHeadData={props.commonHeadData} /> */}
|
{/* <CommonHead commonHeadData={props.commonHeadData} /> */}
|
||||||
|
|
||||||
|
{process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
|
||||||
|
<>
|
||||||
|
{familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
|
||||||
|
// Loop for Family Banners
|
||||||
|
<div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
|
||||||
|
{Object.keys(familyBannersList?.result_list).map((item, index) => {
|
||||||
|
let content = familyBannersList?.result_list[item]
|
||||||
|
let action = item == 'recommend' ? 'familymarket' : 'mytask'
|
||||||
|
return (
|
||||||
|
<Link key={item} to={`/${action}`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
|
||||||
|
<div className="h-full w-full">
|
||||||
|
<img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
|
||||||
|
<div className="px-2 py-1">
|
||||||
|
<h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
|
||||||
|
<p className="text-sm text-black dark:text-white">{content.banner.description}</p>
|
||||||
|
</div>
|
||||||
|
{/* Horizontal Line */}
|
||||||
|
<div className="w-full h-[1px] bg-slate-300"></div>
|
||||||
|
|
||||||
|
<div className="px-2 py-1 flex justify-between items-center">
|
||||||
|
<span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
|
||||||
|
{/* Dots */}
|
||||||
|
<div className="flex justify-center gap-1">
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="my-4">
|
||||||
|
<h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
|
||||||
|
<div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
|
||||||
|
{[1,2,3,4,5].map((item, index) => (
|
||||||
|
<Link key={item} to={`/`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
|
||||||
|
<div className="h-full w-full">
|
||||||
|
<img className="w-full h-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
|
||||||
|
<div className="px-2 py-1">
|
||||||
|
<h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
|
||||||
|
<p className="text-sm text-black dark:text-white">{'Description'}</p>
|
||||||
|
</div>
|
||||||
|
{/* Horizontal Line */}
|
||||||
|
<div className="w-full h-[1px] bg-slate-300"></div>
|
||||||
|
|
||||||
|
<div className="px-2 py-1 flex justify-between items-center">
|
||||||
|
<span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
|
||||||
|
{/* Dots */}
|
||||||
|
<div className="flex justify-center gap-1">
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
<div className="w-1 h-1 bg-slate-400 rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
{familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
|
{familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
|
||||||
<MyOffersFamilyTable
|
<MyOffersFamilyTable
|
||||||
familyOffers={familyOffers?.result_list}
|
familyOffers={familyOffers?.result_list}
|
||||||
|
|||||||
@@ -1,8 +1,14 @@
|
|||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
import {
|
||||||
|
AccountDashboard,
|
||||||
|
FamilyParentDashboard,
|
||||||
|
HomeDashboard,
|
||||||
|
JobOwnerDashboard,
|
||||||
|
WorkerDashboard,
|
||||||
|
} from "../Dashboards";
|
||||||
import MyJobTable from "../MyTasks/MyJobTable";
|
import MyJobTable from "../MyTasks/MyJobTable";
|
||||||
import MyOffersTable from "../MyTasks/MyOffersTable";
|
import MyOffersTable from "../MyTasks/MyOffersTable";
|
||||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
import Hero from "./Hero";
|
|
||||||
import HomeActivities from "./HomeActivities";
|
import HomeActivities from "./HomeActivities";
|
||||||
|
|
||||||
export default function FullAccountDash(props) {
|
export default function FullAccountDash(props) {
|
||||||
@@ -10,16 +16,61 @@ export default function FullAccountDash(props) {
|
|||||||
|
|
||||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||||
|
|
||||||
|
const renderDashboard = () => {
|
||||||
|
switch (props.dashTypes) {
|
||||||
|
case "DEFAULT_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<HomeDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "FAMILY_PARENT_DASH":
|
||||||
|
return (
|
||||||
|
<FamilyParentDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "WORKER_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<WorkerDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "JOBOWNER_HOME_DASH":
|
||||||
|
return (
|
||||||
|
<JobOwnerDashboard
|
||||||
|
className="mb-10"
|
||||||
|
data={userDetails}
|
||||||
|
bannerList={props.bannerList}
|
||||||
|
nextDueTask={props.nextDueTask}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="home-page-wrapper">
|
<div className="home-page-wrapper">
|
||||||
<Hero
|
{process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
|
||||||
className="mb-10"
|
<AccountDashboard className="mb-4" />
|
||||||
data={userDetails}
|
)}
|
||||||
bannerList={props.bannerList}
|
{renderDashboard()}
|
||||||
nextDueTask={props.nextDueTask}
|
|
||||||
/>
|
{props?.dashTypes !== "undefined" &&
|
||||||
{props.offersList?.data?.result_list?.length ? (
|
props.offersList?.data?.result_list?.length ? (
|
||||||
<MyOffersTable
|
<MyOffersTable
|
||||||
MyActiveOffersList={props.offersList?.data}
|
MyActiveOffersList={props.offersList?.data}
|
||||||
className="mb-10"
|
className="mb-10"
|
||||||
|
|||||||
@@ -82,6 +82,7 @@ export default function Home(props) {
|
|||||||
<FullAccountDash
|
<FullAccountDash
|
||||||
nextDueTask={nextDueTask}
|
nextDueTask={nextDueTask}
|
||||||
bannerList={props.bannerList}
|
bannerList={props.bannerList}
|
||||||
|
dashTypes={props.dashTypes}
|
||||||
offersList={MyOffersList}
|
offersList={MyOffersList}
|
||||||
MyActiveJobList={MyActiveJobList}
|
MyActiveJobList={MyActiveJobList}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -112,7 +112,7 @@ export default function MainSection({
|
|||||||
<AvailableJobsCard
|
<AvailableJobsCard
|
||||||
contentDisplay={contentDisplay}
|
contentDisplay={contentDisplay}
|
||||||
image_server={image_server}
|
image_server={image_server}
|
||||||
key={datas.id}
|
key={datas.job_uid}
|
||||||
datas={datas}
|
datas={datas}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -66,6 +66,8 @@ const initialValues = {
|
|||||||
function AddFundDollars(props) {
|
function AddFundDollars(props) {
|
||||||
let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
|
||||||
|
|
||||||
|
let [loadingState, setLoadingState] = useState(false)
|
||||||
|
|
||||||
const apiCall = new usersService();
|
const apiCall = new usersService();
|
||||||
let countryWallet = props.walletItem.country;
|
let countryWallet = props.walletItem.country;
|
||||||
const [selectedOption, setSelectedOption] = useState("previous");
|
const [selectedOption, setSelectedOption] = useState("previous");
|
||||||
@@ -162,10 +164,11 @@ function AddFundDollars(props) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
props.setConfirmCredit((prev) => ({
|
// props.setConfirmCredit((prev) => ({
|
||||||
...prev,
|
// ...prev,
|
||||||
show: { awaitConfirm: { loader: true } },
|
// show: { awaitConfirm: { loader: true } },
|
||||||
}));
|
// }));
|
||||||
|
setLoadingState(true)
|
||||||
|
|
||||||
// Extracting card_uid from the previous card details
|
// Extracting card_uid from the previous card details
|
||||||
const paymentCardValue = prevCardDetails["payment-card"];
|
const paymentCardValue = prevCardDetails["payment-card"];
|
||||||
@@ -193,6 +196,18 @@ function AddFundDollars(props) {
|
|||||||
if (res.data.internal_return < 0) {
|
if (res.data.internal_return < 0) {
|
||||||
props.setInputError("An Error Occurred");
|
props.setInputError("An Error Occurred");
|
||||||
throw new Error("An Error Occurred");
|
throw new Error("An Error Occurred");
|
||||||
|
|
||||||
|
// use commented code when you when to display pop for failed start credit API
|
||||||
|
// props.setConfirmCredit((prev) => ({
|
||||||
|
// ...prev,
|
||||||
|
// show: {
|
||||||
|
// awaitConfirm: { loader: false, state: false },
|
||||||
|
// acceptConfirm: { loader: false, state: true },
|
||||||
|
// },
|
||||||
|
// data: {internal_return: -1}
|
||||||
|
// }));
|
||||||
|
setLoadingState(false)
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const _response = res.data;
|
const _response = res.data;
|
||||||
@@ -204,6 +219,7 @@ function AddFundDollars(props) {
|
|||||||
stateData = { ...stateData, ..._response };
|
stateData = { ...stateData, ..._response };
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
setLoadingState(false)
|
||||||
props.setConfirmCredit({
|
props.setConfirmCredit({
|
||||||
show: {
|
show: {
|
||||||
awaitConfirm: { loader: false, state: true },
|
awaitConfirm: { loader: false, state: true },
|
||||||
@@ -213,6 +229,7 @@ function AddFundDollars(props) {
|
|||||||
});
|
});
|
||||||
}, 1500);
|
}, 1500);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
setLoadingState(false)
|
||||||
props.setInputError(error.message);
|
props.setInputError(error.message);
|
||||||
setTimeout(() => props.setInputError(""), 5000);
|
setTimeout(() => props.setInputError(""), 5000);
|
||||||
props.setConfirmCredit((prev) => ({
|
props.setConfirmCredit((prev) => ({
|
||||||
@@ -582,7 +599,7 @@ function AddFundDollars(props) {
|
|||||||
type="submit"
|
type="submit"
|
||||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
{loadingState ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -616,7 +633,7 @@ function AddFundDollars(props) {
|
|||||||
type="button"
|
type="button"
|
||||||
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
{props.confirmCredit?.show?.awaitConfirm?.loader ? (
|
{loadingState ? (
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
) : (
|
) : (
|
||||||
<span className="text-white">Continue</span>
|
<span className="text-white">Continue</span>
|
||||||
|
|||||||
@@ -86,6 +86,16 @@ function AddFundPop({
|
|||||||
}));
|
}));
|
||||||
setInputError("An Error Occurred");
|
setInputError("An Error Occurred");
|
||||||
setTimeout(() => setInputError(""), 5000);
|
setTimeout(() => setInputError(""), 5000);
|
||||||
|
|
||||||
|
// use commented code when you when to display pop for failed start credit API
|
||||||
|
// setConfirmCredit((prev) => ({
|
||||||
|
// ...prev,
|
||||||
|
// show: {
|
||||||
|
// awaitConfirm: { loader: false, state: false },
|
||||||
|
// acceptConfirm: { loader: false, state: true },
|
||||||
|
// },
|
||||||
|
// data: {internal_return: -1}
|
||||||
|
// }));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -70,7 +70,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
}`}
|
}`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{data?.curr_balance &&
|
||||||
<div className="flex items-center gap-8">
|
<div className="flex items-center gap-8">
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
Wallet Balance
|
Wallet Balance
|
||||||
@@ -79,6 +80,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
{data?.curr_balance * 0.01}
|
{data?.curr_balance * 0.01}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
{isSuccess && (
|
{isSuccess && (
|
||||||
<div className="flex items-center gap-8">
|
<div className="flex items-center gap-8">
|
||||||
|
|||||||
@@ -239,7 +239,8 @@ function ConfirmAddFund({
|
|||||||
setConfirmCredit((prev) => ({
|
setConfirmCredit((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
show: {
|
show: {
|
||||||
acceptConfirm: { loader: false },
|
awaitConfirm: { loader: false, state: false },
|
||||||
|
acceptConfirm: { loader: false, state: true },
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
return;
|
return;
|
||||||
@@ -261,7 +262,8 @@ function ConfirmAddFund({
|
|||||||
setConfirmCredit((prev) => ({
|
setConfirmCredit((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
show: {
|
show: {
|
||||||
acceptConfirm: { loader: false },
|
awaitConfirm: { loader: false, state: false },
|
||||||
|
acceptConfirm: { loader: false, state: true },
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
console.log(error);
|
console.log(error);
|
||||||
@@ -333,7 +335,8 @@ function ConfirmAddFund({
|
|||||||
setConfirmCredit((prev) => ({
|
setConfirmCredit((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
show: {
|
show: {
|
||||||
acceptConfirm: { loader: false },
|
awaitConfirm: { loader: false, state: false },
|
||||||
|
acceptConfirm: { loader: false, state: true },
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
setTimeout(() => onClose, 10000);
|
setTimeout(() => onClose, 10000);
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ const WalletRoutes = () => {
|
|||||||
}
|
}
|
||||||
setAllCountries((prev) => ({
|
setAllCountries((prev) => ({
|
||||||
loading: false,
|
loading: false,
|
||||||
data: res.data.result_list,
|
data: res?.data?.result_list,
|
||||||
}));
|
}));
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
|||||||
@@ -48,6 +48,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
|
|
||||||
// 9308RDR122
|
// 9308RDR122
|
||||||
|
|
||||||
|
|
||||||
const handlerBalance = () => {
|
const handlerBalance = () => {
|
||||||
setbalanceValue.toggle();
|
setbalanceValue.toggle();
|
||||||
if (notificationDropdown) {
|
if (notificationDropdown) {
|
||||||
@@ -238,9 +239,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/* balance */}
|
{/* balance */}
|
||||||
|
|
||||||
{/* My Page Button */}
|
{/* My Page Button */}
|
||||||
<PageButton />
|
{userDetails.account_type === "FULL" ? <PageButton /> : null}
|
||||||
|
|
||||||
{/*<div className="lg:hidden block"></div>*/}
|
{/*<div className="lg:hidden block"></div>*/}
|
||||||
<WalletHeader
|
<WalletHeader
|
||||||
@@ -671,28 +672,28 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const PageButton = () => {
|
const PageButton = () => {
|
||||||
return (
|
return (
|
||||||
<Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
<Link
|
||||||
<div
|
to="/yourpage"
|
||||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4"
|
||||||
>
|
>
|
||||||
<span className="lg:block hidden w-[25px]">
|
<div className="flex items-center lg:justify-between justify-center w-full h-full">
|
||||||
|
<span className="lg:block hidden w-[25px]">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
|
||||||
<path
|
<path
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
|
d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
|
||||||
fill="#ffffff"
|
fill="#ffffff"
|
||||||
className="color000000 svgShape"
|
className="color000000 svgShape"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<p className="lg:text-xl text-lg font-bold text-white">My Page</p>
|
<p className="lg:text-xl text-lg font-bold text-white">My Page</p>
|
||||||
<span className="lg:block hidden">
|
<span className="lg:block hidden">
|
||||||
{/* <Icons name="deep-plus" /> */}
|
{/* <Icons name="deep-plus" /> */}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export default function MobileSidebar({
|
|||||||
<ul className="flex flex-col space-y-6">
|
<ul className="flex flex-col space-y-6">
|
||||||
{/* Using mini component reduces the bulk amount of html */}
|
{/* Using mini component reduces the bulk amount of html */}
|
||||||
<ListItem
|
<ListItem
|
||||||
title="Dashboard"
|
title= {userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
|
||||||
route="/"
|
route="/"
|
||||||
sidebar={sidebar}
|
sidebar={sidebar}
|
||||||
iconName="new-dashboard"
|
iconName="new-dashboard"
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ export default function Sidebar({
|
|||||||
<ul className="flex flex-col space-y-6">
|
<ul className="flex flex-col space-y-6">
|
||||||
{/* Using mini component reduces the bulk amount of html */}
|
{/* Using mini component reduces the bulk amount of html */}
|
||||||
<ListItem
|
<ListItem
|
||||||
title="Dashboard"
|
title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
|
||||||
route="/"
|
route="/"
|
||||||
sidebar={sidebar}
|
sidebar={sidebar}
|
||||||
iconName="new-dashboard"
|
iconName="new-dashboard"
|
||||||
|
|||||||
@@ -195,14 +195,14 @@ function JobListPopout({
|
|||||||
const res = await apiCall.assignJobTask(reqData);
|
const res = await apiCall.assignJobTask(reqData);
|
||||||
let { status, data } = await res;
|
let { status, data } = await res;
|
||||||
if (status != 200 || data.internal_return < 0) {
|
if (status != 200 || data.internal_return < 0) {
|
||||||
setRequestStatus({ message: "Unable to complete", status: false });
|
setRequestStatus({ message: data?.status ? data?.status : "Unable to assign offer", status: false });
|
||||||
return setTimeout(() => {
|
return setTimeout(() => {
|
||||||
setLoader({ jobFields: false });
|
setLoader({ jobFields: false });
|
||||||
setRequestStatus({ message: "", status: false });
|
setRequestStatus({ message: "", status: false });
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
dispatch(tableReload({ type: "JOBTABLE" }));
|
dispatch(tableReload({ type: "JOBTABLE" }));
|
||||||
setRequestStatus({ message: "Successful", status: true });
|
setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLoader({ jobFields: false });
|
setLoader({ jobFields: false });
|
||||||
onClose();
|
onClose();
|
||||||
@@ -330,7 +330,6 @@ function JobListPopout({
|
|||||||
|
|
||||||
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
|
<div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
|
||||||
<DetailsComponent />
|
<DetailsComponent />
|
||||||
|
|
||||||
<>
|
<>
|
||||||
{/* ACTION SECTION */}
|
{/* ACTION SECTION */}
|
||||||
{+taskWalletSelector.amount > +details.price ? (
|
{+taskWalletSelector.amount > +details.price ? (
|
||||||
@@ -576,11 +575,6 @@ const JobFieldInput = ({
|
|||||||
{item?.name}
|
{item?.name}
|
||||||
</option>
|
</option>
|
||||||
)}
|
)}
|
||||||
{/* {inputName === "group" && (
|
|
||||||
<option value={item?.group_id} key={idx}>
|
|
||||||
{item?.group_name}
|
|
||||||
</option>
|
|
||||||
)} */}
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
@@ -594,7 +588,11 @@ const JobFieldInput = ({
|
|||||||
<option value="">{optionText}</option>
|
<option value="">{optionText}</option>
|
||||||
{data?.groups?.map((item, index) => (
|
{data?.groups?.map((item, index) => (
|
||||||
<option value={item?.group_id} key={index}>
|
<option value={item?.group_id} key={index}>
|
||||||
{item?.group_name}
|
{`${item?.group_name} (${
|
||||||
|
item?.member_count == null
|
||||||
|
? "0"
|
||||||
|
: ' ' + item.member_count + ' '
|
||||||
|
})`}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -132,6 +132,7 @@ export const apiConst = {
|
|||||||
|
|
||||||
WRENCHBOARD_ACCOUNT_HOMEBANNERS: 11200,
|
WRENCHBOARD_ACCOUNT_HOMEBANNERS: 11200,
|
||||||
WRENCHBOARD_ACCOUNT_PLAYGROUND: 11201,
|
WRENCHBOARD_ACCOUNT_PLAYGROUND: 11201,
|
||||||
|
WRENCHBOARD_ACCOUNT_FAMILY_BANNERS: 22005,
|
||||||
|
|
||||||
WRENCHBOARD_ACCOUNT_RECENTS: 11202,
|
WRENCHBOARD_ACCOUNT_RECENTS: 11202,
|
||||||
WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
|
WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
|
|||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { Navigate, Outlet, useNavigate } from "react-router-dom";
|
import { Navigate, Outlet, useNavigate } from "react-router-dom";
|
||||||
import LoadingSpinner from "../components/Spinners/LoadingSpinner";
|
import LoadingSpinner from "../components/Spinners/LoadingSpinner";
|
||||||
|
import { formattedDate } from "../lib";
|
||||||
import usersService from "../services/UsersService";
|
import usersService from "../services/UsersService";
|
||||||
import { commonHeadBanner } from "../store/CommonHeadBanner";
|
import { commonHeadBanner } from "../store/CommonHeadBanner";
|
||||||
import { recentActivitiesData } from "../store/RecentActivitiesData";
|
import { recentActivitiesData } from "../store/RecentActivitiesData";
|
||||||
@@ -10,8 +11,7 @@ import { updateJobs } from "../store/jobLists";
|
|||||||
import { updateNotifications } from "../store/notifications";
|
import { updateNotifications } from "../store/notifications";
|
||||||
import { updateUserJobList } from "../store/userJobList";
|
import { updateUserJobList } from "../store/userJobList";
|
||||||
import { updateWalletDetails } from "../store/walletDetails";
|
import { updateWalletDetails } from "../store/walletDetails";
|
||||||
import { formattedDate } from "../lib";
|
import { familyBannersList } from "../store/FamilyBannerList";
|
||||||
import { tableReload } from "../store/TableReloads";
|
|
||||||
|
|
||||||
const AuthRoute = ({ redirectPath = "/login", children }) => {
|
const AuthRoute = ({ redirectPath = "/login", children }) => {
|
||||||
const apiCall = useMemo(() => new usersService(), []);
|
const apiCall = useMemo(() => new usersService(), []);
|
||||||
@@ -21,12 +21,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
const [loadProfileDetails, setLoadProfileDetails] = useState([]);
|
const [loadProfileDetails, setLoadProfileDetails] = useState([]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const { jobListTable, walletTable } = useSelector(
|
const { jobListTable, walletTable, familyBannersListTable } = useSelector(
|
||||||
(state) => state.tableReload
|
(state) => state.tableReload
|
||||||
);
|
);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
userDetails: { username, uid, session},
|
userDetails: { username, uid, session, account_type },
|
||||||
} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||||
|
|
||||||
let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
|
let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
|
||||||
@@ -167,6 +167,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
|
||||||
|
return
|
||||||
|
}
|
||||||
const getMyJobList = async () => {
|
const getMyJobList = async () => {
|
||||||
dispatch(updateUserJobList({ loading: true, data: [] }));
|
dispatch(updateUserJobList({ loading: true, data: [] }));
|
||||||
try {
|
try {
|
||||||
@@ -181,7 +184,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
getMyJobList();
|
getMyJobList();
|
||||||
}, [jobListTable]);
|
}, [jobListTable, isLogin.status]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const getMyWalletList = async () => {
|
const getMyWalletList = async () => {
|
||||||
@@ -201,6 +204,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
}, [walletTable]);
|
}, [walletTable]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
|
||||||
|
return
|
||||||
|
}
|
||||||
// Getting market data
|
// Getting market data
|
||||||
const getMarketActiveJobList = async () => {
|
const getMarketActiveJobList = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -211,23 +217,26 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
getMarketActiveJobList();
|
getMarketActiveJobList();
|
||||||
}, [apiCall, dispatch, jobListTable]);
|
}, [apiCall, dispatch, jobListTable, isLogin.status]);
|
||||||
|
|
||||||
//FUNCTION TO GET COMMON HEAD DATA
|
//FUNCTION TO GET COMMON HEAD DATA
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
apiCall
|
if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
|
||||||
.getHeroJBanners()
|
return
|
||||||
.then((res) => {
|
}
|
||||||
if (res.data.internal_return < 0) {
|
apiCall
|
||||||
return;
|
.getHeroJBanners()
|
||||||
}
|
.then((res) => {
|
||||||
dispatch(commonHeadBanner(res.data));
|
if (res.data.internal_return < 0) {
|
||||||
})
|
return;
|
||||||
.catch((error) => {
|
}
|
||||||
console.log("ERROR ", error);
|
dispatch(commonHeadBanner(res.data));
|
||||||
});
|
})
|
||||||
}, []);
|
.catch((error) => {
|
||||||
//
|
console.log("ERROR ", error);
|
||||||
|
});
|
||||||
|
}, [isLogin.status]);
|
||||||
|
|
||||||
//FUNCTION TO GET COMMON HEAD DATA
|
//FUNCTION TO GET COMMON HEAD DATA
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
apiCall
|
apiCall
|
||||||
@@ -244,6 +253,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
//FUNCTION TO GET FAMILY BANNERS
|
||||||
|
useEffect(() => {
|
||||||
|
if((!loggedIn && !isLogin.status) || account_type == 'FULL'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
|
||||||
|
// setFamilyBannersList({loading:true, result:[]});
|
||||||
|
try {
|
||||||
|
const res = await apiCall.getFamilyBannersList();
|
||||||
|
dispatch(familyBannersList(res.data))
|
||||||
|
} catch (error) {
|
||||||
|
console.log("Error getting tasks");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
getFamilyBanners()
|
||||||
|
}, [isLogin.status, familyBannersListTable]);
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// apiCall
|
// apiCall
|
||||||
// .getHeroJBanners()
|
// .getHeroJBanners()
|
||||||
|
|||||||
@@ -1249,6 +1249,19 @@ class usersService {
|
|||||||
};
|
};
|
||||||
return this.postAuxEnd("/familyrelinvite", postData);
|
return this.postAuxEnd("/familyrelinvite", postData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// API FUNCTION TO FAMILY BANNERS
|
||||||
|
getFamilyBannersList() {
|
||||||
|
var postData = {
|
||||||
|
uid: localStorage.getItem("uid"),
|
||||||
|
member_id: localStorage.getItem("member_id"),
|
||||||
|
sessionid: localStorage.getItem("session_token"),
|
||||||
|
action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
|
||||||
|
limit: 20,
|
||||||
|
offset: 1
|
||||||
|
};
|
||||||
|
return this.postAuxEnd("/familybanners", postData);
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
||||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
|
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
familyBannersList: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const familyBannersListSlice = createSlice({
|
||||||
|
name: "familyBannersList",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
familyBannersList: (state,action) => {
|
||||||
|
state.familyBannersList = {...action.payload}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Action creators are generated for each case reducer function
|
||||||
|
export const { familyBannersList } = familyBannersListSlice.actions;
|
||||||
|
|
||||||
|
export default familyBannersListSlice.reducer;
|
||||||
@@ -8,6 +8,7 @@ const initialState = {
|
|||||||
couponTable: false,
|
couponTable: false,
|
||||||
walletTable: false,
|
walletTable: false,
|
||||||
uploadsTable: false,
|
uploadsTable: false,
|
||||||
|
familyBannersListTable: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const tableReloadSlice = createSlice({
|
export const tableReloadSlice = createSlice({
|
||||||
@@ -37,6 +38,9 @@ export const tableReloadSlice = createSlice({
|
|||||||
case "UPLOADSTABLE":
|
case "UPLOADSTABLE":
|
||||||
state.uploadsTable = !state.uploadsTable;
|
state.uploadsTable = !state.uploadsTable;
|
||||||
return;
|
return;
|
||||||
|
case "FAMILYBANNERSLIST":
|
||||||
|
state.familyBannersListTable = !state.familyBannersListTable;
|
||||||
|
return;
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-1
@@ -8,6 +8,7 @@ import jobReducer from "./jobLists";
|
|||||||
import notificationsReducer from "./notifications";
|
import notificationsReducer from "./notifications";
|
||||||
import userJobListReducer from "./userJobList";
|
import userJobListReducer from "./userJobList";
|
||||||
import walletDetails from "./walletDetails";
|
import walletDetails from "./walletDetails";
|
||||||
|
import familyBannerListReducer from "./FamilyBannerList"
|
||||||
|
|
||||||
export default configureStore({
|
export default configureStore({
|
||||||
reducer: {
|
reducer: {
|
||||||
@@ -18,6 +19,7 @@ export default configureStore({
|
|||||||
userJobList: userJobListReducer,
|
userJobList: userJobListReducer,
|
||||||
commonHeadBanner: commonHeadBannerReducer,
|
commonHeadBanner: commonHeadBannerReducer,
|
||||||
notifications: notificationsReducer,
|
notifications: notificationsReducer,
|
||||||
walletDetails: walletDetails
|
walletDetails: walletDetails,
|
||||||
|
familyBannersList: familyBannerListReducer
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,18 +1,17 @@
|
|||||||
import React, {useState, useEffect} from 'react'
|
import { useSelector } from "react-redux";
|
||||||
import Home from "../components/Home";
|
import Home from "../components/Home";
|
||||||
import usersService from "../services/UsersService";
|
|
||||||
|
|
||||||
import { useSelector } from 'react-redux';
|
|
||||||
|
|
||||||
export default function HomePages() {
|
export default function HomePages() {
|
||||||
|
const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
|
||||||
|
|
||||||
const {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
|
const bannerOptions = {
|
||||||
|
bannerList: commonHeadBanner?.result_list,
|
||||||
|
dashTypes: commonHeadBanner?.home_dash_type,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Home
|
<Home {...bannerOptions} />
|
||||||
bannerList={commonHeadBanner?.result_list}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user